/**
 * Perflang V4 — Cities Page CSS (v3.51.3)
 * ─────────────────────────────────────────────────────
 * Itération 3 (feedback Adé v3.51.2 → v3.51.3) :
 *  - Constat bascule en NAVY DARK (rupture visuelle dans la
 *    monotonie beige des premières sections, designer touch)
 *  - Spacing inter-sections drastiquement réduit
 *  - Section programs supprimée du CSS local : la VRAIE section_pricing()
 *    homepage est injectée par le page builder, et son CSS est déjà
 *    chargé globalement via perflang-v4.css (scope body.pf-page,
 *    qu'on hérite depuis la v3.51.3 via le filter body_class).
 *
 * Le body porte désormais 3 classes utiles sur une page ville :
 *   .pf-fv4-city-page  (ancre cities)
 *   .pf-fv4-city-<slug>
 *   .pf-page           (unlock styles homepage : pricing cards, etc.)
 */

/* ═════════════════════════════════════════════════
   PAGE VILLE — Identification body + override header
   ═════════════════════════════════════════════════ */

body.pf-fv4-city-page {
  background-color: #F7F5F0 !important;
  /* v3.54.4 — padding-top: 100px supprimé. Avant cette version,
     les city pages utilisaient le template thème par défaut, donc le
     header bleu du thème (fixed) cachait le hero → padding-top
     compensait. Maintenant les city pages utilisent elementor_canvas
     (cf. page-builder), pas de header thème, donc plus de gap à
     prévoir — le hero commence directement sous la nav Perflang. */
}

/* Masque le breadcrumb / pager / page-header du thème */
body.pf-fv4-city-page section.pager-section,
body.pf-fv4-city-page .pager-section,
body.pf-fv4-city-page .breadcrumb-section,
body.pf-fv4-city-page .page-header,
body.pf-fv4-city-page .entry-header {
  display: none !important;
}

/* Wrappers thème : transparents + pleine largeur (v3.54.3)
   ─────────────────────────────────────────────────────────
   La homepage utilise elementor_canvas → pas de wrapper thème
   → sections Elementor pleine largeur viewport.
   Les pages villes utilisent le template par défaut → wrapper
   thème (.site-content, .entry-content, etc.) ajoute son padding
   latéral, ce qui réduit la largeur dispo pour les sections
   Elementor (notamment pricing = cards plus étroites).
   On neutralise : transparent + max-width none + padding 0,
   pour aligner le rendu city pages = homepage. */
