:root {
      --blue:       #1a4fd6;
      --blue-light: #3b72f5;
      --green:      #29c76f;
      --bg:         #05091a;
      --bg2:        #0b1230;
      --text:       #e8edff;
      --muted:      #8fa0cc;
      --border:     rgba(59,114,245,0.18);
      --card:       rgba(11,18,48,0.85);
      --radius:     18px;
      --ease:       cubic-bezier(.4,0,.2,1);
    }
 
    /* ══════════════════════════════════
       RESET & BASE
    ══════════════════════════════════ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      max-width: 100%;
    }
 
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      width: 100%;
    }
 
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      width: 100%;
      min-width: 320px;
      position: relative;
    }
 
    img, video, iframe, svg {
      max-width: 100%;
      height: auto;
      display: block;
    }
 
    /* ══════════════════════════════════
       FOND : BRUIT + ORBS
    ══════════════════════════════════ */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: .5;
    }
 
    .bg-orbs {
      position: fixed; inset: 0;
      width: 100%; height: 100%;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      opacity: .15;
      animation: orbFloat 14s ease-in-out infinite;
    }
    .orb1 { width: 340px; height: 340px; background: var(--blue);  top: -80px;  left: -80px;  animation-delay: 0s;  }
    .orb2 { width: 260px; height: 260px; background: var(--green); bottom: -60px; right: -60px; animation-delay: -5s; }
    .orb3 { width: 200px; height: 200px; background: var(--blue-light); top: 45%; left: 55%; animation-delay: -9s; }
 
    @keyframes orbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(20px,-25px) scale(1.06); }
      66%      { transform: translate(-15px,18px) scale(.94); }
    }
 
    /* ══════════════════════════════════
       NAVIGATION
    ══════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      height: 68px;
      padding: 0 5vw;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(5,9,26,.8);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow .3s;
    }
    nav.scrolled { box-shadow: 0 4px 40px rgba(26,79,214,.2); }
 
    .nav-logo {
      display: flex; align-items: center; gap: 9px;
      text-decoration: none; flex-shrink: 0;
    }
    .nav-logo img { height: 40px; width: auto; }
    .nav-logo span {
      font-family: 'Syne', sans-serif;
      font-weight: 800; font-size: 1.1rem;
      color: var(--text); letter-spacing: -.01em;
      white-space: nowrap;
    }
    .nav-logo span em {
      font-style: normal;
      background: linear-gradient(90deg, var(--blue-light), var(--green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
 
    .nav-links {
      display: flex; gap: 2rem; list-style: none;
    }
    .nav-links a {
      font-size: .88rem; color: var(--muted);
      text-decoration: none; font-weight: 500;
      transition: color .2s; position: relative;
    }
    .nav-links a::after {
      content: ''; position: absolute;
      bottom: -3px; left: 0; right: 100%;
      height: 1.5px; background: var(--green);
      transition: right .25s var(--ease);
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { right: 0; }
 
    .nav-cta {
      padding: .45rem 1.2rem;
      background: linear-gradient(135deg, var(--blue), var(--blue-light));
      color: #fff !important; border-radius: 50px;
      font-weight: 600 !important; font-size: .84rem !important;
      transition: transform .2s, box-shadow .2s !important;
    }
    .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,114,245,.4); }
    .nav-cta::after { display: none !important; }
 
    /* HAMBURGER */
    .hamburger {
      display: none; flex-direction: column;
      gap: 5px; cursor: pointer; padding: 4px; flex-shrink: 0;
    }
    .hamburger span {
      display: block; width: 24px; height: 2px;
      background: var(--text); transition: all .3s;
      border-radius: 2px;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
    /* MENU MOBILE */
    .mobile-menu {
      display: none; flex-direction: column;
      position: fixed; top: 68px; left: 0; right: 0;
      background: rgba(5,9,26,.98);
      backdrop-filter: blur(24px);
      z-index: 99; padding: 1.2rem 5vw 1.8rem;
      border-bottom: 1px solid var(--border);
      gap: .2rem;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      padding: .75rem 0; color: var(--muted);
      text-decoration: none; font-size: 1rem; font-weight: 500;
      border-bottom: 1px solid var(--border); transition: color .2s;
    }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover { color: var(--text); }
    .mobile-menu a.mob-cta {
      margin-top: .8rem; text-align: center; padding: .8rem;
      background: linear-gradient(135deg, var(--blue), var(--blue-light));
      color: #fff !important; border-radius: 50px; border: none;
      font-weight: 600;
    }
 
    /* ══════════════════════════════════
       HERO
    ══════════════════════════════════ */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 100px 6vw 70px;
      position: relative; z-index: 1;
    }
 
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(41,199,111,.1);
      border: 1px solid rgba(41,199,111,.3);
      color: var(--green); font-size: .76rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: .38rem .95rem; border-radius: 50px;
      margin-bottom: 1.8rem;
      animation: fadeUp .7s .2s both;
    }
    .hero-badge::before {
      content: ''; width: 6px; height: 6px;
      background: var(--green); border-radius: 50%;
      animation: pulse 1.8s infinite; flex-shrink: 0;
    }
    @keyframes pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(41,199,111,.6); }
      50%      { box-shadow: 0 0 0 6px rgba(41,199,111,0); }
    }
 
    .hero h1 {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: clamp(2.2rem, 6vw, 5rem);
      line-height: 1.08; letter-spacing: -.03em;
      max-width: 820px;
      animation: fadeUp .7s .35s both;
      word-break: break-word;
    }
    .hero h1 .gradient {
      display: block;
      background: linear-gradient(100deg, var(--blue-light) 20%, var(--green) 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
 
    .hero-slogan {
      margin-top: 1.3rem;
      font-size: clamp(.95rem, 2vw, 1.2rem);
      color: var(--muted); font-style: italic; font-weight: 300;
      animation: fadeUp .7s .5s both;
    }
    .hero-slogan strong { font-style: normal; color: var(--text); font-weight: 500; }
 
    .hero-desc {
      max-width: 540px; margin: 1.2rem auto 0;
      font-size: .98rem; color: var(--muted); line-height: 1.72;
      animation: fadeUp .7s .65s both;
    }
 
    .hero-btns {
      display: flex; gap: .9rem; flex-wrap: wrap;
      justify-content: center; margin-top: 2.2rem;
      animation: fadeUp .7s .8s both;
    }
    .btn-primary {
      padding: .82rem 2rem;
      background: linear-gradient(135deg, var(--blue), var(--blue-light));
      color: #fff; border-radius: 50px; font-weight: 600;
      font-size: .96rem; text-decoration: none; border: none; cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 8px 28px rgba(26,79,214,.35);
      white-space: nowrap;
    }
    .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(26,79,214,.5); }
    .btn-outline {
      padding: .82rem 2rem;
      background: transparent; color: var(--text); border-radius: 50px;
      font-weight: 500; font-size: .96rem; text-decoration: none;
      border: 1.5px solid var(--border); cursor: pointer;
      transition: border-color .2s, background .2s;
      white-space: nowrap;
    }
    .btn-outline:hover { border-color: var(--blue-light); background: rgba(59,114,245,.08); }
 
    .hero-stats {
      display: flex; gap: 2.5rem; flex-wrap: wrap;
      justify-content: center; margin-top: 3.5rem;
      animation: fadeUp .7s 1s both;
    }
    .stat { text-align: center; }
    .stat-num {
      font-family: 'Syne', sans-serif; font-size: 1.9rem; font-weight: 800;
      background: linear-gradient(135deg, var(--blue-light), var(--green));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .stat-label { font-size: .78rem; color: var(--muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .09em; }
 
    .scroll-hint {
      position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
      animation: fadeUp 1s 1.5s both;
    }
    .scroll-line {
      width: 1.5px; height: 36px;
      background: linear-gradient(to bottom, var(--border), transparent);
      animation: scrlLine 1.6s ease-in-out infinite;
    }
    @keyframes scrlLine {
      0%   { transform: scaleY(0); transform-origin: top; }
      50%  { transform: scaleY(1); transform-origin: top; }
      51%  { transform: scaleY(1); transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; }
    }
 
    /* ══════════════════════════════════
       SECTIONS COMMUNES
    ══════════════════════════════════ */
    section { position: relative; z-index: 1; }
 
    .section-label {
      display: inline-block; font-size: .72rem; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--green); margin-bottom: .9rem;
    }
    .section-title {
      font-family: 'Syne', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.9rem);
      font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
    }
    .section-sub {
      color: var(--muted); font-size: .98rem;
      line-height: 1.72; max-width: 540px; margin-top: .75rem;
    }
 
    /* ══════════════════════════════════
       SERVICES
    ══════════════════════════════════ */
    #services { padding: 100px 6vw; }
 
    .services-header {
      display: flex; justify-content: space-between;
      align-items: flex-end; gap: 2rem; flex-wrap: wrap;
      margin-bottom: 3.5rem;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.3rem;
    }
    .s-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.8rem;
      position: relative; overflow: hidden;
      transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
      backdrop-filter: blur(12px);
      word-break: break-word;
    }
    .s-card::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--c, var(--blue-light)), transparent);
      opacity: 0; transition: opacity .3s;
    }
    .s-card:hover::before { opacity: 1; }
    .s-card:hover { transform: translateY(-5px); border-color: rgba(59,114,245,.4); box-shadow: 0 18px 55px rgba(26,79,214,.17); }
    .s-card.featured {
      background: linear-gradient(135deg, rgba(26,79,214,.22), rgba(41,199,111,.1));
      border-color: rgba(59,114,245,.38);
      grid-column: span 2;
    }
    .s-icon {
      width: 50px; height: 50px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 1.2rem; flex-shrink: 0;
    }
    .ib { background: rgba(59,114,245,.15); }
    .ig { background: rgba(41,199,111,.15); }
    .ip { background: rgba(168,85,247,.15); }
    .io { background: rgba(251,146,60,.15); }
    .ic { background: rgba(34,211,238,.15); }
    .ik { background: rgba(236,72,153,.15); }
    .s-card h3 { font-family: 'Syne', sans-serif; font-size: 1.12rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
    .s-card p  { color: var(--muted); font-size: .9rem; line-height: 1.65; }
    .s-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; }
    .tag { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 50px; background: rgba(59,114,245,.12); color: var(--blue-light); border: 1px solid rgba(59,114,245,.2); }
    .tag.g { background: rgba(41,199,111,.12); color: var(--green); border-color: rgba(41,199,111,.2); }
 
    /* ══════════════════════════════════
       À PROPOS
    ══════════════════════════════════ */
    #about { padding: 100px 6vw; background: rgba(11,18,48,.45); }
 
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
 
    .about-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 2.2rem;
      backdrop-filter: blur(12px); position: relative; overflow: hidden;
    }
    .about-card::after {
      content: ''; position: absolute; top: -50px; right: -50px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(41,199,111,.1), transparent 70%);
      pointer-events: none;
    }
    .avatar {
      width: 66px; height: 66px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800;
      color: #fff; margin-bottom: 1.1rem; flex-shrink: 0;
    }
    .about-card h3 { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700; margin-bottom: .25rem; }
    .about-card .role { color: var(--green); font-size: .85rem; font-weight: 500; margin-bottom: .9rem; }
    .about-card p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
    .skill-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.1rem; }
    .chip { font-size: .68rem; font-weight: 600; padding: .2rem .55rem; background: rgba(59,114,245,.15); color: var(--blue-light); border-radius: 50px; }
 
    .feat-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.8rem; }
    .feat { display: flex; gap: .9rem; align-items: flex-start; }
    .feat-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(59,114,245,.12); display: flex; align-items: center; justify-content: center; font-size: .95rem; margin-top: .1rem; }
    .feat h4 { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: .15rem; }
    .feat p  { color: var(--muted); font-size: .87rem; line-height: 1.6; }
 
    /* ══════════════════════════════════
       PROCESSUS
    ══════════════════════════════════ */
    #process { padding: 100px 6vw; }
    .process-hd { text-align: center; margin-bottom: 4rem; }
    .process-hd .section-sub { margin: .7rem auto 0; }
 
    .steps {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 1.3rem; position: relative;
    }
    .steps::before {
      content: ''; position: absolute;
      top: 27px; left: 12%; right: 12%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), var(--border), transparent);
    }
    .step { text-align: center; padding: 1.3rem .8rem; }
    .step-n {
      width: 54px; height: 54px; border-radius: 50%;
      background: var(--bg2); border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800;
      color: var(--blue-light); margin: 0 auto 1.2rem;
      transition: background .3s, border-color .3s;
    }
    .step:hover .step-n { background: var(--blue); border-color: var(--blue-light); color: #fff; }
    .step h4 { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: .4rem; }
    .step p  { color: var(--muted); font-size: .84rem; line-height: 1.6; }
 
    /* ══════════════════════════════════
       TECHNOLOGIES
    ══════════════════════════════════ */
    #technologies { padding: 80px 0; background: rgba(11,18,48,.45); overflow: hidden; }
    .tech-hd { text-align: center; margin-bottom: 2.8rem; padding: 0 6vw; }
 
    .marquee-wrap { position: relative; overflow: hidden; }
    .marquee-wrap::before,
    .marquee-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
    }
    .marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg2), transparent); }
    .marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg2), transparent); }
 
    .marquee-track {
      display: flex; gap: .9rem;
      animation: marquee 28s linear infinite;
      width: max-content;
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .pill {
      display: flex; align-items: center; gap: .55rem;
      padding: .55rem 1.1rem; background: var(--card);
      border: 1px solid var(--border); border-radius: 50px;
      font-size: .85rem; font-weight: 500; color: var(--muted);
      white-space: nowrap; backdrop-filter: blur(8px);
    }
    .pill span { font-size: 1rem; }
 
    /* ══════════════════════════════════
       PORTFOLIO
    ══════════════════════════════════ */
    #portfolio { padding: 100px 6vw; }
    .portfolio-hd { margin-bottom: 3rem; }
 
    .proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
    .proj-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      transition: transform .3s var(--ease), box-shadow .3s;
      backdrop-filter: blur(12px);
    }
    .proj-card:hover { transform: translateY(-5px); box-shadow: 0 18px 55px rgba(26,79,214,.2); }
    .proj-thumb {
      height: 160px; display: flex; align-items: center;
      justify-content: center; font-size: 2.8rem;
    }
    .tb { background: linear-gradient(135deg, rgba(26,79,214,.3), rgba(59,114,245,.15)); }
    .tg { background: linear-gradient(135deg, rgba(41,199,111,.25), rgba(26,79,214,.15)); }
    .tp { background: linear-gradient(135deg, rgba(168,85,247,.25), rgba(26,79,214,.15)); }
    .to { background: linear-gradient(135deg, rgba(251,146,60,.25), rgba(41,199,111,.1)); }
    .tc { background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(26,79,214,.15)); }
    .tk { background: linear-gradient(135deg, rgba(236,72,153,.2), rgba(168,85,247,.15)); }
    .proj-body { padding: 1.3rem 1.4rem 1.4rem; }
    .proj-type { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); margin-bottom: .4rem; }
    .proj-body h3 { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
    .proj-body p  { color: var(--muted); font-size: .85rem; line-height: 1.6; }
 
    /* ══════════════════════════════════
       CONTACT
    ══════════════════════════════════ */
    #contact { padding: 100px 6vw; text-align: center; background: rgba(11,18,48,.45); }
    .cta-box {
      max-width: 700px; margin: 0 auto;
      background: linear-gradient(135deg, rgba(26,79,214,.18), rgba(41,199,111,.09));
      border: 1px solid rgba(59,114,245,.28);
      border-radius: 26px; padding: 3.8rem 2.8rem;
      position: relative; overflow: hidden;
    }
    .cta-box::before {
      content: ''; position: absolute; top: -90px; left: -90px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(26,79,214,.18), transparent 70%);
      pointer-events: none;
    }
    .cta-box::after {
      content: ''; position: absolute; bottom: -70px; right: -70px;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(41,199,111,.13), transparent 70%);
      pointer-events: none;
    }
    .cta-box h2 {
      font-family: 'Syne', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
      letter-spacing: -.02em; line-height: 1.15;
      position: relative; z-index: 1;
    }
    .cta-box > p {
      color: var(--muted); font-size: .98rem; line-height: 1.7;
      margin: .9rem 0 2.2rem; position: relative; z-index: 1;
    }
    .cta-btns {
      display: flex; gap: .9rem; flex-wrap: wrap;
      justify-content: center; position: relative; z-index: 1;
    }
    .cta-btn {
      display: flex; align-items: center; gap: .55rem;
      padding: .82rem 1.7rem; border-radius: 50px;
      font-weight: 600; font-size: .92rem;
      text-decoration: none; transition: transform .2s, box-shadow .2s;
      white-space: nowrap;
    }
    .cta-btn.wa  { background: linear-gradient(135deg,#25d366,#128c7e); color:#fff; box-shadow: 0 8px 24px rgba(37,211,102,.3); }
    .cta-btn.wa:hover  { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(37,211,102,.44); }
    .cta-btn.em  { background: linear-gradient(135deg, var(--blue), var(--blue-light)); color:#fff; box-shadow: 0 8px 24px rgba(26,79,214,.3); }
    .cta-btn.em:hover  { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(26,79,214,.44); }
 
    /* ══════════════════════════════════
       FOOTER
    ══════════════════════════════════ */
    footer {
      padding: 2.5rem 6vw; border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 1.2rem; position: relative; z-index: 1;
    }
    .foot-logo { display: flex; align-items: center; gap: 9px; }
    .foot-logo img { height: 34px; }
    .foot-logo span { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700; }
    .foot-logo span em { font-style: normal; background: linear-gradient(90deg, var(--blue-light), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    footer p { color: var(--muted); font-size: .82rem; }
    .foot-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
    .foot-links a { color: var(--muted); text-decoration: none; font-size: .82rem; transition: color .2s; }
    .foot-links a:hover { color: var(--text); }
 
    /* Lien politique de confidentialité dans le footer */
    .foot-policy {
      position: relative;
    }
    .foot-policy::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 100%;
      height: 1px;
      background: var(--green);
      transition: right .25s var(--ease);
    }
    .foot-policy:hover::after { right: 0; }
 
    /* ══════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity .65s var(--ease), transform .65s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
 
    /* ══════════════════════════════════
       SERVIGO AFRICA — CARTE PORTFOLIO
    ══════════════════════════════════ */
 
    /* Span 2 colonnes sur la grille */
    .sg-card {
      grid-column: span 2;
    }
 
    /* Layout horizontal : visuel gauche + contenu droite */
    .sg-layout {
      display: flex;
      flex-direction: row;
      height: 100%;
    }
 
    /* Panneau gauche navy/gold */
    .proj-thumb.ts {
      width: 200px;
      min-width: 200px;
      height: auto;
      min-height: 210px;
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, #070f1c 0%, #0e2035 65%, rgba(244,180,0,.1) 100%);
      border-right: 1px solid rgba(244,180,0,.15);
      font-size: 2.8rem;
    }
 
    /* Mini mockup téléphone */
    .sg-phone-mock {
      width: 132px;
      background: rgba(8,18,32,.96);
      border: 1.5px solid rgba(244,180,0,.28);
      border-radius: 14px;
      padding: 9px 9px 8px;
      box-shadow:
        0 0 0 1px rgba(244,180,0,.06),
        0 10px 30px rgba(0,0,0,.6),
        0 0 22px rgba(244,180,0,.07);
    }
 
    .sg-mock-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 8px;
    }
 
    .sg-mock-dot {
      width: 7px;
      height: 7px;
      background: #F4B400;
      border-radius: 50%;
      flex-shrink: 0;
    }
 
    .sg-mock-title {
      font-size: 9px;
      font-weight: 700;
      color: #F4B400;
      letter-spacing: .06em;
      font-family: 'Syne', sans-serif;
    }
 
    .sg-mock-row {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(244,180,0,.05);
      border: 1px solid rgba(244,180,0,.1);
      border-radius: 6px;
      padding: 5px 6px;
      margin-bottom: 4px;
    }
 
    .sg-mock-ico {
      font-size: 11px;
      flex-shrink: 0;
      line-height: 1;
    }
 
    .sg-mock-txt {
      font-size: 7.5px;
      color: rgba(232,237,255,.7);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'DM Sans', sans-serif;
    }
 
    .sg-mock-footer {
      text-align: center;
      font-size: 7px;
      font-weight: 600;
      color: #F4B400;
      background: rgba(244,180,0,.07);
      border-radius: 4px;
      padding: 4px;
      margin-top: 5px;
      letter-spacing: .04em;
      font-family: 'Syne', sans-serif;
    }
 
    /* Badge "Nouveau" */
    .proj-new {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(244,180,0,.12);
      border: 1px solid rgba(244,180,0,.32);
      color: #F4B400;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .18rem .52rem;
      border-radius: 50px;
      white-space: nowrap;
    }
 
    /* Accent or sur "Africa" dans le titre */
    .sg-name-accent {
      background: linear-gradient(90deg, #F4B400, #e0a400);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
 
    /* Tags techno dans la carte projet */
    .proj-tech-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .32rem;
      margin-top: .9rem;
    }
 
    /* Boutons d'action */
    .sg-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: 1.1rem;
    }
 
    .proj-store-btn {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .46rem 1rem;
      background: linear-gradient(135deg, rgba(26,79,214,.16), rgba(59,114,245,.09));
      border: 1px solid rgba(59,114,245,.3);
      color: var(--blue-light);
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      text-decoration: none;
      transition: background .2s, border-color .2s, transform .2s;
      white-space: nowrap;
    }
    .proj-store-btn:hover {
      background: linear-gradient(135deg, rgba(26,79,214,.3), rgba(59,114,245,.18));
      border-color: rgba(59,114,245,.55);
      transform: translateY(-2px);
    }
 
    .proj-policy-link {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      font-size: .76rem;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
      white-space: nowrap;
    }
    .proj-policy-link:hover { color: var(--text); }
 
    /* ══════════════════════════════════
       RESPONSIVE — TABLETTE
    ══════════════════════════════════ */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .s-card.featured { grid-column: span 1; }
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
      .about-visual { display: none; }
      .steps { grid-template-columns: repeat(2,1fr); }
      .steps::before { display: none; }
      .proj-grid { grid-template-columns: repeat(2,1fr); }
 
      /* ServiGO sur tablette : 1 colonne, layout vertical */
      .sg-card { grid-column: span 1; }
      .sg-layout { flex-direction: column; }
      .proj-thumb.ts {
        width: 100%;
        min-height: 150px;
        border-right: none;
        border-bottom: 1px solid rgba(244,180,0,.15);
      }
    }
 
    /* ══════════════════════════════════
       RESPONSIVE — MOBILE
    ══════════════════════════════════ */
    @media (max-width: 600px) {
      /* Orbs réduits */
      .orb1 { width: 180px; height: 180px; left: -50px; top: -50px; }
      .orb2 { width: 150px; height: 150px; right: -40px; bottom: -40px; }
      .orb3 { width: 120px; height: 120px; }
 
      /* Nav */
      nav { padding: 0 4vw; }
 
      /* Hero */
      .hero { padding: 90px 4vw 60px; }
      .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
      .hero-badge { font-size: .7rem; padding: .32rem .8rem; }
      .hero-desc { font-size: .9rem; }
      .hero-btns { flex-direction: column; align-items: stretch; width: 100%; }
      .btn-primary, .btn-outline { text-align: center; width: 100%; padding: .82rem 1rem; }
      .hero-stats {
        display: grid; grid-template-columns: repeat(2,1fr);
        gap: .8rem 1.2rem; width: 100%;
      }
      .scroll-hint { display: none; }
 
      /* Sections */
      #services, #about, #process, #portfolio, #contact { padding: 70px 4vw; }
 
      /* Services */
      .services-grid { grid-template-columns: 1fr; }
      .services-header { flex-direction: column; align-items: flex-start; }
 
      /* Processus */
      .steps { grid-template-columns: 1fr; }
 
      /* Portfolio */
      .proj-grid { grid-template-columns: 1fr; }
      .sg-card { grid-column: span 1; }
 
      /* ServiGO actions sur mobile */
      .sg-actions { flex-direction: column; align-items: flex-start; }
      .proj-store-btn { width: 100%; justify-content: center; }
 
      /* Contact */
      .cta-box { padding: 2rem 1.2rem; border-radius: 16px; }
      .cta-btns { flex-direction: column; align-items: stretch; }
      .cta-btn  { justify-content: center; width: 100%; }
 
      /* Footer */
      footer { flex-direction: column; text-align: center; padding: 2rem 4vw; }
      .foot-links { justify-content: center; }
    }