/* ============================================================================
   NIGERINFOS — Feuille de style du site public
   Mobile-first, sobre, orientée lisibilité (code presse).

   CHARTE GRAPHIQUE : ajustez les 3 premières variables selon votre logo.
   ============================================================================ */

:root {
  /* --- Charte : dérivée des couleurs du logo NigerInfos --------------------
     Logo : orange #f7ad1a (carte, "INFOS") et vert #3da507 ("NIGER").
     Les versions assombries garantissent la lisibilité des textes (AA). */
  --couleur-primaire:        #a1660a;   /* orange du logo assombri : boutons, badges, liens */
  --couleur-primaire-vive:   #f7ad1a;   /* orange exact du logo : filets et accents décoratifs */
  --couleur-primaire-sombre: #7f5005;   /* survols */
  --couleur-secondaire:      #1b3609;   /* vert profond dérivé du logo : navigation, pied de page */
  --couleur-accent:          #2f8005;   /* vert du logo (assombri) : WhatsApp, succès */

  /* --- Neutres -------------------------------------------------------------- */
  --encre:        #17110c;
  --encre-douce:  #57534e;
  --papier:       #ffffff;
  --papier-doux:  #f6f4f1;
  --filet:        #e2ded7;   /* filet clair (colonnes, séparateurs légers) */
  --regle:        #1b1b1b;   /* filet « éditorial » noir profond (têtes de rubrique) */

  /* --- Typographie ----------------------------------------------------------- */
  /* Un vrai code presse : titres et lecture en serif (Merriweather),
     étiquettes / interface en sans (Inter). */
  --police-interface: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre:     'Merriweather', Georgia, 'Times New Roman', serif;
  --police-lecture:   'Merriweather', Georgia, 'Times New Roman', serif;
}

/* ============================================================================
   BASE
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-interface);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--couleur-primaire-sombre); }
a:hover { color: var(--couleur-primaire); }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 800; }

input, textarea, select, button { font: inherit; }

/* Accessibilité : lien d'évitement + utilitaire de masquage */
.acces-rapide {
  position: absolute; left: -9999px;
  background: var(--couleur-secondaire); color: #fff;
  padding: .5rem 1rem; z-index: 100;
}
.acces-rapide:focus { left: 8px; top: 8px; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Honeypot anti-spam : hors écran (jamais display:none, certains robots l'évitent) */
.champ-piege { position: absolute !important; left: -9999px; top: -9999px; }

/* ============================================================================
   STRUCTURE
   ============================================================================ */

.conteneur { max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.conteneur--etroit { max-width: 780px; }

.section { margin-block: 2.5rem; }

/* Tête de rubrique « grand journal » : filet noir + intitulé sans-serif
   en capitales, précédé d'un repère de couleur (clin d'œil Guardian). */
.section__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--regle);
  padding-bottom: .4rem;
}
.section__titre {
  font-family: var(--police-interface);
  font-size: .92rem; font-weight: 800; margin: 0;
  text-transform: uppercase; letter-spacing: .09em;
  position: relative; padding-left: .75rem;
}
.section__titre::before {
  content: ''; position: absolute; left: 0; top: .05em; bottom: .05em;
  width: 4px; background: var(--couleur-primaire-vive);
}
.section__lien {
  font-family: var(--police-interface);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--couleur-primaire-sombre);
}
.section__lien:hover { text-decoration: underline; }

.grille { display: grid; gap: 1.75rem 1.5rem; }
@media (min-width: 480px)  { .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grille--3 { grid-template-columns: repeat(3, 1fr); }
                             .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* Filets verticaux entre colonnes (comme les colonnes d'un journal papier).
   On retire le filet sur le premier article de chaque rangée. */
@media (min-width: 480px) {
  .grille--3 > *, .grille--4 > * { border-left: 1px solid var(--filet); padding-left: 1.5rem; }
  .grille--3 > *:nth-child(2n+1), .grille--4 > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 900px) {
  .grille--3 > *:nth-child(2n+1), .grille--4 > *:nth-child(2n+1) { border-left: 1px solid var(--filet); padding-left: 1.5rem; }
  .grille--3 > *:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .grille--4 > *:nth-child(4n+1) { border-left: 0; padding-left: 0; }
}

/* ============================================================================
   ENTÊTE + NAVIGATION
   ============================================================================ */

.entete { border-bottom: 2px solid var(--regle); background: var(--papier); }

/* Bandeau date fin (« mardi 23 juillet 2026 »), au-dessus du logo */
.entete__filet { border-bottom: 1px solid var(--filet); }
.entete__date {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .3rem;
  font-family: var(--police-interface);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-douce);
}
.entete__date span { color: var(--couleur-primaire-sombre); }

.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem; flex-wrap: wrap;
}

.entete__logo img { width: auto; max-height: 56px; }

