/*
  NjakaDev — Responsive
  Traduction fidèle des 3 breakpoints du CSS source (1024 / 900 / 640px).
  Le comportement visuel reste identique à l'original — seules les
  classes ont été renommées avec le namespace nj-.
  (La redéfinition de --gutter à 640px vit dans nj-tokens.css, avec le
  reste des tokens.)
*/

@media (max-width: 1024px) {
  .nj-services-grid { grid-template-columns: repeat(2, 1fr); }
  .nj-articles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Sélecteurs `.nj-navbar .nj-nav-desktop`/`.nj-nav-mobile` (0,2,0), pas de
     simples classes seules (0,2,0) : Elementor pose sur tout conteneur
     atomique (.e-con, présent sur ces deux éléments) une règle structurelle
     `display: var(--display)` à la même spécificité (0,1,0) que nos classes
     — sans marge (--display résout généralement sur "flex"), elle l'emporte
     par un mécanisme qui échappe à l'ordre de source habituel (repéré en
     testant en direct : même une règle injectée en dernier avec le même
     sélecteur perdait, seul un cran de spécificité supplémentaire ou
     !important gagnait — cause exacte non élucidée, correctif pragmatique
     appliqué et vérifié). N'affectait visiblement que .nj-nav-desktop (qui
     doit passer de flex à none) ; .nj-nav-mobile semblait fonctionner mais
     uniquement par coïncidence (les deux mécanismes demandent "flex" ici) —
     donc corrigé aussi, pour ne pas dépendre de cette coïncidence. */
  .nj-navbar .nj-nav-desktop { display: none; }
  .nj-navbar .nj-nav-mobile { display: flex; align-items: center; }

  .nj-home-hero { min-height: auto; padding-top: 48px; padding-bottom: 420px; }
  .nj-home-hero-heading { position: static; padding: 0; margin-bottom: 32px; }
  .nj-home-hero-media { position: absolute; bottom: 0; }
  .nj-home-hero-media-frame { width: min(70vw, 400px); height: min(52vh, 460px); }
  .nj-home-hero-content { position: static; max-width: none; margin-bottom: 24px; }
  .nj-home-hero-stats { position: static; align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-bottom: 260px; }
}

@media (max-width: 640px) {
  .nj-services-grid { grid-template-columns: 1fr; }
  .nj-articles-grid { grid-template-columns: 1fr; }
  .nj-navbar { padding-top: 20px; padding-bottom: 20px; }
  .nj-home-hero-media-frame { width: min(78vw, 320px); height: min(46vh, 380px); }
  .nj-home-hero { padding-bottom: 360px; }
}