{"id":196,"date":"2026-08-06T15:21:16","date_gmt":"2026-08-06T13:21:16","guid":{"rendered":"https:\/\/atyaf.pro\/?page_id=196"},"modified":"2026-08-06T20:45:18","modified_gmt":"2026-08-06T18:45:18","slug":"home","status":"publish","type":"page","link":"https:\/\/atyaf.pro\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"196\" class=\"elementor elementor-196\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3d9159a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3d9159a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-57b83a2\" data-id=\"57b83a2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0438ba8 elementor-widget elementor-widget-html\" data-id=\"0438ba8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nATYAF \u2014 SOCLE GLOBAL\n\u00c0 placer dans le PREMIER widget HTML de la page, avant le Hero.\nCe widget ne produit aucun \u00e9l\u00e9ment visible.\n-->\n<style>\n:root {\n  --ayf-brand: #C79A5E;\n  --ayf-brand-alt: #E2BD86;\n  --ayf-heading: #F3EFE8;\n  --ayf-text: #AAA49B;\n  --ayf-muted: #77736D;\n  --ayf-bg: #050505;\n  --ayf-bg-2: #0A0A0A;\n  --ayf-bg-3: #101010;\n  --ayf-bg-4: #171717;\n  --ayf-border: #2B2926;\n  --ayf-border-soft: rgba(255,255,255,.12);\n  --ayf-shell: 1280px;\n  --ayf-gutter: clamp(20px, 4vw, 64px);\n  --ayf-ease: cubic-bezier(.2,.75,.2,1);\n  --ayf-heading-font: \"Barlow Condensed\", \"Arial Narrow\", sans-serif;\n  --ayf-body-font: \"Inter\", Arial, sans-serif;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  background: var(--ayf-bg);\n}\n\nbody,\n#page,\n.site,\n.site-content,\n.ast-container {\n  background: var(--ayf-bg) !important;\n}\n\nbody {\n  margin: 0;\n  overflow-x: hidden;\n  color: var(--ayf-text);\n  font-family: var(--ayf-body-font);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n\n\/* Nettoyage de la homepage Astra *\/\n.home .entry-header,\n.home .entry-title {\n  display: none !important;\n}\n\n\/*\n * Header Astra masqu\u00e9 sur la homepage.\n * La navigation est assur\u00e9e par le header personnalis\u00e9 Atyaf.\n *\/\nbody.home #masthead,\nbody.home .site-header,\nbody.home .ast-above-header-wrap,\nbody.home .ast-primary-header-bar,\nbody.home .ast-below-header-wrap {\n  display: none !important;\n}\n\nbody.home #content,\nbody.home .site-content,\nbody.home .content-area,\nbody.home .site-main {\n  margin-top: 0 !important;\n  padding-top: 0 !important;\n}\n\n.home .site-content > .ast-container {\n  width: 100%;\n  max-width: none;\n  padding: 0;\n}\n\n.home .entry-content {\n  margin: 0;\n}\n\n\/* Le bouton Astra sera redessin\u00e9 avec le header\/footer d\u00e9finitifs *\/\n#ast-scroll-top {\n  display: none !important;\n}\n\n.elementor-widget-html,\n.elementor-widget-html > .elementor-widget-container {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.ayf-section,\n.ayf-section * {\n  box-sizing: border-box;\n}\n\n.ayf-section {\n  position: relative;\n  width: 100%;\n  color: var(--ayf-text);\n  background: var(--ayf-bg);\n  overflow: clip;\n}\n\n.ayf-fullbleed {\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n}\n\n.ayf-shell {\n  width: min(calc(100% - (var(--ayf-gutter) * 2)), var(--ayf-shell));\n  margin-inline: auto;\n}\n\n.ayf-kicker {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0;\n  color: var(--ayf-brand);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: .2em;\n  text-transform: uppercase;\n}\n\n.ayf-kicker::before {\n  width: 28px;\n  height: 1px;\n  background: currentColor;\n  content: \"\";\n}\n\n.ayf-display,\n.ayf-title {\n  margin: 0;\n  color: var(--ayf-heading);\n  font-family: var(--ayf-heading-font);\n  font-weight: 700;\n  letter-spacing: -.035em;\n  text-transform: uppercase;\n}\n\n.ayf-display {\n  font-size: clamp(68px, 10.2vw, 156px);\n  line-height: .82;\n}\n\n.ayf-title {\n  font-size: clamp(48px, 6.5vw, 92px);\n  line-height: .88;\n}\n\n.ayf-copy {\n  margin: 0;\n  color: var(--ayf-text);\n  font-size: clamp(15px, 1.4vw, 18px);\n  line-height: 1.75;\n}\n\n.ayf-link {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  width: max-content;\n  color: var(--ayf-heading);\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: .14em;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.ayf-link::after {\n  width: 38px;\n  height: 1px;\n  background: currentColor;\n  content: \"\";\n  transition: width .4s var(--ayf-ease), background .4s var(--ayf-ease);\n}\n\n.ayf-link:hover {\n  color: var(--ayf-brand-alt);\n}\n\n.ayf-link:hover::after {\n  width: 58px;\n}\n\n[data-ayf-reveal] {\n  opacity: 0;\n  transform: translate3d(0, 38px, 0);\n  transition:\n    opacity .9s var(--ayf-ease),\n    transform .9s var(--ayf-ease);\n  transition-delay: var(--ayf-delay, 0ms);\n}\n\n[data-ayf-reveal=\"left\"] {\n  transform: translate3d(-38px, 0, 0);\n}\n\n[data-ayf-reveal=\"right\"] {\n  transform: translate3d(38px, 0, 0);\n}\n\n[data-ayf-reveal].is-visible {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n\n.ayf-noise {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: .045;\n  z-index: 4;\n  background-image:\n    url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'\/%3E%3C\/svg%3E\");\n}\n\n\n\/* Suppression de tout espace g\u00e9n\u00e9r\u00e9 autour du widget panorama *\/\n.elementor-widget-html:has(.ayf-algiers),\n.elementor-widget-html:has(.ayf-algiers) > .elementor-widget-container {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n@media (max-width: 767px) {\n  :root {\n    --ayf-gutter: 20px;\n  }\n\n  .ayf-display {\n    font-size: clamp(58px, 21vw, 96px);\n  }\n\n  .ayf-title {\n    font-size: clamp(44px, 15vw, 72px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n    transition-duration: .01ms !important;\n  }\n\n  [data-ayf-reveal] {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  if (window.__ATYAF_FOUNDATION__) return;\n  window.__ATYAF_FOUNDATION__ = true;\n\n  const reveal = (scope = document) => {\n    const nodes = scope.querySelectorAll(\"[data-ayf-reveal]:not([data-ayf-observed])\");\n\n    if (!(\"IntersectionObserver\" in window)) {\n      nodes.forEach((node) => node.classList.add(\"is-visible\"));\n      return;\n    }\n\n    const observer = new IntersectionObserver((entries, currentObserver) => {\n      entries.forEach((entry) => {\n        if (!entry.isIntersecting) return;\n        entry.target.classList.add(\"is-visible\");\n        currentObserver.unobserve(entry.target);\n      });\n    }, {\n      threshold: .12,\n      rootMargin: \"0px 0px -6% 0px\"\n    });\n\n    nodes.forEach((node) => {\n      node.setAttribute(\"data-ayf-observed\", \"true\");\n      observer.observe(node);\n    });\n  };\n\n  reveal();\n\n  const mutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      mutation.addedNodes.forEach((node) => {\n        if (node.nodeType === 1) reveal(node);\n      });\n    });\n  });\n\n  mutationObserver.observe(document.body, {\n    childList: true,\n    subtree: true\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b35669e elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"b35669e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-aff000b\" data-id=\"aff000b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb10885 elementor-widget elementor-widget-html\" data-id=\"fb10885\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\nATYAF \u2014 HEADER CUSTOM\r\n\u00c0 placer dans un widget HTML juste apr\u00e8s le socle global\r\net juste avant le Hero.\r\n\r\nNavigation actuelle :\r\nWORK     \u2192 #selected-work\r\nSTUDIO   \u2192 #studio\r\nSERVICES \u2192 #services\r\nCONTACT  \u2192 #contact\r\n-->\r\n<header class=\"ayf-header\" id=\"ayf-header\">\r\n  <div class=\"ayf-header__bar\">\r\n    <div class=\"ayf-shell ayf-header__inner\">\r\n      <a\r\n        class=\"ayf-header__logo\"\r\n        href=\"#top\"\r\n        aria-label=\"Atyaf \u2014 Retour en haut de page\"\r\n      >\r\n        <img fetchpriority=\"high\"\r\n          \r\n          alt=\"Atyaf Production\"\r\n          width=\"140\"\r\n          height=\"45\"\r\n          decoding=\"async\"\r\n         loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Logo-Atyaf.png\">\r\n      <\/a>\r\n\r\n      <nav\r\n        class=\"ayf-header__nav\"\r\n        aria-label=\"Navigation principale\"\r\n      >\r\n        <a\r\n          class=\"ayf-header__link\"\r\n          href=\"#selected-work\"\r\n          data-ayf-nav=\"selected-work\"\r\n        >\r\n          <span>Work<\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"ayf-header__link\"\r\n          href=\"#studio\"\r\n          data-ayf-nav=\"studio\"\r\n        >\r\n          <span>Studio<\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"ayf-header__link\"\r\n          href=\"#services\"\r\n          data-ayf-nav=\"services\"\r\n        >\r\n          <span>Services<\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"ayf-header__link ayf-header__link--contact\"\r\n          href=\"#contact\"\r\n          data-ayf-nav=\"contact\"\r\n        >\r\n          <span>Contact<\/span>\r\n          <span class=\"ayf-header__external\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n      <\/nav>\r\n\r\n      <button\r\n        class=\"ayf-header__toggle\"\r\n        type=\"button\"\r\n        aria-label=\"Ouvrir le menu\"\r\n        aria-expanded=\"false\"\r\n        aria-controls=\"ayf-mobile-menu\"\r\n      >\r\n        <svg\r\n          class=\"ayf-header__toggle-icon ayf-header__toggle-icon--menu\"\r\n          viewBox=\"0 0 32 32\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M5 11H27\"><\/path>\r\n          <path d=\"M11 21H27\"><\/path>\r\n        <\/svg>\r\n\r\n        <svg\r\n          class=\"ayf-header__toggle-icon ayf-header__toggle-icon--close\"\r\n          viewBox=\"0 0 32 32\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M7 7L25 25\"><\/path>\r\n          <path d=\"M25 7L7 25\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"ayf-header__panel\"\r\n    id=\"ayf-mobile-menu\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <div class=\"ayf-header__panel-noise\" aria-hidden=\"true\"><\/div>\r\n\r\n    <nav\r\n      class=\"ayf-header__mobile-nav\"\r\n      aria-label=\"Navigation mobile\"\r\n    >\r\n      <a href=\"#selected-work\">\r\n        <small>01<\/small>\r\n        <span>Work<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#studio\">\r\n        <small>02<\/small>\r\n        <span>Studio<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#services\">\r\n        <small>03<\/small>\r\n        <span>Services<\/span>\r\n      <\/a>\r\n\r\n      <a href=\"#contact\">\r\n        <small>04<\/small>\r\n        <span>Contact<\/span>\r\n      <\/a>\r\n    <\/nav>\r\n\r\n    <div class=\"ayf-header__mobile-meta\">\r\n      <a href=\"mailto:contact@atyaf.pro\">\r\n        contact@atyaf.pro\r\n      <\/a>\r\n\r\n      <span>Algiers, Algeria<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<style>\r\nbody {\r\n  --ayf-admin-offset: 0px;\r\n}\r\n\r\nbody.admin-bar {\r\n  --ayf-admin-offset: 32px;\r\n}\r\n\r\n.ayf-header,\r\n.ayf-header * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ayf-header {\r\n  position: fixed;\r\n  top: var(--ayf-admin-offset);\r\n  left: 0;\r\n  z-index: 9998;\r\n  width: 100%;\r\n  color: var(--ayf-heading);\r\n  isolation: isolate;\r\n}\r\n\r\n\r\n.ayf-header__bar {\r\n  position: relative;\r\n  z-index: 3;\r\n  width: 100%;\r\n  background: transparent;\r\n  border-bottom: 1px solid transparent;\r\n  transition:\r\n    background .5s var(--ayf-ease),\r\n    border-color .5s var(--ayf-ease),\r\n    backdrop-filter .5s var(--ayf-ease),\r\n    -webkit-backdrop-filter .5s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header.is-scrolled .ayf-header__bar,\r\n.ayf-header.is-menu-open .ayf-header__bar {\r\n  background: rgba(5, 5, 5, .78);\r\n  border-bottom-color: rgba(255,255,255,.085);\r\n  backdrop-filter: blur(18px);\r\n  -webkit-backdrop-filter: blur(18px);\r\n}\r\n\r\n.ayf-header__inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  height: 78px;\r\n  transition: height .5s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header.is-scrolled .ayf-header__inner {\r\n  height: 64px;\r\n}\r\n\r\n.ayf-header__logo {\r\n  position: relative;\r\n  z-index: 5;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: 110px;\r\n  color: var(--ayf-heading);\r\n  text-decoration: none !important;\r\n  transition:\r\n    width .5s var(--ayf-ease),\r\n    opacity .3s ease,\r\n    transform .45s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header.is-scrolled .ayf-header__logo {\r\n  width: 98px;\r\n}\r\n\r\n.ayf-header__logo:hover {\r\n  opacity: .82;\r\n  transform: translate3d(0, -1px, 0);\r\n}\r\n\r\n.ayf-header__logo img {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  max-width: none;\r\n  object-fit: contain;\r\n}\r\n\r\n.ayf-header__nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: clamp(24px, 2.4vw, 38px);\r\n}\r\n\r\n.ayf-header__link,\r\n.ayf-header__link:hover,\r\n.ayf-header__link:focus {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.ayf-header__link {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 0;\r\n  color: rgba(243,239,232,.82);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: .17em;\r\n  line-height: 1;\r\n  text-transform: uppercase;\r\n  transition:\r\n    color .32s ease,\r\n    transform .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header__link::after {\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: 3px;\r\n  width: 0;\r\n  height: 1px;\r\n  background: var(--ayf-brand);\r\n  content: \"\";\r\n  transition: width .42s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header__link:hover,\r\n.ayf-header__link.is-active {\r\n  color: var(--ayf-heading);\r\n  transform: translate3d(0, -1px, 0);\r\n}\r\n\r\n.ayf-header__link:hover::after,\r\n.ayf-header__link.is-active::after {\r\n  width: 100%;\r\n}\r\n\r\n.ayf-header__link--contact {\r\n  color: var(--ayf-brand-alt);\r\n}\r\n\r\n.ayf-header__external {\r\n  display: inline-flex;\r\n  width: 14px;\r\n  height: 14px;\r\n  color: currentColor;\r\n  transition: transform .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header__external svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: visible;\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.75;\r\n  stroke-linecap: square;\r\n  stroke-linejoin: miter;\r\n}\r\n\r\n.ayf-header__link--contact:hover .ayf-header__external {\r\n  transform: translate3d(3px, -3px, 0);\r\n}\r\n\r\n.ayf-header__toggle {\r\n  position: relative;\r\n  z-index: 5;\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 46px;\r\n  height: 46px;\r\n  min-width: 46px;\r\n  min-height: 46px;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0 !important;\r\n  border-radius: 0 !important;\r\n  background: transparent !important;\r\n  box-shadow: none !important;\r\n  color: #F3EFE8 !important;\r\n  opacity: 1 !important;\r\n  visibility: visible !important;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  touch-action: manipulation;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.ayf-header__toggle-icon {\r\n  position: absolute;\r\n  inset: 50% auto auto 50%;\r\n  display: block;\r\n  width: 28px;\r\n  height: 28px;\r\n  overflow: visible;\r\n  fill: none !important;\r\n  stroke: currentColor !important;\r\n  stroke-width: 1.7;\r\n  stroke-linecap: square;\r\n  stroke-linejoin: miter;\r\n  pointer-events: none;\r\n  backface-visibility: hidden;\r\n  -webkit-backface-visibility: hidden;\r\n  transition:\r\n    opacity .24s ease,\r\n    transform .38s var(--ayf-ease),\r\n    visibility .24s ease;\r\n}\r\n\r\n.ayf-header__toggle-icon--menu {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transform:\r\n    translate3d(-50%, -50%, 0)\r\n    rotate(0deg)\r\n    scale(1);\r\n}\r\n\r\n.ayf-header__toggle-icon--close {\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transform:\r\n    translate3d(-50%, -50%, 0)\r\n    rotate(-35deg)\r\n    scale(.78);\r\n}\r\n\r\n.ayf-header__toggle[aria-expanded=\"true\"]\r\n.ayf-header__toggle-icon--menu {\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transform:\r\n    translate3d(-50%, -50%, 0)\r\n    rotate(35deg)\r\n    scale(.78);\r\n}\r\n\r\n.ayf-header__toggle[aria-expanded=\"true\"]\r\n.ayf-header__toggle-icon--close {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transform:\r\n    translate3d(-50%, -50%, 0)\r\n    rotate(0deg)\r\n    scale(1);\r\n}\r\n\r\n.ayf-header__panel {\r\n  position: fixed;\r\n  top: var(--ayf-admin-offset);\r\n  right: 0;\r\n  left: 0;\r\n  z-index: 2;\r\n  display: none;\r\n  grid-template-rows: minmax(0, 1fr) auto;\r\n  width: 100vw;\r\n  height: calc(100vh - var(--ayf-admin-offset));\r\n  min-height: calc(100vh - var(--ayf-admin-offset));\r\n  padding:\r\n    max(112px, calc(92px + env(safe-area-inset-top)))\r\n    var(--ayf-gutter)\r\n    max(30px, calc(20px + env(safe-area-inset-bottom)));\r\n  background:\r\n    radial-gradient(\r\n      circle at 85% 8%,\r\n      rgba(199,154,94,.1),\r\n      transparent 32%\r\n    ),\r\n    #050505;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  pointer-events: none;\r\n  transform: translate3d(0, -18px, 0);\r\n  transition:\r\n    opacity .4s ease,\r\n    visibility .4s ease,\r\n    transform .5s var(--ayf-ease);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  overscroll-behavior: contain;\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n@supports (height: 100dvh) {\r\n  .ayf-header__panel {\r\n    height: calc(100dvh - var(--ayf-admin-offset));\r\n    min-height: calc(100dvh - var(--ayf-admin-offset));\r\n  }\r\n}\r\n\r\n.ayf-header__panel-noise {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  opacity: .035;\r\n  background-image:\r\n    url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n.ayf-header.is-menu-open .ayf-header__panel {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  pointer-events: auto;\r\n  transform: translate3d(0, 0, 0);\r\n}\r\n\r\n.ayf-header__mobile-nav {\r\n  position: relative;\r\n  z-index: 1;\r\n  align-self: center;\r\n}\r\n\r\n.ayf-header__mobile-nav a,\r\n.ayf-header__mobile-nav a:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.ayf-header__mobile-nav a {\r\n  display: grid;\r\n  grid-template-columns: 34px minmax(0, 1fr);\r\n  align-items: baseline;\r\n  gap: 14px;\r\n  padding: 12px 0;\r\n  border-bottom: 1px solid rgba(255,255,255,.11);\r\n  color: var(--ayf-heading);\r\n}\r\n\r\n.ayf-header__mobile-nav small {\r\n  color: var(--ayf-brand);\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  letter-spacing: .13em;\r\n}\r\n\r\n.ayf-header__mobile-nav span {\r\n  font-family: var(--ayf-heading-font);\r\n  font-size: clamp(54px, 17vw, 82px);\r\n  font-weight: 650;\r\n  line-height: .86;\r\n  letter-spacing: -.035em;\r\n  text-transform: uppercase;\r\n  transition:\r\n    color .3s ease,\r\n    transform .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-header__mobile-nav a:hover span {\r\n  color: var(--ayf-brand-alt);\r\n  transform: translate3d(8px, 0, 0);\r\n}\r\n\r\n.ayf-header__mobile-meta {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 20px;\r\n  padding-top: 22px;\r\n  border-top: 1px solid rgba(255,255,255,.11);\r\n  color: var(--ayf-muted);\r\n  font-size: 10px;\r\n  font-weight: 500;\r\n  letter-spacing: .1em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.ayf-header__mobile-meta a {\r\n  color: var(--ayf-heading);\r\n  text-decoration: none !important;\r\n}\r\n\r\nbody.ayf-menu-locked {\r\n  overflow: hidden !important;\r\n}\r\n\r\n@media (max-width: 782px) {\r\n  body.admin-bar {\r\n    --ayf-admin-offset: 46px;\r\n  }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .ayf-header__inner {\r\n    height: 74px;\r\n  }\r\n\r\n  .ayf-header.is-scrolled .ayf-header__inner {\r\n    height: 66px;\r\n  }\r\n\r\n  .ayf-header__logo,\r\n  .ayf-header.is-scrolled .ayf-header__logo {\r\n    width: 100px;\r\n  }\r\n\r\n  .ayf-header__nav {\r\n    display: none;\r\n  }\r\n\r\n  .ayf-header__toggle {\r\n    display: flex;\r\n  }\r\n\r\n  .ayf-header__panel {\r\n    display: grid;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .ayf-header__panel {\r\n    padding-left: 22px;\r\n    padding-right: 22px;\r\n  }\r\n\r\n  .ayf-header__mobile-nav a {\r\n    padding: 10px 0;\r\n  }\r\n\r\n  .ayf-header__mobile-nav span {\r\n    font-size: clamp(48px, 15.5vw, 66px);\r\n  }\r\n\r\n  .ayf-header__mobile-meta {\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n}\r\n\r\n@media (max-height: 700px) and (max-width: 900px) {\r\n  .ayf-header__panel {\r\n    padding-top: max(92px, calc(78px + env(safe-area-inset-top)));\r\n  }\r\n\r\n  .ayf-header__mobile-nav span {\r\n    font-size: clamp(44px, 13vw, 58px);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .ayf-header,\r\n  .ayf-header *,\r\n  .ayf-header *::before,\r\n  .ayf-header *::after {\r\n    transition-duration: .01ms !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const header = document.querySelector(\"#ayf-header\");\r\n\r\n  if (\r\n    !header ||\r\n    header.dataset.ready === \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  header.dataset.ready = \"true\";\r\n\r\n  const toggle =\r\n    header.querySelector(\".ayf-header__toggle\");\r\n\r\n  const panel =\r\n    header.querySelector(\".ayf-header__panel\");\r\n\r\n  const desktopLinks = [\r\n    ...header.querySelectorAll(\r\n      \".ayf-header__link[data-ayf-nav]\"\r\n    )\r\n  ];\r\n\r\n  const mobileLinks = [\r\n    ...header.querySelectorAll(\r\n      \".ayf-header__mobile-nav a\"\r\n    )\r\n  ];\r\n\r\n  const reduceMotion =\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n  let lastScrollY = window.scrollY;\r\n  let ticking = false;\r\n\r\n  const closeMenu = () => {\r\n    header.classList.remove(\"is-menu-open\");\r\n\r\n    toggle.setAttribute(\r\n      \"aria-expanded\",\r\n      \"false\"\r\n    );\r\n\r\n    toggle.setAttribute(\r\n      \"aria-label\",\r\n      \"Ouvrir le menu\"\r\n    );\r\n\r\n    panel.setAttribute(\r\n      \"aria-hidden\",\r\n      \"true\"\r\n    );\r\n\r\n    document.body.classList.remove(\r\n      \"ayf-menu-locked\"\r\n    );\r\n\r\n    \/*\r\n     * Force un repaint l\u00e9ger sur Safari iOS afin que\r\n     * l\u2019ic\u00f4ne hamburger soit imm\u00e9diatement restaur\u00e9e.\r\n     *\/\r\n    toggle.style.display = \"none\";\r\n    void toggle.offsetHeight;\r\n    toggle.style.display = \"\";\r\n  };\r\n\r\n  const openMenu = () => {\r\n    header.classList.add(\"is-menu-open\");\r\n    toggle.setAttribute(\r\n      \"aria-expanded\",\r\n      \"true\"\r\n    );\r\n    toggle.setAttribute(\r\n      \"aria-label\",\r\n      \"Fermer le menu\"\r\n    );\r\n    panel.setAttribute(\r\n      \"aria-hidden\",\r\n      \"false\"\r\n    );\r\n    document.body.classList.add(\r\n      \"ayf-menu-locked\"\r\n    );\r\n  };\r\n\r\n  toggle.addEventListener(\"click\", () => {\r\n    if (\r\n      header.classList.contains(\r\n        \"is-menu-open\"\r\n      )\r\n    ) {\r\n      closeMenu();\r\n    } else {\r\n      openMenu();\r\n    }\r\n  });\r\n\r\n  mobileLinks.forEach((link) => {\r\n    link.addEventListener(\r\n      \"click\",\r\n      closeMenu\r\n    );\r\n  });\r\n\r\n  document.addEventListener(\r\n    \"keydown\",\r\n    (event) => {\r\n      if (event.key === \"Escape\") {\r\n        closeMenu();\r\n      }\r\n    }\r\n  );\r\n\r\n  const updateHeader = () => {\r\n    const currentScrollY =\r\n      Math.max(window.scrollY, 0);\r\n\r\n    \/*\r\n     * Le header reste toujours visible.\r\n     * Seul son fond et sa hauteur changent apr\u00e8s le scroll.\r\n     *\/\r\n    header.classList.toggle(\r\n      \"is-scrolled\",\r\n      currentScrollY > 36\r\n    );\r\n\r\n    lastScrollY = currentScrollY;\r\n    ticking = false;\r\n  };\r\n\r\n  window.addEventListener(\r\n    \"scroll\",\r\n    () => {\r\n      if (ticking) {\r\n        return;\r\n      }\r\n\r\n      ticking = true;\r\n      requestAnimationFrame(updateHeader);\r\n    },\r\n    { passive: true }\r\n  );\r\n\r\n  updateHeader();\r\n\r\n  \/*\r\n   * Mise en \u00e9vidence de la section visible.\r\n   *\/\r\n  const sections = desktopLinks\r\n    .map((link) => {\r\n      const id = link.dataset.ayfNav;\r\n      const section =\r\n        document.getElementById(id);\r\n\r\n      return section\r\n        ? { id, section, link }\r\n        : null;\r\n    })\r\n    .filter(Boolean);\r\n\r\n  if (\r\n    \"IntersectionObserver\" in window &&\r\n    sections.length\r\n  ) {\r\n    const visibleSections = new Map();\r\n\r\n    const setActiveLink = () => {\r\n      const activeEntry = [\r\n        ...visibleSections.entries()\r\n      ]\r\n        .filter(([, ratio]) => ratio > 0)\r\n        .sort((a, b) => b[1] - a[1])[0];\r\n\r\n      const activeId =\r\n        activeEntry?.[0] || \"\";\r\n\r\n      desktopLinks.forEach((link) => {\r\n        link.classList.toggle(\r\n          \"is-active\",\r\n          link.dataset.ayfNav === activeId\r\n        );\r\n      });\r\n    };\r\n\r\n    const observer =\r\n      new IntersectionObserver(\r\n        (entries) => {\r\n          entries.forEach((entry) => {\r\n            visibleSections.set(\r\n              entry.target.id,\r\n              entry.isIntersecting\r\n                ? entry.intersectionRatio\r\n                : 0\r\n            );\r\n          });\r\n\r\n          setActiveLink();\r\n        },\r\n        {\r\n          threshold: [\r\n            0,\r\n            .15,\r\n            .3,\r\n            .5,\r\n            .7\r\n          ],\r\n          rootMargin:\r\n            \"-18% 0px -58% 0px\"\r\n        }\r\n      );\r\n\r\n    sections.forEach(({ section }) => {\r\n      observer.observe(section);\r\n    });\r\n  }\r\n\r\n  \/*\r\n   * Scroll fluide avec compensation\r\n   * de la hauteur du header fixe.\r\n   *\/\r\n  const anchorLinks = [\r\n    ...header.querySelectorAll(\r\n      'a[href^=\"#\"]'\r\n    )\r\n  ];\r\n\r\n  anchorLinks.forEach((link) => {\r\n    link.addEventListener(\r\n      \"click\",\r\n      (event) => {\r\n        const selector =\r\n          link.getAttribute(\"href\");\r\n\r\n        if (\r\n          !selector ||\r\n          selector === \"#\"\r\n        ) {\r\n          return;\r\n        }\r\n\r\n        const target =\r\n          document.querySelector(selector);\r\n\r\n        if (!target) {\r\n          return;\r\n        }\r\n\r\n        event.preventDefault();\r\n\r\n        const offset =\r\n          window.innerWidth <= 900\r\n            ? 66\r\n            : 70;\r\n\r\n        const top =\r\n          target.getBoundingClientRect().top +\r\n          window.scrollY -\r\n          offset;\r\n\r\n        window.scrollTo({\r\n          top,\r\n          behavior: reduceMotion\r\n            ? \"auto\"\r\n            : \"smooth\"\r\n        });\r\n\r\n        closeMenu();\r\n      }\r\n    );\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-faae784 elementor-widget elementor-widget-html\" data-id=\"faae784\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ATYAF \u2014 HERO CINEMATIC -->\r\n<section class=\"ayf-section ayf-fullbleed ayf-hero\" id=\"top\" aria-labelledby=\"ayf-hero-title\">\r\n  <div class=\"ayf-hero__media\" aria-hidden=\"true\">\r\n    <img loading=\"lazy\" fetchpriority=\"high\"\r\n      \r\n      alt=\"\"\r\n      width=\"1672\"\r\n      height=\"941\"\r\n      fetchpriority=\"high\"\r\n      decoding=\"async\"\r\n     loading=\"lazy\" decoding=\"async\" src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-00_47_30.png\">\r\n  <\/div>\r\n\r\n  <div class=\"ayf-hero__shade\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ayf-noise\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ayf-shell ayf-hero__inner\">\r\n    <div class=\"ayf-hero__content\">\r\n      <p class=\"ayf-kicker\" data-ayf-reveal>Atyaf Production \u00b7 Algiers<\/p>\r\n\r\n      <h1 class=\"ayf-display ayf-hero__title\" id=\"ayf-hero-title\">\r\n        <span data-ayf-reveal style=\"--ayf-delay:80ms\">We create<\/span>\r\n        <span data-ayf-reveal style=\"--ayf-delay:160ms\">stories<\/span>\r\n        <span class=\"ayf-hero__accent\" data-ayf-reveal style=\"--ayf-delay:240ms\">in motion.<\/span>\r\n      <\/h1>\r\n\r\n      <div class=\"ayf-hero__bottom\" data-ayf-reveal style=\"--ayf-delay:320ms\">\r\n        <p>\r\n          Production audiovisuelle, fiction et cr\u00e9ation d\u2019images\r\n          depuis Alger.\r\n        <\/p>\r\n\r\n        <a class=\"ayf-link\" href=\"#selected-work\">\r\n          D\u00e9couvrir nos projets\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ayf-hero__meta\" aria-hidden=\"true\">\r\n      <span>ALG \u00b7 36.7538\u00b0 N<\/span>\r\n      <span>SCROLL TO EXPLORE<\/span>\r\n      <span>\u00a9 2026<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.ayf-hero {\r\n  min-height: 100svh;\r\n  background: #020202;\r\n  isolation: isolate;\r\n}\r\n\r\n.ayf-hero__media {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.ayf-hero__media img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: 68% center;\r\n  transform:\r\n    translate3d(var(--hero-x, 0px), calc(var(--hero-y, 0px) + var(--hero-scroll, 0px)), 0)\r\n    scale(1.065);\r\n  filter: saturate(.78) contrast(1.05);\r\n  transition: transform .2s linear;\r\n  will-change: transform;\r\n}\r\n\r\n.ayf-hero__shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  background:\r\n    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 35%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.08) 100%),\r\n    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 25%, transparent 68%, rgba(0,0,0,.8) 100%);\r\n}\r\n\r\n.ayf-hero__inner {\r\n  position: relative;\r\n  z-index: 5;\r\n  min-height: 100svh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-end;\r\n  padding-top: clamp(100px, 13vh, 150px);\r\n  padding-bottom: 30px;\r\n}\r\n\r\n.ayf-hero__content {\r\n  width: min(860px, 76%);\r\n  padding-bottom: clamp(78px, 10vh, 126px);\r\n}\r\n\r\n.ayf-hero__title {\r\n  margin-top: clamp(20px, 3.5vh, 42px);\r\n}\r\n\r\n.ayf-hero__title span {\r\n  display: block;\r\n}\r\n\r\n.ayf-hero__accent {\r\n  color: var(--ayf-heading);\r\n}\r\n\r\n.ayf-hero__bottom {\r\n  display: grid;\r\n  grid-template-columns: minmax(220px, 420px) auto;\r\n  align-items: end;\r\n  gap: clamp(30px, 7vw, 96px);\r\n  margin-top: clamp(34px, 5vh, 60px);\r\n}\r\n\r\n.ayf-hero__bottom p {\r\n  margin: 0;\r\n  max-width: 420px;\r\n  color: rgba(243,239,232,.68);\r\n  font-size: clamp(14px, 1.25vw, 17px);\r\n  line-height: 1.65;\r\n}\r\n\r\n.ayf-hero__meta {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  align-items: center;\r\n  border-top: 1px solid rgba(255,255,255,.15);\r\n  padding-top: 18px;\r\n  color: rgba(243,239,232,.48);\r\n  font-size: 9px;\r\n  font-weight: 500;\r\n  letter-spacing: .18em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.ayf-hero__meta span:last-child {\r\n  text-align: right;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ayf-hero__media img {\r\n    object-position: 65% center;\r\n  }\r\n\r\n  .ayf-hero__content {\r\n    width: min(760px, 88%);\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ayf-hero {\r\n    min-height: 92svh;\r\n  }\r\n\r\n  .ayf-hero__media img {\r\n    object-position: 64% center;\r\n    transform: scale(1.04);\r\n  }\r\n\r\n  .ayf-hero__shade {\r\n    background:\r\n      linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 62%, rgba(0,0,0,.18) 100%),\r\n      linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.8) 100%);\r\n  }\r\n\r\n  .ayf-hero__inner {\r\n    min-height: 92svh;\r\n    padding-top: 96px;\r\n    padding-bottom: 22px;\r\n  }\r\n\r\n  .ayf-hero__content {\r\n    width: 100%;\r\n    padding-bottom: 58px;\r\n  }\r\n\r\n  .ayf-hero__bottom {\r\n    grid-template-columns: 1fr;\r\n    align-items: start;\r\n    gap: 26px;\r\n    margin-top: 32px;\r\n  }\r\n\r\n  .ayf-hero__bottom p {\r\n    width: min(330px, 88%);\r\n  }\r\n\r\n  .ayf-hero__meta {\r\n    grid-template-columns: 1fr auto;\r\n  }\r\n\r\n  .ayf-hero__meta span:first-child {\r\n    display: none;\r\n  }\r\n\r\n  .ayf-hero__meta span:nth-child(2) {\r\n    text-align: left;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const hero = document.querySelector(\".ayf-hero\");\r\n  if (!hero || hero.dataset.ready === \"true\") return;\r\n  hero.dataset.ready = \"true\";\r\n\r\n  const media = hero.querySelector(\".ayf-hero__media img\");\r\n  const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n  const finePointer = window.matchMedia(\"(pointer: fine)\").matches;\r\n\r\n  if (!reduceMotion && finePointer) {\r\n    hero.addEventListener(\"pointermove\", (event) => {\r\n      const rect = hero.getBoundingClientRect();\r\n      const x = ((event.clientX - rect.left) \/ rect.width - .5) * -12;\r\n      const y = ((event.clientY - rect.top) \/ rect.height - .5) * -8;\r\n      media.style.setProperty(\"--hero-x\", `${x}px`);\r\n      media.style.setProperty(\"--hero-y\", `${y}px`);\r\n    });\r\n\r\n    hero.addEventListener(\"pointerleave\", () => {\r\n      media.style.setProperty(\"--hero-x\", \"0px\");\r\n      media.style.setProperty(\"--hero-y\", \"0px\");\r\n    });\r\n  }\r\n\r\n  if (!reduceMotion) {\r\n    let ticking = false;\r\n\r\n    const updateScroll = () => {\r\n      const rect = hero.getBoundingClientRect();\r\n      const progress = Math.min(Math.max(-rect.top \/ Math.max(rect.height, 1), 0), 1);\r\n      media.style.setProperty(\"--hero-scroll\", `${progress * 34}px`);\r\n      ticking = false;\r\n    };\r\n\r\n    window.addEventListener(\"scroll\", () => {\r\n      if (ticking) return;\r\n      ticking = true;\r\n      requestAnimationFrame(updateScroll);\r\n    }, { passive: true });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec1bee4 elementor-widget elementor-widget-html\" data-id=\"ec1bee4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\nATYAF \u2014 SELECTED WORK INTERACTIF\r\n\r\nPOUR CHAQUE PROJET :\r\n- href : lien YouTube ou future page projet\r\n- data-image : image de couverture carr\u00e9e 1600 \u00d7 1600 px\r\n- data-video : URL directe d'une courte preview MP4, facultative\r\n\r\nLe survol de la liste \u00e0 droite change uniquement la miniature.\r\nLe survol du grand visuel \u00e0 gauche lance la preview MP4.\r\nLe clic ouvre le film complet sur YouTube.\r\n-->\r\n<section class=\"ayf-section ayf-work\" id=\"selected-work\" aria-labelledby=\"ayf-work-title\">\r\n  <div class=\"ayf-shell\">\r\n    <header class=\"ayf-work__header\" data-ayf-reveal>\r\n      <div>\r\n        <p class=\"ayf-kicker\">Selected work<\/p>\r\n        <h2 class=\"ayf-title\" id=\"ayf-work-title\">Frames that<br>leave a trace.<\/h2>\r\n      <\/div>\r\n\r\n      <p class=\"ayf-work__intro\">\r\n        Une s\u00e9lection de productions con\u00e7ues pour raconter,\r\n        captiver et rester en m\u00e9moire.\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <div class=\"ayf-work__layout\">\r\n      <div class=\"ayf-work__preview\" data-ayf-reveal=\"left\">\r\n        <a\r\n          class=\"ayf-work__media\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=nkYUgOcMSgI\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          aria-label=\"Voir Mayna sur YouTube\"\r\n        >\r\n          <img loading=\"lazy\"\r\n            class=\"ayf-work__image\"\r\n            \r\n            alt=\"Mayna \u2014 s\u00e9rie originale produite par Atyaf\"\r\n            width=\"1600\"\r\n            height=\"1600\"\r\n            decoding=\"async\"\r\n           loading=\"lazy\" decoding=\"async\" src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-17_19_04.png\">\r\n          <video\r\n            class=\"ayf-work__video lws-optimize-lazyload\"\r\n            muted\r\n            loop\r\n            playsinline\r\n            preload=\"none\"\r\n            aria-hidden=\"true\"\r\n          ><\/video>\r\n\r\n          <div class=\"ayf-work__media-shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"ayf-work__cursor\" aria-hidden=\"true\">VIEW<\/div>\r\n\r\n          <div class=\"ayf-work__preview-meta\">\r\n            <span class=\"ayf-work__preview-index\">01<\/span>\r\n            <span class=\"ayf-work__preview-category\">S\u00c9RIE \u00b7 FICTION<\/span>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"ayf-work__list\" data-ayf-reveal=\"right\">\r\n        <!-- PROJET 01 \u2014 IMAGE VALID\u00c9E -->\r\n        <a\r\n          class=\"ayf-project is-active\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=nkYUgOcMSgI\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          data-index=\"01\"\r\n          data-title=\"Mayna\"\r\n          data-category=\"S\u00c9RIE \u00b7 FICTION\"\r\n          data-image=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-17_19_04.png\"\r\n          data-image-fallback=\"\"\r\n          data-image-zoom=\"1.025\"\r\n          data-fallback-zoom=\"1.025\"\r\n          data-video=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/MAYNA-Teaser-l-\u0645\u0627\u064a\u0646\u0627.mp4\"\r\n          aria-current=\"true\"\r\n        >\r\n          <span class=\"ayf-project__index\">01<\/span>\r\n          <span class=\"ayf-project__main\">\r\n            <strong>MAYNA<\/strong>\r\n            <small>S\u00c9RIE ORIGINALE \u00b7 FICTION<\/small>\r\n          <\/span>\r\n          <span class=\"ayf-project__year\">2022<\/span>\r\n          <span class=\"ayf-project__arrow\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <!--\r\n        PROJET 02\r\n        Miniature locale carr\u00e9e et preview MP4 int\u00e9gr\u00e9es.\r\n        Le clic ouvre le film complet sur YouTube.\r\n        -->\r\n        <a\r\n          class=\"ayf-project\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=V0NoSxECGXU\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          data-index=\"02\"\r\n          data-title=\"IRON feat. Riyad Mahrez\"\r\n          data-category=\"FILM PUBLICITAIRE\"\r\n          data-image=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Streamthumbnail.png\"\r\n          data-image-fallback=\"\"\r\n          data-image-zoom=\"1.025\"\r\n          data-fallback-zoom=\"1.025\"\r\n          data-video=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Pub-Smartphone-IRON-feat-Ryad-Mahrez.mp4\"\r\n        >\r\n          <span class=\"ayf-project__index\">02<\/span>\r\n          <span class=\"ayf-project__main\">\r\n            <strong>IRON FEAT. RIYAD MAHREZ<\/strong>\r\n            <small>STREAM SYSTEM \u00b7 FILM PUBLICITAIRE<\/small>\r\n          <\/span>\r\n          <span class=\"ayf-project__year\">2016<\/span>\r\n          <span class=\"ayf-project__arrow\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <!--\r\n        PROJET 03\r\n        Miniature locale carr\u00e9e et preview MP4 int\u00e9gr\u00e9es.\r\n        Le clic ouvre le film complet sur YouTube.\r\n        -->\r\n        <a\r\n          class=\"ayf-project\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=nljEE8vjFv4\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          data-index=\"03\"\r\n          data-title=\"Portes MDM\"\r\n          data-category=\"FILM PUBLICITAIRE\"\r\n          data-image=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/MDMthumbnail.png\"\r\n          data-image-fallback=\"\"\r\n          data-image-zoom=\"1.025\"\r\n          data-fallback-zoom=\"1.025\"\r\n          data-video=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Portes-MDM.mp4\"\r\n        >\r\n          <span class=\"ayf-project__index\">03<\/span>\r\n          <span class=\"ayf-project__main\">\r\n            <strong>PORTES MDM<\/strong>\r\n            <small>MDM \u00b7 FILM PUBLICITAIRE<\/small>\r\n          <\/span>\r\n          <span class=\"ayf-project__year\">2019<\/span>\r\n          <span class=\"ayf-project__arrow\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <!--\r\n        PROJET 04\r\n        Miniature locale carr\u00e9e et preview MP4 int\u00e9gr\u00e9es.\r\n        Le clic ouvre le film complet sur YouTube.\r\n        -->\r\n        <a\r\n          class=\"ayf-project\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=wBJfwki9brQ\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          data-index=\"04\"\r\n          data-title=\"Votre sant\u00e9 \u00e0 domicile\"\r\n          data-category=\"FILM PUBLICITAIRE\"\r\n          data-image=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Santedomthumbnail.png\"\r\n          data-image-fallback=\"\"\r\n          data-image-zoom=\"1.025\"\r\n          data-fallback-zoom=\"1.025\"\r\n          data-video=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Votre-sante-a-domicile-pour-une-vie-plus-facile.mp4\"\r\n        >\r\n          <span class=\"ayf-project__index\">04<\/span>\r\n          <span class=\"ayf-project__main\">\r\n            <strong>VOTRE SANT\u00c9 \u00c0 DOMICILE<\/strong>\r\n            <small>SANT\u00c9DOM \u00b7 FILM PUBLICITAIRE<\/small>\r\n          <\/span>\r\n          <span class=\"ayf-project__year\">2017<\/span>\r\n          <span class=\"ayf-project__arrow\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <!--\r\n        PROJET 05\r\n        Miniature locale carr\u00e9e et preview MP4 int\u00e9gr\u00e9es.\r\n        Le clic ouvre le film complet sur YouTube.\r\n        -->\r\n        <a\r\n          class=\"ayf-project\"\r\n          href=\"https:\/\/www.youtube.com\/watch?v=Yg4gcECJwW4\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          data-index=\"05\"\r\n          data-title=\"Arabesque-Art\"\r\n          data-category=\"FILM PUBLICITAIRE\"\r\n          data-image=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Arabesquethumbnail.png\"\r\n          data-image-fallback=\"\"\r\n          data-image-zoom=\"1.025\"\r\n          data-fallback-zoom=\"1.025\"\r\n          data-video=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Meubles-Arabesque-Art.mp4\"\r\n        >\r\n          <span class=\"ayf-project__index\">05<\/span>\r\n          <span class=\"ayf-project__main\">\r\n            <strong>ARABESQUE-ART<\/strong>\r\n            <small>MOBILIER \u00b7 FILM PUBLICITAIRE<\/small>\r\n          <\/span>\r\n          <span class=\"ayf-project__year\">2018<\/span>\r\n          <span class=\"ayf-project__arrow\" aria-hidden=\"true\">\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <a class=\"ayf-link ayf-work__all\" href=\"#\">\r\n          Voir tous les projets\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.ayf-work {\r\n  padding:\r\n    clamp(110px, 12vw, 170px)\r\n    0\r\n    clamp(82px, 8vw, 120px);\r\n  background: var(--ayf-bg);\r\n}\r\n\r\n.ayf-work__header {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr);\r\n  align-items: end;\r\n  gap: clamp(40px, 8vw, 130px);\r\n  margin-bottom: clamp(60px, 8vw, 110px);\r\n}\r\n\r\n.ayf-work__header .ayf-title {\r\n  margin-top: 26px;\r\n}\r\n\r\n.ayf-work__intro {\r\n  margin: 0 0 8px;\r\n  color: var(--ayf-text);\r\n  font-size: 16px;\r\n  line-height: 1.75;\r\n}\r\n\r\n.ayf-work__layout {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, .94fr) minmax(440px, 1.06fr);\r\n  gap: clamp(42px, 7vw, 110px);\r\n  align-items: start;\r\n}\r\n\r\n.ayf-work__preview {\r\n  position: sticky;\r\n  top: 28px;\r\n}\r\n\r\n.ayf-work__media,\r\n.ayf-work__media:hover,\r\n.ayf-work__media:focus {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.ayf-work__media {\r\n  position: relative;\r\n  display: block;\r\n  aspect-ratio: 1 \/ 1;\r\n  background: var(--ayf-bg-3);\r\n  overflow: hidden;\r\n  cursor: none;\r\n}\r\n\r\n.ayf-work__image,\r\n.ayf-work__video {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: none;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  transform: scale(var(--ayf-media-scale, 1.025));\r\n  transition:\r\n    opacity .5s var(--ayf-ease),\r\n    transform 1.1s var(--ayf-ease),\r\n    filter .5s var(--ayf-ease);\r\n}\r\n\r\n.ayf-work__video {\r\n  display: none;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.ayf-work__media.is-video .ayf-work__video {\r\n  display: block;\r\n  opacity: 1;\r\n}\r\n\r\n.ayf-work__media.is-video .ayf-work__image {\r\n  opacity: 0;\r\n}\r\n\r\n.ayf-work__media:hover .ayf-work__image,\r\n.ayf-work__media:hover .ayf-work__video {\r\n  transform: scale(\r\n    calc(var(--ayf-media-scale, 1.025) + .04)\r\n  );\r\n}\r\n\r\n.ayf-work__media.is-switching .ayf-work__image,\r\n.ayf-work__media.is-switching .ayf-work__video {\r\n  opacity: .18;\r\n  filter: blur(5px);\r\n  transform: scale(\r\n    calc(var(--ayf-media-scale, 1.025) + .055)\r\n  );\r\n}\r\n\r\n.ayf-work__media-shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.64) 100%);\r\n  pointer-events: none;\r\n}\r\n\r\n.ayf-work__cursor {\r\n  position: absolute;\r\n  z-index: 4;\r\n  left: 0;\r\n  top: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 72px;\r\n  height: 72px;\r\n  margin: -36px 0 0 -36px;\r\n  border-radius: 50%;\r\n  background: var(--ayf-brand);\r\n  color: #080706;\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: .14em;\r\n  opacity: 0;\r\n  filter: blur(5px);\r\n  pointer-events: none;\r\n  will-change: transform, opacity, filter;\r\n  transition:\r\n    opacity .12s linear,\r\n    filter .18s ease;\r\n}\r\n\r\n.ayf-work__preview-meta {\r\n  position: absolute;\r\n  z-index: 3;\r\n  inset: auto 0 0;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 24px;\r\n  color: rgba(255,255,255,.82);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: .14em;\r\n}\r\n\r\n.ayf-work__list {\r\n  border-top: 1px solid var(--ayf-border-soft);\r\n}\r\n\r\n.ayf-project {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: 44px minmax(0, 1fr) auto 24px;\r\n  gap: 16px;\r\n  align-items: center;\r\n  min-height: 112px;\r\n  border-bottom: 1px solid var(--ayf-border-soft);\r\n  color: var(--ayf-heading);\r\n  text-decoration: none;\r\n  transition: color .35s ease, padding .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-project::before {\r\n  position: absolute;\r\n  inset: auto 0 -1px;\r\n  width: 0;\r\n  height: 1px;\r\n  background: var(--ayf-brand);\r\n  content: \"\";\r\n  transition: width .5s var(--ayf-ease);\r\n}\r\n\r\n.ayf-project:hover,\r\n.ayf-project.is-active {\r\n  color: var(--ayf-brand-alt);\r\n  padding-left: 12px;\r\n}\r\n\r\n.ayf-project:hover::before,\r\n.ayf-project.is-active::before {\r\n  width: 100%;\r\n}\r\n\r\n.ayf-project__index,\r\n.ayf-project__year {\r\n  color: #938D84;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: .13em;\r\n}\r\n\r\n.ayf-project__main {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-width: 0;\r\n  gap: 7px;\r\n}\r\n\r\n.ayf-project__main strong {\r\n  overflow: hidden;\r\n  font-family: var(--ayf-heading-font);\r\n  font-size: clamp(27px, 3vw, 42px);\r\n  font-weight: 600;\r\n  line-height: .95;\r\n  letter-spacing: -.025em;\r\n  text-overflow: ellipsis;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ayf-project__main small {\r\n  color: #8F8981;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .12em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.ayf-project__arrow {\r\n  display: inline-flex;\r\n  width: 18px;\r\n  height: 18px;\r\n  color: var(--ayf-muted);\r\n  transition:\r\n    transform .35s var(--ayf-ease),\r\n    color .35s ease;\r\n}\r\n\r\n.ayf-project__arrow svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: visible;\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.65;\r\n  stroke-linecap: square;\r\n  stroke-linejoin: miter;\r\n}\r\n\r\n.ayf-project:hover .ayf-project__arrow,\r\n.ayf-project.is-active .ayf-project__arrow {\r\n  color: var(--ayf-brand);\r\n  transform: translate3d(4px, -4px, 0);\r\n}\r\n\r\n.ayf-work__all {\r\n  margin-top: 42px;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ayf-work__layout {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ayf-work__preview {\r\n    position: relative;\r\n    top: 0;\r\n  }\r\n\r\n  .ayf-work__media {\r\n    aspect-ratio: 1 \/ 1;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ayf-work {\r\n    padding: 94px 0;\r\n  }\r\n\r\n  .ayf-work__header {\r\n    grid-template-columns: 1fr;\r\n    gap: 26px;\r\n    margin-bottom: 54px;\r\n  }\r\n\r\n  .ayf-work__header .ayf-title {\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .ayf-work__layout {\r\n    gap: 34px;\r\n  }\r\n\r\n  .ayf-work__media {\r\n    aspect-ratio: 4 \/ 5;\r\n    cursor: default;\r\n  }\r\n\r\n  .ayf-work__cursor {\r\n    display: none;\r\n  }\r\n\r\n  .ayf-project {\r\n    grid-template-columns: 32px minmax(0, 1fr) auto;\r\n    min-height: 92px;\r\n    gap: 11px;\r\n  }\r\n\r\n  .ayf-project__year {\r\n    display: none;\r\n  }\r\n\r\n  .ayf-project__main strong {\r\n    font-size: clamp(25px, 8.6vw, 34px);\r\n  }\r\n\r\n  .ayf-project__arrow {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const root = document.querySelector(\".ayf-work\");\r\n  if (!root || root.dataset.ready === \"true\") return;\r\n  root.dataset.ready = \"true\";\r\n\r\n  const items = [...root.querySelectorAll(\".ayf-project\")];\r\n  const media = root.querySelector(\".ayf-work__media\");\r\n  const image = root.querySelector(\".ayf-work__image\");\r\n  const video = root.querySelector(\".ayf-work__video\");\r\n  const previewIndex = root.querySelector(\".ayf-work__preview-index\");\r\n  const previewCategory = root.querySelector(\".ayf-work__preview-category\");\r\n  const cursor = root.querySelector(\".ayf-work__cursor\");\r\n  const previewLink = root.querySelector(\".ayf-work__media\");\r\n\r\n  image.style.setProperty(\r\n    \"--ayf-media-scale\",\r\n    \"1.025\"\r\n  );\r\n\r\n  video.style.setProperty(\r\n    \"--ayf-media-scale\",\r\n    \"1.025\"\r\n  );\r\n\r\n  const activate = (item) => {\r\n    if (!item) return;\r\n\r\n    items.forEach((project) => {\r\n      project.classList.remove(\"is-active\");\r\n      project.removeAttribute(\"aria-current\");\r\n    });\r\n\r\n    item.classList.add(\"is-active\");\r\n    item.setAttribute(\"aria-current\", \"true\");\r\n    media.classList.add(\"is-switching\");\r\n\r\n    const imageUrl = item.dataset.image || \"\";\r\n    const imageFallback =\r\n      item.dataset.imageFallback || \"\";\r\n    const imageZoom = Number.parseFloat(\r\n      item.dataset.imageZoom || \"1.025\"\r\n    );\r\n    const fallbackZoom = Number.parseFloat(\r\n      item.dataset.fallbackZoom || \"1.38\"\r\n    );\r\n    const videoUrl = item.dataset.video || \"\";\r\n    const projectTitle =\r\n      item.dataset.title || \"Projet Atyaf\";\r\n    const projectLink =\r\n      item.getAttribute(\"href\") || \"#\";\r\n\r\n    window.setTimeout(() => {\r\n      previewIndex.textContent = item.dataset.index || \"\";\r\n      previewCategory.textContent = item.dataset.category || \"\";\r\n      previewLink.href = projectLink;\r\n      previewLink.setAttribute(\r\n        \"aria-label\",\r\n        `Voir ${projectTitle} sur YouTube`\r\n      );\r\n      image.alt =\r\n        `${projectTitle} \u2014 aper\u00e7u du projet Atyaf`;\r\n\r\n      \/*\r\n       * La version maxresdefault est en 16:9 et se recadre\r\n       * proprement dans le conteneur carr\u00e9.\r\n       *\r\n       * Certaines anciennes vid\u00e9os ne poss\u00e8dent pas de\r\n       * miniature maxres. Dans ce cas, hqdefault est utilis\u00e9\r\n       * avec un zoom plus important afin de supprimer les\r\n       * bandes int\u00e9gr\u00e9es dans la miniature 4:3.\r\n       *\/\r\n      const applyImage = (\r\n        source,\r\n        fallback,\r\n        normalScale,\r\n        backupScale\r\n      ) => {\r\n        if (!source) {\r\n          media.classList.remove(\"is-switching\");\r\n          return;\r\n        }\r\n\r\n        const loader = new Image();\r\n\r\n        loader.onload = () => {\r\n          if (\r\n            loader.naturalWidth < 600 &&\r\n            fallback &&\r\n            source !== fallback\r\n          ) {\r\n            applyImage(\r\n              fallback,\r\n              \"\",\r\n              backupScale,\r\n              backupScale\r\n            );\r\n            return;\r\n          }\r\n\r\n          image.style.setProperty(\r\n            \"--ayf-media-scale\",\r\n            String(normalScale)\r\n          );\r\n\r\n          image.src = source;\r\n          media.classList.remove(\"is-switching\");\r\n        };\r\n\r\n        loader.onerror = () => {\r\n          if (\r\n            fallback &&\r\n            source !== fallback\r\n          ) {\r\n            applyImage(\r\n              fallback,\r\n              \"\",\r\n              backupScale,\r\n              backupScale\r\n            );\r\n            return;\r\n          }\r\n\r\n          media.classList.remove(\"is-switching\");\r\n        };\r\n\r\n        loader.src = source;\r\n      };\r\n\r\n      applyImage(\r\n        imageUrl,\r\n        imageFallback,\r\n        imageZoom,\r\n        fallbackZoom\r\n      );\r\n\r\n      \/*\r\n       * IMPORTANT :\r\n       * Le survol de la liste \u00e0 droite ne doit afficher\r\n       * que la miniature. La vid\u00e9o ne se lance que lorsque\r\n       * l'utilisateur survole le grand visuel \u00e0 gauche.\r\n       *\/\r\n      video.pause();\r\n      video.currentTime = 0;\r\n      video.removeAttribute(\"src\");\r\n      video.load();\r\n      media.classList.remove(\"is-video\");\r\n    }, 220);\r\n  };\r\n\r\n  items.forEach((item) => {\r\n    item.addEventListener(\"mouseenter\", () => activate(item));\r\n    item.addEventListener(\"focus\", () => activate(item));\r\n  });\r\n\r\n  \/*\r\n   * La vid\u00e9o ne se lance que lorsque la souris survole\r\n   * le grand visuel de gauche.\r\n   *\/\r\n  media.addEventListener(\"mouseenter\", () => {\r\n    const activeProject =\r\n      root.querySelector(\".ayf-project.is-active\");\r\n\r\n    const activeVideoUrl =\r\n      activeProject?.dataset.video || \"\";\r\n\r\n    if (!activeVideoUrl) {\r\n      return;\r\n    }\r\n\r\n    if (video.getAttribute(\"src\") !== activeVideoUrl) {\r\n      video.setAttribute(\"src\", activeVideoUrl);\r\n      video.load();\r\n    }\r\n\r\n    video.style.setProperty(\r\n      \"--ayf-media-scale\",\r\n      \"1.025\"\r\n    );\r\n\r\n    media.classList.add(\"is-video\");\r\n    video.currentTime = 0;\r\n    video.play().catch(() => {});\r\n  });\r\n\r\n  media.addEventListener(\"mouseleave\", () => {\r\n    if (!video.getAttribute(\"src\")) {\r\n      return;\r\n    }\r\n\r\n    video.pause();\r\n    video.currentTime = 0;\r\n    media.classList.remove(\"is-video\");\r\n  });\r\n\r\n  if (window.matchMedia(\"(pointer: fine)\").matches) {\r\n    media.addEventListener(\"pointermove\", (event) => {\r\n      const rect = media.getBoundingClientRect();\r\n\r\n      const x = event.clientX - rect.left;\r\n      const y = event.clientY - rect.top;\r\n\r\n      \/*\r\n       * Le cercle reste net au centre puis dispara\u00eet progressivement\r\n       * avant d'\u00eatre coup\u00e9 par les limites du visuel.\r\n       *\/\r\n      const edgeDistance = Math.min(\r\n        x,\r\n        y,\r\n        rect.width - x,\r\n        rect.height - y\r\n      );\r\n\r\n      const fadeZone = 62;\r\n      const visibility = Math.max(\r\n        0,\r\n        Math.min(1, edgeDistance \/ fadeZone)\r\n      );\r\n\r\n      const scale = .76 + visibility * .24;\r\n      const blur = (1 - visibility) * 5;\r\n\r\n      cursor.style.opacity = visibility.toFixed(3);\r\n      cursor.style.filter = `blur(${blur.toFixed(2)}px)`;\r\n      cursor.style.transform = `\r\n        translate3d(${x}px, ${y}px, 0)\r\n        scale(${scale})\r\n      `;\r\n    });\r\n\r\n    media.addEventListener(\"pointerleave\", () => {\r\n      cursor.style.opacity = \"0\";\r\n      cursor.style.filter = \"blur(5px)\";\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-157f2c3 elementor-widget elementor-widget-html\" data-id=\"157f2c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ATYAF \u2014 ABOUT \/ STUDIO -->\r\n<section class=\"ayf-section ayf-about\" id=\"studio\" aria-labelledby=\"ayf-about-title\">\r\n  <div class=\"ayf-shell\">\r\n    <div class=\"ayf-about__grid\">\r\n      <div class=\"ayf-about__copy\">\r\n        <p class=\"ayf-kicker\" data-ayf-reveal>About Atyaf<\/p>\r\n\r\n        <h2 class=\"ayf-title\" id=\"ayf-about-title\" data-ayf-reveal style=\"--ayf-delay:80ms\">\r\n          A production studio<br>built around stories.\r\n        <\/h2>\r\n\r\n        <div class=\"ayf-about__paragraphs\">\r\n          <p class=\"ayf-copy\" data-ayf-reveal style=\"--ayf-delay:160ms\">\r\n            Atyaf est une soci\u00e9t\u00e9 de production audiovisuelle bas\u00e9e \u00e0 Alger.\r\n            Nous transformons les id\u00e9es en r\u00e9cits visuels, de la pr\u00e9paration\r\n            du tournage jusqu\u2019\u00e0 l\u2019image finale.\r\n          <\/p>\r\n\r\n          <p class=\"ayf-copy\" data-ayf-reveal style=\"--ayf-delay:220ms\">\r\n            Notre approche associe exigence de production, sens de l\u2019image\r\n            et attention port\u00e9e au rythme, afin de cr\u00e9er des \u0153uvres capables\r\n            d\u2019exister au-del\u00e0 de leur format.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ayf-about__signature\" data-ayf-reveal style=\"--ayf-delay:280ms\">\r\n          <span>ATYAF PRODUCTION<\/span>\r\n          <span>BAB EZZOUAR \u00b7 ALGIERS<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <figure class=\"ayf-about__visual\" data-ayf-reveal=\"right\">\r\n        <div class=\"ayf-about__frame\">\r\n          <img loading=\"lazy\"\r\n            src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-00_47_38.png\"\r\n            alt=\"Silhouette dans un environnement de production audiovisuelle\"\r\n            width=\"1672\"\r\n            height=\"941\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n          <div class=\"ayf-about__image-shade\" aria-hidden=\"true\"><\/div>\r\n          <span class=\"ayf-about__frame-index\">02 \/ STUDIO<\/span>\r\n        <\/div>\r\n        <figcaption>\r\n          Ideas become frames.<br>\r\n          Frames become stories.\r\n        <\/figcaption>\r\n      <\/figure>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ayf-about__marquee\" aria-hidden=\"true\">\r\n    <div>\r\n      <span>PRODUCTION<\/span><i>\u00b7<\/i>\r\n      <span>FICTION<\/span><i>\u00b7<\/i>\r\n      <span>IMAGE<\/span><i>\u00b7<\/i>\r\n      <span>POST-PRODUCTION<\/span><i>\u00b7<\/i>\r\n      <span>ALGIERS<\/span><i>\u00b7<\/i>\r\n      <span>PRODUCTION<\/span><i>\u00b7<\/i>\r\n      <span>FICTION<\/span><i>\u00b7<\/i>\r\n      <span>IMAGE<\/span><i>\u00b7<\/i>\r\n      <span>POST-PRODUCTION<\/span><i>\u00b7<\/i>\r\n      <span>ALGIERS<\/span><i>\u00b7<\/i>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.ayf-about {\r\n  padding: clamp(82px, 8vw, 115px) 0 0;\r\n  background: var(--ayf-bg-2);\r\n}\r\n\r\n.ayf-about__grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);\r\n  gap: clamp(56px, 10vw, 150px);\r\n  align-items: center;\r\n}\r\n\r\n.ayf-about__copy .ayf-title {\r\n  margin-top: 28px;\r\n}\r\n\r\n.ayf-about__paragraphs {\r\n  display: grid;\r\n  gap: 22px;\r\n  width: min(100%, 610px);\r\n  margin-top: clamp(40px, 6vw, 74px);\r\n}\r\n\r\n.ayf-about__signature {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 16px 34px;\r\n  margin-top: 50px;\r\n  padding-top: 20px;\r\n  border-top: 1px solid var(--ayf-border-soft);\r\n  color: #918B83;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .145em;\r\n}\r\n\r\n.ayf-about__visual {\r\n  margin: 0;\r\n}\r\n\r\n.ayf-about__frame {\r\n  position: relative;\r\n  aspect-ratio: 4 \/ 5;\r\n  overflow: hidden;\r\n  background: var(--ayf-bg-3);\r\n}\r\n\r\n.ayf-about__frame img {\r\n  width: 100%;\r\n  height: 115%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  transform: translate3d(0, var(--about-y, -7%), 0) scale(1.03);\r\n  filter: saturate(.72) contrast(1.05);\r\n  will-change: transform;\r\n}\r\n\r\n.ayf-about__image-shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  background:\r\n    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38)),\r\n    linear-gradient(90deg, rgba(0,0,0,.2), transparent 46%);\r\n}\r\n\r\n.ayf-about__frame-index {\r\n  position: absolute;\r\n  left: 24px;\r\n  bottom: 22px;\r\n  color: rgba(255,255,255,.78);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  letter-spacing: .15em;\r\n}\r\n\r\n.ayf-about__visual figcaption {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  margin-top: 18px;\r\n  color: #918B83;\r\n  font-size: 11px;\r\n  line-height: 1.65;\r\n  letter-spacing: .11em;\r\n  text-align: right;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.ayf-about__marquee {\r\n  margin-top: clamp(72px, 8vw, 112px);\r\n  border-top: 1px solid var(--ayf-border-soft);\r\n  border-bottom: 1px solid var(--ayf-border-soft);\r\n  overflow: hidden;\r\n}\r\n\r\n.ayf-about__marquee > div {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n  width: max-content;\r\n  padding: 24px 0;\r\n  animation: ayfAboutMarquee 38s linear infinite;\r\n  color: rgba(243,239,232,.24);\r\n  font-family: var(--ayf-heading-font);\r\n  font-size: clamp(26px, 3.5vw, 48px);\r\n  font-weight: 600;\r\n  letter-spacing: -.02em;\r\n}\r\n\r\n.ayf-about__marquee i {\r\n  color: var(--ayf-brand);\r\n  font-style: normal;\r\n}\r\n\r\n@keyframes ayfAboutMarquee {\r\n  to { transform: translateX(-50%); }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .ayf-about__grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ayf-about__visual {\r\n    width: min(100%, 640px);\r\n    margin-left: auto;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ayf-about {\r\n    padding-top: 94px;\r\n  }\r\n\r\n  .ayf-about__grid {\r\n    gap: 54px;\r\n  }\r\n\r\n  .ayf-about__paragraphs {\r\n    margin-top: 34px;\r\n  }\r\n\r\n  .ayf-about__signature {\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n\r\n  .ayf-about__frame {\r\n    aspect-ratio: 4 \/ 5;\r\n  }\r\n\r\n  .ayf-about__marquee {\r\n    margin-top: 82px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const root = document.querySelector(\".ayf-about\");\r\n  if (!root || root.dataset.ready === \"true\") return;\r\n  root.dataset.ready = \"true\";\r\n\r\n  const image = root.querySelector(\".ayf-about__frame img\");\r\n  if (!image || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\r\n\r\n  let ticking = false;\r\n\r\n  const update = () => {\r\n    const frame = image.parentElement.getBoundingClientRect();\r\n    const viewport = window.innerHeight || 1;\r\n    const progress = Math.min(Math.max((viewport - frame.top) \/ (viewport + frame.height), 0), 1);\r\n    image.style.setProperty(\"--about-y\", `${-12 + progress * 18}%`);\r\n    ticking = false;\r\n  };\r\n\r\n  window.addEventListener(\"scroll\", () => {\r\n    if (ticking) return;\r\n    ticking = true;\r\n    requestAnimationFrame(update);\r\n  }, { passive: true });\r\n\r\n  update();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e029743 elementor-widget elementor-widget-html\" data-id=\"e029743\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nATYAF \u2014 SERVICES\nLes quatre intitul\u00e9s restent volontairement limit\u00e9s aux capacit\u00e9s\npubliquement document\u00e9es. Validation client requise avant publication.\n-->\n<section class=\"ayf-section ayf-services\" id=\"services\" aria-labelledby=\"ayf-services-title\">\n  <div class=\"ayf-shell\">\n    <header class=\"ayf-services__header\">\n      <div data-ayf-reveal>\n        <p class=\"ayf-kicker\">Services<\/p>\n        <h2 class=\"ayf-title\" id=\"ayf-services-title\">From production<br>to final cut.<\/h2>\n      <\/div>\n\n      <p class=\"ayf-copy ayf-services__intro\" data-ayf-reveal=\"right\">\n        Une cha\u00eene de production pens\u00e9e pour pr\u00e9server la coh\u00e9rence\n        du r\u00e9cit, du premier choix cr\u00e9atif jusqu\u2019\u00e0 la livraison.\n      <\/p>\n    <\/header>\n\n    <div class=\"ayf-services__list\" data-ayf-reveal>\n      <article class=\"ayf-service is-open\">\n        <button class=\"ayf-service__button\" type=\"button\" aria-expanded=\"true\">\n          <span class=\"ayf-service__index\">01<\/span>\n          <span class=\"ayf-service__name\">Production audiovisuelle<\/span>\n          <span class=\"ayf-service__symbol\" aria-hidden=\"true\"><\/span>\n        <\/button>\n        <div class=\"ayf-service__detail\">\n          <div>\n            <p>\n              Organisation et pilotage de productions audiovisuelles :\n              pr\u00e9paration, coordination des \u00e9quipes, logistique de tournage\n              et suivi du projet jusqu\u2019\u00e0 sa finalisation.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"ayf-service\">\n        <button class=\"ayf-service__button\" type=\"button\" aria-expanded=\"false\">\n          <span class=\"ayf-service__index\">02<\/span>\n          <span class=\"ayf-service__name\">S\u00e9ries & fiction TV<\/span>\n          <span class=\"ayf-service__symbol\" aria-hidden=\"true\"><\/span>\n        <\/button>\n        <div class=\"ayf-service__detail\">\n          <div>\n            <p>\n              Production de formats narratifs et de fiction, avec une attention\n              particuli\u00e8re port\u00e9e \u00e0 l\u2019univers, au rythme et \u00e0 la continuit\u00e9\n              visuelle du projet.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"ayf-service\">\n        <button class=\"ayf-service__button\" type=\"button\" aria-expanded=\"false\">\n          <span class=\"ayf-service__index\">03<\/span>\n          <span class=\"ayf-service__name\">Tournage & prise de vue<\/span>\n          <span class=\"ayf-service__symbol\" aria-hidden=\"true\"><\/span>\n        <\/button>\n        <div class=\"ayf-service__detail\">\n          <div>\n            <p>\n              Mise en image sur le terrain, coordination des besoins techniques\n              et captation con\u00e7ue pour servir l\u2019intention du film plut\u00f4t que\n              multiplier les effets.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"ayf-service\">\n        <button class=\"ayf-service__button\" type=\"button\" aria-expanded=\"false\">\n          <span class=\"ayf-service__index\">04<\/span>\n          <span class=\"ayf-service__name\">Montage & post-production<\/span>\n          <span class=\"ayf-service__symbol\" aria-hidden=\"true\"><\/span>\n        <\/button>\n        <div class=\"ayf-service__detail\">\n          <div>\n            <p>\n              S\u00e9lection, assemblage et finition des images afin de construire\n              un r\u00e9cit fluide, lisible et adapt\u00e9 au format de diffusion.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n.ayf-services {\n  padding:\n    clamp(78px, 8vw, 115px)\n    0\n    clamp(92px, 9vw, 132px);\n  background: var(--ayf-bg);\n}\n\n.ayf-services__header {\n  display: grid;\n  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr);\n  gap: clamp(42px, 9vw, 140px);\n  align-items: end;\n  margin-bottom: clamp(62px, 8vw, 110px);\n}\n\n.ayf-services__header .ayf-title {\n  margin-top: 28px;\n}\n\n.ayf-services__intro {\n  max-width: 470px;\n  margin-bottom: 8px;\n}\n\n.ayf-services__list {\n  border-top: 1px solid var(--ayf-border-soft);\n}\n\n.ayf-service {\n  position: relative;\n  border-bottom: 1px solid var(--ayf-border-soft);\n}\n\n.ayf-service::before {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: 2px;\n  background: var(--ayf-brand);\n  transform: scaleY(0);\n  transform-origin: bottom;\n  content: \"\";\n  transition: transform .5s var(--ayf-ease);\n}\n\n.ayf-service.is-open::before {\n  transform: scaleY(1);\n}\n\n.ayf-services .ayf-service__button {\n  display: grid;\n  grid-template-columns: 64px minmax(0, 1fr) 38px;\n  gap: 18px;\n  align-items: center;\n  width: 100%;\n  min-height: 128px;\n  padding: 0 20px;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  color: var(--ayf-heading) !important;\n  text-align: left;\n  text-shadow: none !important;\n  cursor: pointer;\n  transition: background .45s var(--ayf-ease);\n}\n\n.ayf-services .ayf-service__button:hover,\n.ayf-services .ayf-service__button:focus,\n.ayf-services .ayf-service__button:active {\n  border: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  text-shadow: none !important;\n  outline: none;\n  color: var(--ayf-heading) !important;\n}\n\n.ayf-services .ayf-service__button:hover,\n.ayf-services .ayf-service.is-open .ayf-service__button {\n  background:\n    linear-gradient(\n      90deg,\n      rgba(199,154,94,.075) 0%,\n      rgba(199,154,94,.025) 45%,\n      transparent 82%\n    ) !important;\n}\n\n.ayf-service__index {\n  color: #918B83;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: .145em;\n}\n\n.ayf-service__name {\n  font-family: var(--ayf-heading-font);\n  font-size: clamp(38px, 5.3vw, 76px);\n  font-weight: 600;\n  line-height: .88;\n  letter-spacing: -.03em;\n  text-transform: uppercase;\n  transition: color .35s ease, transform .45s var(--ayf-ease);\n}\n\n.ayf-services .ayf-service__button:hover .ayf-service__name,\n.ayf-services .ayf-service.is-open .ayf-service__name {\n  color: var(--ayf-brand-alt) !important;\n  transform: translateX(12px);\n}\n\n.ayf-services .ayf-service__button:hover .ayf-service__index,\n.ayf-services .ayf-service.is-open .ayf-service__index,\n.ayf-services .ayf-service__button:hover .ayf-service__symbol,\n.ayf-services .ayf-service.is-open .ayf-service__symbol {\n  color: var(--ayf-brand-alt) !important;\n}\n\n.ayf-service__symbol {\n  position: relative;\n  width: 24px;\n  height: 24px;\n}\n\n.ayf-service__symbol::before,\n.ayf-service__symbol::after {\n  position: absolute;\n  left: 2px;\n  top: 11px;\n  width: 20px;\n  height: 1px;\n  background: currentColor;\n  content: \"\";\n  transition: transform .4s var(--ayf-ease);\n}\n\n.ayf-service__symbol::after {\n  transform: rotate(90deg);\n}\n\n.ayf-service.is-open .ayf-service__symbol::after {\n  transform: rotate(0);\n}\n\n.ayf-service__detail {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows .55s var(--ayf-ease);\n}\n\n.ayf-service__detail > div {\n  overflow: hidden;\n}\n\n.ayf-service.is-open .ayf-service__detail {\n  grid-template-rows: 1fr;\n}\n\n.ayf-service__detail p {\n  width: min(600px, calc(100% - 126px));\n  margin: 0 0 42px 102px;\n  color: #B5AEA4;\n  font-size: 16px;\n  line-height: 1.75;\n}\n\n@media (max-width: 767px) {\n  .ayf-services {\n    padding: 94px 0;\n  }\n\n  .ayf-services__header {\n    grid-template-columns: 1fr;\n    gap: 28px;\n    margin-bottom: 54px;\n  }\n\n  .ayf-services .ayf-service__button {\n    grid-template-columns: 34px minmax(0, 1fr) 26px;\n    gap: 10px;\n    min-height: 102px;\n    padding: 0 4px;\n  }\n\n  .ayf-service__name {\n    font-size: clamp(34px, 11.5vw, 54px);\n  }\n\n  .ayf-services .ayf-service__button:hover .ayf-service__name,\n  .ayf-services .ayf-service.is-open .ayf-service__name {\n    transform: translateX(5px);\n  }\n\n  .ayf-service__detail p {\n    width: calc(100% - 44px);\n    margin: 0 0 30px 44px;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  const root = document.querySelector(\".ayf-services\");\n  if (!root || root.dataset.ready === \"true\") return;\n  root.dataset.ready = \"true\";\n\n  const services = [...root.querySelectorAll(\".ayf-service\")];\n\n  const openService = (service) => {\n    services.forEach((item) => {\n      const isCurrent = item === service;\n      item.classList.toggle(\"is-open\", isCurrent);\n      item.querySelector(\"button\").setAttribute(\"aria-expanded\", String(isCurrent));\n    });\n  };\n\n  services.forEach((service) => {\n    const button = service.querySelector(\"button\");\n    button.addEventListener(\"click\", () => openService(service));\n\n    if (window.matchMedia(\"(pointer: fine)\").matches) {\n      service.addEventListener(\"mouseenter\", () => openService(service));\n    }\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-efd7f8d elementor-widget elementor-widget-html\" data-id=\"efd7f8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ATYAF \u2014 PROCESS \/ APPROACH -->\n<section class=\"ayf-section ayf-process\" aria-labelledby=\"ayf-process-title\">\n  <div class=\"ayf-shell\">\n    <header class=\"ayf-process__header\" data-ayf-reveal>\n      <p class=\"ayf-kicker\">Our approach<\/p>\n      <h2 class=\"ayf-title\" id=\"ayf-process-title\">One vision.<br>Every stage.<\/h2>\n    <\/header>\n\n    <div class=\"ayf-process__grid\">\n      <article class=\"ayf-process__step\" data-step=\"01\" data-ayf-reveal style=\"--ayf-delay:0ms\">\n        <span>01<\/span>\n        <h3>Define<\/h3>\n        <p>Clarifier l\u2019intention, le format, les contraintes et la direction du r\u00e9cit.<\/p>\n      <\/article>\n\n      <article class=\"ayf-process__step\" data-step=\"02\" data-ayf-reveal style=\"--ayf-delay:90ms\">\n        <span>02<\/span>\n        <h3>Prepare<\/h3>\n        <p>Structurer la production, les \u00e9quipes, les lieux et les moyens techniques.<\/p>\n      <\/article>\n\n      <article class=\"ayf-process__step\" data-step=\"03\" data-ayf-reveal style=\"--ayf-delay:180ms\">\n        <span>03<\/span>\n        <h3>Shoot<\/h3>\n        <p>Construire chaque plan autour de l\u2019\u00e9motion, de la lumi\u00e8re et du rythme.<\/p>\n      <\/article>\n\n      <article class=\"ayf-process__step\" data-step=\"04\" data-ayf-reveal style=\"--ayf-delay:270ms\">\n        <span>04<\/span>\n        <h3>Finish<\/h3>\n        <p>Monter, affiner et livrer une \u0153uvre coh\u00e9rente dans tous ses formats.<\/p>\n      <\/article>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n.ayf-process {\n  padding:\n    clamp(78px, 8vw, 112px)\n    0\n    clamp(62px, 6vw, 88px);\n  background: var(--ayf-bg-3);\n}\n\n.ayf-process__header {\n  display: flex;\n  justify-content: space-between;\n  gap: 50px;\n  align-items: flex-end;\n  margin-bottom: clamp(58px, 8vw, 100px);\n}\n\n.ayf-process__header .ayf-title {\n  text-align: right;\n}\n\n.ayf-process__grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border-top: 1px solid var(--ayf-border-soft);\n  border-bottom: 1px solid var(--ayf-border-soft);\n}\n\n.ayf-process__step {\n  position: relative;\n  min-height: 310px;\n  padding: 34px 30px 42px;\n  border-right: 1px solid var(--ayf-border-soft);\n  overflow: hidden;\n  background: transparent;\n  box-shadow: inset 0 0 0 rgba(199,154,94,0);\n  transition:\n    background .55s var(--ayf-ease),\n    box-shadow .55s var(--ayf-ease);\n}\n\n.ayf-process__step:last-child {\n  border-right: 0;\n}\n\n\/* Grand num\u00e9ro fant\u00f4me *\/\n.ayf-process__step::before {\n  position: absolute;\n  right: 18px;\n  bottom: -28px;\n  z-index: 0;\n  content: attr(data-step);\n  color: rgba(243,239,232,.035);\n  font-family: var(--ayf-heading-font);\n  font-size: clamp(128px, 14vw, 220px);\n  font-weight: 700;\n  line-height: .72;\n  letter-spacing: -.06em;\n  opacity: 0;\n  transform: translate3d(0, 26px, 0);\n  transition:\n    opacity .55s var(--ayf-ease),\n    transform .65s var(--ayf-ease);\n  pointer-events: none;\n}\n\n\/* Voile vertical subtil *\/\n.ayf-process__step::after {\n  position: absolute;\n  inset: auto 0 0;\n  z-index: 0;\n  height: 0;\n  background:\n    linear-gradient(\n      180deg,\n      transparent 0%,\n      rgba(199,154,94,.035) 45%,\n      rgba(199,154,94,.12) 100%\n    );\n  content: \"\";\n  transition: height .65s var(--ayf-ease);\n  pointer-events: none;\n}\n\n.ayf-process__step:hover {\n  background: rgba(255,255,255,.012);\n  box-shadow: inset 0 -2px 0 rgba(199,154,94,.82);\n}\n\n.ayf-process__step:hover::before {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n\n.ayf-process__step:hover::after {\n  height: 82%;\n}\n\n.ayf-process__step > * {\n  position: relative;\n  z-index: 1;\n}\n\n.ayf-process__step > span {\n  color: var(--ayf-brand);\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: .145em;\n  transition:\n    color .35s ease,\n    transform .45s var(--ayf-ease);\n}\n\n.ayf-process__step h3 {\n  margin: 84px 0 24px;\n  color: var(--ayf-heading);\n  font-family: var(--ayf-heading-font);\n  font-size: clamp(38px, 4vw, 58px);\n  font-weight: 600;\n  line-height: .9;\n  letter-spacing: -.03em;\n  text-transform: uppercase;\n  transition:\n    transform .48s var(--ayf-ease),\n    color .35s ease;\n}\n\n.ayf-process__step p {\n  margin: 0;\n  color: #918B83;\n  font-size: 15.5px;\n  line-height: 1.72;\n  opacity: .78;\n  transform: translate3d(0, 4px, 0);\n  transition:\n    opacity .45s ease,\n    color .45s ease,\n    transform .5s var(--ayf-ease);\n}\n\n.ayf-process__step:hover > span {\n  color: var(--ayf-brand-alt);\n  transform: translate3d(5px, 0, 0);\n}\n\n.ayf-process__step:hover h3 {\n  color: var(--ayf-brand-alt);\n  transform: translate3d(0, -9px, 0);\n}\n\n.ayf-process__step:hover p {\n  color: #B9B2A8;\n  opacity: 1;\n  transform: translate3d(0, -3px, 0);\n}\n\n@media (max-width: 900px) {\n  .ayf-process__grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .ayf-process__step:nth-child(2) {\n    border-right: 0;\n  }\n\n  .ayf-process__step:nth-child(-n+2) {\n    border-bottom: 1px solid var(--ayf-border-soft);\n  }\n}\n\n@media (max-width: 767px) {\n  .ayf-process {\n    padding: 88px 0;\n  }\n\n  .ayf-process__header {\n    display: block;\n    margin-bottom: 50px;\n  }\n\n  .ayf-process__header .ayf-title {\n    margin-top: 24px;\n    text-align: left;\n  }\n\n  .ayf-process__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .ayf-process__step,\n  .ayf-process__step:nth-child(2) {\n    min-height: 230px;\n    border-right: 0;\n    border-bottom: 1px solid var(--ayf-border-soft);\n  }\n\n  .ayf-process__step:last-child {\n    border-bottom: 0;\n  }\n\n  .ayf-process__step h3 {\n    margin-top: 52px;\n  }\n}\n<\/style>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f31170e elementor-widget elementor-widget-html\" data-id=\"f31170e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\nATYAF \u2014 ALGIERS SHOWCASE V4\r\nCorrection :\r\n- section en pleine hauteur d\u2019\u00e9cran ;\r\n- image couvrant enti\u00e8rement la section ;\r\n- aucun fond noir interne visible ;\r\n- bouton Play SVG propre ;\r\n- parallax limit\u00e9 pour ne jamais d\u00e9couvrir le fond.\r\n-->\r\n<section class=\"ayf-section ayf-fullbleed ayf-algiers\" aria-labelledby=\"ayf-algiers-title\">\r\n  <div class=\"ayf-algiers__media\" aria-hidden=\"true\">\r\n    <img loading=\"lazy\"\r\n      src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-00_47_50.png\"\r\n      alt=\"\"\r\n      width=\"1916\"\r\n      height=\"821\"\r\n      loading=\"lazy\"\r\n      decoding=\"async\"\r\n    >\r\n  <\/div>\r\n\r\n  <div class=\"ayf-algiers__shade\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ayf-noise\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ayf-shell ayf-algiers__inner\">\r\n    <p class=\"ayf-kicker\" data-ayf-reveal>Made in Algiers<\/p>\r\n\r\n    <h2\r\n      class=\"ayf-title\"\r\n      id=\"ayf-algiers-title\"\r\n      data-ayf-reveal\r\n      style=\"--ayf-delay:90ms\"\r\n    >\r\n      Stories made here.<br>\r\n      Built to travel.\r\n    <\/h2>\r\n\r\n    <div\r\n      class=\"ayf-algiers__footer\"\r\n      data-ayf-reveal\r\n      style=\"--ayf-delay:180ms\"\r\n    >\r\n      <p>\r\n        Des productions ancr\u00e9es \u00e0 Alger, con\u00e7ues avec une vision\r\n        cin\u00e9matographique et pens\u00e9es pour traverser les formats.\r\n      <\/p>\r\n\r\n      <a\r\n        class=\"ayf-algiers__play\"\r\n        href=\"https:\/\/vimeo.com\/282330005\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n        aria-label=\"Voir un film Atyaf sur Vimeo\"\r\n      >\r\n        <span class=\"ayf-algiers__play-disc\" aria-hidden=\"true\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            focusable=\"false\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path\r\n              d=\"M8.5 5.5L18.5 12L8.5 18.5V5.5Z\"\r\n              fill=\"currentColor\"\r\n            \/>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <small>Watch a film<\/small>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* Neutralisation du wrapper Elementor du widget *\/\r\n.elementor-widget-html:has(.ayf-algiers),\r\n.elementor-widget-html:has(.ayf-algiers) > .elementor-widget-container {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.ayf-algiers {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: stretch;\r\n  width: 100vw;\r\n  min-height: 100svh;\r\n  margin: 0 0 0 calc(50% - 50vw) !important;\r\n  padding: 0 !important;\r\n  background: transparent !important;\r\n  isolation: isolate;\r\n  overflow: hidden;\r\n}\r\n\r\n.ayf-algiers__media {\r\n  position: absolute;\r\n  inset: -5%;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n  background:\r\n    url(\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-5-aout-2026-00_47_50.png\")\r\n    center center \/ cover no-repeat;\r\n}\r\n\r\n.ayf-algiers__media img {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: none;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  transform:\r\n    translate3d(0, var(--algiers-y, 0px), 0)\r\n    scale(1.08);\r\n  filter: saturate(.76) contrast(1.03);\r\n  will-change: transform;\r\n}\r\n\r\n.ayf-algiers__shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(0,0,0,.82) 0%,\r\n      rgba(0,0,0,.46) 48%,\r\n      rgba(0,0,0,.18) 100%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0,0,0,.28) 0%,\r\n      transparent 35%,\r\n      rgba(0,0,0,.68) 100%\r\n    );\r\n}\r\n\r\n.ayf-algiers__inner {\r\n  position: relative;\r\n  z-index: 5;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  min-height: 100svh;\r\n  padding-top: clamp(86px, 10vh, 120px);\r\n  padding-bottom: clamp(74px, 9vh, 108px);\r\n}\r\n\r\n.ayf-algiers .ayf-title {\r\n  max-width: 950px;\r\n  margin-top: 30px;\r\n}\r\n\r\n.ayf-algiers__footer {\r\n  display: grid;\r\n  grid-template-columns: minmax(260px, 480px) auto;\r\n  gap: clamp(44px, 10vw, 150px);\r\n  align-items: end;\r\n  margin-top: clamp(52px, 8vw, 100px);\r\n}\r\n\r\n.ayf-algiers__footer > p {\r\n  margin: 0;\r\n  color: rgba(243,239,232,.76);\r\n  font-size: 16px;\r\n  line-height: 1.75;\r\n}\r\n\r\n.ayf-algiers__play,\r\n.ayf-algiers__play:hover,\r\n.ayf-algiers__play:focus,\r\n.ayf-algiers__play *,\r\n.ayf-algiers__play:hover * {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.ayf-algiers__play {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  width: max-content;\r\n  color: var(--ayf-heading);\r\n}\r\n\r\n.ayf-algiers__play-disc {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 74px;\r\n  height: 74px;\r\n  border: 1px solid rgba(255,255,255,.45);\r\n  border-radius: 50%;\r\n  line-height: 0;\r\n  transition:\r\n    background .4s var(--ayf-ease),\r\n    border-color .4s ease,\r\n    color .4s ease,\r\n    transform .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-algiers__play-disc svg {\r\n  display: block;\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.ayf-algiers__play small {\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  letter-spacing: .16em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.ayf-algiers__play:hover .ayf-algiers__play-disc {\r\n  border-color: var(--ayf-brand);\r\n  background: var(--ayf-brand);\r\n  color: #080706;\r\n  transform: scale(1.08);\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ayf-algiers,\r\n  .ayf-algiers__inner {\r\n    min-height: 100svh;\r\n  }\r\n\r\n  \/*\r\n   * Cadrage mobile d\u00e9plac\u00e9 vers la droite pour conserver\r\n   * le Monument des Martyrs dans le champ.\r\n   *\/\r\n  .ayf-algiers__media {\r\n    inset: -3%;\r\n    background-position: 68% center;\r\n  }\r\n\r\n  .ayf-algiers__media img {\r\n    object-position: 68% center;\r\n    transform:\r\n      translate3d(0, var(--algiers-y, 0px), 0)\r\n      scale(1.075);\r\n  }\r\n\r\n  .ayf-algiers__shade {\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        rgba(0,0,0,.76),\r\n        rgba(0,0,0,.2)\r\n      ),\r\n      linear-gradient(\r\n        180deg,\r\n        rgba(0,0,0,.22),\r\n        rgba(0,0,0,.2) 46%,\r\n        rgba(0,0,0,.78)\r\n      );\r\n  }\r\n\r\n  .ayf-algiers__inner {\r\n    justify-content: flex-end;\r\n    padding-top: 90px;\r\n    padding-bottom: 64px;\r\n  }\r\n\r\n  .ayf-algiers__footer {\r\n    grid-template-columns: 1fr;\r\n    align-items: start;\r\n    gap: 34px;\r\n    margin-top: 44px;\r\n  }\r\n\r\n  .ayf-algiers__play-disc {\r\n    width: 64px;\r\n    height: 64px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const root = document.querySelector(\".ayf-algiers\");\r\n\r\n  if (!root || root.dataset.ready === \"true\") {\r\n    return;\r\n  }\r\n\r\n  root.dataset.ready = \"true\";\r\n\r\n  const image = root.querySelector(\".ayf-algiers__media img\");\r\n\r\n  if (\r\n    !image ||\r\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  let ticking = false;\r\n\r\n  const update = () => {\r\n    const rect = root.getBoundingClientRect();\r\n    const viewport = window.innerHeight || 1;\r\n\r\n    const progress = Math.min(\r\n      Math.max(\r\n        (viewport - rect.top) \/ (viewport + rect.height),\r\n        0\r\n      ),\r\n      1\r\n    );\r\n\r\n    \/*\r\n     * D\u00e9placement volontairement limit\u00e9.\r\n     * Le scale 1.08 garantit que les limites de l\u2019image\r\n     * restent toujours au-del\u00e0 de la section.\r\n     *\/\r\n    const isMobile =\r\n      window.matchMedia(\"(max-width: 767px)\").matches;\r\n\r\n    const movement = isMobile\r\n      ? -8 + progress * 16\r\n      : -18 + progress * 36;\r\n\r\n    image.style.setProperty(\r\n      \"--algiers-y\",\r\n      `${movement.toFixed(2)}px`\r\n    );\r\n\r\n    ticking = false;\r\n  };\r\n\r\n  window.addEventListener(\r\n    \"scroll\",\r\n    () => {\r\n      if (ticking) {\r\n        return;\r\n      }\r\n\r\n      ticking = true;\r\n      requestAnimationFrame(update);\r\n    },\r\n    { passive: true }\r\n  );\r\n\r\n  update();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c1e0dc elementor-widget elementor-widget-html\" data-id=\"7c1e0dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nATYAF \u2014 SELECTED CLIENTS\nVersion fixe avec 5 logos valid\u00e9s.\n-->\n<section class=\"ayf-section ayf-clients\" aria-labelledby=\"ayf-clients-title\">\n  <div class=\"ayf-shell\">\n    <header class=\"ayf-clients__header\" data-ayf-reveal>\n      <div>\n        <p class=\"ayf-kicker\">Selected clients<\/p>\n\n        <h2 class=\"ayf-title\" id=\"ayf-clients-title\">\n          Trusted to<br>\n          bring stories to life.\n        <\/h2>\n      <\/div>\n\n      <p class=\"ayf-clients__intro\">\n        Des marques et entreprises accompagn\u00e9es \u00e0 travers\n        des productions audiovisuelles pens\u00e9es pour leur image.\n      <\/p>\n    <\/header>\n\n    <div class=\"ayf-clients__grid\" data-ayf-reveal>\n      <a\n        class=\"ayf-client\"\n        href=\"#\"\n        aria-label=\"Stream System\"\n      >\n        <img\n          src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/logo-streamsys-1-copie.png\"\n          alt=\"Logo Stream System\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n      <\/a>\n\n      <a\n        class=\"ayf-client\"\n        href=\"#\"\n        aria-label=\"Groupe Hasnaoui\"\n      >\n        <img\n          src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Groupe-Hasnaoui.png\"\n          alt=\"Logo Groupe Hasnaoui\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n      <\/a>\n\n      <a\n        class=\"ayf-client\"\n        href=\"#\"\n        aria-label=\"Sant\u00e9Dom\"\n      >\n        <img\n          src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Santedom.png\"\n          alt=\"Logo Sant\u00e9Dom\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n      <\/a>\n\n      <a\n        class=\"ayf-client\"\n        href=\"#\"\n        aria-label=\"MDM Portes\"\n      >\n        <img\n          src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/MDM.png\"\n          alt=\"Logo MDM Portes\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n      <\/a>\n\n      <a\n        class=\"ayf-client\"\n        href=\"#\"\n        aria-label=\"Arabesque\"\n      >\n        <img\n          src=\"https:\/\/atyaf.pro\/wp-content\/uploads\/2026\/08\/Arabesque.png\"\n          alt=\"Logo Arabesque\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n      <\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n.ayf-clients {\n  padding:\n    clamp(82px, 8vw, 118px)\n    0\n    clamp(58px, 5.5vw, 82px);\n  background:\n    linear-gradient(\n      180deg,\n      var(--ayf-bg-2) 0%,\n      #070707 100%\n    );\n  border-top: 1px solid rgba(255,255,255,.045);\n}\n\n.ayf-clients__header {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1fr)\n    minmax(280px, .42fr);\n  gap: clamp(42px, 10vw, 150px);\n  align-items: end;\n  margin-bottom: clamp(52px, 5vw, 78px);\n}\n\n.ayf-clients__header .ayf-title {\n  margin-top: 26px;\n}\n\n.ayf-clients__intro {\n  margin: 0 0 8px;\n  color: #9A948B;\n  font-size: 15.5px;\n  line-height: 1.72;\n}\n\n.ayf-clients__grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  border-top: 1px solid var(--ayf-border-soft);\n  border-bottom: 1px solid var(--ayf-border-soft);\n}\n\n.ayf-client,\n.ayf-client:hover,\n.ayf-client:focus {\n  text-decoration: none !important;\n}\n\n.ayf-client {\n  position: relative;\n  display: grid;\n  place-items: center;\n  min-height: 182px;\n  padding: 30px 24px;\n  border-right: 1px solid var(--ayf-border-soft);\n  background: transparent;\n  overflow: hidden;\n  transition:\n    background .45s var(--ayf-ease),\n    transform .45s var(--ayf-ease);\n}\n\n.ayf-client:last-child {\n  border-right: 0;\n}\n\n.ayf-client::before {\n  position: absolute;\n  inset: auto 0 0;\n  width: 100%;\n  height: 0;\n  background:\n    linear-gradient(\n      180deg,\n      transparent,\n      rgba(199,154,94,.11)\n    );\n  content: \"\";\n  transition: height .55s var(--ayf-ease);\n  pointer-events: none;\n}\n\n.ayf-client::after {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  width: 0;\n  height: 1px;\n  background: var(--ayf-brand);\n  content: \"\";\n  transform: translateX(-50%);\n  transition: width .5s var(--ayf-ease);\n}\n\n.ayf-client img {\n  position: relative;\n  z-index: 1;\n  display: block;\n  width: min(82%, 195px);\n  max-height: 84px;\n  object-fit: contain;\n  filter:\n    grayscale(1)\n    brightness(1.75)\n    contrast(.82);\n  opacity: .56;\n  transform: scale(.96);\n  transition:\n    opacity .4s ease,\n    filter .45s ease,\n    transform .5s var(--ayf-ease);\n}\n\n.ayf-client:hover,\n.ayf-client:focus-visible {\n  background: rgba(255,255,255,.018);\n  transform: translateY(-3px);\n}\n\n.ayf-client:hover::before,\n.ayf-client:focus-visible::before {\n  height: 76%;\n}\n\n.ayf-client:hover::after,\n.ayf-client:focus-visible::after {\n  width: 100%;\n}\n\n.ayf-client:hover img,\n.ayf-client:focus-visible img {\n  filter:\n    grayscale(0)\n    brightness(1)\n    contrast(1);\n  opacity: 1;\n  transform: scale(1.04);\n}\n\n.ayf-client:focus-visible {\n  outline: 1px solid var(--ayf-brand);\n  outline-offset: -1px;\n}\n\n@media (max-width: 1100px) {\n  .ayf-clients__grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .ayf-client:nth-child(3) {\n    border-right: 0;\n  }\n\n  .ayf-client:nth-child(-n+3) {\n    border-bottom: 1px solid var(--ayf-border-soft);\n  }\n\n  .ayf-client:nth-child(4) {\n    grid-column: 1 \/ 2;\n  }\n\n  .ayf-client:nth-child(5) {\n    grid-column: 2 \/ 4;\n    border-right: 0;\n  }\n}\n\n@media (max-width: 767px) {\n  .ayf-clients {\n    padding: 88px 0;\n  }\n\n  .ayf-clients__header {\n    grid-template-columns: 1fr;\n    gap: 28px;\n    margin-bottom: 58px;\n  }\n\n  .ayf-clients__grid {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .ayf-client {\n    min-height: 140px;\n    padding: 24px 16px;\n  }\n\n  .ayf-client:nth-child(odd) {\n    border-right: 1px solid var(--ayf-border-soft);\n  }\n\n  .ayf-client:nth-child(even) {\n    border-right: 0;\n  }\n\n  .ayf-client:nth-child(-n+4) {\n    border-bottom: 1px solid var(--ayf-border-soft);\n  }\n\n  .ayf-client:nth-child(3),\n  .ayf-client:nth-child(4),\n  .ayf-client:nth-child(5) {\n    grid-column: auto;\n  }\n\n  .ayf-client:nth-child(5) {\n    grid-column: 1 \/ 3;\n    border-right: 0;\n  }\n\n  .ayf-client img {\n    width: min(84%, 158px);\n    max-height: 66px;\n  }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd5e389 elementor-widget elementor-widget-html\" data-id=\"fd5e389\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ATYAF \u2014 CONTACT \/ WATERMARK COMPACT -->\r\n<section class=\"ayf-section ayf-contact\" id=\"contact\" aria-labelledby=\"ayf-contact-title\">\r\n  <div class=\"ayf-shell\">\r\n    <div class=\"ayf-contact__top\">\r\n      <div data-ayf-reveal>\r\n        <p class=\"ayf-kicker\">Start a project<\/p>\r\n\r\n        <h2 class=\"ayf-display ayf-contact__title\" id=\"ayf-contact-title\">\r\n          Have a project<br>\r\n          in mind?\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <p class=\"ayf-contact__lead\" data-ayf-reveal=\"right\">\r\n        Parlons de l\u2019histoire, du format et de la mani\u00e8re\r\n        la plus juste de lui donner une forme.\r\n      <\/p>\r\n    <\/div>\r\n    <div class=\"ayf-contact__grid\">\r\n      <a\r\n        class=\"ayf-contact__primary\"\r\n        href=\"mailto:contact@atyaf.pro?subject=Nouveau%20projet%20audiovisuel\"\r\n        data-ayf-reveal\r\n      >\r\n        <span>CONTACT@ATYAF.PRO<\/span>\r\n        <span class=\"ayf-contact__external\" aria-hidden=\"true\">\r\n          <svg\r\n              viewBox=\"0 0 24 24\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n            >\r\n              <path d=\"M7 17L17 7\"><\/path>\r\n              <path d=\"M9 7H17V15\"><\/path>\r\n            <\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n      <div\r\n        class=\"ayf-contact__details\"\r\n        data-ayf-reveal\r\n        style=\"--ayf-delay:100ms\"\r\n      >\r\n        <div>\r\n          <small>PHONE<\/small>\r\n          <a href=\"tel:+21323831663\">\r\n            +213 (0)23 83 16 63\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div>\r\n          <small>LOCATION<\/small>\r\n          <span>\r\n            Bab Ezzouar<br>\r\n            Algiers, Algeria\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div>\r\n          <small>PROJECTS<\/small>\r\n          <a href=\"mailto:contact@atyaf.pro\">\r\n            Send a brief\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.ayf-contact {\r\n  padding:\r\n    clamp(78px, 8vw, 112px)\r\n    0\r\n    clamp(66px, 6vw, 92px);\r\n  background: var(--ayf-bg);\r\n}\r\n\r\n.ayf-contact__top {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.2fr)\r\n    minmax(260px, .45fr);\r\n  gap: clamp(48px, 10vw, 160px);\r\n  align-items: end;\r\n}\r\n\r\n.ayf-contact__title {\r\n  margin-top: 30px;\r\n  font-size: clamp(74px, 11vw, 168px);\r\n}\r\n\r\n.ayf-contact__lead {\r\n  margin: 0 0 15px;\r\n  color: var(--ayf-text);\r\n  font-size: clamp(16px, 1.5vw, 20px);\r\n  line-height: 1.7;\r\n}\r\n\r\n\r\n.ayf-contact__grid {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.15fr)\r\n    minmax(360px, .85fr);\r\n  gap: clamp(50px, 9vw, 130px);\r\n  align-items: end;\r\n  margin-top: clamp(48px, 5vw, 76px);\r\n}\r\n\r\n.ayf-contact__primary {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  min-height: 126px;\r\n  padding: 0 28px 0 0;\r\n  border-top: 1px solid var(--ayf-border-soft);\r\n  border-bottom: 1px solid var(--ayf-border-soft);\r\n  color: var(--ayf-heading);\r\n  font-family: var(--ayf-heading-font);\r\n  font-size: clamp(31px, 4vw, 58px);\r\n  font-weight: 600;\r\n  letter-spacing: -.02em;\r\n  text-decoration: none;\r\n  transition:\r\n    color .35s ease,\r\n    padding .45s var(--ayf-ease);\r\n}\r\n\r\n.ayf-contact__external {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  width: 30px;\r\n  height: 30px;\r\n  color: var(--ayf-brand);\r\n  transition: transform .4s var(--ayf-ease);\r\n}\r\n\r\n.ayf-contact__external svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: visible;\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.45;\r\n  stroke-linecap: square;\r\n  stroke-linejoin: miter;\r\n}\r\n\r\n.ayf-contact__primary:hover {\r\n  padding-left: 18px;\r\n  color: var(--ayf-brand-alt);\r\n}\r\n\r\n.ayf-contact__primary:hover .ayf-contact__external {\r\n  transform: translate3d(7px, -7px, 0);\r\n}\r\n\r\n.ayf-contact__details {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 22px;\r\n}\r\n\r\n.ayf-contact__details > div {\r\n  min-height: 112px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid var(--ayf-border-soft);\r\n}\r\n\r\n.ayf-contact__details small {\r\n  display: block;\r\n  margin-bottom: 20px;\r\n  color: #918B83;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .145em;\r\n}\r\n\r\n.ayf-contact__details a,\r\n.ayf-contact__details span {\r\n  color: var(--ayf-heading);\r\n  font-size: 13.5px;\r\n  line-height: 1.72;\r\n  text-decoration: none;\r\n}\r\n\r\n.ayf-contact__details a:hover {\r\n  color: var(--ayf-brand-alt);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ayf-contact__grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .ayf-contact {\r\n    padding-top: 94px;\r\n    padding-bottom: 64px;\r\n  }\r\n\r\n  .ayf-contact__top {\r\n    grid-template-columns: 1fr;\r\n    gap: 34px;\r\n  }\r\n\r\n  .ayf-contact__title {\r\n    font-size: clamp(66px, 20vw, 102px);\r\n  }\r\n\r\n  .ayf-contact__primary {\r\n    min-height: 104px;\r\n    padding-right: 6px;\r\n    font-size: clamp(27px, 8.2vw, 40px);\r\n  }\r\n\r\n  .ayf-contact__external {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  .ayf-contact__details {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .ayf-contact__details > div {\r\n    min-height: auto;\r\n    padding-bottom: 20px;\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Work Studio Services Contact 01 Work 02 Studio 03 Services 04 Contact contact@atyaf.pro Algiers, Algeria Atyaf Production \u00b7 Algiers We [&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":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","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-196","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/pages\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atyaf.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=196"}],"version-history":[{"count":14,"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/pages\/196\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/atyaf.pro\/index.php?rest_route=\/wp\/v2\/pages\/196\/revisions\/221"}],"wp:attachment":[{"href":"https:\/\/atyaf.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}