.entete__recherche {
  display: flex; flex: 1 1 220px; max-width: 340px;
  border: 1px solid var(--filet); border-radius: 999px; overflow: hidden;
  background: var(--papier-doux);
}
.entete__recherche input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: .5rem .9rem; outline-offset: -2px;
}
.entete__recherche button {
  border: 0; background: transparent; padding: .4rem .8rem;
  cursor: pointer; color: var(--encre-douce);
}
.entete__recherche button:hover { color: var(--couleur-primaire); }

/* Menu horizontal : défile latéralement sur mobile (pas de menu enterré) */
.navigation { background: var(--couleur-secondaire); }
.navigation__liste {
  display: flex; gap: .25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.navigation__liste::-webkit-scrollbar { display: none; }
.navigation__liste a {
  color: #fff; text-decoration: none; white-space: nowrap;
  padding: .65rem .8rem; font-size: .92rem; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.navigation__liste a:hover,
.navigation__liste a.actif { border-bottom-color: var(--couleur-primaire-vive); color: #fff; }

/* --- Rubriques avec sous-rubriques : menu déroulant au survol (desktop) --- */
.navigation__parent { position: relative; display: inline-flex; }

.navigation__sousmenu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: none; flex-direction: column; min-width: 210px;
  background: var(--papier);
  border: 1px solid var(--filet); border-top: 3px solid var(--couleur-primaire-vive);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  padding: .4rem 0;
}
.navigation__parent:hover .navigation__sousmenu,
.navigation__parent:focus-within .navigation__sousmenu { display: flex; }

.navigation__sousmenu a {
  color: var(--encre); text-decoration: none;
  padding: .55rem 1.1rem; font-size: .88rem; font-weight: 500;
  border-bottom: 0; white-space: nowrap;
}
.navigation__sousmenu a:hover { background: var(--papier-doux); color: var(--couleur-primaire-sombre); }

@media (max-width: 899px) {
  /* Pas de survol possible sur mobile : le sous-menu déroulant ne s'affiche
     pas dans la barre (qui défile horizontalement). L'accès aux
     sous-rubriques se fait depuis la page de la rubrique principale
     (onglets .sous-categories, voir plus bas). */
  .navigation__sousmenu { display: none !important; }
}

/* ============================================================================
   CARTES ARTICLE
   ============================================================================ */

.carte { background: var(--papier); }

.carte__lien { display: block; color: inherit; text-decoration: none; height: 100%; }

.carte__image {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0;
  background: var(--papier-doux);
}
.carte__image img { width: 100%; height: 100%; object-fit: cover; }

.carte__texte { padding-top: .7rem; }

.carte__categorie {
  display: inline-block;
  font-family: var(--police-interface);
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--couleur-primaire); margin-bottom: .3rem;
}

.carte__titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: 1.15rem; line-height: 1.24; letter-spacing: -.005em;
  margin: 0 0 .35rem;
}
.carte__lien:hover .carte__titre { color: var(--couleur-primaire-sombre); text-decoration: underline; text-underline-offset: 2px; }

.carte__chapo { font-family: var(--police-lecture); margin: 0 0 .45rem; font-size: .92rem; line-height: 1.55; color: var(--encre-douce); }

.carte__date {
  font-family: var(--police-interface);
  font-size: .74rem; letter-spacing: .02em; color: var(--encre-douce);
}

/* --- Variante horizontale (résultats de recherche) ------------------------- */
.carte--horizontale .carte__lien { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; }
.carte--horizontale .carte__image { aspect-ratio: 4 / 3; }
.carte--horizontale .carte__texte { padding-top: 0; }
.liste-resultats { display: grid; gap: 1.5rem; margin-block: 1.5rem; }
.liste-resultats > * { border-top: 1px solid var(--filet); padding-top: 1.5rem; }
.liste-resultats > *:first-child { border-top: 0; padding-top: 0; }

/* ============================================================================
   « À LA UNE » — mise en page façon une de journal :
   1 article vedette (grande photo + gros titre serif) à gauche,
   colonne de brèves (titres seuls, séparés par des filets) à droite.
   ============================================================================ */

.une { display: grid; gap: 1.75rem; }

/* Article vedette */
.carte--vedette .carte__image { aspect-ratio: 16 / 9; }
.carte--vedette .carte__categorie { font-size: .78rem; }
.carte--vedette .carte__titre {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.015em; margin-top: .5rem;
}
.carte--vedette .carte__chapo { font-size: 1.05rem; line-height: 1.6; margin-top: .5rem; }
.carte--vedette .carte__date { font-size: .78rem; }

/* Brèves de la colonne (texte seul, sans image) */
.une__secondaires { display: grid; }
.carte--liste { border-top: 1px solid var(--filet); padding-block: .9rem; }
.carte--liste:first-child { border-top: 0; padding-top: 0; }
.carte--liste .carte__texte { padding-top: 0; }
.carte--liste .carte__titre { font-size: 1.05rem; margin-bottom: .3rem; }

