/* ============================================================
   REPORTERAFRICA — composants ajoutes au-dela de la maquette
   Paywall, etats vides, choix des newsletters, marqueurs d'abonnement.
   Ils reprennent les tokens de la maquette : aucune couleur nouvelle.
   Editable a la main.
   ============================================================ */

/* --- bloc « reserve aux abonnes » --- */
body .elementor .ra-paywall {
  position: relative;
  margin: 46px 0 10px;
  padding: 44px clamp(24px, 4vw, 56px) 40px;
  border-left: 14px solid var(--green);
  background: var(--paper);
  text-align: left;
}
body .elementor .ra-paywall__fade {
  position: absolute;
  left: 0;
  right: 0;
  top: -110px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(244, 234, 215, 0), var(--ivory));
  pointer-events: none;
}
body .elementor .ra-paywall__flag {
  margin: 0 0 10px;
  color: var(--red);
  font-family: var(--ra-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body .elementor .ra-paywall__title {
  max-width: 620px;
  margin: 0 0 12px;
  font-family: var(--ra-display);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
body .elementor .ra-paywall__text {
  max-width: 560px;
  margin: 0 0 24px;
  color: #3b3931;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
}
body .elementor .ra-paywall__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
}
body .elementor .ra-paywall__cta {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  background: var(--red);
  color: #fff;
  font-family: var(--ra-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: transform .25s, background .25s;
}
body .elementor .ra-paywall__cta:hover { transform: translateY(-3px); background: #a93123; }
body .elementor .ra-paywall__link {
  font-family: var(--ra-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
}

/* --- marqueurs d'acces --- */
body .elementor .article-byline__premium,
body .elementor .newsletter-card__premium {
  margin-top: 10px;
  color: var(--red);
  font-family: var(--ra-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body .elementor .plan__actuel { cursor: default; opacity: .75; }

/* --- etats vides : jamais une zone muette --- */
body .elementor .ra-vide {
  margin: 40px 0;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 19px;
}

/* --- choix des rendez-vous dans le formulaire d'inscription --- */
body .elementor .subscribe-form__listes {
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
body .elementor .subscribe-form__listes legend {
  padding: 0 0 12px;
  color: var(--green);
  font-family: var(--ra-display);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body .elementor .subscribe-form__liste {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 22px 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}
body .elementor .subscribe-form__liste input { accent-color: var(--green); width: 18px; height: 18px; }
body .elementor .subscribe-form__mention {
  width: 100%;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* --- compte a rebours des appels d'offres --- */
body .elementor .listing__type { white-space: nowrap; }

/* ============================================================
   Formulaires sur-mesure (contact, publicite, appel d'offres)
   ============================================================ */
body .elementor .ra-form { width: 100%; }
body .elementor .ra-form__grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
body .elementor .ra-form__l100 { grid-column: span 6; }
body .elementor .ra-form__l50 { grid-column: span 3; }
body .elementor .ra-form__l33 { grid-column: span 2; }

body .elementor .ra-form__groupe { display: flex; flex-direction: column; gap: 8px; }
body .elementor .ra-form__label {
  font-family: var(--ra-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
body .elementor .ra-form__requis { color: var(--red); }

body .elementor .ra-form__champ {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body .elementor .ra-form__champ:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(13, 92, 61, .16);
}
body .elementor textarea.ra-form__champ { min-height: 170px; resize: vertical; }
body .elementor .ra-form__champ--erreur { border-color: var(--red); }
body .elementor .ra-form__erreur { margin: 0; color: var(--red); font-size: 14px; }

body .elementor .ra-form__case {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
body .elementor .ra-form__case input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; flex: none; }
body .elementor .ra-form__case a { border-bottom: 1px solid var(--gold); }

body .elementor .ra-form__consentement { margin: 26px 0 22px; }

body .elementor .ra-form__bouton {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 34px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--ra-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s, background .25s;
}
body .elementor .ra-form__bouton:hover { transform: translateY(-3px); background: #a93123; }

body .elementor .ra-form__message {
  margin: 0 0 26px;
  padding: 22px 26px;
  border-left: 10px solid var(--green);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
}
body .elementor .ra-form__message--ko { border-left-color: var(--red); }

/* Piege a robots : hors ecran plutot que reduit a 1 px, qui provoque un debordement. */
body .elementor.elementor.elementor .ra-form__piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
body .elementor.elementor.elementor .ra-form__piege input,
body .elementor.elementor.elementor .ra-form__piege label { position: absolute !important; left: -9999px !important; }

@media (max-width: 760px) {
  body .elementor .ra-form__l50,
  body .elementor .ra-form__l33 { grid-column: span 6; }
  body .elementor .ra-form__bouton { width: 100%; }
}
/* ============================================================
   Apparitions au defilement

   La maquette masque .reveal (opacity:0) et son script ajoute .visible.
   Deux precautions, parce qu'un bloc reste masque est le pire defaut
   possible sur un site d'actualite :

   1. le masquage n'a lieu que si la classe ra-anim est posee sur <html>,
      ce que fait ra-anim.js : sans le script, rien n'est masque ;
   2. l'apparition passe par une animation en « forwards » et non par une
      transition. Une transition interrompue peut rester bloquee a zero,
      ce qui s'est produit sur les modeles d'article ; une animation
      terminee conserve toujours son etat final.
   ============================================================ */
html body .elementor.elementor.elementor .reveal {
  opacity: 1;
  transform: none;
}
html.ra-anim body .elementor.elementor.elementor .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: none;
}
html.ra-anim body .elementor.elementor.elementor .reveal.visible {
  animation: ra-apparition .8s ease forwards;
  transition: none;
}
@keyframes ra-apparition {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ra-anim body .elementor.elementor.elementor .reveal,
  html.ra-anim body .elementor.elementor.elementor .reveal.visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ============================================================
   Couleur des titres rendus par les shortcodes
   Ces titres ne passent pas par le widget « titre » d'Elementor : le theme
   leur imposerait sa propre couleur au lieu de celle du bloc qui les porte.
   Specificite volontairement basse : toute regle de la maquette l'emporte.
   ============================================================ */
body .elementor h1,
body .elementor h2,
body .elementor h3,
body .elementor h4,
body .elementor h5,
body .elementor h6 {
  color: inherit;
}
/* Case de consentement : cible plus confortable au doigt. */
body .elementor.elementor.elementor .ra-form__case input { width: 24px; height: 24px; }


/* Une de l'accueil : corps reduit pour les titres longs (voir includes/une.php). */
body .elementor.elementor.elementor .hero .ra-titre-long,
body .elementor.elementor.elementor .hero .ra-titre-long h1 { font-size: clamp(44px, 4.6vw, 84px); line-height: .98; }
body .elementor.elementor.elementor .hero .ra-titre-tres-long,
body .elementor.elementor.elementor .hero .ra-titre-tres-long h1 { font-size: clamp(36px, 3.5vw, 64px); line-height: 1; }
@media (max-width: 760px) {
  body .elementor.elementor.elementor .hero .ra-titre-long,
  body .elementor.elementor.elementor .hero .ra-titre-long h1 { font-size: clamp(34px, 9vw, 48px); }
  body .elementor.elementor.elementor .hero .ra-titre-tres-long,
  body .elementor.elementor.elementor .hero .ra-titre-tres-long h1 { font-size: clamp(28px, 7.4vw, 40px); }
}