*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --lime:   #aaff00;
    --lime2:  #ccff33;
    --black:  #080808;
    --dark:   #0f0f0f;
    --panel:  #141414;
    --border: #1e1e1e;
    --muted:  #909090;
    --text:   #e2e2e2;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    cursor: none;
    overflow-x: hidden;
  }


  /* ── TEXTURE FOND TRACÉ ── */
  body::after {
    content: '';
    position: fixed; inset: 0;
    background-image:
      repeating-linear-gradient(
        -38deg,
        transparent,
        transparent 32px,
        rgba(170,255,0,0.013) 32px,
        rgba(170,255,0,0.013) 33px
      ),
      repeating-linear-gradient(
        52deg,
        transparent,
        transparent 48px,
        rgba(255,255,255,0.007) 48px,
        rgba(255,255,255,0.007) 49px
      );
    pointer-events: none;
    z-index: 8999;
  }



  /* ── TRAMÉ ABOUT ── */
  #about::before {
    content: '';
    position: absolute;
    right: -4rem;
    top: 30%;
    transform: translateY(-30%);
    width: clamp(320px, 45vw, 600px);
    aspect-ratio: 1;
    background-image: url("images/photo-tramee.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
  }
  .about-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
  }

  /* ── TRACÉ CRÉONS ENSEMBLE ── */
  .contact-title-wrap {
    position: relative;
    display: inline-block;
  }
  .contact-trace {
    position: absolute;
    inset: -20px -10px;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
  }
  .contact-trace path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);
    opacity: .7;
  }
  .contact-trace.draw path { stroke-dashoffset: 0; }
  .contact-title-wrap h2 { position: relative; z-index: 1; }

        /* ── INTRO SPLASH ── */
  #intro {
    position: fixed; inset: 0;
    background: #080808;
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .8s ease, visibility .8s ease;
  }
  #intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }
  body.intro-active { overflow: hidden; }

  .intro-dog {
    width: 150px; height: 150px; object-fit: contain;
    animation: dogPulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(170,255,0,.6));
  }
  @keyframes dogPulse {
    0%,100% { transform:scale(1);    filter:drop-shadow(0 0 20px rgba(170,255,0,.5)); }
    50%      { transform:scale(1.08); filter:drop-shadow(0 0 36px rgba(170,255,0,.95)); }
  }
  #intro.loaded .intro-bar { width: 100%; }
  #intro.loaded .intro-bar { width:100%; }
  #intro.loaded .intro-bar { width:100%; }

  /* ── NOISE ── */
  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.035'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 9000; opacity: .5;
  }

  /* ── CURSOR ── */
  #cur { position:fixed; top:0; left:0; width:10px; height:10px; background:var(--lime); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:width .2s,height .2s,border-radius .2s; }
  #cur-ring { position:fixed; top:0; left:0; width:40px; height:40px; border:1px solid var(--lime); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:.5; transition:width .25s,height .25s,opacity .25s; }
  .cur-big #cur { width:16px; height:16px; }
  .cur-big #cur-ring { width:64px; height:64px; opacity:.3; }
  .cur-sq #cur { width:48px; height:48px; border-radius:3px; background:var(--lime); mix-blend-mode:screen; }
  .cur-sq #cur-ring { width:48px; height:48px; border-radius:3px; opacity:0; }

  /* ── NAV ── */
  nav {
    position: fixed; top:0; left:0; right:0; z-index:100;
    display: flex; justify-content:space-between; align-items:center;
    padding: 1.6rem 3rem;
    border-bottom: 1px solid transparent;
    transition: border-color .4s, background .4s;
  }
  nav.scrolled { background: rgba(8,8,8,.92); border-color: var(--border); backdrop-filter: blur(12px); }

  .nav-logo {
    display: flex; align-items: center; gap: .8rem;
    text-decoration: none;
  }
  .nav-logo img { height: 44px; width: auto; max-width: 220px; object-fit: contain; }

  .nav-links { display:flex; gap:2.5rem; list-style:none; }
  .nav-links a {
    font-size: .62rem; letter-spacing:.22em; text-transform:uppercase;
    color: var(--muted); text-decoration:none;
    transition: color .3s;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--lime); }

  /* ── HERO ── */
  #hero {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 0 3rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }

  .hero-center {
    display: flex; flex-direction: column;
    justify-content: center;
    padding-top: 8rem;
    position: relative; z-index: 2;
  }

  .hero-eyebrow {
    font-size: .6rem; letter-spacing:.4em; text-transform:uppercase;
    color: var(--muted); margin-bottom: 2.5rem;
    opacity:0; animation: up .7s .2s forwards;
  }

  .hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(5rem, 13vw, 14rem);
    line-height: .88;
    letter-spacing: -.01em;
    color: #fff;
    opacity:0; animation: up .8s .35s forwards;
  }
  .hero-title .lime { color: var(--lime); }
  .hero-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: .7em;
    color: var(--lime);
    display: block;
  }

  .hero-sub {
    margin-top: 2.5rem;
    display: flex; align-items: flex-start; gap: 4rem;
    opacity:0; animation: up .7s .6s forwards;
  }
  .hero-desc {
    font-size: .7rem; line-height:2; color: var(--muted); max-width:34ch;
  }
  .hero-cta {
    display: inline-flex; align-items:center; gap:.8rem;
    font-size: .62rem; letter-spacing:.25em; text-transform:uppercase;
    color: var(--lime); text-decoration:none;
    border: 1px solid var(--lime);
    padding: .8rem 1.8rem;
    transition: background .3s, color .3s;
    white-space: nowrap; align-self:center;
  }
  .hero-cta:hover { background: var(--lime); color: var(--black); }

  /* Big ghost dog */
  .hero-ghost {
    position: absolute;
    right: 3rem;
    top: 30%;
    transform: translateY(-30%);
    opacity: .07;
    pointer-events: none;
    z-index: 1;
    animation: floatDog 8s ease-in-out infinite;
  }
  .hero-ghost img { width: clamp(200px, 28vw, 380px); filter: brightness(10); }

  @keyframes floatDog {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
  }

  .hero-bottom {
    display: flex; justify-content:space-between; align-items:flex-end;
    padding-bottom: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    font-size: .6rem; letter-spacing:.15em; text-transform:uppercase; color: var(--muted);
    opacity:0; animation: fadeIn .8s 1s forwards;
    position: relative; z-index:2;
  }
  .hero-scroll-hint { display:flex; align-items:center; gap:.8rem; }
  .scroll-line { width:40px; height:1px; background:var(--muted); animation: scrollPulse 2.5s ease-in-out infinite; }
  @keyframes scrollPulse { 0%,100%{width:40px;opacity:1} 50%{width:15px;opacity:.3} }

  /* ── MARQUEE ── */
  .marquee-wrap {
    overflow:hidden; padding:.9rem 0;
    border-bottom: 1px solid var(--border);
  }
  .marquee-track {
    display:flex; gap:2.5rem;
    animation: marquee 22s linear infinite;
    white-space:nowrap;
  }
  .marquee-track span {
    font-family:'Bebas Neue',sans-serif;
    font-size:1rem; letter-spacing:.3em; color: var(--muted); flex-shrink:0;
  }
  .marquee-track .mk { color: var(--lime); font-size:.7rem; }
  @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* ── WORK ── */
  #work { padding: 7rem 3rem; border-bottom: 1px solid var(--border); }

  .section-head {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom: 4rem;
  }
  .section-label {
    font-size:.58rem; letter-spacing:.4em; text-transform:uppercase;
    color: var(--muted); margin-bottom:.8rem;
    display:flex; align-items:center; gap:.8rem;
  }
  .section-label::before { content:''; width:30px; height:1px; background: var(--lime); }
  .section-title {
    font-family:'Bebas Neue',sans-serif;
    font-size: clamp(3rem,6vw,6rem);
    line-height:.9; color:#fff;
  }
  .section-title .lime { color: var(--lime); }
  .work-num { font-size:.6rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }

  .projects { display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--border); }

  .proj {
    background: var(--black);
    position:relative; overflow:hidden;
    cursor:none;
  }
  .proj:nth-child(1) { grid-column:1/8; }
  .proj:nth-child(2) { grid-column:8/13; }
  .proj:nth-child(3) { grid-column:1/5; }
  .proj:nth-child(4) { grid-column:5/13; }

  .proj-media {
    aspect-ratio:16/9; overflow:hidden; position:relative;
  }
  .proj:nth-child(1) .proj-media,
  .proj:nth-child(4) .proj-media { aspect-ratio:16/8; }
  .proj:nth-child(2) .proj-media,
  .proj:nth-child(3) .proj-media { aspect-ratio:4/3; }

  .proj-bg {
    width:100%; height:100%;
    transition: transform .9s cubic-bezier(.16,1,.3,1);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .proj:hover .proj-bg { transform: scale(1.05); }

  .bg1 { background: linear-gradient(135deg,#050a00,#0a1f00,#1a3d00); }
  .bg2 { background: linear-gradient(135deg,#000,#0d0d0d,#1a1400); }
  .bg3 { background: linear-gradient(135deg,#00050a,#001a0d); }
  .bg4 { background: linear-gradient(135deg,#050005,#150015,#0a0020); }

  .proj-mock {
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.1em; pointer-events:none;
  }
  .m1 { font-size:clamp(3rem,5vw,6rem); color:rgba(170,255,0,.12); }
  .m2 { display:flex;flex-direction:column;align-items:center;gap:.5rem; color:rgba(170,255,0,.1); }
  .m2 span:first-child { font-size:clamp(2.5rem,4vw,5rem); }
  .m2 span:last-child  { font-size:.8rem; letter-spacing:.5em; }
  .m3 { font-size:clamp(2rem,3.5vw,4rem); color:rgba(170,255,0,.1); font-family:'Playfair Display',serif; font-style:italic; }
  .m4 { color:rgba(170,255,0,.1); display:flex;flex-direction:column;align-items:flex-start;padding:2rem;width:100%; }
  .m4 span:first-child { font-size:clamp(3rem,5vw,7rem); line-height:1; }
  .m4 span:last-child  { font-size:.65rem; letter-spacing:.4em; margin-top:.5rem; }

  /* lime line on hover */
  .proj-line {
    position:absolute; bottom:0; left:0;
    height:2px; width:0; background:var(--lime);
    transition: width .5s cubic-bezier(.16,1,.3,1);
  }
  .proj:hover .proj-line { width:100%; }

  .proj-info {
    padding:1.2rem 1.5rem;
    display:flex; justify-content:space-between; align-items:flex-end;
    border-top: 1px solid var(--border);
  }
  .proj-name { font-family:'Playfair Display',serif; font-size:1rem; color:#fff; font-weight:900; }
  .proj-cat  { font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
  .proj-yr   { font-size:.62rem; color:var(--muted); }

  /* ── ABOUT ── */
  #about {
    display:grid; grid-template-columns:1fr;
    gap:0; border-bottom:1px solid var(--border);
    position:relative; overflow:hidden;
  }
  
  
  .about-content {
    padding: 3rem 3rem 6rem;
    display: flex; flex-direction: column; justify-content: center;
    gap: 0;
  }
  .about-title {
    font-family:'Bebas Neue',sans-serif;
    font-size: clamp(2.8rem,4.5vw,4.5rem); line-height:1; color:#fff;
    margin-bottom: 2.5rem; margin-top: 1.2rem;
  }
  .about-title .lime { color:var(--lime); }
  .about-text {
    font-size: .72rem; line-height: 2.2; color: var(--muted);
    margin-bottom: 1.6rem; max-width: 44ch;
  }

  .tools {
    display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem;
  }
  .tool {
    font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
    border:1px solid var(--border); padding:.35rem .85rem; color:var(--muted);
    transition:border-color .25s,color .25s;
  }
  .tool:hover { border-color:var(--lime); color:var(--lime); }

  .stats { display:flex; gap:3rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
  .stat-n { font-family:'Bebas Neue',sans-serif; font-size:3.5rem; color:var(--lime); line-height:1; }
  .stat-l { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }

  /* ── PROCESS ── */
  #process { padding:7rem 3rem; border-bottom:1px solid var(--border); background:var(--dark); }
  .process-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3rem,6vw,6rem); color:#fff; line-height:.9;
    margin-bottom:5rem; max-width:14ch;
  }
  .process-title .lime { color:var(--lime); }

  .steps { display:grid; grid-template-columns:repeat(4,1fr); }
  .step {
    padding:2.5rem 2rem; border-left:1px solid var(--border);
    transition:background .4s;
  }
  .step:hover { background:var(--panel); }
  .step-n {
    font-family:'Bebas Neue',sans-serif; font-size:4.5rem;
    color:var(--border); line-height:1; margin-bottom:1.5rem;
    transition:color .4s;
  }
  .step:hover .step-n { color:var(--lime); }
  .step-name { font-family:'Playfair Display',serif; font-size:1.2rem; color:#fff; margin-bottom:.8rem; }
  .step-desc { font-size:.65rem; line-height:1.9; color:var(--muted); }

  /* ── CONTACT ── */
  #contact {
    min-height:65vh; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
    padding:7rem 3rem; border-bottom:1px solid var(--border);
    position:relative; overflow:hidden;
  }
  
  

  .contact-tag { font-size:.58rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-bottom:2rem; }
  .contact-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(4.5rem,12vw,13rem); line-height:.88; color:#fff;
    letter-spacing:-.01em;
  }
  .contact-title .lime { color:var(--lime); }
  .contact-sub { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:2rem 0 3rem; }
  .contact-email {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.4rem,3vw,2.8rem); letter-spacing:.12em;
    color:var(--lime); text-decoration:none;
    border-bottom:1px solid var(--lime); padding-bottom:.2rem;
    transition:color .3s,border-color .3s,background .3s;
    padding: .4rem 1rem;
    position:relative; z-index:2;
  }
  .contact-email:hover { background:var(--lime); color:var(--black); border-color:var(--lime); }

  /* ── FOOTER ── */
  footer {
    background:var(--panel);
    padding:2rem 3rem;
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--border);
  }
  .f-logo { display:flex; align-items:center; gap:.7rem; }
  .f-logo img { height:22px; width:auto; }
  .f-logo span { font-family:'Bebas Neue',sans-serif; letter-spacing:.2em; color:#fff; }

  .f-copy { font-size:.58rem; color:var(--muted); letter-spacing:.1em; }
  .f-socials { display:flex; gap:2rem; }
  .f-socials a { font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
  .f-socials a:hover { color:var(--lime); }

  /* ── CAROUSEL ── */
  #carousel-section { padding:7rem 0 1rem; border-bottom:1px solid var(--border); overflow:hidden; }
  .carousel-header { padding:0 3rem; margin-bottom:3rem; display:flex; justify-content:space-between; align-items:flex-end; }
  .carousel-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem,5vw,5rem); color:#fff; line-height:.9; }
  .carousel-title .lime { color:var(--lime); }
  .carousel-controls { display:flex; gap:.8rem; }
  .car-btn {
    width:44px; height:44px; border:1px solid var(--border);
    background:transparent; color:var(--muted); font-size:1rem;
    cursor:none; display:flex; align-items:center; justify-content:center;
    transition:border-color .25s,color .25s,background .25s;
  }
  .car-btn:hover { border-color:var(--lime); color:var(--lime); }

  .carousel-track-wrap { overflow:hidden; }
  .carousel-track {
    display:flex; gap:1.5rem;
    padding:0 3rem;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  .car-slide {
    flex:0 0 calc(33.33% - 1rem);
    position:relative; cursor:none;
    min-width:0;
  }
  .car-slide-inner { aspect-ratio:3/4; position:relative; overflow:hidden; }
  .car-slide-bg {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
  }
  .car-slide:hover .car-slide-bg { transform:scale(1.04); }
  .csb1 { background:linear-gradient(160deg,#060e00,#122600); }
  .csb2 { background:linear-gradient(160deg,#080010,#1a0030); }
  .csb3 { background:linear-gradient(160deg,#100800,#2a1800); }
  .csb4 { background:linear-gradient(160deg,#001010,#002828); }
  .csb5 { background:linear-gradient(160deg,#0a0005,#200010); }
  .csb6 { background:linear-gradient(160deg,#050a00,#0f2000); }
  .car-slide-label {
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.1em; color:rgba(170,255,0,.1);
  }
  .csl-lg { font-size:clamp(3rem,5vw,6rem); }
  .csl-sm { font-size:clamp(1.5rem,2.5vw,3rem); text-align:center; }
  .car-slide-info { padding:.9rem 0; display:flex; justify-content:space-between; align-items:baseline; }
  .car-slide-name { font-size:.75rem; color:#fff; font-family:'Playfair Display',serif; font-style:italic; }
  .car-slide-tag  { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
  .car-dot-wrap { display:flex; gap:.5rem; padding:0 3rem; margin-top:1.5rem; }
  .car-dot { width:20px; height:2px; background:var(--border); transition:background .3s,width .3s; cursor:none; }
  .car-dot.active { background:var(--lime); width:40px; }

  /* ── CAROUSEL ── */
  .reveal {
    opacity:0; transform:translateY(48px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in { opacity:1; transform:translateY(0); }
  .d1 { transition-delay:.08s; }
  .d2 { transition-delay:.18s; }
  .d3 { transition-delay:.28s; }
  .d4 { transition-delay:.42s; }

  /* ── KEYFRAMES ── */
  @keyframes up { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }

  /* ── RESPONSIVE ── */
  

  /* ── CHIEN STICKY ── */
  #sticky-dog {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 500;
    width: 64px;
    cursor: none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    animation: dogWag 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(170,255,0,.35));
    opacity: 0;
  }
  #sticky-dog.visible { opacity: 1; }
  #sticky-dog:hover {
    transform: scale(1.25) rotate(-8deg) !important;
    filter: drop-shadow(0 0 22px rgba(170,255,0,.8));
    animation: none;
  }
  @keyframes dogWag {
    0%,100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-6px) rotate(3deg); }
    75%      { transform: translateY(-3px) rotate(-2deg); }
  }

  /* Tooltip au survol */
  #sticky-dog::after {
    content: 'Retour en haut ↑';
    position: absolute;
    right: 110%;
    top: 30%;
    transform: translateY(-30%);
    background: var(--lime);
    color: var(--black);
    font-family: 'Space Mono', monospace;
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .4rem .8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s .1s;
  }
  #sticky-dog:hover::after { opacity: 1; }


  /* ══════════════════════════════════════════
     RESPONSIVE — TABLETTE (max 900px)
  ══════════════════════════════════════════ */
  @media (max-width: 900px) {
    nav { padding: 1.2rem 1.5rem; }
    .nav-links { gap: 1.5rem; }
    .nav-links a { font-size: .58rem; }

    #hero { padding: 0 1.5rem; }
    .hero-title { font-size: clamp(3.5rem, 10vw, 7rem); }
    .hero-sub { flex-direction: column; gap: 1.5rem; }
    .hero-ghost { display: none; }

    #carousel-section { padding: 4rem 0 1rem; }
    .carousel-header { padding: 0 1.5rem; }
    .carousel-track { padding: 0 1.5rem; }
    .car-dot-wrap { padding: 0 1.5rem; }
    .car-slide { flex: 0 0 calc(50% - .75rem); }

    #about { grid-template-columns: 1fr; }
    .about-content { padding: 3rem 1.5rem 5rem; }
    #about::before { width: 70vw; opacity: .12; top: auto; bottom: 0; transform: none; }

    #process { padding: 5rem 1.5rem; }
    .steps { grid-template-columns: 1fr 1fr; }

    section, #contact { padding: 5rem 1.5rem; }

    footer { flex-direction: column; gap: 1rem; text-align: center; padding: 1.5rem; }
  }

  /* ══════════════════════════════════════════
     RESPONSIVE — MOBILE (max 480px)
     Optimisé 360×800px comme demandé dans le devis
  ══════════════════════════════════════════ */
  @media (max-width: 480px) {
    /* Nav */
    nav { padding: 1rem 1.2rem; }
    .nav-logo img { height: 30px; }
    .nav-links { gap: 1rem; }
    .nav-links a { font-size: .52rem; letter-spacing: .12em; }

    /* Hero */
    #hero { padding: 0 1.2rem; min-height: 100svh; }
    .hero-eyebrow { font-size: .52rem; margin-bottom: 1.2rem; }
    .hero-title { font-size: clamp(3rem, 16vw, 5rem); line-height: .9; }
    .hero-title .italic { font-size: .65em; }
    .hero-desc { font-size: .68rem; max-width: 100%; }
    .hero-cta { font-size: .6rem; padding: .7rem 1.4rem; }
    .hero-bottom { font-size: .52rem; padding-bottom: 1.2rem; }
    .scroll-line { width: 24px; }

    /* Marquee */
    .marquee-track span { font-size: .82rem; }

    /* Carousel / Portfolio */
    #carousel-section { padding: 3.5rem 0 1rem; }
    .carousel-header { padding: 0 1.2rem; margin-bottom: 1.5rem; }
    .carousel-title { font-size: clamp(2rem, 10vw, 3rem); }
    .carousel-track { padding: 0 1.2rem; gap: 1rem; }
    .car-slide { flex: 0 0 calc(100% - .5rem); }
    .car-slide-name { font-size: .68rem; }
    .car-btn { width: 36px; height: 36px; font-size: .85rem; }
    .car-dot-wrap { padding: 0 1.2rem; }

    /* À propos */
    .about-content { padding: 3rem 1.2rem 4rem; }
    .about-title { font-size: clamp(2rem, 10vw, 3rem); }
    .about-text { font-size: .68rem; }
    .tools { gap: .4rem; }
    .tool { font-size: .55rem; padding: .3rem .7rem; }
    .stats { gap: 1.5rem; }
    .stat-n { font-size: 2.5rem; }
    #about::before { width: 85vw; opacity: .1; }

    /* Process */
    #process { padding: 3.5rem 1.2rem; }
    .process-title { font-size: clamp(2rem, 10vw, 3.5rem); margin-bottom: 2.5rem; }
    .steps { grid-template-columns: 1fr; }
    .step { padding: 1.8rem 1.2rem; border-left: none; border-top: 1px solid var(--border); }
    .step-n { font-size: 3rem; }

    /* Contact */
    #contact { padding: 4rem 1.2rem; }
    .contact-title { font-size: clamp(3rem, 16vw, 5rem); line-height: .88; }
    .contact-sub { font-size: .58rem; }
    .contact-email { font-size: clamp(1rem, 5vw, 1.6rem); }
    .contact-title-wrap svg { display: none; } /* tracé trop grand sur mobile */

    /* Section labels */
    .section-label { font-size: .52rem; }
    .section-head { flex-direction: column; gap: .8rem; align-items: flex-start; }
    .section-title { font-size: clamp(2rem, 10vw, 3.5rem); }

    /* Sticky dog */
    #sticky-dog { width: 48px; bottom: 1.2rem; right: 1.2rem; }

    /* Footer */
    footer { padding: 1.2rem 1.2rem; gap: .8rem; }
    .f-copy { font-size: .52rem; }

    /* Intro */
    .intro-dog { width: 110px; height: 110px; }
  }
/* ══════════════════════════════════════════════════════
   MODALES DE PROJETS
   Pour modifier les projets, voir js/main.js
══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  padding: 2rem;
  backdrop-filter: blur(10px);
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  max-width: 920px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  transform: translateY(32px);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--panel); z-index: 1;
}
.modal-header-tag {
  font-size: .55rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--lime);
}
.modal-close-btn {
  font-family: 'Space Mono', monospace;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); background: none;
  border: 1px solid var(--border);
  padding: .35rem .9rem; cursor: none;
  transition: color .25s, border-color .25s;
}
.modal-close-btn:hover { color: var(--lime); border-color: var(--lime); }

.modal-visual {
  width: 100%; aspect-ratio: 16/8;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Pour ajouter une vraie image de projet :
   Dans main.js, ajoute un champ "img: 'images/monprojet.jpg'" à ton projet
   et dépose le fichier image dans le dossier images/ */

.modal-body { padding: 2.5rem 3rem 3rem; }

.modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; line-height: .95; color: #fff;
  margin-bottom: 2rem;
}

.modal-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 3rem; margin-bottom: 2rem;
}
.modal-desc { font-size: .72rem; line-height: 2.2; color: var(--muted); }
.modal-desc p { margin-bottom: 1.1rem; }

.modal-meta { display: flex; flex-direction: column; gap: 1.4rem; padding-top: .4rem; }
.modal-meta-label {
  font-size: .52rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--lime); margin-bottom: .3rem;
}
.modal-meta-value { font-size: .72rem; color: #e2e2e2; }

.modal-tools {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.modal-tool {
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--border); padding: .3rem .85rem; color: var(--muted);
  transition: border-color .2s, color .2s;
}
.modal-tool:hover { border-color: var(--lime); color: var(--lime); }
.car-slide { cursor: none; }

@media (max-width: 480px) {
  .modal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .modal-body { padding: 1.5rem 1.2rem 2rem; }
  .modal-overlay { padding: .4rem; align-items: flex-end; }
  .modal { max-height: 95vh; }
}


  /* ── FLÈCHES CAROUSEL STICKY ── */
  .car-sticky-prev,
  .car-sticky-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    width: 44px; height: 44px;
    border: 1px solid var(--border);
    background: rgba(8,8,8,.85);
    color: var(--muted);
    font-size: 1rem;
    cursor: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, border-color .25s, color .25s, background .25s;
    backdrop-filter: blur(6px);
  }
  .car-sticky-prev { left: 1rem; }
  .car-sticky-next { right: 1rem; }
  .car-sticky-prev.visible,
  .car-sticky-next.visible {
    opacity: 1; pointer-events: all;
  }
  .car-sticky-prev:hover,
  .car-sticky-next:hover {
    border-color: var(--lime); color: var(--lime);
    background: rgba(8,8,8,.95);
  }
  @media (max-width: 480px) {
    .car-sticky-prev { left: .4rem; }
    .car-sticky-next { right: .4rem; }
  }


  /* ── FOOTER NAV ── */
  footer {
    background: var(--panel);
    padding: 2rem 3rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-top: 1px solid var(--border);
    gap: 1rem;
  }
  .f-footer-nav {
    display: flex; gap: 2rem;
  }
  .f-footer-nav a {
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    transition: color .25s;
  }
  .f-footer-nav a:hover { color: var(--lime); }
  .f-copy {
    font-size: .58rem; color: var(--muted);
    letter-spacing: .1em; text-align: center;
  }
  .f-socials {
    display: flex; gap: 1.5rem; justify-content: flex-end;
  }
  .f-socials a {
    font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    transition: color .3s;
  }
  .f-socials a:hover { color: var(--lime); }

  @media (max-width: 480px) {
    footer {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 1.5rem 1.2rem;
      gap: 1.2rem;
    }
    .f-footer-nav { justify-content: center; flex-wrap: wrap; gap: 1rem; }
    .f-socials { justify-content: center; }
  }


  /* Images background dans les slides */
  .car-slide-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Tag du carousel — masqué (info présente dans la modale) */
  .car-slide-tag {
    display: none;
  }

  /* Galerie Zine dans la modale */
  .modal-gallery {
    overflow-x: auto;
    display: flex !important;
    align-items: stretch;
    padding: 0;
    aspect-ratio: auto !important;
    max-height: 420px;
  }
  .mgallery-wrap {
    display: flex;
    gap: 0;
    min-width: max-content;
  }
  .mgallery-img {
    height: 420px;
    width: auto;
    object-fit: contain;
    display: block;
  }


  /* ── TYPOGRAPHIE — veuve et césure ── */

  /* Éviter les veuves (mot seul en fin de ligne) */
  .about-text,
  .hero-desc,
  .step-desc,
  .modal-desc p,
  .contact-sub {
    text-wrap: pretty;        /* Chrome 117+ — évite les veuves automatiquement */
    orphans: 3;
    widows: 3;
  }

  /* Césure automatique — activée seulement là où les trous sont probables */
  .about-text,
  .modal-desc p,
  .step-desc {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;   /* mot min 8 lettres, 4 avant, 3 après */
    hyphenate-limit-lines: 2;        /* max 2 lignes consécutives avec césure */
    overflow-wrap: break-word;
  }

  /* Pas de césure sur les titres et éléments courts */
  .hero-title,
  .about-title,
  .section-title,
  .contact-title,
  .process-title,
  .modal-title,
  .car-slide-name,
  .step-name {
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: balance;
  }