body.pf-fv4-city-page > main,
body.pf-fv4-city-page #content,
body.pf-fv4-city-page .site-content,
body.pf-fv4-city-page .site-main,
body.pf-fv4-city-page .entry-content,
body.pf-fv4-city-page .page-content,
body.pf-fv4-city-page .content-area,
body.pf-fv4-city-page article.page,
body.pf-fv4-city-page .wrap {
  background-color: transparent !important;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header bleu thème → paper-light */
body.pf-fv4-city-page .site-header,
body.pf-fv4-city-page header.site-header,
body.pf-fv4-city-page #masthead,
body.pf-fv4-city-page header.banner,
body.pf-fv4-city-page header.main-header,
body.pf-fv4-city-page .main-header,
body.pf-fv4-city-page .header-main,
body.pf-fv4-city-page .header-wrapper,
body.pf-fv4-city-page .header-area,
body.pf-fv4-city-page nav.main-navigation {
  background-color: #F7F5F0 !important;
  background: #F7F5F0 !important;
  box-shadow: none !important;
}
body.pf-fv4-city-page .site-header *,
body.pf-fv4-city-page header.banner *,
body.pf-fv4-city-page #masthead * { color: #0B1F4A !important; }

/* ─── Spacing inter-sections (Elementor containers) ───
   Réduit drastiquement l'écart visuel entre les sections sur
   page ville. On agit sur les root containers Elementor (le
   page builder met flex_gap: 0 + padding: 0, mais Elementor
   peut injecter des margins par défaut). */
body.pf-fv4-city-page .elementor-section,
body.pf-fv4-city-page .e-con-full,
body.pf-fv4-city-page .e-con {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── Compression des sections formations réutilisées sur ville ───
   Les sections [pf_profiles], [pf_method], [pf_testimonials_v4],
   [pf_cta_final] héritent leur padding de formations.css (110px
   top/bottom). Sur la page ville où elles sont enchaînées avec
   d'autres sections, ces paddings cumulés = des centaines de px
   de vide. On les compresse à ~64-72px en contexte ville
   uniquement (la page /formations/ reste inchangée). */
body.pf-fv4-city-page .pf-fv4-profiles     { padding: 64px 24px 56px !important; }
body.pf-fv4-city-page .pf-fv4-method        { padding: 56px 24px 56px !important; }
body.pf-fv4-city-page .pf-fv4-testi         { padding: 56px 24px 56px !important; }
body.pf-fv4-city-page .pf-fv4-faq           { padding: 64px 24px 64px !important; }
body.pf-fv4-city-page .pf-fv4-final         { padding: 72px 24px 80px !important; }
/* v3.53.2 : suppression de la compression pricing-section locale.
   Adé : "utilise le modèle/contenu/design de la section pricing de
   la homepage" → on laisse perflang-v4.css gérer le padding pricing. */

/* ═════════════════════════════════════════════════
   SECTION 1 — CITY HERO  (spacing réduit, halos premium)
   ═════════════════════════════════════════════════ */
.pf-fv4-city-hero {
  padding: 44px 32px 64px;
  background: linear-gradient(180deg, #F7F5F0 0%, #FBF9F3 60%, #F7F5F0 100%);
  position: relative;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #0B1F4A;
}
body.pf-fv4-city-page .pf-fv4-city-hero { padding-top: 44px !important; }

.pf-fv4-city-hero-halo {
  position: absolute;
  top: 30%;
  right: -260px;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(242, 106, 31, 0.10) 0%, rgba(242, 106, 31, 0.03) 50%, transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.pf-fv4-city-hero::before {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(11, 31, 74, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.pf-fv4-city-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: left;
}

.pf-fv4-city-hero-eyebrow { margin-bottom: 20px; }

.pf-fv4-city-hero-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 5.0vw, 60px);
  line-height: 1.07;
  letter-spacing: -0.030em;
  color: #0B1F4A;
  margin: 0 0 20px 0;
  max-width: 880px;
  text-wrap: balance;
}
.pf-fv4-city-hero-title .pf-fv4-italic { font-size: 1em; }

.pf-fv4-city-hero-sub {
  font-size: 18.5px;
  color: #4A5468;
  line-height: 1.58;
  margin: 0 0 28px 0;
  max-width: 760px;
}

.pf-fv4-city-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-fv4-city-hero-trust { margin-top: 22px; }

.pf-fv4-city-hero-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 31, 74, 0.10);
  font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8B92A4;
  text-transform: uppercase;
}
.pf-fv4-city-hero-strip-left,
.pf-fv4-city-hero-strip-right { white-space: nowrap; flex-shrink: 0; }
.pf-fv4-city-hero-strip-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(11, 31, 74, 0.16), rgba(242, 106, 31, 0.20), rgba(11, 31, 74, 0.04));
}

/* ═════════════════════════════════════════════════
   SECTION 3 — CITY CONSTAT  ★ NAVY DARK ★
   ─────────────────────────────────────────────────
   Rupture visuelle assumée : on quitte le beige pour
   un fond navy intense. Émotion lourde adaptée au pain
   point. Cards ivoire qui "flottent" sur le navy.
   ═════════════════════════════════════════════════ */
