:root{
      --bg:#050505; --bg2:#070707;
      --stroke:#24150f;

      --primary:#B84213;
      --primary2:#C9671D;
      --gold:#F4C135;
      --amber:#DE9228;

      --text:#EAE4DD; --muted:#B8AA9E; --dim:#7A6C63;
    }
    html{ scroll-behavior:smooth; }
    body{ background:var(--bg); color:var(--text); }

    #fx{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

    .noise{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
      background-image:url("https://www.transparenttextures.com/patterns/asfalt-light.png");
      mix-blend-mode:overlay;
    }
    .scanlines{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.07;
      background:repeating-linear-gradient(
        to bottom,
        rgba(244,193,53,.06) 0px,
        rgba(244,193,53,.06) 1px,
        rgba(0,0,0,0) 3px,
        rgba(0,0,0,0) 7px
      );
      mix-blend-mode:overlay;
    }
    .vignette{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.75;
      background:radial-gradient(circle at 50% 30%,
        rgba(244,193,53,.08) 0%,
        rgba(184,66,19,.05) 30%,
        rgba(0,0,0,.82) 75%,
        rgba(0,0,0,.96) 100%);
    }
    .grid-overlay{ position:fixed; inset:0; z-index:4; pointer-events:none; opacity:.06;
      background-image:
        linear-gradient(rgba(244,193,53,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244,193,53,.25) 1px, transparent 1px);
      background-size: 84px 84px;
      mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0) 72%);
    }

    .nav-glass{
      background: rgba(5,5,5,.35);
      border-bottom:1px solid rgba(36,21,15,.35);
      backdrop-filter: blur(10px);
    }
    .nav-scrolled{
      background: rgba(5,5,5,.90);
      border-bottom:1px solid rgba(244,193,53,.16);
      box-shadow: 0 12px 36px rgba(0,0,0,.45);
    }

    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

    .title-gradient{
      background: linear-gradient(90deg, var(--primary), var(--gold), var(--amber), var(--primary2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      background-size: 220% 100%;
      animation: sheen 6s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(244,193,53,.12)) drop-shadow(0 0 12px rgba(184,66,19,.12));
    }
    @keyframes sheen{
      0%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
      100%{ background-position: 0% 50%; }
    }

    .shimmer{ position:relative; overflow:hidden; }
    .shimmer::after{
      content:""; position:absolute;
      top:-40%; left:-60%;
      width:40%; height:180%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      transform: rotate(18deg);
      animation: shimmer 2.8s ease-in-out infinite;
    }
    @keyframes shimmer{ 0%{ left:-60%; } 100%{ left:140%; } }

    @keyframes rays{ to{ transform: rotate(360deg); } }

    .card{
      background: linear-gradient(180deg, rgba(16,16,16,.86), rgba(8,8,8,.86));
      border:1px solid rgba(36,21,15,.70);
      box-shadow: 0 20px 65px rgba(0,0,0,.38);
    }
    .card:hover{
      border-color: rgba(244,193,53,.28);
      box-shadow: 0 24px 78px rgba(0,0,0,.50), 0 0 24px rgba(244,193,53,.10), 0 0 30px rgba(184,66,19,.10);
    }

    /* light HUD frame */
    .hud-frame{
      position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.75;
    }
    .corner{
      position:absolute; width:50px; height:50px;
      border-color: rgba(244,193,53,.18);
      filter: drop-shadow(0 0 8px rgba(244,193,53,.08));
    }
    .corner.tl{ top:16px; left:16px; border-left:2px solid; border-top:2px solid; border-top-left-radius:14px; }
    .corner.tr{ top:16px; right:16px; border-right:2px solid; border-top:2px solid; border-top-right-radius:14px; }
    .corner.bl{ bottom:16px; left:16px; border-left:2px solid; border-bottom:2px solid; border-bottom-left-radius:14px; }
    .corner.br{ bottom:16px; right:16px; border-right:2px solid; border-bottom:2px solid; border-bottom-right-radius:14px; }

    .hud-telemetry{
      position:fixed; z-index:6; pointer-events:none;
      bottom:16px; left:86px;
      font-size:10px; letter-spacing:.28em; text-transform:uppercase;
      color: rgba(244,193,53,.66);
      opacity:.82;
    }
    .hud-telemetry .dim{ color: rgba(184,66,19,.52); }

    /* simple reveal */
    .reveal{ opacity:0; transform:translateY(14px); filter:blur(3px);
      transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
    .reveal.in{ opacity:1; transform:translateY(0); filter:blur(0); }
  
    
.timeline {
  position: relative;
  padding: 180px 0;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background: linear-gradient(
    180deg,
    transparent,
    #CA6B1E 10%,
    #CA6B1E 90%,
    transparent
  );
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Événements */
.timeline-item {
  padding: 20px 30px;
  position: relative;
  width: 50%;
}

.timeline-item.left {
  text-align: right;
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

/* Cercles */
.timeline-item::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -8px;
  background-color: #442230;
  border: 4px solid #CA6B1E;
  top: 20px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-item.right::before {
  left: -8px;
}

/* Cartes */
.timeline-item .content {
  padding: 20px;
  background-color: #CA6B1E;
  border-left: 4px solid #8A3B0E;
  border-radius: 6px;
}

.timeline-item.right .content {
  border-left: none;
  border-right: 4px solid #8A3B0E;
}

@media screen and (max-width: 768px) {

  /* Ligne timeline à gauche */
  .timeline::before {
    left: 23px;      /* ajuste pour aligner avec les puces */
    transform: none;
  }

  .timeline-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
    text-align: left;
  }

  /* Puces alignées sur la ligne */
.timeline::after {
  left: 23px;
  transform: none;
}

  .timeline-item.right::before {
    left: 15px;
  }

  /* Bordures cartes */
  .timeline-item .content {
    border-left: 4px solid #8A3B0E;
    border-right: none;
  }
}

.img-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px 8px;
    border-radius: 5px;
    white-space: nowrap;
}