@media (min-width: 900px) {
  /* Deux colonnes UNIQUEMENT s'il y a des brèves à droite ; sinon l'article
     vedette occupe toute la largeur (sans ça, un seul article laisserait le
     tiers droit vide). */
  .une--avec-breves { grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
  .une--avec-breves .une__secondaires { border-left: 1px solid var(--filet); padding-left: 2.5rem; }
}

/* ============================================================================
   EN-TÊTES DE PAGE (catégorie, recherche)
   ============================================================================ */

.page-entete { border-bottom: 1px solid var(--regle); margin-bottom: 1.5rem; padding-bottom: .6rem; }
.page-entete__titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -.015em; margin: 0;
}
.page-entete__description { color: var(--encre-douce); margin: .35rem 0 0; }

/* Fil d'Ariane (sous-rubrique → sa rubrique principale) */
.fil-ariane { font-size: .85rem; color: var(--encre-douce); margin: 0 0 .35rem; }
.fil-ariane a { color: var(--couleur-primaire-sombre); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

/* Onglets de sous-rubriques (page d'une rubrique principale ou d'une
   sous-rubrique) : "Tout Niger" + Politique + Économie + ... */
.sous-categories { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.5rem; }
.sous-categories a {
  text-decoration: none; font-size: .85rem; font-weight: 600;
  color: var(--encre-douce);
  padding: .35rem .9rem; border-radius: 999px;
  border: 1px solid var(--filet);
}
.sous-categories a:hover { border-color: var(--couleur-primaire-vive); color: var(--encre); }
.sous-categories a.actif {
  background: var(--couleur-secondaire); border-color: var(--couleur-secondaire); color: #fff;
}

.liste-vide { color: var(--encre-douce); padding-block: 2rem; }

/* ============================================================================
   PAGE ARTICLE
   ============================================================================ */

.article { margin-top: 2rem; }

.article__categorie {
  display: inline-block; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--couleur-primaire);
  padding: .15rem .5rem; border-radius: 3px; text-decoration: none;
  margin-bottom: .75rem;
}
.article__categorie:hover { background: var(--couleur-primaire-sombre); color: #fff; }

.article__titre {
  font-family: var(--police-titre); font-weight: 900;
  font-size: clamp(1.75rem, 4.8vw, 2.7rem); line-height: 1.12; letter-spacing: -.015em;
}

.article__chapo {
  font-family: var(--police-lecture);
  font-size: 1.15rem; line-height: 1.7;
  color: var(--encre-douce); margin: .75rem 0;
}

.article__meta {
  font-size: .85rem; color: var(--encre-douce);
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding-block: .5rem; margin-block: 1rem;
}

.article__figure { margin: 1.25rem 0; }
.article__figure img { width: 100%; border-radius: 8px; }
.article__figure figcaption { font-size: .8rem; color: var(--encre-douce); padding-top: .4rem; }

/* Corps : colonne de partage collante à gauche sur grand écran */
.article__corps { position: relative; }
@media (min-width: 1024px) {
  .article__corps { display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; align-items: start; }
}

/* --- Typographie de lecture (contenu produit par l'éditeur) ----------------- */
.prose {
  font-family: var(--police-lecture);
  font-size: 1.05rem; line-height: 1.85;
  /* Garde-fou : tout mot / URL trop long (ou du texte collé sans espaces
     sécables) revient à la ligne au lieu de faire déborder la page. */
  overflow-wrap: break-word;
}
.prose p { margin: 0 0 1.1em; }
.prose h2, .prose h3 { font-family: var(--police-interface); margin-top: 1.6em; }
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.15rem; }
.prose img { border-radius: 6px; margin-block: 1rem; }
.prose blockquote {
  margin: 1.25rem 0; padding: .5rem 1.25rem;
  border-left: 4px solid var(--couleur-primaire);
  background: var(--papier-doux); font-style: italic;
}
.prose a { color: var(--couleur-primaire-sombre); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose iframe { max-width: 100%; }

.article__tags { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.article__tags a {
  display: inline-block; text-decoration: none;
  font-size: .82rem; font-weight: 600;
  background: var(--papier-doux); border: 1px solid var(--filet);
  border-radius: 999px; padding: .25rem .7rem;
}
.article__tags a:hover { border-color: var(--couleur-primaire); }

/* ============================================================================
   BOUTONS DE PARTAGE
   Mobile : barre fixe en bas d'écran. Desktop : colonne collante à gauche.
   Couleurs de la charte (pas celles des réseaux), comme demandé.
   ============================================================================ */

.partage {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; gap: .5rem;
  padding: .5rem;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--filet);
}

.partage__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--couleur-secondaire); color: #fff;
  border: 0; cursor: pointer; text-decoration: none;
}
.partage__bouton:hover { background: var(--couleur-primaire); color: #fff; }
.partage__bouton.copie { background: var(--couleur-accent); }

/* La barre mobile ne doit pas masquer le bas de page */
body:has(.partage) { padding-bottom: 64px; }

@media (min-width: 1024px) {
  .partage {
    position: sticky; top: 90px; bottom: auto; left: auto; right: auto;
    flex-direction: column; justify-content: flex-start;
    padding: 0; background: transparent; border: 0;
  }
  body:has(.partage) { padding-bottom: 0; }
}

/* ============================================================================
   WIDGET VIDÉO YOUTUBE
   ============================================================================ */

.section--video { background: var(--couleur-secondaire); padding-block: 2rem; }
.section--video .section__titre { color: #fff; border-bottom: 3px solid var(--couleur-primaire-vive); padding-bottom: .35rem; margin-bottom: 1rem; }

.video-facade, .video-cadre {
  position: relative; aspect-ratio: 16 / 9;
  max-width: 780px; margin-inline: auto;
  border-radius: 8px; overflow: hidden; background: #000;
}
.video-facade { cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-facade__lecture {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--couleur-primaire); color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  transition: transform .2s;
}
.video-facade:hover .video-facade__lecture { transform: scale(1.08); }
.video-facade iframe, .video-cadre iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ============================================================================
   COMMENTAIRES
   ============================================================================ */

.commentaires { max-width: 780px; margin-block: 2.5rem; }
.commentaires .section__titre {
  border-bottom: 3px solid var(--couleur-primaire-vive); padding-bottom: .35rem; margin-bottom: 1.25rem;
}
.commentaires__vide { color: var(--encre-douce); }

.commentaire { border-bottom: 1px solid var(--filet); padding-block: 1rem; }
.commentaire--reponse {
  margin-left: 1.5rem; margin-top: .75rem;
  border-bottom: 0; border-left: 3px solid var(--filet);
  padding: .5rem 0 .25rem 1rem;
}
.commentaire__entete { display: flex; gap: .75rem; align-items: baseline; font-size: .85rem; }
.commentaire__entete time { color: var(--encre-douce); font-size: .78rem; }
.commentaire__contenu { margin: .4rem 0; }
.commentaire__repondre {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--couleur-primaire-sombre); font-size: .82rem; font-weight: 600;
}
.commentaire__repondre:hover { text-decoration: underline; }

/* --- Formulaires ------------------------------------------------------------- */
.formulaire-commentaire { margin-top: 2rem; }
.formulaire-commentaire h3 { margin-bottom: .25rem; }
.formulaire-commentaire__note { font-size: .82rem; color: var(--encre-douce); margin-top: 0; }
.formulaire-commentaire__reponse-a {
  background: var(--papier-doux); border-left: 3px solid var(--couleur-primaire);
  padding: .5rem .75rem; font-size: .88rem;
}
.formulaire-commentaire__reponse-a button {
  border: 0; background: none; color: var(--couleur-primaire-sombre);
  cursor: pointer; font-size: .82rem; text-decoration: underline;
}
.formulaire-commentaire__ligne { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .formulaire-commentaire__ligne { grid-template-columns: 1fr 1fr; } }

.formulaire-commentaire label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.formulaire-commentaire input,
.formulaire-commentaire textarea,
.recherche-grande input {
  width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--filet); border-radius: 6px;
  background: var(--papier);
}
.formulaire-commentaire input:focus,
.formulaire-commentaire textarea:focus,
.recherche-grande input:focus {
  outline: 2px solid var(--couleur-primaire); outline-offset: 1px; border-color: var(--couleur-primaire);
}

