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



body{
font-family:Arial, Helvetica, sans-serif;
background:#0a0a0a;
color:white;
line-height:1.6;
}

a{
text-decoration:none;
color:white;
}

/* CONTACT */

.contact-section {
  display: flex;
  justify-content: center;
  padding: 60px 10%;
}

.contact-box {
  background: #111;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 40px;
  width: 350px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 255, 150, 0.05);
  transition: 0.3s;
}

.contact-box:hover {
  box-shadow: 0 0 25px rgba(0, 255, 150, 0.15);
}

.contact-item {
  margin: 18px 0;
  font-size: 18px;
}

.contact-item a {
  color: #ccc;
  text-decoration: none;
  transition: 0.2s;
}

.contact-item a:hover {
  color: #4da6ff;
}

.contact-item span {
  color: #aaa;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
background:#111;
border-bottom:1px solid #222;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:24px;
font-weight:bold;
letter-spacing:2px;
}

.nav-links{
display:flex;
list-style:none;
gap:25px;
}

.nav-links a{
transition:0.3s;
color:#ddd;
}

.nav-links a:hover{
color:#fff;
}


#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #0a0a0a;
}
#score {
  position: fixed;
  top: 20px;
  right: 20px;
  color: #4da6ff;
  font-size: 18px;
  font-family: monospace;
  opacity: 0.8;
}

.navbar-disabled .nav-links a {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

.navbar-disabled .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.7);
  transform: rotate(-10deg);
}
/* HERO AMÉLIORÉ */

.hero {
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.hero-box {
  max-width: 700px;
  padding: 40px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 40px rgba(77,166,255,0.08);
  backdrop-filter: blur(4px);
}

.hero p{
font-size:20px;
color:#aaa;
max-width:700px;
margin-bottom:35px;
}

.hero h1 {
  font-size: 60px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.subtitle {
  color: #4da6ff;
  font-size: 18px;
  margin-bottom: 15px;
}

.description {
  color: #aaa;
  font-size: 18px;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #4da6ff;
  color: #4da6ff;
}

.btn-outline:hover {
  background: #4da6ff;
  color: black;
}


.btn {
  padding: 14px 32px;
  background: #000;
  color: #4da6ff;
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid rgba(77,166,255,0.3);
  transition: 0.25s;
  position: relative;
  overflow: hidden;
}

/* glow au hover */
.btn:hover {
  color: white;
  border-color: #4da6ff;
  box-shadow:
    0 0 8px #4da6ff,
    0 0 20px rgba(77,166,255,0.5);
  transform: translateY(-2px);
}

.home-section{
padding:30px 10%;
width:auto;
/*margin: auto;*/
}

.home-section h2{
font-size:36px;
margin-bottom:5px;
}

.home-section p{
color:#ccc;
font-size:18px;
}

.home-section2{
padding:30px 10%;
width:auto;
/*margin: auto;*/
}

.home-section2 h2{
font-size:36px;
margin-bottom:5px;
}

.home-section2 p{
color:#ccc;
font-size:18px;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
padding:60px 10%;
}

.card{
background:#111;
padding:30px;
border:1px solid #222;
border-radius:14px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:#444;
}

.card h3{
margin-bottom:15px;
font-size:24px;
}

.card p{
color:#aaa;
}

footer{
padding:35px;
text-align:center;
color:#666;
border-top:1px solid #222;
margin-top: auto;
/*margin-top:60px;*/
}



@media(max-width:900px){

.navbar{
flex-direction:column;
gap:20px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:42px;
}

.hero p{
font-size:18px;
}

}

@media(max-width:600px){

.hero h1{
font-size:34px;
}

.logo{
font-size:20px;
}

.nav-links{
gap:15px;
font-size:14px;
}

}


.project-page{
max-width:1000px;
margin:auto;
padding:60px 30px;
}

.project-header{
margin-bottom:60px;
}

.project-header h1{
font-size:48px;
margin-bottom:15px;
}

.project-header p{
color:#999;
font-size:20px;
}

.project-section{
margin-bottom:60px;
padding-bottom:30px;
border-bottom:1px solid #222;
}

.project-section h2{
font-size:32px;
margin-bottom:20px;
color:white;
}

.project-section h3{
margin-top:25px;
margin-bottom:15px;
font-size:22px;
}

.project-section p,
.project-section li{
font-size:18px;
line-height:1.8;
color:#ddd;
}

.project-section ul{
padding-left:25px;
}

.timeline-wrapper{
width:100%;
overflow:auto;
scrollbar-width: none;
padding:40px 80px 60px 80px;
position:relative;
white-space:nowrap;
scroll-behavior:smooth;
}
.timeline-wrapper::-webkit-scrollbar{
    display:none;
}


.timeline-line{
position:absolute;
top:58px;
left:0;
width:1900px; /* ajuste selon longueur */
height:3px;
background:#ffffff30;
z-index:0;
}
.timeline-node{
display:inline-block;
vertical-align:top;
width:260px;
margin-right:90px;
position:relative;
z-index:2;
white-space:normal;
text-align:center;
}

.timeline-node summary{
list-style:none;
cursor:pointer;
text-align:center;
}

.timeline-node summary::-webkit-details-marker{
display:none;
}

.timeline-link{
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.25);
transition:0.25s;
}

.timeline-link:hover{
color:#4da6ff;
border-bottom:1px solid #4da6ff;
padding-left:4px;
}

.dot{
width:18px;
height:18px;
border-radius:50%;
background:white;
margin:0 auto 18px auto;
box-shadow:0 0 12px white;
transition:0.3s;
}

.timeline-node:hover .dot{
transform:scale(1.2);
}
.timeline-logo{
width:58px;
height:58px;
object-fit:contain;
display:block;
margin:10px auto 12px auto;
transition:0.25s ease;
filter:brightness(1);
}

.timeline-logo:hover{
transform:scale(1.08);
filter:brightness(1.15);
}

.node-year{
font-size:15px;
opacity:0.7;
margin-bottom:8px;
}

.node-title{
font-size:22px;
font-weight:bold;
}
.node-content{
position:relative;
left:50%;
transform:translateX(-50%);

width:380px;
max-width:380px;
margin-top:55px;
padding:24px;

background:#0f0f0f;
border:1px solid rgba(255,255,255,0.10);
border-radius:18px;

box-shadow:
0 0 18px rgba(255,255,255,0.03),
0 10px 30px rgba(0,0,0,0.55);

line-height:1.8;
font-size:16px;
text-align:left;
}

.node-content img{
display:block;
margin:auto;
}

@media(max-width:900px){

.timeline-wrapper{
gap:25px;
padding-top:50px;
}

.node-title{
font-size:18px;
}

}