@font-face {
    font-family: 'MuseoModerno' ;
    src: url(../assets/fonts/MuseoModerno-Italic-VariableFont_wght.woff2), url(../assets/fonts/MuseoModerno-VariableFont_wght.woff2),
    url(../assets/fonts/MuseoModerno-Italic-VariableFont_wght.ttf), url(../assets/fonts/MuseoModerno-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Quicksand' ;
    src: url(../assets/fonts/Quicksand-VariableFont_wght.woff2), url(../assets/fonts/Quicksand-VariableFont_wght.ttf);
}

body {
    background-image: url(../assets/img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
}

*{
    font-family: 'Quicksand';
}
    h1 {
        font-family: 'MuseoModerno';
        color: #94BDB5;
        font-size: 60px;
        margin: auto;
    }

header, main, footer {
    margin: 0 200px;
}

header{
    background-color: #4F818C;
    padding: 0 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;    
}
    figure {
        width: 200px;
        height: 200px;
    }
        figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

    header h2 {
        color: #F5F5F5;
        margin: auto;
    }

    address{
        display: flex;
        flex-direction: column;
    }
        address a {
        display: flex;
        align-items: center;
        color: #F5F5F5;
        text-decoration: none;
        font-style: normal;
        }
        address a:hover {
            opacity: 0.5;
        }
        address b {
        color: #F5F5F5;
        font-style: normal;
        text-align: center;
        }

main {
    display: flex;
    flex-direction: column;
}

    .grey {
        background-color: rgba(237, 236, 234, 0.8);
        display: flex;
        justify-content: space-between;
        padding: 40px;
        margin-top: 50px;
        margin-bottom: 50px;
    }
        .grey h2, .green h2 {
            color: #4F818C;
        }

        .grey div, .green div {
            margin: 0 40px;
        }

        .border{
            padding: 5px;
        }
            .border:hover{
                border-left: solid #E1AD37;
            }

        h3 i{
            font-style: normal;
            font-weight: normal;
        }

        /* état initial caché */
        .fade-in {
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        /* état visible */
        .fade-in.show {
        opacity: 1;
        }

    .green {
        background-color: rgba(148, 189, 180, 0.8);
        display: flex;
        justify-content: space-between;
        padding: 40px;
        margin-bottom: 50px;
    }

        .comp li:hover, .lang li:hover, .hobbies li:hover {
            color: #EDECEA;
        }

        .hidden-right {
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.8s ease-out;
        }

        /* état visible */
        .show {
            opacity: 1;
            transform: translateX(0);
        }

    .carousel {
        position: relative;
        width: 80%;
        max-width: 800px;
        margin: 50px auto;
        overflow: hidden; /* cache les parties des images qui dépassent */
        border-radius: 10px;
        padding: 0 20px; /* espace autour des images */
    }

        .carousel h2 {
            color: #4F818C;
            text-align: center;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

            .carousel-images img {
                width: 100%; /* chaque image prend 100% du carousel visible */
                flex-shrink: 0;
                border-radius: 10px;
                padding: 0 10px;
            }

            .carousel-dots {
                display: flex;
                justify-content: center;
                margin-top: 15px;
                gap: 10px;
            }

            .carousel-dots span {
                width: 12px;
                height: 12px;
                background-color: #ccc;
                border-radius: 50%;
                display: inline-block;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            .carousel-dots span.active {
                background-color: #4F818C; /* couleur de ton thème */
            }

    form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 30px 0;
        padding: 30px;
        background-color: rgba(79, 129, 140, 0.8);
        color: #EDECEA;
    }
        form h2 {
            color: #E1AD37;
            margin-bottom: 10px;
        }
        input, textarea {
            background-color: #EDECEA;
            color: #4F818C;
            font-weight: bold;
            border: none;
            box-shadow: 5px 5px 10px black;
        }
        input {
            width: 30%;
        }
        textarea {
            height: 100px;
        }
        button {
            width: fit-content;
            padding: 5px;
            background-color: #E1AD37;
            color: #EDECEA;
            align-self: flex-end;
            font-weight: bold;
            border: none;
            border-radius: 10px;
            box-shadow: 5px 5px 10px black ;
        }
            button:active {
                box-shadow: inset 5px 5px 10px black ;
            }

footer {
    background-color: #4F818C;
    color: #F5F5F5;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
    .link {
        display: flex;
        justify-content: end;
    }
        .link a {
            margin: 10px;
        }
        .link a:hover {
            opacity: 0.5;
        }

    small {
        font-style: italic;
        font-size: small;
    }

    /* Tablettes */
@media screen and (max-width: 1024px) {
  header, main, footer {
    margin: 0 50px;
  }

  header {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }

  header figure {
    width: 150px;
    height: 150px;
    margin-bottom: 15px;
  }

  .grey, .green {
    flex-direction: column;
    align-items: center;
  }

  .grey div, .green div {
    margin: 20px 0;
  }

  .border{
            padding: 5px;
        }
            .border:hover{
                border-left: solid #E1AD37;
            }

  form input {
    width: 60%;
  }
}

/* Smartphones */
@media screen and (max-width: 600px) {
  header, main, footer {
    margin: 0 20px;
  }

  h1 {
    font-size: 36px;
    text-align: center;
  }

  header {
    padding: 10px;
  }

  header h2 {
    font-size: 18px;
  }

  .grey, .green {
    padding: 20px;
  }

  .carousel {
    width: 100%;
    padding: 0;
  }

  form input {
    width: 100%;
  }

  button {
    align-self: center;
    margin-top: 10px;
  }
}