.bouton {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--couleur-primaire); color: #fff;
  font-weight: 600; padding: .6rem 1.4rem; border-radius: 6px;
  text-decoration: none;
}
.bouton:hover { background: var(--couleur-primaire-sombre); color: #fff; }

.message { padding: .75rem 1rem; border-radius: 6px; font-size: .92rem; }
.message--succes { background: #e7f4ec; border: 1px solid var(--couleur-accent); color: #0b5c2e; }
.message--erreur { background: #fdeeee; border: 1px solid #c0392b; color: #922b21; }

/* ============================================================================
   RECHERCHE + PAGINATION + 404
   ============================================================================ */

.recherche-grande { display: flex; gap: .5rem; margin-block: 1rem 1.5rem; }
.recherche-resultat-nombre { color: var(--encre-douce); }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem; margin-block: 2rem;
}
.pagination__numero, .pagination__fleche {
  display: inline-block; padding: .35rem .7rem; border-radius: 6px;
  text-decoration: none; font-size: .9rem; border: 1px solid var(--filet);
}
.pagination__fleche { border: 0; font-weight: 600; }
.pagination__numero--actif { background: var(--couleur-primaire); color: #fff; border-color: var(--couleur-primaire); }
.pagination__points { color: var(--encre-douce); }

.page-404 { text-align: center; padding-block: 3rem; }
.page-404__code { font-size: 5rem; font-weight: 800; color: var(--filet); margin: 0; line-height: 1; }
.page-404 .recherche-grande { max-width: 420px; margin-inline: auto; }

.page-statique h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.contact-liste { list-style: none; padding: 0; }
.contact-liste li { padding-block: .4rem; }

/* ============================================================================
   GABARIT « GRAND FORMAT » (dossiers spéciaux immersifs — tag "grand-format")
   ============================================================================ */

.barre-lecture {
  position: fixed; top: 0; inset-inline: 0; z-index: 70;
  height: 3px; background: transparent; pointer-events: none;
}
.barre-lecture i {
  display: block; height: 100%; width: 0;
  background: var(--couleur-primaire-vive);
}

.grand-format__ouverture {
  position: relative; min-height: 92vh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  background-color: var(--couleur-secondaire);
  color: #fff;
}
.grand-format__voile {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10, 16, 8, .25) 30%, rgba(10, 16, 8, .85));
}
.grand-format__ouverture-texte {
  position: relative; width: 100%;
  padding-block: 4rem 3.5rem; text-align: center;
}
.grand-format__etiquette {
  display: inline-block;
  font-size: .78rem; font-weight: 800; letter-spacing: .3em;
  text-transform: uppercase; color: var(--couleur-primaire-vive);
  border: 1px solid var(--couleur-primaire-vive); border-radius: 999px;
  padding: .3rem 1rem; margin-bottom: 1.25rem;
}
.grand-format__titre {
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.05; margin: .75rem auto 0; max-width: 22ch;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.grand-format__chapo {
  font-family: var(--police-lecture);
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.65;
  max-width: 60ch; margin: 1.25rem auto 0; opacity: .95;
}
.grand-format__meta { font-size: .88rem; opacity: .85; margin-top: 1.5rem; }
.grand-format__fleche {
  font-size: 1.4rem; margin-top: 1.5rem; opacity: .7;
  animation: film-fleche 1.8s ease-in-out infinite;
}
@keyframes film-fleche {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.grand-format__credit {
  position: absolute; right: 14px; bottom: 8px;
  font-size: .7rem; opacity: .65; margin: 0;
}

.grand-format .article__corps { margin-top: 3rem; }

/* Lecture : plus grand, lettrine, exergues géantes */
.prose--grand-format { font-size: 1.14rem; line-height: 1.9; }
.prose--grand-format > p:first-of-type::first-letter {
  float: left;
  font-family: var(--police-interface); font-weight: 800;
  font-size: 4.6rem; line-height: .82;
  padding: .35rem .65rem 0 0;
  color: var(--couleur-primaire);
}
.prose--grand-format blockquote {
  border-left: 0; background: none; font-style: normal;
  margin: 2.5rem 0; padding: 0; text-align: center;
  font-family: var(--police-interface); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.35;
  color: var(--couleur-secondaire);
}
.prose--grand-format blockquote::before {
  content: '«'; display: block;
  color: var(--couleur-primaire-vive); font-size: 2.6rem; line-height: 1;
}
.prose--grand-format img { border-radius: 8px; margin-block: 2rem; }

/* ============================================================================
   BANDEAU « EN CONTINU » + ANIMATIONS DU FIL
   ============================================================================ */

.bandeau-actu {
  display: flex; align-items: stretch;
  background: var(--couleur-secondaire); color: #fff;
  border-bottom: 3px solid var(--couleur-primaire-vive);
  overflow: hidden;
}
.bandeau-actu__etiquette {
  flex-shrink: 0; display: flex; align-items: center;
  background: var(--couleur-primaire-vive); color: var(--couleur-secondaire);
  font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; padding: .5rem .9rem;
}
.bandeau-actu__fenetre { overflow: hidden; flex: 1; display: flex; align-items: center; }
.bandeau-actu__piste {
  display: inline-flex; gap: 2.2rem; white-space: nowrap;
  padding-left: 1.2rem; width: max-content;
  animation: bandeau-defilement 45s linear infinite;
}
.bandeau-actu:hover .bandeau-actu__piste { animation-play-state: paused; }
.bandeau-actu__piste a {
  color: #fff; text-decoration: none; font-size: .88rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .5rem;
}
.bandeau-actu__piste a:hover { color: #ffe2a6; }
.bandeau-actu__puce { color: var(--couleur-primaire-vive); font-size: .6rem; }

@keyframes bandeau-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau-actu__piste { animation: none; }
  .bandeau-actu__fenetre { overflow-x: auto; }
}

/* --- Révélations au scroll (activées seulement si html.js-anim, posé par
       animations.js quand JS tourne ET que le visiteur accepte le mouvement :
       sans JS ou en mouvement réduit, tout reste visible normalement) ------- */
.js-anim .revelable {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.js-anim .revele { opacity: 1; transform: none; }

/* --- Ken Burns discret sur la grande carte "à la une" ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .carte--une .carte__image img { animation: ken-burns 16s ease-in-out infinite alternate; }
  @keyframes ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.06) translateX(-1.2%); }
  }
  .carte--une .carte__lien:hover .carte__image img { animation-play-state: paused; }
}

/* ============================================================================
   PIED DE PAGE
   ============================================================================ */

.pied { background: var(--couleur-secondaire); color: #ccd8c3; margin-top: 3rem; font-size: .92rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: #ffe2a6; }

.pied__colonnes { display: grid; gap: 2rem; padding-block: 2.5rem; }
@media (min-width: 720px) { .pied__colonnes { grid-template-columns: 2fr 1fr 1fr; } }

.pied__colonne h2 {
  color: #fff; font-size: .95rem; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .75rem;
}
.pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.pied__colonne li { padding-block: .2rem; }

.pied__reseaux { display: flex; gap: .6rem; margin-top: 1rem; }
.pied__reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.pied__reseaux a:hover { background: var(--couleur-primaire); }

.pied__bas { border-top: 1px solid rgba(255, 255, 255, .15); padding-block: 1rem; font-size: .82rem; }

/* ============================================================================
   POPUP D'ABONNEMENT WHATSAPP
   Jamais plein écran ni bloquant : bandeau discret en bas sur mobile,
   petite carte en bas à droite sur grand écran.
   ============================================================================ */

.popup-whatsapp {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0;
  background: var(--papier);
  border-top: 3px solid var(--couleur-accent);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  padding: 1rem 3rem 1rem 1rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}
.popup-whatsapp.visible { opacity: 1; transform: translateY(0); }

.popup-whatsapp__fermer {
  position: absolute; top: .5rem; right: .5rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--filet); background: var(--papier);
  cursor: pointer; color: var(--encre-douce);
  display: flex; align-items: center; justify-content: center;
}
.popup-whatsapp__fermer:hover { color: var(--encre); border-color: var(--encre-douce); }

.popup-whatsapp__icone {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--couleur-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
}
.popup-whatsapp__titre { font-weight: 800; margin: 0 0 .25rem; }
.popup-whatsapp__texte { font-size: .88rem; color: var(--encre-douce); margin: 0 0 .75rem; }
.popup-whatsapp__bouton {
  display: inline-block; background: var(--couleur-accent); color: #fff;
  font-weight: 600; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: 6px;
}
.popup-whatsapp__bouton:hover { background: #0b5c2e; color: #fff; }

@media (min-width: 720px) {
  .popup-whatsapp {
    left: auto; right: 24px; bottom: 24px;
    width: 340px; border-radius: 10px;
    border: 1px solid var(--filet); border-top: 4px solid var(--couleur-accent);
  }
}

/* ============================================================================
   RÉGIE PUBLICITAIRE
   Emplacements de bandeaux (maison ou AdSense) + habillage plein écran.
   Le composant « publicite » applique .pub / .pub--<format>.
   ============================================================================ */

.pub {
  display: block; text-align: center;
  margin-inline: auto; margin-block: 1.75rem;
  max-width: 1140px; padding-inline: 16px;
}
/* Mention légale discrète au-dessus du visuel (« Publicité »). */
.pub__mention {
  display: block; margin-bottom: .3rem;
  font-family: var(--police-interface);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-douce); opacity: .75;
}
.pub__lien { display: inline-block; line-height: 0; }
.pub__image { max-width: 100%; height: auto; margin-inline: auto; }
.pub__adsense { margin-inline: auto; }

/* Chaque zone borne la LARGEUR du conteneur ; l'image conserve sa taille
   naturelle (max-width:100% hérité — jamais agrandie donc jamais floue) et
   se centre. Sur mobile elle se réduit pour ne pas déborder. */
.pub--leaderboard { max-width: 990px; }   /* bandeaux haut/bas (ex. 728×90, 970×90) */
.pub--bandeau     { max-width: 760px; }   /* pavé d'accueil */
.pub--rectangle   { max-width: 360px; margin-block: 2rem; }   /* pavé d'article (ex. 300×500) */

/* Bandeau maison loge dans l'en-tete (entre le logo et la recherche) :
   compact, hauteur bornee pour tenir dans la barre, image a taille naturelle. */
.pub--entete {
  margin: 0; padding: 0; max-width: none;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.pub--entete .pub__image { max-height: 54px; width: auto; max-width: 100%; }
@media (max-width: 720px) {
  /* Sur petit ecran, le bandeau passe sur sa propre ligne sous le logo/recherche. */
  .pub--entete { order: 3; flex-basis: 100%; margin-top: .5rem; }
  .pub--entete .pub__image { max-height: 40px; }
}

/* Encart flottant fermable, en bas a droite (ex. promo newsletter). Rendu
   masque cote serveur ; revele puis fermable par main.js (memoire de session). */
.pub--encart {
  position: fixed; z-index: 60; left: 16px; bottom: 16px;
  margin: 0; padding: 0; max-width: 260px;
  background: var(--papier); border: 1px solid var(--filet);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.pub--encart.visible { opacity: 1; transform: none; }
.pub--encart[hidden] { display: none; }
.pub--encart .pub__image { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.pub__fermer {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.pub__fermer:hover { background: rgba(0, 0, 0, .82); }
@media (max-width: 420px) {
  .pub--encart { max-width: 190px; left: 10px; bottom: 10px; }
}

/* --- Habillage (« skin » plein écran d'un annonceur premium) ---------------
   Un fond fixe cliquable derrière une colonne de contenu opaque, centrée et
   lisible. Sur écran large, le fond apparaît dans les marges latérales. */
.habillage-fond {
  position: fixed; inset: 0; z-index: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.page-habillage {
  position: relative; z-index: 1;
  max-width: 1240px; margin-inline: auto;
  background: var(--papier);
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0, 0, 0, .45);
}
/* En dessous de la colonne de contenu, on masque le fond : les clics « utiles »
   restent sur le site, seules les marges renvoient vers l'annonceur. */
@media (max-width: 1239px) {
  .habillage-fond { pointer-events: none; }
}

/* ============================================================================
   RUBRIQUE EMPLOIS (job board maison)
   ============================================================================ */

/* Variantes de bouton (réutilisables) */
.bouton--accent { background: var(--couleur-accent); }
.bouton--accent:hover { background: #256603; }
.bouton--large { padding: .8rem 1.8rem; font-size: 1.02rem; }
.bouton--discret {
  background: transparent; color: var(--couleur-primaire-sombre);
  border: 1px solid var(--filet);
}
.bouton--discret:hover { background: var(--papier-doux); color: var(--couleur-primaire-sombre); }

/* Onglet « Emplois » mis en avant dans la navigation (couleur d'accent verte) */
.navigation__emploi { color: var(--couleur-primaire-vive) !important; }

/* En-tête de la page Emplois : titre + bouton « déposer » */
.emplois-entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.emplois-entete__cta { white-space: nowrap; flex-shrink: 0; }

/* Barre de filtres */
.offres-filtres {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.25rem 0 1rem;
  padding: 1rem; border: 1px solid var(--filet); border-radius: 8px;
  background: var(--papier-doux);
}
.offres-filtres__champ { flex: 1 1 150px; }
.offres-filtres__champ--large { flex: 2 1 240px; }
.offres-filtres input, .offres-filtres select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--filet); border-radius: 6px; background: var(--papier);
}
.offres-filtres input:focus, .offres-filtres select:focus {
  outline: 2px solid var(--couleur-primaire); outline-offset: 1px;
  border-color: var(--couleur-primaire);
}
.offres-filtres .bouton { flex: 0 0 auto; }

.offres-resume { color: var(--encre-douce); font-size: .92rem; margin: 0 0 1.25rem; }
.offres-resume a { color: var(--couleur-primaire-sombre); }

/* Grille des offres */
.grille-offres {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grille-offres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-offres { grid-template-columns: repeat(3, 1fr); } }

/* Carte d'offre */
.carte-offre {
  border: 1px solid var(--filet); border-radius: 10px; background: var(--papier);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.carte-offre:hover {
  border-color: var(--couleur-primaire-vive);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07); transform: translateY(-2px);
}
.carte-offre--une { border-left: 3px solid var(--couleur-primaire-vive); }
.carte-offre__lien {
  display: flex; gap: .9rem; padding: 1rem; text-decoration: none; color: inherit;
  height: 100%; align-items: flex-start;
}
.carte-offre__logo {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--couleur-secondaire); color: #fff;
  font-weight: 800; font-size: 1.3rem;
}
.carte-offre__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.carte-offre__corps { min-width: 0; flex: 1; }
.carte-offre__contrat {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--couleur-primaire-sombre);
  background: #fbeecb; padding: .12rem .5rem; border-radius: 999px; margin-bottom: .3rem;
}
.carte-offre__titre {
  font-family: var(--police-titre); font-size: 1.05rem; font-weight: 700;
  margin: 0 0 .15rem; line-height: 1.3;
}
.carte-offre__entreprise { color: var(--encre-douce); font-size: .9rem; margin: 0 0 .5rem; }
.carte-offre__meta { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--encre-douce); }
.carte-offre__meta li { margin-bottom: .15rem; }
.carte-offre__limite { font-size: .8rem; color: var(--encre-douce); margin: .5rem 0 0; }
.carte-offre__limite--urgent { color: #922b21; font-weight: 600; }

/* Page détail d'une offre */
.offre-page { max-width: 820px; margin-inline: auto; }
.offre { margin-top: 1rem; }
.offre__entete { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.offre__logo {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--couleur-secondaire); color: #fff; font-weight: 800; font-size: 1.8rem;
}
.offre__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.offre__contrat {
  display: inline-block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--couleur-primaire-sombre);
  background: #fbeecb; padding: .15rem .6rem; border-radius: 999px; margin-bottom: .35rem;
}
.offre__titre {
  font-family: var(--police-titre); font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 0 0 .2rem;
}
.offre__entreprise { font-size: 1.1rem; color: var(--encre-douce); margin: 0; }
.offre__faits {
  list-style: none; padding: 1.1rem 1.25rem; margin: 0 0 1.75rem;
  border: 1px solid var(--filet); border-radius: 10px; background: var(--papier-doux);
  display: grid; gap: .6rem; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .offre__faits { grid-template-columns: 1fr 1fr; } }
.offre__faits li { display: flex; flex-direction: column; }
.offre__fait-cle {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--encre-douce); font-weight: 700;
}
.offre__description { margin-bottom: 2rem; }
.offre__description h2 { font-family: var(--police-titre); font-size: 1.25rem; }
.offre__description p { font-family: var(--police-lecture); line-height: 1.75; }
.offre__postuler {
  padding: 1.5rem; border: 1px solid var(--couleur-accent); border-radius: 10px;
  background: #f2f9f4; margin-bottom: 1.5rem;
}
.offre__postuler h2 { font-family: var(--police-titre); font-size: 1.2rem; margin-top: 0; }
.offre__postuler-detail { font-size: .9rem; color: var(--encre-douce); margin: .6rem 0 0; }
.offre__avertissement {
  font-size: .82rem; color: var(--encre-douce);
  border-left: 3px solid var(--filet); padding-left: .9rem; margin: 0;
}
.offre__pied {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--filet);
}

/* Formulaire public de dépôt d'offre */
.formulaire-offre fieldset {
  border: 1px solid var(--filet); border-radius: 10px;
  padding: 1.25rem; margin: 0 0 1.5rem;
}
.formulaire-offre legend {
  font-weight: 800; padding: 0 .5rem; font-size: 1.05rem;
}
.formulaire-offre label { display: block; font-weight: 600; margin: .9rem 0 .3rem; font-size: .92rem; }
.formulaire-offre input[type=text],
.formulaire-offre input[type=email],
.formulaire-offre input[type=url],
.formulaire-offre input[type=date],
.formulaire-offre select,
.formulaire-offre textarea {
  width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--filet); border-radius: 6px; background: var(--papier);
}
.formulaire-offre input:focus,
.formulaire-offre select:focus,
.formulaire-offre textarea:focus {
  outline: 2px solid var(--couleur-primaire); outline-offset: 1px; border-color: var(--couleur-primaire);
}
.formulaire-offre textarea { resize: vertical; font-family: inherit; }
.formulaire-offre__ligne { display: grid; gap: .5rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .formulaire-offre__ligne { grid-template-columns: 1fr 1fr; } }
.formulaire-offre .champ-en-ligne {
  display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0;
}
.formulaire-offre .champ-en-ligne label { margin: 0; font-weight: 400; }
.formulaire-offre__envoi { text-align: center; }
.formulaire-offre__envoi .champ-aide { margin-top: .6rem; }
.champ-aide { font-size: .82rem; color: var(--encre-douce); margin: .3rem 0 0; }

/* Piège anti-robots (honeypot) : hors écran, mais pas display:none (certains
   robots ignorent les champs masqués par display) */
.champ-appat {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Offres internationales (ONG, via ReliefWeb) — variante « externe » */
.carte-offre--ong { border-left: 3px solid var(--couleur-accent); }
.carte-offre__logo--ong { background: var(--couleur-accent); font-size: 1rem; letter-spacing: -.02em; }
.carte-offre__externe {
  display: inline-block; margin-top: .5rem;
  font-size: .78rem; font-weight: 700; color: var(--couleur-accent);
}

/* Encart « aperçu » des offres internationales sur la page /emplois */
.emplois-ong { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--regle); }
.emplois-ong__entete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .1rem;
}
.emplois-ong__entete h2 { font-family: var(--police-titre); font-size: 1.35rem; margin: 0; }
.emplois-ong__source { color: var(--encre-douce); font-size: .9rem; margin: .2rem 0 1.1rem; }

