* {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%235856D6"/></svg>') 12 12, auto;
    }
    
    a, button, .card, .card-link, .card * {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="%235856D6"/></svg>') 16 16, pointer !important;
    }

    header, header * {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%23ffffff"/></svg>') 12 12, auto !important;
    }

    header a {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="%23ffffff"/></svg>') 16 16, pointer !important;
    }
    
    .card-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    :root{ --accent:#000000c5; --max-width:1200px }

    html,body{
      height:100%;
      margin:0;
      font-family:'Montserrat',system-ui,Arial;
      color:#fff;
    }

    /* 🌟 FOND IMAGE PLEIN ÉCRAN */
    body{
      background-color: #ffffff;
    }

    .page{position:relative;min-height:100vh;display:flex;flex-direction:column}

    header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:20px 40px;
      background: #5856D6;
      border-bottom: 1px solid #e0e0e0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
    }

    body {
      padding-top: 105px;
    }

    .white-scroll-banner{
      background:#ffffff;
      color:#000;
      padding:20px 0 5px 0;
      overflow:hidden;
      white-space:nowrap;
      position:fixed;
      top:60px;
      left:0;
      right:0;
      z-index:999;
      font-family:'Bebas Neue',sans-serif;
      font-size:20px;
      font-weight:800;
      letter-spacing:2px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .white-scroll-banner-inner{
      display:inline-block;
      animation:scrollLeft 40s linear infinite;
      white-space: nowrap;
    }

    @keyframes scrollLeft{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }

    .large-name-banner {
      background: #5856D6;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 998;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 40px;
      border-bottom: 1px solid #e0e0e0;
      margin-top: 0;
    }

    .large-name-banner h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 800;
      font-size: 28px;
      color: #fff;
      margin: 0;
      letter-spacing: 2px;
    }

    .brand {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 800;
      font-size: 28px;
      color: #fff;
    }

    nav {
      display: flex;
      gap: 32px;
    }

    nav a{
      color:#fff;
      text-decoration:none;
      font-weight:800;
      font-family:'Bebas Neue',sans-serif;
      font-size:28px;
      letter-spacing:1px;
      transition: opacity 0.2s;
    }

    nav a:hover {
      opacity: 0.8;
    }

    .hero{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }

    .hero-inner{
      max-width:var(--max-width);
      width:100%;
      display:flex;
      gap:28px;
      align-items:center;
    }

    .intro{flex:1;color:#000000}

    .intro h1, .intro h2{
      margin:0;font-size:96px;line-height:1.1;color:#000000;
      font-weight:800;font-family:'Bebas Neue',sans-serif;
      letter-spacing:0px;cursor:default;overflow:visible;display:block;
    }
    
    .intro h2{
      font-weight:800;
    }

    /* Animation sophistiquée pour le nom */
    .animated-name {
      display: inline-block;
      position: relative;
    }

    .letter {
      display: inline-block;
    }

    .letter-space {
      display: inline-block;
      opacity: 0.6;
    }

    @keyframes letterSlideRight {
      0%, 100% {
        transform: translate(0, 0);
        opacity: 1;
      }
      50% {
        transform: translate(25px, 8px);
        opacity: 0.85;
      }
    }

    @keyframes letterSlideRightHover {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(40px, 12px) scale(1.1);
      }
    }

    .timeline-anim{
      display:inline-block;
      animation: slideUp 1.2s ease-out forwards;
      opacity: 0;
      transition: transform 0.3s ease;
    }
    
    .timeline-anim:hover{
      animation: slideUp 1.2s ease-out forwards, float 0.6s ease-in-out infinite;
    }

    @keyframes slideUp {
      from { transform: translateY(100%); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .intro h2 .timeline-anim{ animation-delay: 0.3s; }

    /* Fond blanc qui remonte depuis le bas */
    .white-background{
      background: linear-gradient(to top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0.8) 85%, rgba(255,255,255,0) 100%);
      width:100%;
      padding-top:100px;
      padding-bottom:80px;
      color:#000;
    }

    /* CARTES: fond blanc avec contour bleu épais */
    .card{
      background: #ffffff;
      color: #000000;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      aspect-ratio:1/1;
      display:block;
      overflow:hidden;
      position:relative;
      transition:transform 0.28s ease, box-shadow 0.28s ease;
      border: none;
      border-radius:0;
      padding: 0;
    }

    .card:hover{
      transform:scale(1.02);
      box-shadow: 0 12px 26px rgba(0,0,0,0.08);
    }

    /* Titres des projets: moins contrastés par défaut, s'assombrissent et augmentent légèrement en taille au survol */
    .card h3 {
      margin: 12px 0 6px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(0,0,0,0.45);
      transition: color 220ms cubic-bezier(.2,.9,.2,1), font-size 220ms cubic-bezier(.2,.9,.2,1), text-shadow 220ms ease;
      will-change: color, font-size;
    }

    .card:hover h3 {
      color: rgba(0,0,0,1);
      font-size: 22px;
      text-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transform: none;
    }
    /* Thumb wrapper to make project images match a square format */
    .thumb{
      width:100%;
      height:100%;
      overflow:hidden;
      border-radius:0;
      margin:0;
      display:block;
      background: #f0f0f0;
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .project-thumb{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Overlay sombre sur la vignette au survol pour augmenter le contraste */
    .thumb::after{
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.7);
      opacity: 0;
      transition: opacity 220ms ease;
      border-radius: 0;
      pointer-events: none;
      z-index: 2;
    }

    .card:hover .thumb::after{
      opacity: 1;
    }

    /* Titre du projet qui apparaît au centre lors du survol */
    .project-title {
      position: absolute;
      top: 45%;
      left: 20%;
      transform: translate(0, -50%);
      color: #ffffff !important;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 36px;
      font-weight: 800;
      text-align: left;
      opacity: 0;
      transition: opacity 300ms ease;
      z-index: 100;
      pointer-events: none;
      padding: 0 20px;
      letter-spacing: 2px;
      width: 70%;
      margin: 0;
      line-height: 1.2;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .card:nth-child(3) .project-title {
      left: 40%;
    }

    .card:nth-child(5) .project-title {
      left: 35%;
    }

    .card:nth-child(6) .project-title {
      left: 45%;
    }

    .card:nth-child(7) .project-title {
      left: 40%;
    }

    .card:nth-child(8) .project-title {
      left: 40%;
    }

    .card:hover .project-title {
      opacity: 1;
    }

    /* 🔥 SUPPRESSION DU FOND BLANC DE “À propos” */
    #about{
      background: transparent !important;
      backdrop-filter:none !important;
      border:none !important;
    }

    .projects{
      padding: 0;
      max-width: 100%;
      margin: 0;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap: 0;
      box-sizing:border-box;
      width: 100vw;
    }

    footer{
      padding:28px 20px;
      text-align:center;
      color:rgba(255,255,255,0.9);
    }

    .scroll-banner{
      background:#5856D6;
      color:#fff;
      padding:10px 0;
      overflow:hidden;
      white-space:nowrap;
      position:relative;
    }
    
    .scroll-banner-inner{
      display:inline-block;
      animation:scroll-text 20s linear infinite;
      font-family:'Bebas Neue',sans-serif;
      font-size:24px;
      letter-spacing:3px;
      font-weight:800;
    }
    
    @keyframes scroll-text{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }

    /* Loader avec cercle tournant */
    .loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      transition: opacity 0.5s ease;
    }

    .loader {
      position: relative;
      width: 80px;
      height: 80px;
      animation: rotate 1.5s linear infinite;
    }

    .loader-dot {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      animation: pulse 1.5s ease-in-out infinite;
    }

    .loader-dot:nth-child(1) {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #5856D6;
      animation-delay: 0s;
    }

    .loader-dot:nth-child(2) {
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: #5856D6;
      animation-delay: 0.375s;
    }

    .loader-dot:nth-child(3) {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #5856D6;
      animation-delay: 0.75s;
    }

    .loader-dot:nth-child(4) {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      background: #5856D6;
      animation-delay: 1.125s;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.5);
        opacity: 0.6;
      }
    }

    @media (max-width:1000px){
      .projects{grid-template-columns:repeat(2,1fr)}
      .intro h1, .intro h2{font-size:52px}
    }
    @media (max-width:700px){
      header{padding:14px}
      .hero-inner{flex-direction:column;align-items:flex-start}
      .projects{grid-template-columns:1fr}
      .intro h1, .intro h2{font-size:40px}
    }