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

body{
    margin:0;
}

body{
    font-family: Arial, sans-serif;
    background: radial-gradient( circle at top left, #6ca0a3 0%, #577275 40%,#12474d 70%);
    color:white;
       height:100%;
        display:flex;
    flex-direction:column;
}

h1{
    text-align:center;
    margin-bottom:60px;
}


    /* HEADER */
    header {
      position: fixed;
      top: 0; 
	  left: 0; 
	  width: 100%;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1rem 1rem;
      background: rgba(17,17,17,0.6);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      z-index: 1000;
    }
    
    header .logo { font-weight: 700; font-size: 1.3rem; margin-left: 0; width: 220px; }
    header nav ul { display: flex; gap: 0.7rem; list-style: none; margin-right : auto; }
    header nav a { color : black; font-weight: 500; transition: color 0.3s; text-decoration: none;}
    header nav a:hover { color: #577275; }
    
    header .logo img{
    height:auto;
    width:220px;
}

section{
    margin-top:120px;
}

.container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px;
    max-width:1100px;
    margin:auto;
    margin-top:100px;
}

.desc{
    
    text-align : center;
}
.card{
    position:relative;
    background:#1b1b1b;
    border-radius:12px;
    padding-top:120px;
    text-align:center;
    transition:transform 0.3s ease;
}

.card:hover{ transform:scale(1.05); }

.card img{
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    width:260px;
    height:160px;
    object-fit:cover;
    object-position: top;
    border-radius:10px;
    transition:all 0.4s ease;
}

/* image qui sort du cadre */

.card:hover img{
    height:340px;
    top:-220px;
}

.content{
    padding:20px;
}

.content h3{
    margin:10px 0;
}

.content p{
    color:#bbb;
}

/* FOOTER */
    footer {
        margin-top : 100px;
        padding: 2rem;
      text-align: center;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.7);
      background: #111;
      border-top: 1px solid rgba(255,255,255,0.1);
    }