/* Mention de la source (attribution ReliefWeb) */
.offres-source {
  color: var(--encre-douce); font-size: .85rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--filet);
}

/* ============================================================================
   CVthEQUE — page de présentation publique
   ============================================================================ */
.cvtheque-cartes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 760px) { .cvtheque-cartes { grid-template-columns: 1fr 1fr; } }
.cvtheque-carte {
  border: 1px solid var(--filet); border-radius: 12px; padding: 1.75rem; background: var(--papier);
}
.cvtheque-carte--recruteur { background: var(--papier-doux); }
.cvtheque-carte h2 { font-family: var(--police-titre); font-size: 1.35rem; }
.cvtheque-liste { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.cvtheque-liste li { padding-left: 1.5rem; position: relative; margin-bottom: .4rem; }
.cvtheque-liste li::before { content: '✓'; position: absolute; left: 0; color: var(--couleur-accent); font-weight: 800; }
.cvtheque-tarifs {
  border-left: 3px solid var(--couleur-primaire-vive); padding: .3rem 0 .3rem 1rem;
  margin-bottom: 1.25rem; color: var(--encre-douce); font-size: .95rem;
}
.cvtheque-consent label { font-weight: 400; font-size: .9rem; }

/* Rappel CVthèque sur la page Emplois */
.emplois-cv-rappel {
  background: var(--papier-doux); border: 1px solid var(--filet); border-radius: 8px;
  padding: .7rem 1rem; font-size: .92rem; margin: 0 0 1.25rem;
}
.emplois-cv-rappel a { color: var(--couleur-primaire-sombre); font-weight: 600; }