.pf-fv4-city-constat {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(242, 106, 31, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(242, 198, 138, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #0B1F4A 0%, #0A1A40 50%, #061639 100%);
  padding: 64px 24px 64px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Trame fine pour donner du grain au navy (subtle texture) */
.pf-fv4-city-constat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.pf-fv4-city-constat-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pf-fv4-city-constat-header {
  text-align: center;
  margin-bottom: 40px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow override sur navy : orange clair lumineux */
.pf-fv4-city-constat .pf-fv4-eyebrow,
.pf-fv4-city-constat-header .pf-fv4-eyebrow {
  color: #F2C68A !important;
}

.pf-fv4-city-constat-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 48px);
  color: #ffffff;
  letter-spacing: -0.026em;
  line-height: 1.10;
  margin: 0 0 16px 0;
  text-wrap: balance;
}
.pf-fv4-city-constat-title .pf-fv4-italic {
  font-size: 1em;
  color: #F26A1F;
  font-style: italic;
  font-family: 'Tiempos Headline', 'Charter', Georgia, serif;
}

.pf-fv4-city-constat-intro {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

.pf-fv4-city-constat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pf-fv4-city-constat-card {
  background: #FAF8F2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms ease;
}
/* Stripe orange en haut (énergie + ancre visuelle) */
.pf-fv4-city-constat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px;
  height: 3px;
  background: linear-gradient(to right, #F26A1F, rgba(242, 106, 31, 0));
  border-radius: 0 0 3px 0;
}
.pf-fv4-city-constat-card.pf-fv4-city-constat-in { opacity: 1; transform: translateY(0); }
.pf-fv4-city-constat-card[data-pf-city-constat-idx="0"].pf-fv4-city-constat-in { transition-delay: 0ms; }
.pf-fv4-city-constat-card[data-pf-city-constat-idx="1"].pf-fv4-city-constat-in { transition-delay: 90ms; }
.pf-fv4-city-constat-card[data-pf-city-constat-idx="2"].pf-fv4-city-constat-in { transition-delay: 180ms; }
.pf-fv4-city-constat-card:hover {
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55);
  transform: translateY(-3px) !important;
}

.pf-fv4-city-constat-card-eyebrow {
  display: inline-block;
  font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #F26A1F;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pf-fv4-city-constat-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18.5px;
  line-height: 1.32;
  color: #0B1F4A;
  letter-spacing: -0.018em;
  margin: 0 0 4px 0;
}
.pf-fv4-city-constat-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A6378;
  margin: 0;
}

/* v3.54.0 — Closing éditorial après les 3 cards.
   Transition naturelle vers les sections Perflang qui suivent.
   Style éditorial premium : italique Tiempos sur navy. */
.pf-fv4-city-constat-closing {
  font-family: 'Tiempos Headline', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  max-width: 760px;
  margin: 52px auto 0;
  padding: 28px 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
.pf-fv4-city-constat-closing::before {
  content: "—";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #0A1A40;
  padding: 0 12px;
  color: #F26A1F;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
}

/* ═════════════════════════════════════════════════
   SECTION PROGRAMS (homepage section_pricing)
   ─────────────────────────────────────────────────
   Le CSS de la section pricing est dans
   perflang-v4.css, scopé à body.pf-page. On hérite
   automatiquement via la classe pf-page ajoutée au body.
   On ne définit donc PLUS de styles .pf-fv4-city-pgm-*
   ici — on laisse le shortcode [pf_city_programs] devenir
   un fallback rarement rendu (page builder injecte
   section_pricing() directement). Si jamais [pf_city_programs]
   se rend quand même (legacy), il garde son markup mais
   sans CSS dédié — comportement acceptable car non utilisé.
   ═════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════
   CTA FINAL — Couture navy avec footer (city pages only, v3.54.6)
   ─────────────────────────────────────────────────
   Sur les pages villes, la transition CTA final → footer
   exposait une couture visible (gradient finissant en #02091F
   presque noir vs footer #061639 navy-2). On override le
   gradient pour le faire finir sur #061639 (= couleur exacte
   du footer) → transition seamless.
   
   Scope body.pf-fv4-city-page uniquement : la homepage et la
   page /formations/ gardent leur gradient d'origine (qui passe
   visuellement chez Adé sur ces pages).
   ═════════════════════════════════════════════════ */
body.pf-fv4-city-page .pf-fv4-final {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 106, 31, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #0B1F4A 0%, #061639 100%) !important;
}

/* ═════════════════════════════════════════════════
   PRICING SECTION — Pas d'overrides (v3.53.2)
   ─────────────────────────────────────────────────
   Adé : "utilise simplement le modèle, le contenu texte, et le design
   de la section pricing de la page d'accueil. Utilise ça sur les pages
   Lagos et Cotonou."
   
   Donc on laisse 100% du CSS homepage (perflang-v4.css scopé à
   body.pf-page, qu'on hérite sur les pages villes depuis v3.51.3)
   s'appliquer tel quel. Aucun override local — visuel identique
   à la homepage sur tous les breakpoints.
   ═════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════
   FAQ Ville (override doux)
   ═════════════════════════════════════════════════ */
.pf-fv4-faq--city { /* hook réservé v3.51.x */ }

/* ═════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .pf-fv4-city-hero { padding: 40px 20px 52px; }
  .pf-fv4-city-hero-strip { margin-top: 28px; gap: 12px; font-size: 10.5px; }
  .pf-fv4-city-hero-strip-rule { min-width: 30px; }

  .pf-fv4-city-constat { padding: 52px 18px 48px; }
  .pf-fv4-city-constat-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 600px) {
  .pf-fv4-city-hero { padding: 36px 18px 44px; }
  .pf-fv4-city-hero-title { font-size: clamp(28px, 7.5vw, 38px); }
  .pf-fv4-city-hero-sub { font-size: 16px; }
  .pf-fv4-city-hero-ctas { flex-direction: column; align-items: stretch; }
  .pf-fv4-city-hero-ctas a { justify-content: center; }
  .pf-fv4-city-hero-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pf-fv4-city-hero-strip-rule { display: none; }

  .pf-fv4-city-constat-card { padding: 24px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-fv4-city-constat-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}