/*
  NjakaDev — Pages
  Styles propres à une seule page/gabarit (pas réutilisés ailleurs).
  Les grilles de ces sections vivent dans nj-layout.css, les cartes
  génériques réutilisées dans nj-components.css — ce fichier ne contient
  que ce qui est réellement unique à son contexte.
  Le nom de chaque classe intègre déjà son contexte (nj-home-hero,
  nj-agency-hero, nj-about-hero…) pour éviter toute collision entre
  pages sans avoir à imbriquer un sélecteur de contexte parent.
*/

/* ======================================================================
   ACCUEIL (index.html)
   ====================================================================== */
.nj-home-hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: max(86vh, 880px);
}
.nj-home-hero-heading.nj-home-hero-heading {
  /* Sélecteur doublé : .elementor .e-flexbox-base { display:flex } a une
     spécificité de 2 classes (0,2,0) qui bat un simple .nj-xxx (0,1,0),
     même chargé après. Doubler la classe égalise à 0,2,0 — l'ordre de
     cascade (notre CSS après celui d'Elementor) tranche alors en notre
     faveur, sans !important. Même correctif que .nj-home-hero-title et
     .nj-home-hero-content juste en dessous : ce sont des e-flexbox
     Elementor (flex par défaut) qui doivent ici s'empiler en bloc normal. */
  display: block;
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 64px;
  z-index: 10;
  pointer-events: none;
}
.nj-home-hero-kicker {
  margin-bottom: 26px;
  animation: njFade 0.9s ease both;
}
.nj-home-hero-title.nj-home-hero-title {
  /* Sélecteur doublé pour la spécificité — voir commentaire sur
     .nj-home-hero-heading ci-dessus. */
  display: block;
  font-weight: 300;
  font-size: clamp(40px, 8.6vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.nj-home-hero-title span { display: block; }
.nj-home-hero-title .nj-line-1 { animation: njRise 1s ease both; }
.nj-home-hero-title .nj-line-2 {
  color: var(--fg-dim-14);
  animation: njRise 1.1s ease 0.08s both;
}
.nj-home-hero-media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nj-home-hero-media-frame {
  position: relative;
  width: min(46vw, 540px);
  height: min(64vh, 640px);
  pointer-events: auto;
  animation: njRise 1.2s ease 0.15s both;
  border-radius: 4px;
  overflow: hidden;
}
.nj-home-hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.nj-home-hero-content.nj-home-hero-content {
  /* Sélecteur doublé pour la spécificité — voir commentaire sur
     .nj-home-hero-heading ci-dessus. */
  display: block;
  position: absolute;
  left: var(--gutter);
  bottom: 56px;
  z-index: 20;
  max-width: 340px;
}
.nj-home-hero-content p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--fg-dim-66);
  font-weight: 300;
  margin-bottom: 26px;
  text-wrap: pretty;
}
.nj-home-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: njRise 0.9s ease 0.35s both;
}
.nj-home-hero-stats.nj-home-hero-stats {
  /* Sélecteur doublé : flex-direction:column doit battre le
     flex-direction:row par défaut d'Elementor (.elementor .e-flexbox-base,
     spécificité 0,2,0) — voir commentaire sur .nj-home-hero-heading plus
     haut. width:max-content "sauve" en plus le width:100% par défaut
     d'Elementor (.e-con) : cet élément (positionné via right: seul, sans
     left:) a besoin d'un width explicite en shrink-to-fit. */
  width: max-content;
  position: absolute;
  right: var(--gutter);
  bottom: 56px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.nj-home-hero-stat.nj-home-hero-stat {
  /* Sélecteur doublé pour battre le display:flex par défaut d'Elementor
     (voir commentaire .nj-home-hero-heading) : ici on veut l'empilement
     bloc normal valeur → libellé. */
  display: block;
  width: max-content; /* même correctif width que .nj-home-hero-stats */
  min-width: 190px;
  background: var(--panel-03);
  border: 1px solid var(--line-09);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  padding: 16px 18px;
  animation: njRise 1s ease both;
}
.nj-home-hero-stat:nth-child(2) { animation-delay: 0.09s; }
.nj-home-hero-stat-value {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nj-home-hero-stat-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim-44);
  margin-top: 8px;
}

.nj-signature {
  max-width: 1000px;
  margin: 0 auto;
  padding: 130px var(--gutter) 110px;
  text-align: center;
}
.nj-signature > .nj-eyebrow { display: block; margin-bottom: 40px; color: var(--fg-dim-36); }
.nj-signature blockquote {
  font-weight: 200;
  font-size: clamp(26px, 4.6vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.nj-signature blockquote em {
  font-style: normal;
  color: var(--fg-dim-42);
}
.nj-signature figcaption {
  margin-top: 34px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
}
.nj-key-stat-value {
  font-weight: 200;
  font-size: clamp(40px, 6vw, 76px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.nj-tech-marquee-track {
  display: flex;
  width: max-content;
  gap: 72px;
  animation: njMarquee 32s linear infinite;
  opacity: 0.5;
}
.nj-tech-marquee-track:hover,
.nj-tech-marquee-track.is-paused { animation-play-state: paused; }
.nj-tech-marquee-track span {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(244, 242, 238, 0.7);
}
.nj-articles-filter {
  border-top: 1px solid var(--line-08);
  padding-top: 22px;
}
.nj-article-card { display: flex; flex-direction: column; transition: opacity 0.18s ease; }
.nj-article-card:hover, .nj-article-card:focus-visible { opacity: 0.86; }
.nj-article-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-09);
}
.nj-article-media img { width: 100%; height: 100%; object-fit: cover; }
.nj-article-theme {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
}
.nj-article-title { margin-top: 8px; font-size: 19px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; }
.nj-article-excerpt { margin-top: 8px; font-size: 13.5px; color: var(--fg-dim-52); font-weight: 300; line-height: 1.5; }

.nj-articles-empty {
  display: none;
  margin-top: 40px;
  padding: 60px 0;
  text-align: center;
  color: var(--fg-dim-52);
  font-size: 15px;
  font-weight: 300;
}
.nj-articles-empty a { color: var(--fg); border-bottom: 1px solid var(--line-16); padding-bottom: 2px; }
.nj-articles-empty a:hover, .nj-articles-empty a:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.42); }

/* Filtres ressources : masque le <li> entier, dégrade sans :has() —
   les articles restent tous visibles. #nj-articles-app doit envelopper
   les inputs radio ET la grille dans la structure Elementor. */
#nj-articles-app:has(#nj-theme-developpement:checked) .nj-articles-grid li:has(.nj-article-card:not([data-theme="developpement"])) { display: none; }
#nj-articles-app:has(#nj-theme-automatisation:checked) .nj-articles-grid li:has(.nj-article-card:not([data-theme="automatisation"])) { display: none; }
#nj-articles-app:has(#nj-theme-ia:checked) .nj-articles-grid li:has(.nj-article-card:not([data-theme="ia"])) { display: none; }
#nj-articles-app:has(#nj-theme-business:checked) .nj-articles-grid li:has(.nj-article-card:not([data-theme="business"])) { display: none; }
/* "Business" n'a pas encore d'article publié : affiche l'état vide plutôt
   qu'une grille blanche inexpliquée. */
#nj-articles-app:has(#nj-theme-business:checked) .nj-articles-empty { display: block; }