{"id":27,"date":"2026-09-09T13:42:43","date_gmt":"2026-09-09T11:42:43","guid":{"rendered":"https:\/\/newgeneration-pictures.com\/?page_id=27"},"modified":"2026-10-04T16:41:48","modified_gmt":"2026-10-04T14:41:48","slug":"a-propos","status":"publish","type":"page","link":"https:\/\/newgeneration-pictures.com\/?page_id=27","title":{"rendered":"A PROPOS"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NGP \u2014 PAGE \"\u00c0 PROPOS\" (plein \u00e9cran, menu Astra conserv\u00e9)\n   R\u00e9utilise la police \"Archivo NGP\" d\u00e9j\u00e0 d\u00e9clar\u00e9e dans ton CSS\n   principal.\n   ========================================================= *\/\n\n.about-page,\n.about-page * {\n  box-sizing: border-box;\n}\n\n.about-page {\n  \/* Plein \u00e9cran : casse le conteneur Astra, sans marges gauche\/droite *\/\n  \/* !important : WordPress\/Astra imposent aux blocs du contenu un\n     max-width (~1500px) et des marges \"auto !important\" (layout\n     \"constrained\"), ce qui laissait les bandes vides \u00e0 gauche\/droite *\/\n  width: 100vw !important;\n  max-width: none !important;\n  margin-left: calc(50% - 50vw) !important;\n  margin-right: calc(50% - 50vw) !important;\n\n  background: #000;\n  overflow: visible; \/* overflow:hidden rognait le hero et cr\u00e9ait le d\u00e9calage *\/\n  color: #fff;\n  font-family: \"Archivo NGP\", Arial, sans-serif;\n  font-weight: 300;\n  opacity: 0;\n  animation: pageIn .85s cubic-bezier(.22,1,.36,1) forwards;\n}\n\n.about-page a { color: inherit }\n.about-page ::selection { background: #e3242b; color: #fff }\n\n@keyframes pageIn { to { opacity: 1 } }\n\n\/* HERO *\/\n.about-hero {\n  width: 100%;\n  margin: 0;\n  \/* --ngp-header-h = hauteur de ton menu Astra : \u00e0 ajuster (voir :root plus bas) *\/\n  height: calc(100vh - var(--ngp-header-h));\n  min-height: 560px;\n  position: relative;\n  overflow: hidden;\n  background: #111;\n}\n.about-hero-bg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center center;\n  transform: scale(1.03);\n  animation: heroSettle 1.6s cubic-bezier(.22,1,.36,1) forwards;\n}\n@keyframes heroSettle { to { transform: scale(1) } }\n.about-hero::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 22%, rgba(0,0,0,0) 48%),\n    linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0) 30%);\n  pointer-events: none;\n}\n\n\/* CONTENT *\/\n.about-content {\n  background: #000;\n  padding: 58px 3.4375% 76px;\n}\n.about-section-grid {\n  display: grid;\n  grid-template-columns: 48.5% 48.5%;\n  column-gap: 3%;\n  align-items: stretch;\n}\n.about-section-grid + .about-section-grid { margin-top: 58px }\n.about-company,\n.producer-block {\n  display: flex;\n  flex-direction: column;\n}\n.about-company h1,\n.producer-title {\n  font-size: clamp(26px,2.1vw,42px);\n  line-height: .92;\n  letter-spacing: -.025em;\n  font-weight: 600;\n  margin: 0 0 18px;\n  font-family: \"Archivo NGP\", Arial, sans-serif;\n  font-stretch: 112.5%;\n  font-variation-settings: \"wdth\" 112.5, \"wght\" 600;\n  \/* Astra impose sa couleur de titre : on force le blanc *\/\n  color: #fff !important;\n}\n.about-company p,\n.producer-copy p {\n  margin: 0 0 16px;\n  font-size: clamp(13px,.92vw,17px);\n  line-height: 1.38;\n  text-align: justify;\n}\n.producer-role {\n  margin: -10px 0 20px;\n  font-size: clamp(13px,.9vw,16px);\n  font-style: italic;\n}\n.about-visual {\n  width: 100%;\n  height: auto;\n  min-height: 0;\n  display: block;\n  overflow: hidden;\n  background: #111;\n  position: relative;\n}\n.about-visual img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  object-position: center center;\n  transition: transform .9s cubic-bezier(.22,1,.36,1);\n}\n.about-visual:hover img { transform: scale(1.018) }\n\n\/* Ajustement d'alignement sur la photo du producteur *\/\n.producer-row .about-visual img {\n  object-position: center 18%;\n}\n\n\/* REVEALS *\/\n.reveal {\n  opacity: 0;\n  transform: translateY(26px);\n  filter: blur(4px);\n  transition:\n    opacity .9s cubic-bezier(.22,1,.36,1),\n    transform 1s cubic-bezier(.22,1,.36,1),\n    filter .8s ease;\n}\n.reveal.visible {\n  opacity: 1;\n  transform: none;\n  filter: blur(0);\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 900px) {\n  .about-hero { height: 60vh; min-height: 380px }\n  .about-content { padding: 42px 20px 56px }\n  .about-section-grid {\n    grid-template-columns: 1fr;\n    gap: 28px;\n  }\n  .about-section-grid + .about-section-grid { margin-top: 36px }\n  .about-company h1, .producer-title { font-size: 34px }\n  .about-company p, .producer-copy p {\n    font-size: 14px;\n    line-height: 1.5;\n    text-align: left;\n  }\n  .about-visual {\n    height: auto;\n    min-height: 280px;\n    aspect-ratio: 16\/10;\n  }\n}\n@media (max-width: 560px) {\n  .about-hero { min-height: 340px }\n  .about-hero-bg { object-position: 56% center }\n}\n@media (prefers-reduced-motion: reduce) {\n  .about-page { animation: none !important; opacity: 1 }\n  *, *::before, *::after { animation: none !important; transition: none !important }\n  .about-hero-bg { transform: none }\n  .reveal { opacity: 1; transform: none; filter: none }\n}\n\n\/* =========================================================\n   INT\u00c9GRATION WORDPRESS \/ ASTRA\n   Cible uniquement les pages contenant .about-page.\n   Le header Astra n'est PAS masqu\u00e9 : ton menu personnalis\u00e9 reste.\n   ========================================================= *\/\n\n\/* Menu Astra TRANSPARENT (comme sur ta page) : il flotte au-dessus\n   de l'image, donc le hero n'a rien \u00e0 retirer pour le menu.\n   Seule la barre d'admin WordPress (32px, visible quand tu es\n   connect\u00e9) est d\u00e9duite. *\/\nbody:has(.about-page) { --ngp-header-h: 0px }\nbody.admin-bar:has(.about-page) { --ngp-header-h: 32px }\n\n\/* IMPORTANT : on ne touche PAS \u00e0 la marge de <html>.\n   WordPress y met 32px pour la barre d'admin ; la mettre \u00e0 0\n   faisait passer le menu sous la barre (logo coup\u00e9 en haut). *\/\nhtml:has(.about-page),\nbody:has(.about-page) {\n  background: #000 !important;\n}\nbody:has(.about-page) {\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow-x: clip; \/* \u00e9vite le scroll horizontal d\u00fb \u00e0 100vw *\/\n}\n\n\/* Un parent qui rogne (overflow) emp\u00eache le plein \u00e9cran :\n   on d\u00e9bloque TOUS les parents de .about-page *\/\nbody:has(.about-page) *:has(.about-page) {\n  overflow: visible !important;\n  transform: none !important;\n  contain: none !important;\n}\n\n\/* Conteneur Astra DU CONTENU uniquement (jamais celui du header :\n   .ast-container est aussi utilis\u00e9 par le menu, d'o\u00f9 l'\u00e9tirement\n   du menu sur la version pr\u00e9c\u00e9dente) *\/\nbody:has(.about-page) .site-content,\nbody:has(.about-page) .site-content > .ast-container,\nbody:has(.about-page) #primary,\nbody:has(.about-page) #main,\nbody:has(.about-page) .site-main,\nbody:has(.about-page) .site-content article,\nbody:has(.about-page) .site-content .entry-content {\n  width: 100% !important;\n  max-width: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  float: none !important;\n  background: transparent !important;\n}\nbody:has(.about-page) .site-content > .ast-container { display: block !important }\n\n\/* Menu transparent pos\u00e9 sur l'image, comme sur l'accueil.\n   (Inutile si tu actives \u00ab En-t\u00eate transparent \u00bb dans les r\u00e9glages\n   Astra de la page ; sans effet sur la taille\/position du contenu\n   du menu, seulement le fond.) *\/\nbody:has(.about-page) #masthead {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 99;\n}\nbody:has(.about-page) #masthead .main-header-bar,\nbody:has(.about-page) #masthead .ast-primary-header-bar,\nbody:has(.about-page) #masthead .ast-above-header-bar,\nbody:has(.about-page) #masthead .ast-below-header-bar {\n  background: transparent !important;\n  border-bottom: 0 !important;\n}\n\n\/* Cache le titre \u00ab A PROPOS \u00bb ajout\u00e9 par Astra *\/\nbody:has(.about-page) .entry-header,\nbody:has(.about-page) .ast-archive-description,\nbody:has(.about-page) .ast-breadcrumbs-wrapper {\n  display: none !important;\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\n\/* =========================================================\n   NGP \u2014 R\u00c9SEAUX SOCIAUX DANS LE MENU ASTRA\n   Logos align\u00e9s horizontalement avec le menu, en blanc\n   ========================================================= *\/\n\/* Force l'alignement horizontal m\u00eame si Astra l'emp\u00eache *\/\n.main-header-menu > .ngp-header-socials,\n.main-header-menu > .ngp-header-socials > * {\n    display: inline-flex !important;\n    vertical-align: middle !important;\n    float: none !important;\n}\n\/* Conteneur principal : align\u00e9 avec le menu *\/\n.ngp-header-socials {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: center !important;\n    justify-content: center !important;\n    gap: 20px !important;\n    margin: 0 0 0 35px !important;\n    padding: 0 !important;\n    list-style: none !important;\n    height: 100% !important;\n    vertical-align: middle !important;\n}\n\n\/* Chaque lien social *\/\n.ngp-header-socials > li,\n.ngp-header-socials .ngp-social-item {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: center !important;\n    justify-content: center !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    list-style: none !important;\n    height: 100% !important;\n}\n\n\/* Le lien <a> *\/\n.ngp-header-socials a {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    width: 28px !important;\n    height: 28px !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    text-decoration: none !important;\n    line-height: 0 !important;\n}\n\n\/* Images : taille uniforme et alignement propre *\/\n.ngp-header-socials img {\n    display: block !important;\n    width: 24px !important;\n    height: 24px !important;\n    max-width: 24px !important;\n    max-height: 24px !important;\n    object-fit: contain !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    transition: transform 0.25s ease, opacity 0.25s ease !important;\n\n    \/* \ud83d\udd11 FILTRE POUR RENDRE LES LOGOS BLANCS *\/\n    filter: brightness(0) invert(1) !important;\n}\n\n\/* Effet au survol : logos en ROUGE *\/\n.ngp-header-socials a:hover img {\n    transform: scale(1.15);\n    opacity: 1;\n    \/* \ud83d\udd11 FILTRE POUR RENDRE LES LOGOS ROUGES *\/\n    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(5000%) hue-rotate(355deg) brightness(95%) contrast(105%) !important;\n}\n\n\/* Masquer les r\u00e9seaux sociaux sur mobile *\/\n@media (max-width: 921px) {\n    .ngp-header-socials {\n        display: none !important;\n    }\n}\n<\/style>\n\n<!--\n  ============================================================\n  NEW GENERATION PICTURES \u2014 PAGE \"\u00c0 PROPOS\"\n  \u00c0 coller dans un bloc \"HTML personnalis\u00e9\".\n\n  - Le faux menu (.about-topbar) est supprim\u00e9 : c'est ton menu\n    Astra personnalis\u00e9 qui s'affiche.\n  - Le footer du th\u00e8me s'affiche normalement en dessous.\n  ============================================================\n-->\n<main class=\"about-page\">\n  <section class=\"about-hero\">\n    <img decoding=\"async\" class=\"about-hero-bg\" src=\"http:\/\/newgeneration-pictures.com\/wp-content\/uploads\/2026\/09\/about-hero.jpg\" alt=\"Tournage New Generation Pictures\">\n  <\/section>\n\n  <section class=\"about-content\">\n    <div class=\"about-section-grid company-row\">\n      <div class=\"about-visual reveal\">\n        <img decoding=\"async\" src=\"http:\/\/newgeneration-pictures.com\/wp-content\/uploads\/2026\/09\/about-ngp.jpg\" alt=\"\u00c9quipe de tournage New Generation Pictures\">\n      <\/div>\n\n      <div class=\"about-company reveal\">\n        <h1>New Generation<br>Pictures<\/h1>\n\n        <p>New Generation Pictures est une soci\u00e9t\u00e9 de production cin\u00e9matographique et audiovisuelle offrant une gamme compl\u00e8te de services, de la conception \u00e0 la postproduction. Nous d\u00e9veloppons et produisons des longs m\u00e9trages, s\u00e9ries, t\u00e9l\u00e9films, documentaires, films institutionnels et bien plus encore.<\/p>\n\n        <p>Depuis 2014, nous avons r\u00e9alis\u00e9 avec succ\u00e8s des projets aussi bien au niveau national qu&rsquo;international, et collabor\u00e9 avec des noms de calibre dans le domaine du cin\u00e9ma et de l&rsquo;audiovisuel. Ces exp\u00e9riences renforcent notre savoir-faire et t\u00e9moignent de la confiance que nous accordent nos partenaires.<\/p>\n\n        <p>Chaque projet est pour nous une v\u00e9ritable ambition : une invitation \u00e0 explorer de nouveaux horizons et \u00e0 repousser les limites de l&rsquo;imaginaire. Port\u00e9e par une \u00e9quipe de talents passionn\u00e9s et exp\u00e9riment\u00e9s, New Generation Pictures place la cr\u00e9ativit\u00e9 et la rigueur au c\u0153ur de sa d\u00e9marche.<\/p>\n\n        <p>De l&rsquo;id\u00e9e initiale \u00e0 la diffusion, nous accompagnons nos partenaires \u00e0 chaque \u00e9tape, soucieux de transformer leur vision en une exp\u00e9rience visuelle m\u00e9morable.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"about-section-grid producer-row\">\n      <div class=\"producer-block reveal\">\n        <h2 class=\"producer-title\">Mohammed Kaghat<\/h2>\n        <p class=\"producer-role\">Producteur<\/p>\n\n        <div class=\"producer-copy\">\n          <p>Producteur, directeur de production et acteur marocain, fondateur de New Generation Pictures, soci\u00e9t\u00e9 de production cin\u00e9matographique et audiovisuelle cr\u00e9\u00e9e en 2014. Actif dans le secteur depuis plusieurs ann\u00e9es, il accompagne des projets de fiction, de t\u00e9l\u00e9vision et de cin\u00e9ma, en intervenant aussi bien dans la production que dans l&rsquo;organisation ex\u00e9cutive des tournages. \u00c0 travers New Generation Pictures, il a particip\u00e9 \u00e0 la production de plusieurs \u0153uvres marocaines, notamment des longs m\u00e9trages, t\u00e9l\u00e9films et courts m\u00e9trages, tout en d\u00e9veloppant une vision tourn\u00e9e vers des projets ambitieux, professionnels et ouverts aux collaborations nationales et internationales.<\/p>\n\n          <p>Reconnu pour sa connaissance du terrain, son r\u00e9seau professionnel et sa capacit\u00e9 \u00e0 g\u00e9rer les exigences artistiques et logistiques d&rsquo;une production, Mohammed Kaghat s&rsquo;impose comme un acteur dynamique de la nouvelle g\u00e9n\u00e9ration de producteurs marocains. Son parcours combine cr\u00e9ativit\u00e9, sens de l&rsquo;organisation et volont\u00e9 de valoriser le Maroc comme territoire de cr\u00e9ation et de tournage. En plus de son travail derri\u00e8re la cam\u00e9ra, il appara\u00eet \u00e9galement comme acteur dans certains projets, ce qui renforce sa compr\u00e9hension globale du processus cin\u00e9matographique, de l&rsquo;\u00e9criture \u00e0 la production, jusqu&rsquo;\u00e0 la rencontre avec le public.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"about-visual reveal\">\n        <img decoding=\"async\" src=\"http:\/\/newgeneration-pictures.com\/wp-content\/uploads\/2026\/09\/about-kaghat.jpg\" alt=\"Mohammed Kaghat\">\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<script>\n(() => {\n  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const reveals = [...document.querySelectorAll('.reveal')];\n\n  if (reduceMotion || !('IntersectionObserver' in window)) {\n    reveals.forEach(el => el.classList.add('visible'));\n  } else {\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('visible');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, {threshold:.08, rootMargin:'0px 0px -6% 0px'});\n    reveals.forEach(el => observer.observe(el));\n  }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>New GenerationPictures New Generation Pictures est une soci\u00e9t\u00e9 de production cin\u00e9matographique et audiovisuelle offrant une gamme compl\u00e8te de services, de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":10,"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/newgeneration-pictures.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}