{"id":9364,"date":"2026-04-19T15:17:39","date_gmt":"2026-04-19T13:17:39","guid":{"rendered":"https:\/\/nadiaui.fr\/?page_id=9364"},"modified":"2026-06-09T16:51:32","modified_gmt":"2026-06-09T14:51:32","slug":"portfolio-3","status":"publish","type":"page","link":"https:\/\/nadiaui.fr\/","title":{"rendered":"PORTFOLIO"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9364\" class=\"elementor elementor-9364\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ae806d e-flex e-con-boxed e-con e-parent\" data-id=\"3ae806d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64bcea4 elementor-widget elementor-widget-html\" data-id=\"64bcea4\" 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<button id=\"nb-theme-toggle\" aria-label=\"Basculer mode clair\/sombre\">\n\n  <!-- Lune \u2014 visible en mode sombre -->\n  <svg class=\"nb-icon-light\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n    stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/>\n  <\/svg>\n\n  <!-- Soleil \u2014 visible en mode clair -->\n  <svg class=\"nb-icon-dark\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n    stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"5\"\/>\n    <line x1=\"12\" y1=\"1\"  x2=\"12\" y2=\"3\"\/>\n    <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"\/>\n    <line x1=\"4.22\"  y1=\"4.22\"  x2=\"5.64\"  y2=\"5.64\"\/>\n    <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"\/>\n    <line x1=\"1\"  y1=\"12\" x2=\"3\"  y2=\"12\"\/>\n    <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"\/>\n    <line x1=\"4.22\"  y1=\"19.78\" x2=\"5.64\"  y2=\"18.36\"\/>\n    <line x1=\"18.36\" y1=\"5.64\"  x2=\"19.78\" y2=\"4.22\"\/>\n  <\/svg>\n\n<\/button>\n\n<script>\n(function () {\n  var html    = document.documentElement;\n  var btn     = document.getElementById('nb-theme-toggle');\n  var STORAGE = 'nb-theme';\n\n  \/* Restaurer le choix sauvegard\u00e9 (ou dark par d\u00e9faut) *\/\n  var saved = localStorage.getItem(STORAGE) || 'dark';\n  html.setAttribute('data-theme', saved);\n  updateBgMask(saved);\n\n  \/* Clic sur le bouton *\/\n  btn.addEventListener('click', function () {\n    var current = html.getAttribute('data-theme');\n    var next    = current === 'dark' ? 'light' : 'dark';\n\n    \/* Animation spin *\/\n    btn.classList.remove('nb-spinning');\n    void btn.offsetWidth;\n    btn.classList.add('nb-spinning');\n    btn.addEventListener('animationend', function () {\n      btn.classList.remove('nb-spinning');\n    }, { once: true });\n\n    html.setAttribute('data-theme', next);\n    localStorage.setItem(STORAGE, next);\n    updateBgMask(next);\n  });\n\n  \/* Met \u00e0 jour la couleur de fond du spotlight (nb-bg-mask) *\/\n  function updateBgMask(theme) {\n    var mask = document.getElementById('nb-bg-mask');\n    if (!mask) return;\n    var color = theme === 'light'\n      ? 'rgba(253,250,247,1)'\n      : 'rgba(29,29,27,1)';\n    mask.dataset.bgColor = color;\n    \/* Si le spotlight n'est pas actif, appliquer directement *\/\n    if (!mask.dataset.spotActive) {\n      mask.style.background = color;\n    }\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7fbde2 elementor-widget elementor-widget-html\" data-id=\"b7fbde2\" 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<div id=\"nb-bg-gears\" style=\"position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;\"><\/div>\n<div id=\"nb-bg-mask\"  style=\"position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(29,29,27,1);\"><\/div>\n\n<style>\n.nb-bg-gear { position:absolute; will-change:transform; }\n.nb-bg-gear img { width:100%; height:100%; object-fit:contain; display:block; }\n.elementor-section, .elementor-container, .elementor-widget-wrap,\n.elementor-widget-container, .e-con, .e-con-inner, .elementor-element {\n  background-color: transparent !important;\n  background-image: none !important;\n}\n<\/style>\n\n<script>\n(function () {\n  var container = document.getElementById('nb-bg-gears');\n  var mask      = document.getElementById('nb-bg-mask');\n\n  var isMobile = window.innerWidth <= 768;\n\n  function getTheme() {\n    return document.documentElement.getAttribute('data-theme') || 'dark';\n  }\n  function getColors() {\n    return getTheme() === 'light'\n      ? { solid:'rgba(253,250,247,1)', mid:'rgba(253,250,247,0.7)' }\n      : { solid:'rgba(29,29,27,1)',    mid:'rgba(29,29,27,0.7)'    };\n  }\n  function applyGearStyle() {\n    var light = getTheme() === 'light';\n    container.querySelectorAll('img').forEach(function(img) {\n      img.style.mixBlendMode = light ? 'multiply' : 'screen';\n      img.style.filter       = light\n        ? 'brightness(0.72) saturate(0) opacity(0.25)'\n        : 'brightness(0.22) saturate(0) opacity(0.65)';\n    });\n  }\n\n  var gears = [\n    { x:42, y:38, size:420, speed:0.04, dir: 1, hideOnMobile:true  },\n    { x:68, y:12, size:240, speed:0.07, dir:-1, hideOnMobile:false },\n    { x:22, y:15, size:180, speed:0.09, dir: 1, hideOnMobile:false },\n    { x:78, y:35, size:200, speed:0.08, dir:-1, hideOnMobile:false },\n    { x:15, y:45, size:160, speed:0.10, dir: 1, hideOnMobile:false },\n    { x:50, y: 8, size:110, speed:0.15, dir:-1, hideOnMobile:false },\n    { x:32, y: 8, size: 90, speed:0.18, dir: 1, hideOnMobile:false },\n    { x:82, y:18, size: 80, speed:0.20, dir: 1, hideOnMobile:false },\n    { x:25, y:68, size:220, speed:0.06, dir:-1, hideOnMobile:false },\n    { x:55, y:72, size:160, speed:0.11, dir: 1, hideOnMobile:false },\n    { x:68, y:80, size:130, speed:0.13, dir:-1, hideOnMobile:false },\n    { x:42, y:82, size:110, speed:0.16, dir: 1, hideOnMobile:false },\n    { x:38, y:90, size: 90, speed:0.19, dir:-1, hideOnMobile:false },\n    { x:88, y:58, size:170, speed:0.09, dir: 1, hideOnMobile:false },\n    { x:92, y:75, size:120, speed:0.14, dir:-1, hideOnMobile:false },\n  ];\n\n  var els = [], angles = [];\n\n  gears.forEach(function(g) {\n    if (isMobile && g.hideOnMobile) return;\n    var el  = document.createElement('div');\n    el.className = 'nb-bg-gear';\n    el.style.left      = g.x + 'vw';\n    el.style.top       = g.y + 'vh';\n    el.style.width     = g.size + 'px';\n    el.style.height    = g.size + 'px';\n    el.style.marginLeft= '-' + (g.size\/2) + 'px';\n    el.style.marginTop = '-' + (g.size\/2) + 'px';\n    var img = document.createElement('img');\n    img.src = 'https:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/LOGOFOND.png';\n    img.alt = '';\n    el.appendChild(img);\n    container.appendChild(el);\n    els.push({ el:el, g:g });\n    angles.push(Math.random() * 360);\n  });\n\n  applyGearStyle();\n\n  var lastTheme = getTheme();\n  setInterval(function() {\n    var t = getTheme();\n    if (t !== lastTheme) { lastTheme = t; applyGearStyle(); }\n  }, 200);\n\n  (function loop() {\n    els.forEach(function(item, i) {\n      angles[i] += item.g.speed * item.g.dir;\n      item.el.style.transform = 'rotate(' + angles[i] + 'deg)';\n    });\n    requestAnimationFrame(loop);\n  })();\n\n  if (!isMobile) {\n    var mx=-9999, my=-9999, cx=-9999, cy=-9999;\n    document.addEventListener('mousemove', function(e){ mx=e.clientX; my=e.clientY; });\n    (function spotLoop() {\n      cx += (mx-cx)*0.07; cy += (my-cy)*0.07;\n      var c = getColors();\n      mask.style.background =\n        'radial-gradient(circle 300px at '+cx+'px '+cy+'px, '+\n        'transparent 0%, transparent 45%, '+c.mid+' 70%, '+c.solid+' 100%)';\n      requestAnimationFrame(spotLoop);\n    })();\n  } else {\n    var touching=false, tgX=window.innerWidth\/2, tgY=window.innerHeight\/2;\n    var curX=-9999, curY=-9999;\n    function applyMobileBg(){ mask.style.background = getColors().solid; }\n    applyMobileBg();\n    setInterval(function(){ if(!touching) applyMobileBg(); }, 300);\n    document.addEventListener('touchstart', function(e){\n      touching=true; tgX=e.touches[0].clientX; tgY=e.touches[0].clientY;\n      curX=tgX; curY=tgY;\n    },{ passive:true });\n    document.addEventListener('touchmove', function(e){\n      tgX=e.touches[0].clientX; tgY=e.touches[0].clientY;\n    },{ passive:true });\n    document.addEventListener('touchend', function(){\n      touching=false;\n      setTimeout(function(){\n        mask.style.transition='background 0.6s ease';\n        applyMobileBg();\n        setTimeout(function(){ mask.style.transition=''; },650);\n      },80);\n    },{ passive:true });\n    (function spotLoopMobile() {\n      if (touching) {\n        curX += (tgX-curX)*0.15; curY += (tgY-curY)*0.15;\n        var c = getColors();\n        mask.style.background =\n          'radial-gradient(circle 220px at '+curX+'px '+curY+'px, '+\n          'transparent 0%, transparent 35%, '+c.mid+' 65%, '+c.solid+' 100%)';\n      }\n      requestAnimationFrame(spotLoopMobile);\n    })();\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-860c040 e-con-full e-flex e-con e-parent\" data-id=\"860c040\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-7a386d25 e-con-full triangles-row elementor-hidden-mobile e-flex e-con e-child\" data-id=\"7a386d25\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-46787230 e-con-full triangles-row e-flex e-con e-child\" data-id=\"46787230\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-417e57b0 triangles-row elementor-widget elementor-widget-image\" data-id=\"417e57b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png\" class=\"attachment-large size-large wp-image-1234\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ef53ffb e-con-full .triangle-svg e-flex e-con e-child\" data-id=\"7ef53ffb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2657a triangles-row elementor-widget elementor-widget-image\" data-id=\"ef2657a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/07\/PETIT-TRIANGLE-BLEU-1.png\" class=\"attachment-large size-large wp-image-1144\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-325a5c46 e-con-full e-flex e-con e-child\" data-id=\"325a5c46\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5380de3a triangles-row elementor-widget elementor-widget-image\" data-id=\"5380de3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/07\/PETIT-TRIANGLE-ROUGE-1.png\" class=\"attachment-large size-large wp-image-1145\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d715fe elementor-widget elementor-widget-html\" data-id=\"9d715fe\" 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<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Nadia Boussa\u00efd \u2014 Designer UI\/UX<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@900&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --black: #000;\n      --white: #ffffff;\n      --font-display: 'Playfair Display', Georgia, serif;\n      --font-body: 'Inter', sans-serif;\n    }\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    html { scroll-behavior: smooth; }\n    body { background: transparent; color: var(--white); font-family: var(--font-body); overflow-x: hidden; cursor: none; }\n\n    \/* CURSEUR \u2014 64px comme les pages projet *\/\n    .cursor {\n      position:fixed; width:64px; height:64px;\n      background-image: url('http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/SOURIS-ROUAGE-NADIA.B-1-scaled.png');\n      background-size: contain; background-repeat: no-repeat; background-position: center;\n      pointer-events:none; z-index:9999; transform:translate(-50%,-50%); border-radius: 0;\n    }\n    .cursor-ring { display:none; }\n\n    nav.nav-desktop { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; justify-content:flex-end; padding:30px 52px; opacity:0; animation:fadeDown 1s ease forwards 0.6s; }\n    .nav-links { display:flex; gap:36px; list-style:none; }\n    .nav-links a { font-family:var(--font-body); font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:#fff; text-decoration:none; transition:color 0.25s; }\n    .nav-links li:nth-child(1) a:hover { color:#4681B9; }\n    .nav-links li:nth-child(2) a:hover { color:rgba(187,70,10,0.9); }\n    .nav-links li:nth-child(3) a:hover { color:#fff; }\n\n    .scroll-scene { height:400vh; position:relative; background:transparent; }\n    .sticky-hero { position:sticky; top:0; height:100vh; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:transparent; }\n\n    .rouages-wrap { position:absolute; width:900px; height:890px; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; opacity:0; transition:opacity 0.8s ease; }\n    .rouages-wrap.visible { opacity:1; }\n    .gear-composite { position:absolute; display:flex; align-items:center; justify-content:center; }\n    @keyframes rotateCw  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\n    @keyframes rotateCcw { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }\n    .gear1{left:414px;top:235px;width:290px;height:290px;z-index:6;animation:rotateCw 24s linear infinite}\n    .gear2{left:243px;top:305px;width:240px;height:240px;z-index:5;animation:rotateCcw 38s linear infinite}\n    .gear3{left:140px;top:120px;width:210px;height:210px;z-index:4;animation:rotateCw 18s linear infinite}\n    .gear4{left:-79px;top:218px;width:250px;height:250px;z-index:3;animation:rotateCcw 29s linear infinite}\n    .gear5{left:80px;top:427px;width:190px;height:190px;z-index:4;animation:rotateCw 19s linear infinite}\n    .gear6{left:569px;top:61px;width:200px;height:200px;z-index:3;animation:rotateCcw 15s linear infinite}\n    .gear7{left:700px;top:211px;width:230px;height:230px;z-index:3;animation:rotateCw 34s linear infinite}\n    .gear8{left:667px;top:429px;width:150px;height:150px;z-index:4;animation:rotateCcw 21s linear infinite}\n    .gear1 .gear-face{animation:rotateCcw 16s linear infinite}\n    .gear1 .gear-traits{animation:rotateCw 10s linear infinite}\n    .gear1 .gear-points{animation:rotateCcw 10s linear infinite}\n    .gear1 .gear-rouage7{animation:rotateCw 18s linear infinite}\n    .gear-fond-noir,.gear-face,.gear-traits,.gear-points,.gear-rouage7{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:50%;z-index:1}\n    .gear-face{z-index:2}\n    .gear-traits{width:91%;height:91%;left:4.5%;top:4.5%;opacity:.97;z-index:3;animation:rotateCw 10s linear infinite}\n    .gear-points{width:82%;height:82%;left:9%;top:9%;opacity:.97;z-index:3;animation:rotateCw 10s linear infinite}\n    .gear-rouage7{width:76%;height:76%;left:12%;top:12%;opacity:1;z-index:4}\n\n    .logo-scroll { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1); width:700px; height:700px; border-radius:50%; z-index:20; pointer-events:none; filter:drop-shadow(0 0 60px rgba(255,255,255,0.15)); perspective:600px; }\n    .logo-flip__inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform 0.6s ease; }\n    .logo-flip__inner.flipped { transform:rotateY(180deg); }\n    .logo-flip__face,.logo-flip__back { position:absolute; inset:0; backface-visibility:hidden; border-radius:50%; overflow:hidden; }\n    .logo-flip__face img,.logo-flip__back img { width:100%; height:100%; object-fit:cover; border-radius:50%; }\n    .logo-flip__back { transform:rotateY(180deg); }\n    .vignette { display:none; }\n\n    .hero-text { position:absolute; bottom:80px; left:52px; z-index:50; opacity:0; transform:translateY(20px); transition:opacity 0.6s ease,transform 0.6s ease; }\n    .hero-text.visible { opacity:1; transform:translateY(0); }\n    .hero-title { font-family:var(--font-display); font-weight:900; font-size:clamp(64px,9vw,140px); line-height:0.9; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,0.8),0 0 80px rgba(0,0,0,0.6); }\n    .hero-title em { font-style:italic; display:block; cursor:default; }\n    .hero-title em .b-initial { color:#fff; font-style:italic; }\n    .hero-title em .b-rest { color:transparent; transition:color 0.4s ease; }\n    .hero-title em:hover .b-rest { color:rgba(187,70,10,0.85); }\n    .hero-subtitle { font-family:var(--font-body); font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#fff; margin-top:20px; }\n    .hero-tagline { font-family:var(--font-body); font-size:0.85rem; font-weight:500; letter-spacing:0.12em; color:#fff; margin-top:16px; }\n    .hero-subline { font-family:var(--font-body); font-size:0.78rem; font-weight:400; line-height:1.7; color:#fff; margin-top:10px; max-width:420px; }\n\n    .hero-circles { position:absolute; bottom:52px; right:52px; z-index:50; display:flex; flex-direction:row; align-items:center; gap:16px; }\n    .circle-link {\n      position:relative; border-radius:50%; flex-shrink:0;\n      display:flex; align-items:center; justify-content:center;\n      text-decoration:none;\n      width:110px; height:110px;\n      background: transparent;\n      border: none;\n      opacity:0; transform:translateY(-180px) scale(0.3);\n      transition:transform 0.35s cubic-bezier(0.34,1.4,0.64,1), z-index 0s;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .hero-circles.visible .circle-link:nth-child(1){animation:ballFall 0.8s cubic-bezier(0.34,1.5,0.64,1) forwards 0s}\n    .hero-circles.visible .circle-link:nth-child(2){animation:ballFall 0.8s cubic-bezier(0.34,1.5,0.64,1) forwards 0.22s}\n    .hero-circles.visible .circle-link:nth-child(3){animation:ballFall 0.8s cubic-bezier(0.34,1.5,0.64,1) forwards 0.44s}\n    .hero-circles:not(.visible) .circle-link{opacity:0!important;transform:translateY(-180px) scale(0.3)!important;animation:none!important}\n    @keyframes ballFall {\n      0%  {opacity:0;transform:translateY(-180px) scale(0.3)}\n      55% {opacity:1;transform:translateY(10px) scale(1.08)}\n      72% {transform:translateY(-5px) scale(0.96)}\n      87% {transform:translateY(3px) scale(1.02)}\n      100%{opacity:1;transform:translateY(0) scale(1)}\n    }\n\n    .circle-link .cl-r1 { position:absolute; inset:0;    border-radius:50%; border:1.5px solid #fff; transition:border-color 0.3s; }\n    .circle-link .cl-r2 { position:absolute; inset:11px; border-radius:50%; border:1px solid rgba(255,255,255,0.7); transition:border-color 0.3s; }\n    .circle-link .cl-r3 { position:absolute; inset:22px; border-radius:50%; border:1px dashed rgba(255,255,255,0.4); transition:border-color 0.3s; }\n\n    .circle-link__label {\n      position:relative; z-index:2;\n      font-family:var(--font-body); font-size:0.68rem; font-weight:600;\n      letter-spacing:0.2em; text-transform:uppercase;\n      color:#ffffff;\n      text-align:center; line-height:1.5; transition:color 0.3s;\n      padding:0 10px; white-space:nowrap;\n    }\n\n    .circle-link:hover { transform:scale(1.06)!important; z-index:10; }\n\n    .circle-link:nth-child(1):hover .cl-r1 { border-color:rgba(187,70,10,0.85); }\n    .circle-link:nth-child(1):hover .cl-r2 { border-color:rgba(187,70,10,0.4); }\n    .circle-link:nth-child(1):hover .cl-r3 { border-color:rgba(187,70,10,0.2); }\n    .circle-link:nth-child(1):hover .circle-link__label { color:rgba(187,70,10,0.9); }\n\n    .circle-link:nth-child(2):hover .cl-r1 { border-color:#4681B9; }\n    .circle-link:nth-child(2):hover .cl-r2 { border-color:rgba(70,129,185,0.5); }\n    .circle-link:nth-child(2):hover .cl-r3 { border-color:rgba(70,129,185,0.25); }\n    .circle-link:nth-child(2):hover .circle-link__label { color:#4681B9; }\n\n    .circle-link:nth-child(3):hover .cl-r1 { border-color:rgba(253,250,247,0.9); }\n    .circle-link:nth-child(3):hover .cl-r2 { border-color:rgba(253,250,247,0.4); }\n    .circle-link:nth-child(3):hover .circle-link__label { color:#fff; }\n\n    .circle-link:hover+.circle-link{transform:translateX(12px)!important}\n    .hero-circles:has(.circle-link:nth-child(2):hover) .circle-link:nth-child(1){transform:translateX(-12px)!important}\n    .hero-circles:has(.circle-link:nth-child(3):hover) .circle-link:nth-child(2){transform:translateX(-8px)!important}\n\n    .scroll-hint{position:absolute;top:50%;left:32px;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:1;transition:opacity 0.4s}\n    .scroll-hint.hidden{opacity:0;pointer-events:none}\n    .scroll-hint span{font-family:var(--font-body);font-size:0.6rem;font-weight:600;letter-spacing:0.32em;text-transform:uppercase;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}\n    .scroll-hint i{width:1px;height:80px;background:linear-gradient(to bottom,rgba(255,255,255,0.7),transparent);animation:pulse 2s ease-in-out infinite}\n    @keyframes pulse{0%,100%{opacity:.5;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.15)}}\n    @keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}\n\n    .nav-pill { display:none !important; }\n\n    @media (min-width:769px) and (max-width:1024px) {\n      nav.nav-desktop { padding:24px 36px; }\n      .hero-text { left:36px; bottom:70px; }\n      .hero-circles { right:36px; bottom:44px; gap:14px; }\n      .circle-link { width:90px; height:90px; }\n      .circle-link .cl-r2 { inset:9px; }\n      .circle-link .cl-r3 { inset:18px; }\n      .scroll-hint { left:24px; }\n    }\n\n    @media (max-width:768px) {\n      .cursor,.cursor-ring { display:none; }\n      body { cursor:auto; }\n      nav.nav-desktop { display:none; }\n      .scroll-hint { display:none; }\n      .rouages-wrap { width:100vw; height:100vw; top:44%; left:50%; transform:translate(-50%,-50%); }\n      .gear1{left:42vw;top:20vw;width:30vw;height:30vw}\n      .gear2{left:24vw;top:26vw;width:25vw;height:25vw}\n      .gear3{left:14vw;top:10vw;width:20vw;height:20vw}\n      .gear4{left:-8vw;top:18vw;width:24vw;height:24vw}\n      .gear5{left:8vw;top:38vw;width:18vw;height:18vw}\n      .gear6{left:58vw;top:5vw;width:20vw;height:20vw}\n      .gear7{left:72vw;top:18vw;width:22vw;height:22vw}\n      .gear8{left:68vw;top:38vw;width:15vw;height:15vw}\n      .logo-scroll { width:320px!important; height:320px!important; top:44%!important; }\n      .hero-text { left:20px; bottom:180px; }\n      .hero-title { font-size:clamp(44px,12vw,72px); }\n      .hero-subtitle { font-size:0.55rem; letter-spacing:0.16em; }\n      .hero-tagline { font-size:0.75rem; }\n      .hero-subline { font-size:0.72rem; max-width:260px; }\n      .hero-circles { right:16px; bottom:24px; gap:10px; flex-direction:column; align-items:flex-end; }\n      .circle-link { width:80px; height:80px; }\n      .circle-link .cl-r2 { inset:8px; }\n      .circle-link .cl-r3 { inset:16px; }\n      .circle-link__label { font-size:0.48rem; letter-spacing:0.14em; padding:0 6px; color:#ffffff; }\n    }\n\n    @media (max-width:480px) {\n      .logo-scroll { width:260px!important; height:260px!important; }\n      .hero-title  { font-size:clamp(38px,11vw,60px); }\n      .hero-text   { bottom:160px; left:16px; }\n      .hero-circles { bottom:20px; right:10px; gap:8px; }\n      .circle-link { width:68px; height:68px; }\n      .circle-link .cl-r2 { inset:7px; }\n      .circle-link .cl-r3 { inset:14px; }\n      .circle-link__label { font-size:0.42rem; color:#ffffff; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"cursor\" id=\"cursor\"><\/div>\n  <div class=\"cursor-ring\" id=\"ring\"><\/div>\n\n  <nav class=\"nav-desktop\">\n    <ul class=\"nav-links\">\n      <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\n      <li><a href=\"#apropos\">\u00c0 propos<\/a><\/li>\n      <li><a href=\"#contact\">Contact<\/a><\/li>\n    <\/ul>\n  <\/nav>\n\n  <div class=\"scroll-scene\" id=\"scrollScene\">\n    <div class=\"sticky-hero\" id=\"stickyHero\">\n\n      <div class=\"rouages-wrap\" id=\"rouagesWrap\">\n        <div class=\"gear-composite gear1\" data-dir=\"1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear2\" data-dir=\"-1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear3\" data-dir=\"1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear4\" data-dir=\"-1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear5\" data-dir=\"1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear6\" data-dir=\"-1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear7\" data-dir=\"1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n        <div class=\"gear-composite gear8\" data-dir=\"-1\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-3.png\" class=\"gear-fond-noir\" alt=\"\"\/><div class=\"gear-inner\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRIANGLE-BLANC-NADIA.B-1-scaled.png\" class=\"gear-face\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/TRAITS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-traits\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/POINTS-BLANC-NADIA.B-1-scaled.png\" class=\"gear-points\" alt=\"\"\/><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ROUAGE-7.png\" class=\"gear-rouage7\" alt=\"\"\/><\/div><\/div>\n      <\/div>\n\n      <div id=\"logoScroll\" class=\"logo-scroll\">\n        <div class=\"logo-flip__inner\" id=\"logoFlipInner\">\n          <div class=\"logo-flip__face\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/12\/LOGO-RECTO-NADIA.B-scaled.png\" alt=\"Nadia.B Recto\"\/><\/div>\n          <div class=\"logo-flip__back\"><img decoding=\"async\" src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/12\/LOGO-VERSO-NADIA.B-copie-scaled.png\" alt=\"Nadia.B Verso\"\/><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"vignette\"><\/div>\n\n      <div class=\"hero-text\" id=\"heroText\">\n        <h1 class=\"hero-title\">\n          Nadia<br>\n          <em><span class=\"b-initial\">B<\/span><span class=\"b-rest\">oussa\u00efd<\/span><\/em>\n          Designer\n        <\/h1>\n       <p class=\"hero-tagline\">Design, web, automatisation.<\/p>\n<p class=\"hero-subline\">Designer freelance bas\u00e9e \u00e0 Paris.<br>Je transforme vos id\u00e9es en sites, interfaces et outils qui fonctionnent au quotidien. Design soign\u00e9, sites rapides et durables, automatisations sur-mesure, de la maquette au site en ligne.<\/p>\n      <\/div>\n\n      <div class=\"hero-circles\" id=\"heroCircles\">\n        <!-- \u00c0 Propos \u2014 popup Elementor avec fallback ancre -->\n        <a href=\"#apropos\" class=\"circle-link\" data-popup=\"7860\">\n          <div class=\"cl-r1\"><\/div><div class=\"cl-r2\"><\/div><div class=\"cl-r3\"><\/div>\n          <span class=\"circle-link__label\">\u00c0 Propos<\/span>\n        <\/a>\n        <!-- Portfolio \u2014 popup Elementor avec fallback ancre -->\n        <a href=\"#portfolio\" class=\"circle-link\" data-popup=\"7521\">\n          <div class=\"cl-r1\"><\/div><div class=\"cl-r2\"><\/div><div class=\"cl-r3\"><\/div>\n          <span class=\"circle-link__label\">Port\u00adfolio<\/span>\n        <\/a>\n        <!-- Contact \u2014 popup Elementor avec fallback ancre -->\n        <a href=\"#contact\" class=\"circle-link\" data-popup=\"7854\">\n          <div class=\"cl-r1\"><\/div><div class=\"cl-r2\"><\/div><div class=\"cl-r3\"><\/div>\n          <span class=\"circle-link__label\">Contact<\/span>\n        <\/a>\n      <\/div>\n\n      <div class=\"scroll-hint\" id=\"scrollHint\">\n        <span>Scroll<\/span><i><\/i>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    const cursor      = document.getElementById('cursor');\n    const ring        = document.getElementById('ring');\n    const logo        = document.getElementById('logoScroll');\n    const logoFlip    = document.getElementById('logoFlipInner');\n    const scene       = document.getElementById('scrollScene');\n    const rouages     = document.getElementById('rouagesWrap');\n    const heroText    = document.getElementById('heroText');\n    const heroCircles = document.getElementById('heroCircles');\n    const scrollHint  = document.getElementById('scrollHint');\n    const gears       = document.querySelectorAll('.gear-composite');\n    const isMobile    = () => window.innerWidth <= 768;\n\n    document.addEventListener('mousemove', e => {\n      if (!cursor || !ring) return;\n      cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px';\n      ring.style.left   = e.clientX + 'px'; ring.style.top   = e.clientY + 'px';\n    });\n\n    let scrollRot = 0, lastScroll = 0;\n    const finalOffsetX = 109, finalOffsetY = -65;\n\n    window.addEventListener('scroll', () => {\n      const scrollY  = window.scrollY;\n      const sceneTop = scene.offsetTop;\n      const sceneH   = scene.offsetHeight - window.innerHeight;\n      const progress = Math.min(Math.max((scrollY - sceneTop) \/ sceneH, 0), 1);\n\n      const delta = scrollY - lastScroll;\n      scrollRot += delta * 0.3;\n      lastScroll = scrollY;\n      gears.forEach(g => {\n        const dir = parseFloat(g.dataset.dir) || 1;\n        g.style.setProperty('--scroll-rot', (scrollRot * dir) + 'deg');\n      });\n\n      rouages.classList.toggle('visible', progress > 0.05);\n      if (logoFlip) logoFlip.classList.toggle('flipped', progress > 0.3);\n\n      const shrinkPhase = Math.min(progress \/ 0.6, 1);\n      const ease        = 1 - Math.pow(1 - shrinkPhase, 3);\n      const fadePhase   = progress > 0.6 ? (progress - 0.6) \/ 0.4 : 0;\n\n      if (!isMobile()) {\n        const scale = 1 - (0.7 * ease);\n        const tx    = finalOffsetX * ease;\n        const ty    = finalOffsetY * ease;\n        logo.style.transform = `translate(calc(-50% + ${tx}px), calc(-50% + ${ty}px)) scale(${scale})`;\n        logo.style.opacity   = 1 - fadePhase;\n        scrollHint.classList.toggle('hidden', progress > 0.02);\n      } else {\n        const scaleMob = 1 - (0.72 * ease);\n        const txMob    = -window.innerWidth  * 0.28 * ease;\n        const tyMob    = -window.innerHeight * 0.22 * ease;\n        logo.style.transform = `translate(calc(-50% + ${txMob}px), calc(-50% + ${tyMob}px)) scale(${scaleMob})`;\n        logo.style.opacity   = 1 - fadePhase;\n      }\n\n      const showThreshold = isMobile() ? 0.6 : 0.75;\n      const show = progress > showThreshold;\n      heroText.classList.toggle('visible', show);\n\n      if (show && !heroCircles.classList.contains('visible')) {\n        heroCircles.querySelectorAll('.circle-link').forEach(c => {\n          c.style.animation = 'none';\n          void c.offsetWidth;\n          c.style.animation = '';\n        });\n        heroCircles.classList.add('visible');\n      } else if (!show) {\n        heroCircles.classList.remove('visible');\n      }\n    });\n\n    \/* \u2500\u2500\u2500 Boutons cercles : popup Elementor avec fallback scroll \u2500\u2500\u2500 *\/\n    document.querySelectorAll('[data-popup]').forEach(el => {\n      el.addEventListener('click', e => {\n        e.preventDefault();\n        const id = parseInt(el.getAttribute('data-popup'));\n\n        \/* Essai popup Elementor *\/\n        if (window.elementorProFrontend && window.elementorProFrontend.modules && window.elementorProFrontend.modules.popup) {\n          elementorProFrontend.modules.popup.showPopup({ id });\n          return;\n        }\n\n        \/* Fallback scroll *\/\n        const href = el.getAttribute('href');\n        if (href === '#portfolio') {\n          \/* Scroll juste apr\u00e8s la scroll-scene (fin du hero) *\/\n          const sceneBottom = scene.offsetTop + scene.offsetHeight;\n          window.scrollTo({ top: sceneBottom, behavior: 'smooth' });\n        } else if (href === '#apropos' || href === '#contact') {\n          const target = document.querySelector(href);\n          if (target) {\n            target.scrollIntoView({ behavior: 'smooth' });\n          } else {\n            const sceneBottom = scene.offsetTop + scene.offsetHeight;\n            window.scrollTo({ top: sceneBottom, behavior: 'smooth' });\n          }\n        }\n      });\n    });\n\n    \/* Nav links desktop \u2014 m\u00eame logique *\/\n    document.querySelectorAll('.nav-links a').forEach(a => {\n      a.addEventListener('click', e => {\n        e.preventDefault();\n        const href = a.getAttribute('href');\n        if (href === '#portfolio') {\n          const sceneBottom = scene.offsetTop + scene.offsetHeight;\n          window.scrollTo({ top: sceneBottom, behavior: 'smooth' });\n        } else {\n          const target = document.querySelector(href);\n          if (target) target.scrollIntoView({ behavior: 'smooth' });\n        }\n      });\n    });\n\n    document.querySelectorAll('.gear-traits').forEach(t => {\n      t.addEventListener('mouseenter', () => t.style.animationDuration = '30s');\n      t.addEventListener('mouseleave', () => t.style.animationDuration = '10s');\n    });\n\n    const circleRings = [], circleAngles = [];\n    const speeds = [0.28, -0.18, 0.12, -0.24, 0.16, -0.1, 0.22, -0.15, 0.1];\n    let si = 0;\n    document.querySelectorAll('.circle-link .cl-r1, .circle-link .cl-r2, .circle-link .cl-r3').forEach(r => {\n      circleRings.push({ el: r, speed: speeds[si++ % speeds.length] });\n      circleAngles.push(Math.random() * 360);\n    });\n    (function ringLoop() {\n      circleRings.forEach((r, i) => {\n        circleAngles[i] += r.speed;\n        r.el.style.transform = `rotate(${circleAngles[i]}deg)`;\n      });\n      requestAnimationFrame(ringLoop);\n    })();\n  <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4985d2c1 e-con-full e-flex e-con e-parent\" data-id=\"4985d2c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37737070 elementor-widget elementor-widget-html\" data-id=\"37737070\" 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<style>\n  :root, [data-theme=\"dark\"] {\n    --pt-text:         #FDFAF7;\n    --pt-muted:        rgba(255,255,255,1);\n    --pt-muted-hover:  rgba(255,255,255,1);\n    --pt-sub:          rgba(255,255,255,1);\n    --pt-sub-hover:    rgba(255,255,255,0.6);\n    --pt-border:       #222;\n    --pt-border-hover: rgba(255,255,255,0.15);\n    --pt-mobile-mask:  rgba(10,10,8,0.72);\n    --pt-label:        rgba(255,255,255,0.8);\n    --pt-float-border: rgba(255,255,255,0.25);\n  }\n\n  [data-theme=\"light\"] {\n    --pt-text:         #1D1D1B;\n    --pt-muted:        rgba(29,29,27,0.3);\n    --pt-muted-hover:  rgba(29,29,27,0.7);\n    --pt-sub:          rgba(29,29,27,0.35);\n    --pt-sub-hover:    rgba(29,29,27,0.65);\n    --pt-border:       rgba(29,29,27,0.12);\n    --pt-border-hover: rgba(29,29,27,0.25);\n    --pt-mobile-mask:  rgba(253,250,247,0.78);\n    --pt-label:        rgba(29,29,27,0.4);\n    --pt-float-border: rgba(29,29,27,0.2);\n  }\n\n  .nb-portfolio *, #nb-float, #nb-mobile-bg {\n    transition: color .5s ease, background-color .5s ease, border-color .5s ease, opacity .4s ease !important;\n  }\n\n  .nb-portfolio * { box-sizing: border-box; }\n\n  .nb-portfolio {\n    width: 100% !important;\n    max-width: 100% !important;\n    padding: 80px 5vw 100px !important;\n    background: transparent !important;\n    font-family: 'Inter', sans-serif !important;\n    color: var(--pt-text) !important;\n  }\n\n  .nb-portfolio .nb-label {\n    font-family: 'Inter', sans-serif !important;\n    font-size: 11px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.28em !important;\n    text-transform: uppercase !important;\n    color: var(--pt-label) !important;\n    margin-bottom: 32px !important;\n    text-align: left !important;\n    display: block !important;\n    opacity: 0;\n    transform: translateY(16px);\n    transition: opacity 0.8s ease, transform 0.8s ease;\n  }\n  .nb-portfolio .nb-label.nb-vis {\n    opacity: 1 !important;\n    transform: translateY(0) !important;\n  }\n\n  .nb-portfolio ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }\n\n  .nb-portfolio .nb-item {\n    position: relative !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    padding: 28px 80px !important;\n    border-top: 1px solid var(--pt-border) !important;\n    cursor: pointer !important;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1), border-color 0.3s !important;\n    text-decoration: none !important;\n    background: transparent !important;\n  }\n  .nb-portfolio .nb-item:last-child { border-bottom: 1px solid var(--pt-border) !important; }\n  .nb-portfolio .nb-item.nb-vis { opacity: 1 !important; transform: translateY(0) !important; }\n  .nb-portfolio .nb-item:hover,\n  .nb-portfolio .nb-item.nb-touch-active { border-color: var(--pt-border-hover) !important; }\n\n  .nb-portfolio .nb-center {\n    display: flex !important; flex-direction: column !important;\n    align-items: center !important; justify-content: center !important;\n    text-align: center !important; gap: 6px !important;\n  }\n\n  .nb-portfolio .nb-num {\n    font-family: 'Inter', sans-serif !important;\n    font-size: 13px !important; font-weight: 400 !important;\n    color: var(--pt-muted) !important; letter-spacing: 0.1em !important;\n    display: block !important; position: absolute !important;\n    left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;\n    transition: color 0.3s !important; min-width: 28px !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-num,\n  .nb-portfolio .nb-item.nb-touch-active .nb-num { color: var(--pt-muted-hover) !important; }\n\n  .nb-portfolio .nb-name {\n    font-family: 'Playfair Display', Georgia, serif !important;\n    font-weight: 900 !important; font-size: clamp(40px, 5.5vw, 90px) !important;\n    line-height: 1 !important; color: var(--pt-text) !important; display: block !important;\n    transition: color 0.35s, transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-name,\n  .nb-portfolio .nb-item.nb-touch-active .nb-name {\n    transform: translateX(8px) !important;\n    color: var(--pt-muted-hover) !important;\n  }\n\n  .nb-portfolio .nb-role {\n    font-family: 'Inter', sans-serif !important;\n    font-size: 0.65rem !important; font-weight: 500 !important;\n    letter-spacing: 0.14em !important; text-transform: uppercase !important;\n    color: var(--pt-sub) !important; display: block !important;\n    opacity: 0; transform: translateY(6px);\n    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-role,\n  .nb-portfolio .nb-item.nb-touch-active .nb-role { opacity: 1 !important; transform: translateY(0) !important; }\n\n  \/* \u2500\u2500 CERCLE ROUAGE FL\u00c8CHE \u2500\u2500 *\/\n  .nb-portfolio .nb-arrow {\n    position: absolute !important;\n    right: 0 !important;\n    top: 50% !important;\n    transform: translateY(-50%) !important;\n    width: 64px !important;\n    height: 64px !important;\n    border-radius: 50% !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    background: transparent !important;\n    flex-shrink: 0 !important;\n    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-arrow,\n  .nb-portfolio .nb-item.nb-touch-active .nb-arrow {\n    transform: translateY(calc(-50% - 3px)) scale(1.08) !important;\n  }\n\n  .nb-portfolio .nb-arrow .ca-r1 {\n    position: absolute !important; inset: 0 !important;\n    border-radius: 50% !important;\n    border: 1.5px solid rgba(255,255,255,0.5) !important;\n  }\n  .nb-portfolio .nb-arrow .ca-r2 {\n    position: absolute !important; inset: 9px !important;\n    border-radius: 50% !important;\n    border: 1px solid rgba(255,255,255,0.25) !important;\n  }\n  .nb-portfolio .nb-arrow .ca-r3 {\n    position: absolute !important; inset: 18px !important;\n    border-radius: 50% !important;\n    border: 1px dashed rgba(255,255,255,0.12) !important;\n  }\n\n  .nb-portfolio .nb-arrow .ca-icon {\n    position: relative !important;\n    z-index: 2 !important;\n    font-size: 1.1rem !important;\n    color: rgba(255,255,255,0.8) !important;\n    line-height: 1 !important;\n    transition: color 0.3s, transform 0.3s !important;\n    font-family: 'Inter', sans-serif !important;\n    font-weight: 300 !important;\n  }\n\n  .nb-portfolio .nb-item:hover .nb-arrow .ca-r1,\n  .nb-portfolio .nb-item.nb-touch-active .nb-arrow .ca-r1 {\n    border-color: rgba(187,70,10,0.85) !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-arrow .ca-r2,\n  .nb-portfolio .nb-item.nb-touch-active .nb-arrow .ca-r2 {\n    border-color: rgba(187,70,10,0.4) !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-arrow .ca-r3,\n  .nb-portfolio .nb-item.nb-touch-active .nb-arrow .ca-r3 {\n    border-color: rgba(187,70,10,0.2) !important;\n  }\n  .nb-portfolio .nb-item:hover .nb-arrow .ca-icon,\n  .nb-portfolio .nb-item.nb-touch-active .nb-arrow .ca-icon {\n    color: rgba(187,70,10,0.9) !important;\n    transform: translateX(2px) !important;\n  }\n\n  #nb-float {\n    position: fixed !important; width: 180px !important; height: 180px !important;\n    border-radius: 50% !important; background-position: center !important;\n    background-repeat: no-repeat !important;\n    pointer-events: none !important; z-index: 99999 !important;\n    opacity: 0 !important; transform: scale(0.8) !important;\n    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;\n    border: 1.5px solid var(--pt-float-border) !important; top: 0; left: 0;\n  }\n  #nb-float.nb-on { opacity: 1 !important; transform: scale(1) !important; }\n\n  #nb-mobile-bg {\n    display: none; position: fixed !important; inset: 0 !important; z-index: 0 !important;\n    pointer-events: none !important; background-size: cover !important; background-position: center !important;\n    opacity: 0 !important; transition: opacity 0.45s ease, background-image 0.1s !important;\n  }\n  #nb-mobile-bg.nb-on { opacity: 1 !important; }\n  #nb-mobile-bg::after {\n    content: '' !important; position: absolute !important; inset: 0 !important;\n    background: var(--pt-mobile-mask) !important;\n  }\n\n  @media (max-width: 1024px) {\n    .nb-portfolio { padding: 60px 4vw 80px !important; }\n    .nb-portfolio .nb-label { font-size: 10px !important; }\n    .nb-portfolio .nb-item  { padding: 24px 72px !important; }\n    .nb-portfolio .nb-name  { font-size: clamp(32px, 5vw, 64px) !important; }\n    .nb-portfolio .nb-arrow { width: 52px !important; height: 52px !important; }\n    .nb-portfolio .nb-arrow .ca-r2 { inset: 8px !important; }\n    .nb-portfolio .nb-arrow .ca-r3 { inset: 16px !important; }\n    #nb-float { width: 140px !important; height: 140px !important; }\n  }\n\n  @media (max-width: 768px) {\n    #nb-float { display: none !important; }\n    #nb-mobile-bg { display: block !important; }\n    .nb-portfolio { padding: 48px 20px 80px !important; }\n    .nb-portfolio .nb-label { font-size: 10px !important; margin-bottom: 20px !important; }\n    .nb-portfolio .nb-item {\n      justify-content: flex-start !important;\n      padding: 20px 56px 20px 0 !important;\n      -webkit-tap-highlight-color: transparent !important;\n    }\n    .nb-portfolio .nb-center { align-items: flex-start !important; text-align: left !important; }\n    .nb-portfolio .nb-num {\n      position: static !important; transform: none !important;\n      display: block !important; margin-bottom: 4px !important; font-size: 11px !important;\n    }\n    .nb-portfolio .nb-name  { font-size: clamp(30px, 9.5vw, 54px) !important; }\n    .nb-portfolio .nb-role  { opacity: 1 !important; transform: none !important; transition: none !important; font-size: 0.6rem !important; }\n    .nb-portfolio .nb-arrow { width: 40px !important; height: 40px !important; }\n    .nb-portfolio .nb-arrow .ca-r2 { inset: 6px !important; }\n    .nb-portfolio .nb-arrow .ca-r3 { inset: 12px !important; }\n    .nb-portfolio .nb-arrow .ca-icon { font-size: 0.9rem !important; }\n  }\n\n  @media (max-width: 480px) {\n    .nb-portfolio { padding: 36px 16px 60px !important; }\n    .nb-portfolio .nb-name  { font-size: clamp(26px, 10vw, 44px) !important; }\n    .nb-portfolio .nb-label { font-size: 9px !important; }\n    .nb-portfolio .nb-arrow { width: 34px !important; height: 34px !important; }\n    .nb-portfolio .nb-arrow .ca-r2 { inset: 5px !important; }\n    .nb-portfolio .nb-arrow .ca-r3 { inset: 10px !important; }\n  }\n<\/style>\n\n<div id=\"nb-mobile-bg\"><\/div>\n\n<section class=\"nb-portfolio\">\n  <span class=\"nb-label\" id=\"nb-label\">Portfolio<\/span>\n  <ul>\n\n    <li class=\"nb-item\" data-color=\"blue\"\n        data-img=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/Capture-decran-2026-03-08-a-18.04.20.png\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/site-wordpress-cabinet-sante-cas-cabinet-c2s-nadia-b'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">01<\/span>\n        <span class=\"nb-name\">Cabinet C2S<\/span>\n        <span class=\"nb-role\">Design Direction \u00b7 UX\/UI Design<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n    <li class=\"nb-item\" data-color=\"terra\"\n        data-img=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ezgif.com-animated-gif-maker.gif\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/femme-de-coeur\/'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">02<\/span>\n        <span class=\"nb-name\">Femme de c\u0153ur<\/span>\n        <span class=\"nb-role\">Lead UX\/UI Designer<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n    <li class=\"nb-item\" data-color=\"cream\"\n        data-img=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/04\/LOGO-SORTIR-PLUS_-2.png\"\n        data-size=\"contain\" data-bgsize=\"auto 55%\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/sortir-plus\/'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">03<\/span>\n        <span class=\"nb-name\">Sortir Plus<\/span>\n        <span class=\"nb-role\">Design Direction \u00b7 UX\/UI Design<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n    <li class=\"nb-item\" data-color=\"teal\"\n        data-img=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/ezgif-11b007d65ad298.gif\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/sortir-plus-plateforme-communautaire-wordpress-nadia-b-2'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">04<\/span>\n        <span class=\"nb-name\">Alone Game<\/span>\n        <span class=\"nb-role\">UX\/UI \u00b7 Figma \u00b7 HTML CSS \u00b7 Photoshop<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n    <li class=\"nb-item\" data-color=\"moon\"\n        data-img=\"https:\/\/spa-moon-soul.nadiaui.fr\/supa_moon_soul_logo.gif\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/spa-moon-soul\/'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">05<\/span>\n        <span class=\"nb-name\">Spa Moon Soul<\/span>\n        <span class=\"nb-role\">UX\/UI \u00b7 HTML \u00b7 CSS \u00b7 JS<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n    <li class=\"nb-item\" data-color=\"azur\"\n        data-img=\"https:\/\/azur-immo.nadiaui.fr\/logo-anim.gif\"\n        data-size=\"contain\" data-bgsize=\"auto 63%\"\n        onclick=\"window.location='https:\/\/nadiaui.fr\/index.php\/azur-immo\/'\">\n      <div class=\"nb-center\">\n        <span class=\"nb-num\">06<\/span>\n        <span class=\"nb-name\">Azur Immo<\/span>\n        <span class=\"nb-role\">UX\/UI \u00b7 Int\u00e9gration \u00b7 HTML \u00b7 CSS \u00b7 JS<\/span>\n      <\/div>\n      <span class=\"nb-arrow\">\n        <div class=\"ca-r1\"><\/div><div class=\"ca-r2\"><\/div><div class=\"ca-r3\"><\/div>\n        <span class=\"ca-icon\">\u203a<\/span>\n      <\/span>\n    <\/li>\n\n  <\/ul>\n<\/section>\n\n<div id=\"nb-float\"><\/div>\n\n<script>\n(function () {\n\n  var html  = document.documentElement;\n  var saved = localStorage.getItem('nb-theme') || 'dark';\n  if (!html.getAttribute('data-theme')) {\n    html.setAttribute('data-theme', saved);\n  }\n\n  var fl = document.getElementById('nb-float');\n  var mx = 0, my = 0, cx = 0, cy = 0, following = false;\n  document.addEventListener('mousemove', function (e) { mx = e.clientX; my = e.clientY; });\n  (function loop() {\n    if (following) {\n      cx += (mx - cx) * 0.1;\n      cy += (my - cy) * 0.1;\n      fl.style.left = (cx - 90) + 'px';\n      fl.style.top  = (cy - 90) + 'px';\n    }\n    requestAnimationFrame(loop);\n  })();\n\n  var mobileBg  = document.getElementById('nb-mobile-bg');\n  var isMobile  = function () { return window.innerWidth <= 768; };\n  var activeItem = null;\n\n  function showMobileBg(img) {\n    if (!mobileBg || !img) return;\n    mobileBg.style.backgroundImage = \"url('\" + img + \"')\";\n    mobileBg.classList.add('nb-on');\n  }\n  function hideMobileBg() {\n    if (!mobileBg) return;\n    mobileBg.classList.remove('nb-on');\n  }\n\n  document.querySelectorAll('.nb-item').forEach(function (item) {\n    var img = item.getAttribute('data-img');\n\n    item.addEventListener('mouseenter', function () {\n      if (isMobile()) return;\n      if (fl && img) {\n        var size = item.getAttribute('data-size') || 'cover';\n        var custom = item.getAttribute('data-bgsize');\n        var bgSize = custom ? custom : (size === 'contain' ? '190%' : 'cover');\n        fl.style.backgroundImage = \"url('\" + img + \"')\";\n        fl.style.setProperty('background-size', bgSize, 'important');\n        fl.style.setProperty('background-color', size === 'contain' ? '#fff' : 'transparent', 'important');\n        fl.classList.add('nb-on');\n        following = true; cx = mx; cy = my;\n      }\n    });\n    item.addEventListener('mouseleave', function () {\n      if (isMobile()) return;\n      if (fl) fl.classList.remove('nb-on');\n      following = false;\n    });\n    item.addEventListener('touchstart', function () {\n      if (!isMobile()) return;\n      if (activeItem && activeItem !== item) activeItem.classList.remove('nb-touch-active');\n      if (activeItem === item) {\n        item.classList.remove('nb-touch-active');\n        hideMobileBg();\n        activeItem = null;\n      } else {\n        item.classList.add('nb-touch-active');\n        showMobileBg(img);\n        activeItem = item;\n      }\n    }, { passive: true });\n  });\n\n  document.addEventListener('touchstart', function (e) {\n    if (!isMobile() || !activeItem) return;\n    if (!activeItem.contains(e.target)) {\n      activeItem.classList.remove('nb-touch-active');\n      hideMobileBg();\n      activeItem = null;\n    }\n  }, { passive: true });\n\n  \/* Anneaux tournants sur les cercles fl\u00e8ches *\/\n  var arrowRings = [], arrowAngles = [];\n  var arSpeeds = [0.22, -0.14, 0.09, -0.22, 0.14, -0.09, 0.22, -0.14, 0.09, -0.18, 0.11, -0.08, 0.2, -0.13, 0.08];\n  var si = 0;\n  document.querySelectorAll('.nb-arrow .ca-r1, .nb-arrow .ca-r2, .nb-arrow .ca-r3').forEach(function(r) {\n    arrowRings.push({ el: r, speed: arSpeeds[si++ % arSpeeds.length] });\n    arrowAngles.push(Math.random() * 360);\n  });\n  (function arrowLoop() {\n    arrowRings.forEach(function(r, i) {\n      arrowAngles[i] += r.speed;\n      r.el.style.transform = 'rotate(' + arrowAngles[i] + 'deg)';\n    });\n    requestAnimationFrame(arrowLoop);\n  })();\n\n  function go() {\n    var lbl = document.getElementById('nb-label');\n    if (lbl) setTimeout(function () { lbl.classList.add('nb-vis'); }, 100);\n    document.querySelectorAll('.nb-item').forEach(function (el, i) {\n      setTimeout(function () { el.classList.add('nb-vis'); }, 200 + i * 120);\n    });\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', go);\n  } else {\n    setTimeout(go, 100);\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5e8f575 e-con-full e-flex e-con e-child\" data-id=\"5e8f575\" data-element_type=\"container\" data-e-type=\"container\" id=\"apropos\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-158597d3 elementor-widget elementor-widget-html\" data-id=\"158597d3\" 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<style>\n  :root, [data-theme=\"dark\"] {\n    --ab-bg:           #1D1D1B;\n    --ab-text:         #ffffff;\n    --ab-muted:        #ffffff;\n    --ab-sub:          #ffffff;\n    --ab-italic:       #ffffff;\n    --ab-border:       rgba(255,255,255,0.08);\n    --ab-ring-1:       rgba(255,255,255,0.45);\n    --ab-ring-2:       rgba(255,255,255,0.2);\n    --ab-ring-m1:      rgba(255,255,255,0.55);\n    --ab-ring-m2:      rgba(255,255,255,0.25);\n    --ab-ring-m3:      rgba(255,255,255,0.12);\n    --ab-ring-md1:     rgba(255,255,255,0.35);\n    --ab-ring-md2:     rgba(255,255,255,0.18);\n    --ab-photo-filter: brightness(0.72) grayscale(1);\n    --ab-overlay: linear-gradient(to right,\n      rgba(29,29,27,0.85) 0%,\n      rgba(29,29,27,0.5) 40%,\n      rgba(29,29,27,0.1) 100%);\n    --ab-overlay-mobile: linear-gradient(to bottom,\n      rgba(29,29,27,0.5) 0%,\n      rgba(29,29,27,0.75) 50%,\n      rgba(29,29,27,0.98) 100%);\n    --ab-overlay-tablet: linear-gradient(to right,\n      rgba(29,29,27,0.98) 0%,\n      rgba(29,29,27,0.8) 50%,\n      rgba(29,29,27,0.3) 100%);\n  }\n\n  [data-theme=\"light\"] {\n    --ab-bg:           #FDFAF7;\n    --ab-text:         #1D1D1B;\n    --ab-muted:        rgba(29,29,27,0.4);\n    --ab-sub:          rgba(29,29,27,0.7);\n    --ab-italic:       rgba(29,29,27,0.45);\n    --ab-border:       rgba(29,29,27,0.1);\n    --ab-ring-1:       rgba(29,29,27,0.3);\n    --ab-ring-2:       rgba(29,29,27,0.15);\n    --ab-ring-m1:      rgba(29,29,27,0.4);\n    --ab-ring-m2:      rgba(29,29,27,0.2);\n    --ab-ring-m3:      rgba(29,29,27,0.1);\n    --ab-ring-md1:     rgba(29,29,27,0.25);\n    --ab-ring-md2:     rgba(29,29,27,0.12);\n    --ab-photo-filter: brightness(0.85) grayscale(1);\n    --ab-overlay: linear-gradient(to right,\n      rgba(253,250,247,0.88) 0%,\n      rgba(253,250,247,0.55) 40%,\n      rgba(253,250,247,0.1) 100%);\n    --ab-overlay-mobile: linear-gradient(to bottom,\n      rgba(253,250,247,0.4) 0%,\n      rgba(253,250,247,0.7) 50%,\n      rgba(253,250,247,0.97) 100%);\n    --ab-overlay-tablet: linear-gradient(to right,\n      rgba(253,250,247,0.97) 0%,\n      rgba(253,250,247,0.82) 50%,\n      rgba(253,250,247,0.25) 100%);\n  }\n\n  .nb-about, .nb-about * {\n    transition: color .5s ease, background-color .5s ease,\n                border-color .5s ease, filter .5s ease !important;\n  }\n\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  .nb-about {\n    position: relative;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding-bottom: 80px;\n    background: var(--ab-bg);\n  }\n\n  .nb-about__bg {\n    position: absolute; inset: 0;\n    background-image: url('http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/ME.png');\n    background-size: 75% auto;\n    background-position: center 15%;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    filter: var(--ab-photo-filter);\n    z-index: 0;\n  }\n\n  .nb-about__overlay {\n    position: absolute; inset: 0;\n    background: var(--ab-overlay);\n    z-index: 1;\n  }\n\n  .nb-about__content {\n    position: relative; z-index: 2;\n    padding: 80px 5vw 40px;\n    max-width: 780px;\n  }\n\n  .nb-about__label {\n    color: #ffffff !important;\n    font-family: 'Inter', sans-serif;\n    font-size: 11px; font-weight: 600;\n    letter-spacing: 0.28em; text-transform: uppercase;\n    margin-bottom: 32px; display: block;\n  }\n\n  .nb-about__title {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-weight: 900;\n    font-size: clamp(48px, 6vw, 90px);\n    line-height: 0.92; margin-bottom: 40px;\n    color: #ffffff !important;\n  }\n  .nb-about__title em {\n    font-style: italic;\n    color: #ffffff !important;\n    display: block;\n    transition: color 0.4s ease !important;\n    cursor: default;\n  }\n  .nb-about__title em:hover { color: rgba(187,70,10,0.85) !important; }\n\n  .nb-about__text {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.9rem; font-weight: 400;\n    line-height: 1.8;\n    color: #ffffff !important;\n    margin-bottom: 16px;\n  }\n  .nb-about__text.nb-italic {\n    font-style: italic;\n    color: #ffffff !important;\n    margin-top: 8px;\n  }\n\n  .nb-about__btn-wrap {\n    position: relative; z-index: 2;\n    margin-left: auto; margin-right: 5vw;\n    align-self: flex-end; padding-bottom: 80px;\n    width: 300px; height: 320px; flex-shrink: 0;\n  }\n  .nb-small { position: absolute; top: 0; right: 20px; width: 80px; height: 80px; }\n  .nb-main  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; }\n  .nb-med   { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; }\n  .nb-ring  { position: absolute; border-radius: 50%; }\n\n  .nb-main__link {\n    position: absolute; inset: 0; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    text-decoration: none; z-index: 2;\n  }\n  .nb-main__link span {\n    font-family: 'Inter', sans-serif;\n    font-size: 10px; font-weight: 600;\n    letter-spacing: 0.18em; text-transform: uppercase;\n    color: #ffffff !important;\n    text-align: center; line-height: 1.8;\n    transition: color 0.3s !important; padding: 0 20px;\n  }\n  .nb-main__link:hover span { color: #4681B9 !important; }\n  .nb-main:hover .nb-ring:first-child { border-color: #4681B9 !important; }\n\n  @media (max-width: 1024px) {\n    .nb-about { padding-bottom: 60px; }\n    .nb-about__bg { background-size: 90% auto; background-attachment: scroll; }\n    .nb-about__overlay { background: var(--ab-overlay-tablet); }\n    .nb-about__content { max-width: 520px; padding: 60px 4vw 40px; }\n    .nb-about__title { font-size: clamp(40px, 5vw, 70px); }\n    .nb-about__btn-wrap { margin-right: 3vw; padding-bottom: 60px; width: 240px; height: 260px; }\n    .nb-small { width: 64px; height: 64px; }\n    .nb-main  { width: 160px; height: 160px; }\n    .nb-med   { width: 96px; height: 96px; }\n  }\n\n  @media (max-width: 768px) {\n    .nb-about { flex-direction: column; align-items: stretch; padding-bottom: 60px; min-height: auto; }\n    .nb-about__bg { background-size: cover; background-position: center 20%; background-attachment: scroll; }\n    .nb-about__overlay { background: var(--ab-overlay-mobile); }\n    .nb-about__content { max-width: 100%; padding: 60px 24px 32px; }\n    .nb-about__title { font-size: clamp(40px, 10vw, 64px); }\n    .nb-about__text  { font-size: 0.85rem; }\n    .nb-about__btn-wrap { margin: 0 auto; padding-bottom: 60px; width: 260px; height: 280px; }\n    .nb-small { width: 64px; height: 64px; }\n    .nb-main  { width: 160px; height: 160px; }\n    .nb-main__link span { font-size: 9px; }\n    .nb-med   { width: 96px; height: 96px; }\n  }\n\n  @media (max-width: 480px) {\n    .nb-about__content { padding: 48px 20px 24px; }\n    .nb-about__title { font-size: clamp(36px, 11vw, 52px); }\n    .nb-about__text { font-size: 0.8rem; }\n    .nb-about__btn-wrap { width: 220px; height: 240px; padding-bottom: 40px; }\n    .nb-main  { width: 136px; height: 136px; }\n    .nb-small { width: 54px; height: 54px; }\n    .nb-med   { width: 80px; height: 80px; }\n  }\n<\/style>\n\n<section class=\"nb-about\">\n  <div class=\"nb-about__bg\"><\/div>\n  <div class=\"nb-about__overlay\"><\/div>\n\n  <div class=\"nb-about__content\">\n    <span class=\"nb-about__label\">\u00c0 Propos<\/span>\n    <h2 class=\"nb-about__title\">\n      Nadia<br><em>Boussa\u00efd<\/em>\n    <\/h2>\n\n    <p class=\"nb-about__text\">Designer UI\/UX et graphiste freelance, sp\u00e9cialis\u00e9e en no-code et automatisation.<\/p>\n    <p class=\"nb-about__text\">Form\u00e9e en direction artistique et cr\u00e9ation graphique, j'accompagne entreprises et agences dans la conception et la r\u00e9alisation de leurs projets digitaux, de la maquette Figma au site WordPress, jusqu'aux workflows Make et bases Airtable.<\/p>\n    <p class=\"nb-about__text\">Mon parcours atypique, de la mode au design num\u00e9rique, nourrit ma cr\u00e9ativit\u00e9 et me permet d'apporter un regard singulier \u00e0 chaque projet \u00e0 la fois esth\u00e9tique et op\u00e9rationnel.<\/p>\n    <p class=\"nb-about__text nb-italic\">Construisons ensemble votre prochain projet.<\/p>\n  <\/div>\n\n  <div class=\"nb-about__btn-wrap\">\n    <div class=\"nb-small\">\n      <div class=\"nb-ring\" id=\"s1\" style=\"inset:0;border:1.5px solid var(--ab-ring-1);\"><\/div>\n      <div class=\"nb-ring\" id=\"s2\" style=\"inset:8px;border:1px solid var(--ab-ring-2);\"><\/div>\n    <\/div>\n    <div class=\"nb-main\">\n      <div class=\"nb-ring\" id=\"m1\" style=\"inset:0;border:1.5px solid var(--ab-ring-m1);\"><\/div>\n      <div class=\"nb-ring\" id=\"m2\" style=\"inset:12px;border:1px solid var(--ab-ring-m2);\"><\/div>\n      <div class=\"nb-ring\" id=\"m3\" style=\"inset:24px;border:1px dashed var(--ab-ring-m3);\"><\/div>\n      <a href=\"https:\/\/calendly.com\/nadia-b-designer-ui\/30min\" target=\"_blank\" class=\"nb-main__link\">\n        <span>R\u00e9server<br>un appel \u2192<\/span>\n      <\/a>\n    <\/div>\n    <div class=\"nb-med\">\n      <div class=\"nb-ring\" id=\"md1\" style=\"inset:0;border:1.5px solid var(--ab-ring-md1);\"><\/div>\n      <div class=\"nb-ring\" id=\"md2\" style=\"inset:10px;border:1px solid var(--ab-ring-md2);\"><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function() {\n\n  var html  = document.documentElement;\n  var saved = localStorage.getItem('nb-theme') || 'dark';\n  if (!html.getAttribute('data-theme')) {\n    html.setAttribute('data-theme', saved);\n  }\n\n  var rings = [\n    {id:'s1',  speed: -0.4},\n    {id:'s2',  speed:  0.6},\n    {id:'m1',  speed:  0.25},\n    {id:'m2',  speed: -0.18},\n    {id:'m3',  speed:  0.1},\n    {id:'md1', speed:  0.22},\n    {id:'md2', speed: -0.15}\n  ];\n  var els = {}, angles = {};\n\n  function init() {\n    var ok = true;\n    rings.forEach(function(r) {\n      var el = document.getElementById(r.id);\n      if (!el) { ok = false; } else { els[r.id] = el; angles[r.id] = Math.random() * 360; }\n    });\n    if (!ok) { setTimeout(init, 100); return; }\n    loop();\n  }\n\n  function loop() {\n    rings.forEach(function(r) {\n      angles[r.id] += r.speed;\n      els[r.id].style.transform = 'rotate(' + angles[r.id] + 'deg)';\n    });\n    requestAnimationFrame(loop);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    setTimeout(init, 50);\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-392da940 e-con-full e-flex e-con e-child\" data-id=\"392da940\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46eb9d54 elementor-widget elementor-widget-html\" data-id=\"46eb9d54\" 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\n<style>\n  \/* \u2500\u2500 Variables th\u00e8me \u2500\u2500 *\/\n  :root, [data-theme=\"dark\"] {\n    --sp-text:        ##ffffff;\n    --sp-muted:       rgba(#ffffff);\n    --sp-num:         rgba(#ffffff);\n    --sp-border:      rgba(255,255,255,0.08);\n    --sp-desc:        rgba(255,255,255,0.4);\n  }\n\n  [data-theme=\"light\"] {\n    --sp-text:        #1D1D1B;\n    --sp-muted:       rgba(29,29,27,0.4);\n    --sp-num:         rgba(29,29,27,0.3);\n    --sp-border:      rgba(29,29,27,0.1);\n    --sp-desc:        rgba(29,29,27,0.4);\n  }\n\n  \/* Transition douce *\/\n  .specialisation, .specialisation * {\n    transition: color .5s ease, border-color .5s ease, opacity .3s ease !important;\n  }\n\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  .specialisation {\n    padding: 80px 5vw 100px;\n    max-width: 100%; width: 100%; overflow: hidden;\n    font-family: 'Inter', sans-serif;\n  }\n\n  .specialisation__label {\n    font-family: 'Inter', sans-serif;\n    font-size: 11px; font-weight: 600;\n    letter-spacing: 0.28em; text-transform: uppercase;\n    color: var(--sp-muted);\n    margin-bottom: 32px;\n  }\n\n  .specialisation__list { list-style: none; }\n\n  .specialisation__item {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-weight: 900;\n    font-size: clamp(52px, 7vw, 110px);\n    line-height: 1.05;\n    color: var(--sp-text);\n    cursor: default;\n    transition: color 0.3s ease !important;\n    display: flex; align-items: center; gap: 16px;\n  }\n\n  \/* Couleurs hover individuelles *\/\n  .specialisation__item:nth-child(1):hover { color: #4681B9; }\n  .specialisation__item:nth-child(2):hover { color: rgba(187,70,10,0.85); }\n  .specialisation__item:nth-child(3):hover { color: var(--sp-text); }\n  .specialisation__item:nth-child(4):hover { color: #4681B9; }\n  .specialisation__item:nth-child(5):hover { color: rgba(187,70,10,0.85); }\n\n  .specialisation__item .num {\n    font-family: 'Inter', sans-serif;\n    font-size: 13px; font-weight: 400;\n    color: var(--sp-num); align-self: flex-start;\n    margin-top: 18px; min-width: 28px;\n  }\n  .specialisation__item:nth-child(1):hover .num { color: #4681B9; }\n  .specialisation__item:nth-child(2):hover .num { color: rgba(187,70,10,0.85); }\n  .specialisation__item:nth-child(3):hover .num { color: var(--sp-muted); }\n  .specialisation__item:nth-child(4):hover .num { color: #4681B9; }\n  .specialisation__item:nth-child(5):hover .num { color: rgba(187,70,10,0.85); }\n\n  .specialisation__item + .specialisation__item {\n    border-top: 1px solid var(--sp-border);\n    padding-top: 8px; margin-top: 4px;\n  }\n\n  .specialisation__item .desc {\n    font-family: 'Inter', sans-serif;\n    font-size: 13px; font-weight: 400;\n    color: var(--sp-desc); max-width: 260px;\n    line-height: 1.5; align-self: center;\n    margin-left: auto; padding-left: 48px;\n    opacity: 0; transform: translateX(10px);\n    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s !important;\n  }\n  .specialisation__item:hover .desc { opacity: 1; transform: translateX(0); }\n\n  .specialisation__item:nth-child(1):hover .desc { color: rgba(70,129,185,0.8); }\n  .specialisation__item:nth-child(2):hover .desc { color: rgba(187,70,10,0.7); }\n  .specialisation__item:nth-child(3):hover .desc { color: var(--sp-muted); }\n  .specialisation__item:nth-child(4):hover .desc { color: rgba(70,129,185,0.8); }\n  .specialisation__item:nth-child(5):hover .desc { color: rgba(187,70,10,0.7); }\n\n  \/* Tablette *\/\n  @media (max-width: 1024px) {\n    .specialisation { padding: 60px 4vw 80px; }\n    .specialisation__label { font-size: 10px; margin-bottom: 28px; }\n    .specialisation__item { font-size: clamp(40px, 6vw, 80px); }\n    .specialisation__item .desc { max-width: 200px; font-size: 12px; padding-left: 32px; }\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 768px) {\n    .specialisation { padding: 48px 20px 60px; }\n    .specialisation__label { font-size: 10px; margin-bottom: 20px; }\n    .specialisation__item { font-size: clamp(32px, 9vw, 56px); gap: 0; }\n    .specialisation__item .desc { display: none; }\n    .specialisation__item .num  { display: none; }\n    .specialisation__item + .specialisation__item { padding-top: 6px; margin-top: 2px; }\n  }\n\n  \/* Tr\u00e8s petit mobile *\/\n  @media (max-width: 480px) {\n    .specialisation { padding: 36px 16px 48px; }\n    .specialisation__label { font-size: 9px; margin-bottom: 16px; }\n    .specialisation__item { font-size: clamp(26px, 10vw, 42px); }\n  }\n<\/style>\n\n<section class=\"specialisation\">\n  <p class=\"specialisation__label\">Sp\u00e9cialisation<\/p>\n  <ul class=\"specialisation__list\">\n    <li class=\"specialisation__item\">\n      <span class=\"num\">01<\/span>\n      Design UX\/UI\n      <span class=\"desc\">Interfaces intuitives & exp\u00e9riences utilisateur soign\u00e9es, de Figma au produit final.<\/span>\n    <\/li>\n    <li class=\"specialisation__item\">\n      <span class=\"num\">02<\/span>\n      Direction artistique\n      <span class=\"desc\">Identit\u00e9s visuelles fortes et univers de marque coh\u00e9rents \u2014 print, digital & motion.<\/span>\n    <\/li>\n    <li class=\"specialisation__item\">\n      <span class=\"num\">03<\/span>\n      No-code & Web\n      <span class=\"desc\">Sites sur-mesure avec Webflow, WordPress, Notion\/Super \u2014 sans compromis sur le design.<\/span>\n    <\/li>\n    <li class=\"specialisation__item\">\n      <span class=\"num\">04<\/span>\n      Automatisation\n      <span class=\"desc\">Workflows intelligents avec Make & Zapier pour automatiser vos processus.<\/span>\n    <\/li>\n    <li class=\"specialisation__item\">\n      <span class=\"num\">05<\/span>\n      Base de donn\u00e9es\n      <span class=\"desc\">Structuration & gestion de vos donn\u00e9es avec Airtable, connect\u00e9es \u00e0 vos outils.<\/span>\n    <\/li>\n  <\/ul>\n<\/section>\n\n<script>\n(function () {\n  \/* S'assure que data-theme est d\u00e9fini sur <html> *\/\n  var html  = document.documentElement;\n  var saved = localStorage.getItem('nb-theme') || 'dark';\n  if (!html.getAttribute('data-theme')) {\n    html.setAttribute('data-theme', saved);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-562bfe7 e-con-full e-flex e-con e-parent\" data-id=\"562bfe7\" data-element_type=\"container\" data-e-type=\"container\" id=\"contact\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40780cd9 elementor-widget elementor-widget-html\" data-id=\"40780cd9\" 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<style>\n  :root, [data-theme=\"dark\"] {\n    --ct-text:     #ffffff;\n    --ct-muted:    #ffffff;\n    --ct-sub:      #ffffff;\n    --ct-em:       #ffffff;   \/* \u2190 \"ensemble\" en blanc pur *\/\n    --ct-r1:       rgba(255,255,255,0.9);\n    --ct-r2:       rgba(255,255,255,0.4);\n    --ct-r3:       rgba(255,255,255,0.2);\n    --ct-lbl:      #ffffff;\n    --ct-cb3-lbl:  rgba(253,250,247,0.4);\n    --ct-cb3-r1:   rgba(253,250,247,0.4);\n    --ct-cb3-r2:   rgba(253,250,247,0.2);\n  }\n\n  [data-theme=\"light\"] {\n    --ct-text:     #1D1D1B;\n    --ct-muted:    rgba(29,29,27,0.4);\n    --ct-sub:      rgba(29,29,27,0.6);\n    --ct-em:       rgba(29,29,27,0.3);\n    --ct-r1:       rgba(29,29,27,0.7);\n    --ct-r2:       rgba(29,29,27,0.25);\n    --ct-r3:       rgba(29,29,27,0.12);\n    --ct-lbl:      #1D1D1B;\n    --ct-cb3-lbl:  rgba(29,29,27,0.35);\n    --ct-cb3-r1:   rgba(29,29,27,0.35);\n    --ct-cb3-r2:   rgba(29,29,27,0.18);\n  }\n\n  .nb-contact, .nb-contact * {\n    transition: color .5s ease, border-color .5s ease !important;\n  }\n\n  .nb-contact * { box-sizing: border-box; }\n\n  .nb-contact {\n    position: relative !important;\n    padding: 100px 52px 120px !important;\n    overflow: visible !important;\n    min-height: 80vh !important;\n    background: transparent !important;\n  }\n\n  .nb-contact__inner {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: center !important;\n    justify-content: space-between !important;\n    gap: 60px !important;\n    position: relative !important;\n    z-index: 2 !important;\n    width: 100% !important;\n  }\n\n  .nb-contact__left { flex: 1 !important; min-width: 0 !important; }\n\n  .nb-contact__label {\n    font-family: 'Inter', sans-serif !important;\n    font-size: 11px !important; font-weight: 600 !important;\n    letter-spacing: 0.28em !important; text-transform: uppercase !important;\n    color: var(--ct-muted) !important;\n    margin-bottom: 32px !important; display: block !important;\n  }\n\n  .nb-contact__title {\n    font-family: 'Playfair Display', Georgia, serif !important;\n    font-weight: 900 !important;\n    font-size: clamp(60px, 9vw, 140px) !important;\n    line-height: 0.92 !important;\n    margin-bottom: 32px !important;\n    color: var(--ct-text) !important;\n  }\n  .nb-contact__title em {\n    font-style: italic !important;\n    color: var(--ct-em) !important;\n    display: block !important;\n    transition: color 0.4s ease !important;\n    cursor: default !important;\n  }\n  .nb-contact__title em:hover { color: rgba(187,70,10,0.85) !important; }\n\n  .nb-contact__sub {\n    font-family: 'Inter', sans-serif !important;\n    font-size: 0.8rem !important; font-weight: 400 !important;\n    color: var(--ct-sub) !important;\n    line-height: 1.8 !important;\n  }\n\n  .nb-contact__btns {\n    display: flex !important; flex-direction: row !important;\n    align-items: center !important; gap: 24px !important; flex-shrink: 0 !important;\n  }\n\n  .nb-cbtn {\n    position: relative !important; border-radius: 50% !important;\n    display: flex !important; align-items: center !important; justify-content: center !important;\n    text-decoration: none !important; cursor: pointer !important;\n    background: transparent !important; border: none !important;\n    flex-shrink: 0 !important; -webkit-tap-highlight-color: transparent !important;\n  }\n  .nb-cbtn--lg { width: 160px !important; height: 160px !important; }\n  .nb-cbtn--md { width: 130px !important; height: 130px !important; }\n  .nb-cbtn--sm { width: 100px !important; height: 100px !important; }\n\n  .nb-cbtn .nb-r1 { position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 1.5px solid var(--ct-r1) !important; transition: border-color 0.3s !important; }\n  .nb-cbtn .nb-r2 { position: absolute !important; inset: 11px !important; border-radius: 50% !important; border: 1px solid var(--ct-r2) !important; transition: border-color 0.3s !important; }\n  .nb-cbtn .nb-r3 { position: absolute !important; inset: 22px !important; border-radius: 50% !important; border: 1px dashed var(--ct-r3) !important; transition: border-color 0.3s !important; }\n\n  .nb-cbtn .nb-lbl {\n    position: relative !important; z-index: 2 !important;\n    font-family: 'Inter', sans-serif !important;\n    font-size: 9px !important; font-weight: 600 !important;\n    letter-spacing: 0.18em !important; text-transform: uppercase !important;\n    color: var(--ct-lbl) !important;\n    text-align: center !important; line-height: 1.9 !important;\n    transition: color 0.3s !important; padding: 0 14px !important;\n    pointer-events: none !important;\n  }\n\n  #nb-cb1:hover .nb-lbl { color: rgba(187,70,10,0.85) !important; }\n  #nb-cb1:hover .nb-r1  { border-color: rgba(187,70,10,0.85) !important; }\n  #nb-cb1:hover .nb-r2  { border-color: rgba(187,70,10,0.4) !important; }\n  #nb-cb1:hover .nb-r3  { border-color: rgba(187,70,10,0.2) !important; }\n\n  #nb-cb2:hover .nb-lbl { color: #4681B9 !important; }\n  #nb-cb2:hover .nb-r1  { border-color: #4681B9 !important; }\n  #nb-cb2:hover .nb-r2  { border-color: rgba(70,129,185,0.5) !important; }\n  #nb-cb2:hover .nb-r3  { border-color: rgba(70,129,185,0.25) !important; }\n\n  #nb-cb3:hover .nb-lbl { color: var(--ct-cb3-lbl) !important; }\n  #nb-cb3:hover .nb-r1  { border-color: var(--ct-cb3-r1) !important; }\n  #nb-cb3:hover .nb-r2  { border-color: var(--ct-cb3-r2) !important; }\n\n  #nb-cb1.nb-tap .nb-lbl { color: rgba(187,70,10,0.85) !important; }\n  #nb-cb1.nb-tap .nb-r1  { border-color: rgba(187,70,10,0.85) !important; }\n  #nb-cb1.nb-tap .nb-r2  { border-color: rgba(187,70,10,0.4) !important; }\n  #nb-cb1.nb-tap .nb-r3  { border-color: rgba(187,70,10,0.2) !important; }\n\n  #nb-cb2.nb-tap .nb-lbl { color: #4681B9 !important; }\n  #nb-cb2.nb-tap .nb-r1  { border-color: #4681B9 !important; }\n  #nb-cb2.nb-tap .nb-r2  { border-color: rgba(70,129,185,0.5) !important; }\n  #nb-cb2.nb-tap .nb-r3  { border-color: rgba(70,129,185,0.25) !important; }\n\n  #nb-cb3.nb-tap .nb-lbl { color: var(--ct-cb3-lbl) !important; }\n  #nb-cb3.nb-tap .nb-r1  { border-color: var(--ct-cb3-r1) !important; }\n  #nb-cb3.nb-tap .nb-r2  { border-color: var(--ct-cb3-r2) !important; }\n\n  @media (max-width: 900px) {\n    .nb-contact__inner { flex-direction: column !important; align-items: flex-start !important; gap: 48px !important; }\n  }\n\n  @media (max-width: 768px) {\n    .nb-contact { padding: 64px 24px 80px !important; min-height: auto !important; }\n    .nb-contact__title { font-size: clamp(48px, 12vw, 80px) !important; }\n    .nb-cbtn--lg { width: 110px !important; height: 110px !important; }\n    .nb-cbtn--md { width: 90px !important; height: 90px !important; }\n    .nb-cbtn--sm { width: 72px !important; height: 72px !important; }\n    .nb-cbtn .nb-lbl { font-size: 8px !important; }\n  }\n\n  @media (max-width: 480px) {\n    .nb-contact { padding: 48px 20px 64px !important; }\n    .nb-contact__title { font-size: clamp(40px, 13vw, 64px) !important; }\n    .nb-contact__btns { gap: 12px !important; }\n    .nb-cbtn--lg { width: 90px !important; height: 90px !important; }\n    .nb-cbtn--md { width: 76px !important; height: 76px !important; }\n    .nb-cbtn--sm { width: 62px !important; height: 62px !important; }\n    .nb-cbtn .nb-lbl { font-size: 7px !important; }\n  }\n<\/style>\n\n<section class=\"nb-contact\">\n  <div class=\"nb-contact__inner\">\n\n    <div class=\"nb-contact__left\">\n      <p class=\"nb-contact__label\">Contact<\/p>\n      <h2 class=\"nb-contact__title\">\n        Travaillons<br><em>ensemble<\/em>\n      <\/h2>\n      <p class=\"nb-contact__sub\">\n        Designer UI\/UX \u00b7 Graphiste \u00b7 No-code<br>\n        Un projet en t\u00eate ? Je serai ravie d'en discuter.\n      <\/p>\n    <\/div>\n\n    <div class=\"nb-contact__btns\" id=\"nb-c-btns\">\n      <a href=\"mailto:nadia.b.designer.ui@gmail.com\" class=\"nb-cbtn nb-cbtn--lg\" id=\"nb-cb1\">\n        <div class=\"nb-r1\"><\/div><div class=\"nb-r2\"><\/div><div class=\"nb-r3\"><\/div>\n        <span class=\"nb-lbl\">Envoyer<br>un mail<\/span>\n      <\/a>\n      <a href=\"https:\/\/airtable.com\/appdIOBAhZIWO0zDu\/shr59tUQQfqO9EgvC\" target=\"_blank\" class=\"nb-cbtn nb-cbtn--md\" id=\"nb-cb2\">\n        <div class=\"nb-r1\"><\/div><div class=\"nb-r2\"><\/div><div class=\"nb-r3\"><\/div>\n        <span class=\"nb-lbl\">D\u00e9marrons<br>un projet<\/span>\n      <\/a>\n      <a href=\"https:\/\/www.linkedin.com\/in\/nadia-b-950b68383\" target=\"_blank\" class=\"nb-cbtn nb-cbtn--sm\" id=\"nb-cb3\">\n        <div class=\"nb-r1\"><\/div><div class=\"nb-r2\"><\/div>\n        <span class=\"nb-lbl\">LinkedIn<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n\n  var html  = document.documentElement;\n  var saved = localStorage.getItem('nb-theme') || 'dark';\n  if (!html.getAttribute('data-theme')) {\n    html.setAttribute('data-theme', saved);\n  }\n\n  var btnRings = [], btnAngles = [];\n  var speeds = [0.28, -0.18, 0.12, -0.24, 0.16, -0.1, 0.22, -0.15, 0.1];\n  var si = 0;\n\n  function initBtns() {\n    ['nb-cb1', 'nb-cb2', 'nb-cb3'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.querySelectorAll('.nb-r1,.nb-r2,.nb-r3').forEach(function (r) {\n        btnRings.push({ el: r, speed: speeds[si++ % speeds.length] });\n        btnAngles.push(Math.random() * 360);\n      });\n    });\n    loopBtns();\n  }\n\n  function loopBtns() {\n    btnRings.forEach(function (r, i) {\n      btnAngles[i] += r.speed;\n      r.el.style.transform = 'rotate(' + btnAngles[i] + 'deg)';\n    });\n    requestAnimationFrame(loopBtns);\n  }\n\n  ['nb-cb1', 'nb-cb2', 'nb-cb3'].forEach(function (id) {\n    var el = document.getElementById(id);\n    if (!el) return;\n    el.addEventListener('touchstart', function () { el.classList.add('nb-tap'); }, { passive: true });\n    el.addEventListener('touchend',   function () { setTimeout(function () { el.classList.remove('nb-tap'); }, 400); }, { passive: true });\n    el.addEventListener('touchcancel',function () { el.classList.remove('nb-tap'); }, { passive: true });\n  });\n\n  var em = document.querySelector('.nb-contact__title em');\n  if (em) {\n    em.addEventListener('touchstart', function () { em.style.color = 'rgba(187,70,10,0.85)'; }, { passive: true });\n    em.addEventListener('touchend',   function () { setTimeout(function () { em.style.color = ''; }, 600); }, { passive: true });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function () { setTimeout(initBtns, 200); });\n  } else {\n    setTimeout(initBtns, 50);\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b9fbb44 e-con-full e-flex e-con e-parent\" data-id=\"1b9fbb44\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71434b6e elementor-widget elementor-widget-html\" data-id=\"71434b6e\" 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<style>\n  :root, [data-theme=\"dark\"] {\n    --ft-bg:           transparent;\n    --ft-text:         #ffffff;\n    --ft-muted:        #ffffff;\n    --ft-sub:          #ffffff;\n    --ft-desc:         #ffffff;\n    --ft-border:       rgba(255,255,255,0.08);\n    --ft-copy:         #ffffff;\n    --ft-legal:        #ffffff;\n    --ft-legal-hover:  #ffffff;\n    --ft-top-line:     linear-gradient(to right, rgba(187,70,10,0.3), rgba(255,255,255,0.08), rgba(70,129,185,0.2));\n    --ft-em:           #ffffff;\n    --ft-gear-opacity: 0.04;\n    --ft-ring1:        rgba(255,255,255,0.55);\n    --ft-ring2:        rgba(255,255,255,0.25);\n    --ft-ring3:        rgba(255,255,255,0.12);\n  }\n  [data-theme=\"light\"] {\n    --ft-bg:           transparent;\n    --ft-text:         #1D1D1B;\n    --ft-muted:        #1D1D1B;\n    --ft-sub:          #1D1D1B;\n    --ft-desc:         #1D1D1B;\n    --ft-border:       rgba(29,29,27,0.1);\n    --ft-copy:         #1D1D1B;\n    --ft-legal:        #1D1D1B;\n    --ft-legal-hover:  #1D1D1B;\n    --ft-top-line:     linear-gradient(to right, rgba(187,70,10,0.25), rgba(29,29,27,0.06), rgba(70,129,185,0.18));\n    --ft-em:           #1D1D1B;\n    --ft-gear-opacity: 0.06;\n    --ft-ring1:        rgba(29,29,27,0.4);\n    --ft-ring2:        rgba(29,29,27,0.2);\n    --ft-ring3:        rgba(29,29,27,0.1);\n  }\n\n  .nb-footer, .nb-footer * {\n    transition: color .5s ease, background-color .5s ease,\n                border-color .5s ease, opacity .5s ease !important;\n  }\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  .nb-footer {\n    position: relative;\n    background: var(--ft-bg) !important;\n    color: var(--ft-text);\n    font-family: 'Inter', sans-serif;\n    overflow: hidden;\n    padding: 80px 52px 40px;\n  }\n\n  .nb-footer__gear {\n    position: absolute;\n    right: -120px; top: 50%;\n    transform: translateY(-50%);\n    width: 600px; height: 600px;\n    opacity: var(--ft-gear-opacity);\n    pointer-events: none;\n    animation: nb-spin 60s linear infinite;\n  }\n  @keyframes nb-spin {\n    from { transform: translateY(-50%) rotate(0deg); }\n    to   { transform: translateY(-50%) rotate(360deg); }\n  }\n\n  .nb-footer__top-line {\n    width: 100%; height: 1px;\n    background: var(--ft-top-line);\n    margin-bottom: 40px;\n  }\n\n  .nb-footer__grid {\n    display: grid;\n    grid-template-columns: 1.6fr 1fr 1fr;\n    gap: 48px;\n    margin-bottom: 80px;\n    align-items: start;\n  }\n\n  .nb-footer__brand { display: flex; flex-direction: column; }\n  .nb-footer__logo { width: 100px; height: 100px; margin-bottom: 28px; flex-shrink: 0; }\n\n  .nb-footer__tagline {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-size: clamp(28px, 3.5vw, 48px);\n    font-weight: 900; line-height: 1;\n    color: var(--ft-text); margin-bottom: 20px;\n  }\n  .nb-footer__tagline em {\n    font-style: italic; color: var(--ft-em) !important;\n    transition: color 0.4s ease !important;\n    cursor: default; display: block;\n  }\n  .nb-footer__tagline em:hover { color: rgba(187,70,10,0.85) !important; }\n\n  .nb-footer__desc {\n    font-size: 0.72rem; font-weight: 400;\n    letter-spacing: 0.14em; color: var(--ft-desc);\n    line-height: 1.9; text-transform: uppercase; max-width: 260px;\n  }\n\n  .nb-footer__col-offset { padding-top: 128px; }\n\n  .nb-footer__col-title {\n    font-size: 0.62rem; font-weight: 600;\n    letter-spacing: 0.28em; text-transform: uppercase;\n    color: var(--ft-muted); margin-bottom: 28px;\n  }\n\n  \/* \u2500\u2500 LIENS SANS TRAITS \u2500\u2500 *\/\n  .nb-footer__links { list-style: none; display: flex; flex-direction: column; gap: 16px; }\n  .nb-footer__links a {\n    font-size: 0.8rem; font-weight: 500;\n    letter-spacing: 0.06em; color: #ffffff !important;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.3s !important;\n  }\n  .nb-footer__links li:nth-child(1) a:hover,\n  .nb-footer__links li:nth-child(1) a.nb-tap { color: rgba(187,70,10,0.9) !important; }\n  .nb-footer__links li:nth-child(2) a:hover,\n  .nb-footer__links li:nth-child(2) a.nb-tap { color: #4681B9 !important; }\n\n  \/* \u2500\u2500 CERCLES R\u00c9SEAUX avec anneaux tournants \u2500\u2500 *\/\n  .nb-footer__socials { display: flex; flex-direction: column; gap: 20px; }\n\n  .nb-footer__social-btn {\n    display: flex; align-items: center; gap: 18px;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .nb-footer__social-ring {\n    position: relative;\n    width: 52px; height: 52px; border-radius: 50%;\n    flex-shrink: 0;\n    transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1);\n  }\n  .nb-footer__social-btn:hover .nb-footer__social-ring { transform: scale(1.1); }\n\n  .nb-footer__social-ring .sr1 { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--ft-ring1); }\n  .nb-footer__social-ring .sr2 { position:absolute; inset:8px; border-radius:50%; border:1px solid var(--ft-ring2); }\n  .nb-footer__social-ring .sr3 { position:absolute; inset:16px; border-radius:50%; border:1px solid var(--ft-ring3); }\n\n  .nb-footer__social-label {\n    font-size: 0.78rem; font-weight: 500;\n    letter-spacing: 0.1em; color: #ffffff !important;\n    transition: color 0.3s !important;\n  }\n\n  \/* hover LinkedIn & Behance \u2192 bleu *\/\n  \/* hover LinkedIn \u2192 bleu *\/\n  .nb-footer__social-btn[href*=\"linkedin\"]:hover .sr1 { border-color: #4681B9 !important; }\n  .nb-footer__social-btn[href*=\"linkedin\"]:hover .sr2 { border-color: rgba(70,129,185,0.4) !important; }\n  .nb-footer__social-btn[href*=\"linkedin\"]:hover .nb-footer__social-label { color: #4681B9 !important; }\n\n  \/* hover Behance \u2192 blanc *\/\n  .nb-footer__social-btn[href*=\"behance\"]:hover  .sr1 { border-color: rgba(255,255,255,0.9) !important; }\n  .nb-footer__social-btn[href*=\"behance\"]:hover  .sr2 { border-color: rgba(255,255,255,0.4) !important; }\n  .nb-footer__social-btn[href*=\"behance\"]:hover  .nb-footer__social-label { color: #ffffff !important; }\n\n  \/* hover Instagram \u2192 terracotta *\/\n  .nb-footer__social-btn[href*=\"instagram\"]:hover .sr1 { border-color: rgba(187,70,10,0.9) !important; }\n  .nb-footer__social-btn[href*=\"instagram\"]:hover .sr2 { border-color: rgba(187,70,10,0.4) !important; }\n  .nb-footer__social-btn[href*=\"instagram\"]:hover .nb-footer__social-label { color: rgba(187,70,10,0.9) !important; }\n\n  .nb-footer__bottom {\n    display: flex; align-items: center;\n    justify-content: space-between; flex-wrap: wrap; gap: 16px;\n  }\n  .nb-footer__copy {\n    font-size: 0.62rem; font-weight: 400;\n    letter-spacing: 0.16em; color: #ffffff !important;\n    text-transform: uppercase;\n  }\n  .nb-footer__legal { display: flex; gap: 28px; list-style: none; }\n  .nb-footer__legal a {\n    font-size: 0.62rem; font-weight: 400;\n    letter-spacing: 0.16em; color: #ffffff !important;\n    text-transform: uppercase; text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .nb-footer__legal a:hover,\n  .nb-footer__legal a.nb-tap { color: #ffffff !important; }\n\n  \/* \u2500\u2500 SURCHARGES ELEMENTOR \u2014 th\u00e8me-aware \u2500\u2500 *\/\n  .nb-footer__tagline em { color: var(--ft-em) !important; }\n  .nb-footer__desc,\n  .nb-footer__desc * { color: var(--ft-desc) !important; }\n  .nb-footer__col-title { color: var(--ft-muted) !important; }\n  .nb-footer__copy { color: var(--ft-copy) !important; }\n  .nb-footer__legal a { color: var(--ft-legal) !important; }\n  .nb-footer__links a { color: var(--ft-sub) !important; }\n  .nb-footer__social-label { color: var(--ft-sub) !important; }\n\n  \/* Anneaux \u2014 couleur selon th\u00e8me *\/\n  .nb-footer__social-ring .sr1 { border-color: var(--ft-ring1) !important; }\n  .nb-footer__social-ring .sr2 { border-color: var(--ft-ring2) !important; }\n  .nb-footer__social-ring .sr3 { border-color: var(--ft-ring3) !important; }\n\n  @media (min-width: 601px) and (max-width: 900px) {\n    .nb-footer { padding: 64px 36px 36px; }\n    .nb-footer__grid { grid-template-columns: 1fr 1fr; }\n    .nb-footer__brand { grid-column: 1 \/ -1; }\n    .nb-footer__col-offset { padding-top: 0; }\n    .nb-footer__gear { width: 400px; height: 400px; right: -80px; }\n  }\n\n  @media (max-width: 600px) {\n    .nb-footer { padding: 48px 20px 32px; }\n    .nb-footer__gear { width: 260px; height: 260px; right: -60px; top: 50%; }\n    .nb-footer__grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }\n    .nb-footer__logo { width: 72px; height: 72px; margin-bottom: 20px; }\n    .nb-footer__tagline { font-size: clamp(26px, 9vw, 40px); margin-bottom: 14px; }\n    .nb-footer__desc { font-size: 0.65rem; max-width: 100%; }\n    .nb-footer__col-title { margin-bottom: 20px; }\n    .nb-footer__col-offset { padding-top: 0; }\n    .nb-footer__links { gap: 12px; }\n    .nb-footer__links a { font-size: 0.85rem; padding: 4px 0; }\n    .nb-footer__socials { flex-direction: row; flex-wrap: wrap; gap: 16px; }\n    .nb-footer__social-btn { flex-direction: column; align-items: center; gap: 8px; }\n    .nb-footer__social-ring { width: 52px; height: 52px; }\n    .nb-footer__social-label { font-size: 0.55rem; letter-spacing: 0.14em; }\n    .nb-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }\n    .nb-footer__copy { font-size: 0.58rem; }\n    .nb-footer__legal { gap: 20px; flex-wrap: wrap; }\n    .nb-footer__legal a { font-size: 0.58rem; }\n  }\n\n  @media (max-width: 380px) {\n    .nb-footer { padding: 40px 16px 28px; }\n    .nb-footer__tagline { font-size: clamp(22px, 8vw, 34px); }\n    .nb-footer__social-ring { width: 44px; height: 44px; }\n    .nb-footer__social-ring .sr2 { inset: 6px; }\n    .nb-footer__social-ring .sr3 { inset: 12px; }\n    .nb-footer__gear { width: 200px; height: 200px; right: -50px; }\n  }\n<\/style>\n\n<footer class=\"nb-footer\">\n  <img decoding=\"async\" class=\"nb-footer__gear\"\n    src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2026\/03\/LOGOFOND.png\" alt=\"\" \/>\n\n  <div class=\"nb-footer__top-line\"><\/div>\n\n  <div class=\"nb-footer__grid\">\n\n    <div class=\"nb-footer__brand\">\n      <img decoding=\"async\" class=\"nb-footer__logo\"\n        src=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/12\/LOGO-RECTO-NADIA.B-scaled.png\"\n        alt=\"Nadia.B\" \/>\n      <h2 class=\"nb-footer__tagline\">\n        Cr\u00e9ons<br><em>ensemble<\/em>\n      <\/h2>\n      <p class=\"nb-footer__desc\">\n        Graphiste &amp; UI\/UX Designer Freelance<br>\n        Paris \u00b7 No-code \u00b7 Motion \u00b7 Identit\u00e9 visuelle\n      <\/p>\n    <\/div>\n\n    <div class=\"nb-footer__col-offset\">\n      <p class=\"nb-footer__col-title\">Contact<\/p>\n      <ul class=\"nb-footer__links\">\n        <li><a href=\"mailto:nadia.b.designer.ui@gmail.com\">Mail<\/a><\/li>\n        <li><a href=\"https:\/\/airtable.com\/appdIOBAhZIWO0zDu\/shr59tUQQfqO9EgvC\" target=\"_blank\">D\u00e9marrer un projet<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n    <div class=\"nb-footer__col-offset\">\n      <p class=\"nb-footer__col-title\">R\u00e9seaux<\/p>\n      <div class=\"nb-footer__socials\">\n\n        <a href=\"https:\/\/www.linkedin.com\/in\/nadia-b-950b68383\" target=\"_blank\" class=\"nb-footer__social-btn\">\n          <div class=\"nb-footer__social-ring\">\n            <div class=\"sr1\" id=\"sr1a\"><\/div>\n            <div class=\"sr2\" id=\"sr2a\"><\/div>\n            <div class=\"sr3\" id=\"sr3a\"><\/div>\n          <\/div>\n          <span class=\"nb-footer__social-label\">LinkedIn<\/span>\n        <\/a>\n\n        <a href=\"https:\/\/www.behance.net\/nadiaboussaid1\" target=\"_blank\" class=\"nb-footer__social-btn\">\n          <div class=\"nb-footer__social-ring\">\n            <div class=\"sr1\" id=\"sr1b\"><\/div>\n            <div class=\"sr2\" id=\"sr2b\"><\/div>\n            <div class=\"sr3\" id=\"sr3b\"><\/div>\n          <\/div>\n          <span class=\"nb-footer__social-label\">Behance<\/span>\n        <\/a>\n\n        <a href=\"https:\/\/www.instagram.com\/nadiab.ui\/\" target=\"_blank\" class=\"nb-footer__social-btn\">\n          <div class=\"nb-footer__social-ring\">\n            <div class=\"sr1\" id=\"sr1c\"><\/div>\n            <div class=\"sr2\" id=\"sr2c\"><\/div>\n            <div class=\"sr3\" id=\"sr3c\"><\/div>\n          <\/div>\n          <span class=\"nb-footer__social-label\">Instagram<\/span>\n        <\/a>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"nb-footer__bottom\">\n    <p class=\"nb-footer__copy\">\u00a9 2026 Nadia Boussa\u00efd \u2014 Tous droits r\u00e9serv\u00e9s<\/p>\n    <ul class=\"nb-footer__legal\">\n      <li><a href=\"#\">Mentions l\u00e9gales<\/a><\/li>\n      <li><a href=\"#\">Politique de confidentialit\u00e9<\/a><\/li>\n    <\/ul>\n  <\/div>\n\n<\/footer>\n\n<script>\n(function () {\n  var html = document.documentElement;\n  var saved = localStorage.getItem('nb-theme') || 'dark';\n  if (!html.getAttribute('data-theme')) html.setAttribute('data-theme', saved);\n\n  \/* Anneaux tournants *\/\n  var rings = [\n    {id:'sr1a', speed:  0.24}, {id:'sr2a', speed: -0.16}, {id:'sr3a', speed:  0.10},\n    {id:'sr1b', speed: -0.20}, {id:'sr2b', speed:  0.13}, {id:'sr3b', speed: -0.08},\n    {id:'sr1c', speed:  0.18}, {id:'sr2c', speed: -0.12}, {id:'sr3c', speed:  0.07}\n  ];\n  var els = {}, angles = {};\n  rings.forEach(function(r) {\n    var el = document.getElementById(r.id);\n    if (el) { els[r.id] = el; angles[r.id] = Math.random() * 360; }\n  });\n  (function loop() {\n    rings.forEach(function(r) {\n      if (!els[r.id]) return;\n      angles[r.id] += r.speed;\n      els[r.id].style.transform = 'rotate(' + angles[r.id] + 'deg)';\n    });\n    requestAnimationFrame(loop);\n  })();\n\n  \/* Touch feedback *\/\n  var tapTargets = document.querySelectorAll('.nb-footer__social-btn, .nb-footer__links a, .nb-footer__legal a');\n  tapTargets.forEach(function(el) {\n    el.addEventListener('touchstart',  function() { el.classList.add('nb-tap'); }, { passive: true });\n    el.addEventListener('touchend',    function() { setTimeout(function() { el.classList.remove('nb-tap'); }, 350); }, { passive: true });\n    el.addEventListener('touchcancel', function() { el.classList.remove('nb-tap'); }, { passive: true });\n  });\n\n  var em = document.querySelector('.nb-footer__tagline em');\n  if (em) {\n    em.addEventListener('touchstart', function() { em.style.color = 'rgba(187,70,10,0.85)'; }, { passive: true });\n    em.addEventListener('touchend',   function() { setTimeout(function() { em.style.color = ''; }, 600); }, { passive: true });\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-612622d3 e-con-full triangles-row elementor-hidden-mobile e-flex e-con e-child\" data-id=\"612622d3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-4d0486ed e-con-full triangles-row e-flex e-con e-child\" data-id=\"4d0486ed\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43ae7e7b triangles-row elementor-widget elementor-widget-image\" data-id=\"43ae7e7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png\" class=\"attachment-large size-large wp-image-1234\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-435c42a4 e-con-full .triangle-svg e-flex e-con e-child\" data-id=\"435c42a4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2120d86d triangles-row elementor-widget elementor-widget-image\" data-id=\"2120d86d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/07\/PETIT-TRIANGLE-BLEU-1.png\" class=\"attachment-large size-large wp-image-1144\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b89c91a e-con-full e-flex e-con e-child\" data-id=\"b89c91a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3101ce3c triangles-row elementor-widget elementor-widget-image\" data-id=\"3101ce3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"165\" height=\"81\" src=\"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/07\/PETIT-TRIANGLE-ROUGE-1.png\" class=\"attachment-large size-large wp-image-1145\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nadia Boussa\u00efd \u2014 Designer UI\/UX Portfolio \u00c0 propos Contact Nadia Boussa\u00efd Designer Design, web, automatisation. Designer freelance bas\u00e9e \u00e0 Paris.Je transforme vos id\u00e9es en sites, interfaces et outils qui fonctionnent au quotidien. Design soign\u00e9, sites rapides et durables, automatisations sur-mesure, de la maquette au site en ligne. \u00c0 Propos Port\u00adfolio Contact Scroll Portfolio 01 Cabinet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9364","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>PORTFOLIO - Nadia.B - Designer Graphique<\/title>\n<meta name=\"description\" content=\"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/nadiaui.fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PORTFOLIO - Nadia.B - Designer Graphique\" \/>\n<meta property=\"og:description\" content=\"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/nadiaui.fr\/\" \/>\n<meta property=\"og:site_name\" content=\"Nadia.B - Designer Graphique\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-09T14:51:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/\",\"url\":\"http:\\\/\\\/nadiaui.fr\\\/\",\"name\":\"PORTFOLIO - Nadia.B - Designer Graphique\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/nadiaui.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/PETIT-TRIANGLE-BEIGE.png\",\"datePublished\":\"2026-04-19T13:17:39+00:00\",\"dateModified\":\"2026-06-09T14:51:32+00:00\",\"description\":\"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/nadiaui.fr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nadiaui.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/PETIT-TRIANGLE-BEIGE.png\",\"contentUrl\":\"https:\\\/\\\/nadiaui.fr\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/PETIT-TRIANGLE-BEIGE.png\",\"width\":165,\"height\":81},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"http:\\\/\\\/nadiaui.fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PORTFOLIO\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/nadiaui.fr\\\/#website\",\"url\":\"http:\\\/\\\/nadiaui.fr\\\/\",\"name\":\"Nadia.B - Designer Graphique\",\"description\":\"Nadia B, Designer UI\\\/UX et passionn\u00e9e par le design visuel.   Explorez mon univers cr\u00e9atif \u00e0 travers ce portfolio.\u200b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/nadiaui.fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PORTFOLIO - Nadia.B - Designer Graphique","description":"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/nadiaui.fr\/","og_locale":"en_US","og_type":"article","og_title":"PORTFOLIO - Nadia.B - Designer Graphique","og_description":"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.","og_url":"http:\/\/nadiaui.fr\/","og_site_name":"Nadia.B - Designer Graphique","article_modified_time":"2026-06-09T14:51:32+00:00","og_image":[{"url":"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/nadiaui.fr\/","url":"http:\/\/nadiaui.fr\/","name":"PORTFOLIO - Nadia.B - Designer Graphique","isPartOf":{"@id":"http:\/\/nadiaui.fr\/#website"},"primaryImageOfPage":{"@id":"http:\/\/nadiaui.fr\/#primaryimage"},"image":{"@id":"http:\/\/nadiaui.fr\/#primaryimage"},"thumbnailUrl":"http:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png","datePublished":"2026-04-19T13:17:39+00:00","dateModified":"2026-06-09T14:51:32+00:00","description":"Designer no-code \u00e0 Paris, je con\u00e7ois, construis et automatise les sites de startups, PME et cabinets pro. D\u00e9couvrez mes projets.","breadcrumb":{"@id":"http:\/\/nadiaui.fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/nadiaui.fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/nadiaui.fr\/#primaryimage","url":"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png","contentUrl":"https:\/\/nadiaui.fr\/wp-content\/uploads\/2025\/08\/PETIT-TRIANGLE-BEIGE.png","width":165,"height":81},{"@type":"BreadcrumbList","@id":"http:\/\/nadiaui.fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"http:\/\/nadiaui.fr\/"},{"@type":"ListItem","position":2,"name":"PORTFOLIO"}]},{"@type":"WebSite","@id":"http:\/\/nadiaui.fr\/#website","url":"http:\/\/nadiaui.fr\/","name":"Nadia.B - Designer Graphique","description":"Nadia B, Designer UI\/UX et passionn\u00e9e par le design visuel.   Explorez mon univers cr\u00e9atif \u00e0 travers ce portfolio.\u200b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/nadiaui.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/pages\/9364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/comments?post=9364"}],"version-history":[{"count":140,"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/pages\/9364\/revisions"}],"predecessor-version":[{"id":10034,"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/pages\/9364\/revisions\/10034"}],"wp:attachment":[{"href":"https:\/\/nadiaui.fr\/index.php\/wp-json\/wp\/v2\/media?parent=9364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}