/* ============================================================
   REPORTERAFRICA — pont entre les menus Xpro et la maquette
   Les deux navigations sont des menus WordPress rendus par le widget
   xpro-horizontal-menu : son balisage differe de celui de la maquette.
   Ce fichier transpose la mise en forme de la maquette sur ce balisage.
   Editable a la main, contrairement a fidelite.css qui est genere.
   ============================================================ */

body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav,
body .elementor .category-scroll .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- navigation principale : alignee a droite, espacee comme la maquette --- */
body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav {
  justify-content: flex-end;
  gap: clamp(14px, 1.6vw, 30px);
}
body .elementor .primary-nav .xpro-elementor-nav-link {
  position: relative;
  padding: 0;
  font-family: var(--ra-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
body .elementor .primary-nav .xpro-elementor-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 3px;
  background: var(--gold);
  transition: width .25s;
}
body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li:hover > .xpro-elementor-nav-link::after,
body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > .xpro-elementor-nav-link::after {
  width: 100%;
}

/* Le sous-menu Services reprend le panneau sombre de la maquette. */
body .elementor .primary-nav .xpro-elementor-sub-menu {
  min-width: 240px;
  padding: 10px;
  background: var(--ink);
  color: var(--ivory);
}
body .elementor .primary-nav .xpro-elementor-sub-menu .xpro-elementor-nav-link {
  display: block;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  color: var(--ivory);
}
body .elementor .primary-nav .xpro-elementor-sub-menu .xpro-elementor-nav-link:hover { color: var(--gold); }

/* --- barre des rubriques : une seule ligne, defilement horizontal --- */
body .elementor .category-scroll .xpro-elementor-horizontal-navbar-nav {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
body .elementor .category-scroll .xpro-elementor-horizontal-navbar-nav::-webkit-scrollbar { display: none; }
body .elementor .category-scroll .xpro-elementor-nav-link {
  padding: 13px 15px;
  border-right: 1px solid var(--line);
  font-family: var(--ra-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
body .elementor .category-scroll .xpro-elementor-horizontal-navbar-nav > li:first-child .xpro-elementor-nav-link { padding-left: 0; }
body .elementor .category-scroll .xpro-elementor-nav-link:hover,
body .elementor .category-scroll .current-menu-item > .xpro-elementor-nav-link { color: var(--red); }

/* --- pied de page --- */
body .elementor .footer-links .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .elementor .footer-links .xpro-elementor-nav-link {
  font-family: var(--ra-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
}

/* --- bascule mobile : le bouton doit rester visible sur fond ivoire --- */
@media (max-width: 1180px) {
  body .elementor .xpro-elementor-horizontal-menu-toggle,
  body .elementor .xpro-elementor-horizontal-menu-close { color: var(--ink); }
  body .elementor .xpro-elementor-horizontal-navbar { background: var(--ivory); }
}

/* ============================================================
   Corrections relevees a la recette responsive
   ============================================================ */

/* La maquette masque .primary-nav sous 760 px : son menu mobile etait un
   panneau maison pilote en JavaScript. Ici c'est le widget Xpro qui porte le
   menu, et son bouton hamburger vit DANS .primary-nav. Masquer le conteneur
   emportait donc le bouton, qui se retrouvait a 0 x 0 px : plus aucun acces au
   menu principal sous 768 px. On garde le conteneur visible et on laisse Xpro
   replier sa liste.

   Le point de bascule est celui de la maquette : 1180 px. Xpro, lui, se
   contredit - il habille sa liste en panneau lateral au point de bascule du kit
   Elementor (1180), mais ne revele son bouton qu'a 1024, valeur figee dans un
   de ses fichiers. Entre 1025 et 1180 il ne restait donc ni liste lisible ni
   bouton : la barre reposait sur une plaque et debordait a droite. On revele le
   bouton sur toute la bande. */
@media (max-width: 1180px) {
  body .elementor.elementor.elementor .primary-nav {
    display: flex !important;
    justify-content: flex-end;
  }
  body .elementor.elementor.elementor .primary-nav .xpro-elementor-horizontal-menu-toggler-wrapper {
    display: block !important;
  }
  body .elementor.elementor.elementor .primary-nav .xpro-elementor-horizontal-menu-toggler {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--ink);
  }
  body .elementor.elementor.elementor .primary-nav .xpro-elementor-horizontal-menu-overlay {
    display: block;
  }
}

/* Au-dessus du point de bascule, aucun hamburger nulle part. */
@media (min-width: 1181px) {
  body .elementor .xpro-elementor-horizontal-menu-toggler { display: none !important; }
}

/* Au-dessus de 1181 px, Xpro retire lui-meme l'habillage de panneau : la liste
   redevient horizontale et sans fond. Ne rien forcer ici - imposer une largeur
   automatique au conteneur l'empeche de se contraindre a la rangee, et les
   dernieres rubriques sortent de l'ecran.

   Sous le point de bascule, le panneau deploye reprend le papier de la
   maquette plutot que le gris de l'extension. */
@media (max-width: 1180px) {
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-wrapper {
    background: transparent;
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar {
    background-color: var(--ivory);
  }
}

/* Entre 1025 et 1180 px, Xpro ne pose plus son panneau lateral : cette partie
   de son habillage est figee a 1024 px dans son propre fichier, alors que le
   point de bascule du projet est celui de la maquette. La liste se depliait
   donc en clair dans la rangee d'en-tete, par-dessus le titre de page.
   On retablit ici le panneau tel que l'extension le definit, au papier de la
   maquette. Les selecteurs sont ceux d'Xpro : la classe -responsive-tablet est
   portee par la liste elle-meme, seul le menu principal en est pourvu. */
@media (min-width: 1025px) and (max-width: 1180px) {
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    padding: 30px;
    overflow: auto;
    z-index: 999;
    text-align: right;
    background-color: var(--ivory);
    transform: translate3d(100%, 0, 0);
    transition: transform .5s;
  }
  body.admin-bar .elementor .xpro-elementor-horizontal-menu-responsive-tablet { top: 32px; }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet.active { transform: translate3d(0, 0, 0); }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-menu-close {
    display: inline-flex;
  }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
  }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li {
    position: relative;
    width: 100%;
  }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    margin: 0;
    width: 100%;
    min-height: 30px;
    padding: 20px 0;
    justify-content: flex-start;
    border-bottom: 1px solid var(--line);
  }
  body .elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu {
    position: relative;
    left: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none !important;
  }
}

/* La barre des rubriques defile, le pied de page passe a la ligne :
   ni l'une ni l'autre ne se replie en hamburger. */
body .elementor .category-scroll .xpro-elementor-horizontal-menu-toggler,
body .elementor .footer-links .xpro-elementor-horizontal-menu-toggler { display: none !important; }
body .elementor .category-scroll .xpro-elementor-horizontal-navbar-wrapper,
body .elementor .footer-links .xpro-elementor-horizontal-navbar-wrapper {
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Zones de toucher : 44 px au doigt. La feuille de la maquette impose 32 px
   au selecteur de langue avec une specificite haute, d'ou le meme niveau ici. */
@media (max-width: 1180px) {
  body .elementor.elementor.elementor.elementor .language-switcher button,
  body .elementor.elementor.elementor.elementor .language-switcher .cdp-button {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
  }
  body .elementor.elementor.elementor .search-mark {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body .elementor.elementor.elementor .category-scroll .xpro-elementor-nav-link,
  body .elementor.elementor.elementor .primary-nav .xpro-elementor-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  body .elementor.elementor.elementor .footer-links .xpro-elementor-nav-link { min-height: 44px; }
  body .elementor.elementor.elementor .article-label a,
  body .elementor.elementor.elementor .related-head a,
  body .elementor.elementor.elementor .share-rail a,
  body .elementor.elementor.elementor .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  body .elementor.elementor.elementor .copyright { font-size: 13px; }
}
/* Sous 760 px, la maquette sort le selecteur de langue du flux et le cale a
   68 px du bord droit de la rangee d'en-tete, pour degager le hamburger. Ce
   calage suppose que la boite de reference soit la rangee ; ici Elementor rend
   chaque widget « relatif », et la reference devenait le conteneur du widget,
   large de 0 px : le selecteur partait a gauche de l'ecran, hors champ.

   Plutot que de rattraper un calage au pixel, on le rend au flux : la rangee
   d'en-tete passe deja sur deux lignes sous ce seuil, la seconde est faite pour
   les actions. Langue et loupe s'y rangent a droite, sans recouvrement. */
@media (max-width: 760px) {
  body .elementor .brand-row .header-actions {
    justify-content: flex-end;
    align-items: center;
  }
  body .elementor.elementor .brand-row .header-actions .language-switcher {
    position: static;
    inset: auto;
  }
}

/* Cibles tactiles restantes relevees a la recette. */
@media (max-width: 1180px) {
  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-close { width: 44px; height: 44px; }
  body .elementor.elementor.elementor .brand { min-height: 44px; }
  body .elementor.elementor.elementor .ad-slot > a { min-height: 44px; }
}


/* --- habillage du panneau deploye ---------------------------------------
   Xpro livre son panneau lateral avec ses propres couleurs : cadre gris clair,
   liens gris pale sur fond gris, filets gris. Pose sur le papier de la maquette,
   cela donne un panneau delave, illisible, etranger au reste du site. On le
   rhabille entierement : un seul aplat de papier du bord au bord, le texte a
   l'encre dans la fonte des titres, des filets discrets, et le vert de la
   maquette pour la rubrique consultee. */
@media (max-width: 1180px) {
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-wrapper,
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar {
    background-color: var(--ivory) !important;
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-wrapper {
    padding: 0 !important;
    border-left: 4px solid var(--gold);
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 26px 26px !important;
  }

  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li > a,
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a {
    background: transparent !important;
    color: var(--ink) !important;
    font-family: var(--ra-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line) !important;
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li:last-child > a {
    border-bottom: 0 !important;
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li > a:focus-visible,
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-parent > a {
    color: var(--green) !important;
  }

  /* Le sous-menu Services se lit comme une liste en retrait, pas comme un
     second panneau pose sur le premier. */
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a {
    padding-left: 18px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: none;
    color: rgba(11, 11, 9, .74) !important;
  }
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a:hover {
    color: var(--green) !important;
  }

  /* Fermeture : une croix a l'encre, dans le coin du papier. */
  body .elementor .primary-nav .xpro-elementor-horizontal-menu-close {
    background: transparent !important;
    color: var(--ink) !important;
    width: 44px;
    height: 44px;
  }
  body .elementor .primary-nav .xpro-elementor-horizontal-menu-close:hover {
    color: var(--green) !important;
  }

  /* Le voile derriere le panneau appartient a la maquette, pas au gris d'Xpro. */
  body .elementor .primary-nav .xpro-elementor-horizontal-menu-overlay {
    background-color: rgba(11, 11, 9, .46);
  }
}


/* --- sous-menu Services, au-dessus de 1181 px ----------------------------
   Deux defauts se cumulaient. D'abord l'empilement : la barre des rubriques
   vient apres l'en-tete dans le document, donc son texte et ses filets se
   dessinaient PAR-DESSUS le sous-menu deroule - on lisait « ELECTIONS
   PRESIDENTIELLES » a travers « QUI SOMMES-NOUS ». Ensuite le contraste :
   Xpro pose le vert de la maquette en fond mais laisse le texte a l'encre,
   soit du noir sur du vert sombre. On remonte le calque et on passe le texte
   au papier. */
@media (min-width: 1181px) {
  body .elementor .brand-row,
  body .elementor .primary-nav,
  body .elementor .primary-nav .xpro-elementor-horizontal-navbar-nav > li {
    position: relative;
    z-index: 60;
  }
  body .elementor .primary-nav .xpro-elementor-dropdown-menu {
    z-index: 1200;
    min-width: 236px;
    padding: 4px 0;
    background-color: var(--green);
    border-top: 3px solid var(--gold);
    box-shadow: 0 18px 38px rgba(11, 11, 9, .28);
  }
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a {
    background: transparent !important;
    color: var(--ivory) !important;
    font-family: var(--ra-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 20px !important;
    border-bottom: 1px solid rgba(244, 234, 215, .16) !important;
  }
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li:last-child > a {
    border-bottom: 0 !important;
  }
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a:hover,
  body .elementor .primary-nav .xpro-elementor-dropdown-menu > li > a:focus-visible {
    background: var(--green-dark) !important;
    color: var(--gold) !important;
  }
}


/* Le selecteur de langue est passe des boutons aux liens, pour porter les
   adresses de Polylang. Meme habillage, mais un lien n'a ni la mise en page
   ni la decoration d'un bouton : on les lui rend. */
body .elementor.elementor .language-switcher a.cdp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}