:root {
    --primary: #b20078;
    --secondary: #fde00a;
    --white: #FFF;
}

@font-face {
    font-family: 'Berlin Sans FB', sans-serif;
    src: url("public/fonts/Berlin_Sans_FB_Regular.ttf");
}

html {
    scroll-behavior: smooth;
    font-family: 'Berlin Sans FB', Arial, sans-serif;
    overflow-x: hidden;
}

* {
    font-weight: 200;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--secondary) var(--primary);
}

body {
    display: grid;
    grid-template-rows: 1fr auto; /* 1fr pour le contenu, auto pour le footer */
    height: 100vh; /* 100% de la hauteur de la fenêtre */
    background: ;
    color: #000;

    a {
        color: var(--white);
        text-decoration: none;
    }
}

header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary);
    color: var(--white);
    z-index: 1000;
    font-size: 1rem;

    .logo img {
        width: 26rem;
        margin: -0.35rem;
    }

    nav {
        right: 1rem;

        .burger {
            .burger_button .lines {
                display: none;
                position: relative;
                right: 2rem;
                width: 25px;
                height: 3px;
                background-color: var(--white);
                margin: 5px;
                background-color: var(--secondary);
            }

            .nav-links {
                list-style: none;
                display: flex;
                gap: 2.5rem;
                margin-right: 5rem;
                padding: 1rem;


                @media screen and (max-width: 28rem) {
                    width: 100vw;
                }

                li {
                    position: relative;

                    & > a {
                        font-size: 1rem;
                        display: block;
                        padding: 1rem;

                        &:hover {
                          color: var(--secondary);
                        }

                        &.active {
                          color: var(--secondary);
                        }
                    }

                    &:first-child {
                        background-color: var(--primary);
                    }
                }
            }
        }
    }
}

main {
    padding-top: 3rem; /* Pour éviter que le contenu soit caché par le header fixe */

    #home, #services, #projects, #contact, #news {
        scroll-margin-top: 5rem;
    }

/*******************************************************************************************************************/
    /* état initial : invisible, décalé vers le bas */
    .fade-section {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    /* état visible : pleinement affiché */
    .fade-section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-section {
        opacity: 0.5;
        transform: scale(1.02);
        transition: opacity 1s ease, transform 1s ease;
    }
    .fade-section.visible {
        opacity: 1;
        transform: scale(1);
    }


    /* ===== HERO IMAGES SECTION ===== */
    .hero-images {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      height: 90vh; /* hauteur visible */
      background: #000;
    }

    .hero-images .image-container {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .hero-images .hero-img {
      width: 50%;
      height: 100%;
      object-fit: contain;       /* ✅ garde toute l’image visible */
      background-color: #000;    /* fond neutre */
      transition: transform 2s ease, opacity 1s ease;
      opacity: 0.9;
    }


    /* Effet de mouvement lent sur survol */
    .hero-images .hero-img:hover {
      transform: scale(1.05);
      opacity: 1;
    }

    .hero-images .overlay-text {
      position: absolute;
      text-align: center;
      color: white;
      z-index: 2;
      text-shadow: 0 2px 6px rgba(0,0,0,0.6);
      animation: fadeInUp 1s ease forwards;
    }

    .hero-images h1 {
      font-size: 2.5rem;
      letter-spacing: 2px;
      margin-bottom: 0.5rem;
    }

    .hero-images p {
      font-size: 1.2rem;
      opacity: 0.9;
    }

    /* Animation d’apparition du texte */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive : empile les images sur mobile */
    @media (max-width: 900px) {
      .hero-images .image-container {
        flex-direction: column;
      }
      .hero-images .hero-img {
        width: 100%;
        height: 50%;
      }
      .hero-images h1 {
        font-size: 1.8rem;
      }
    }

/*******************************************************************************************************************/


    #about {
        p {
            padding-bottom: 1rem;
        }
    }




/****************** DEBUT PRESENTATION ******************/

    /* ===== SECTION PRESENTATION AVEC FOND ===== */
    .presentation.with-bg {
      position: relative;
      background: url("public/images/portrait.jpg") center/cover no-repeat fixed;
      color: #fff;
      padding: 6.25rem 1.25rem;
      overflow: hidden;
    }

    .presentation.with-bg .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 15, 15, 0.7);
      backdrop-filter: blur(6px);
      z-index: 1;
    }

    .presentation.with-bg .container {
      position: relative;
      z-index: 2;
      max-width: 900px;
      margin: 0 auto;
      line-height: 1.8;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .presentation.with-bg h2 {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 2rem;
      color: #fff;
    }

    .presentation.with-bg h2::after {
      content: "";
      display: block;
      width: 80px;
      height: 3px;
      background: var(--primary);
      margin: 12px auto 0;
      border-radius: 3px;
    }

    .presentation.with-bg p {
      margin-bottom: 1.2rem;
      font-size: 1.1rem;
      text-align: justify;
    }

    .presentation.with-bg strong {
      color: var(--secondary);
      font-weight: 600;
    }

    .presentation.with-bg em {
      color: #ccc;
    }

    .presentation.with-bg blockquote {
      margin: 3rem auto 0;
      padding: 1rem 1.5rem;
      border-left: 4px solid var(--primary);
      background: rgba(0, 0, 0, 0.3);
      font-size: 1.3rem;
      font-style: italic;
      color: #fff;
      text-align: center;
      max-width: 700px;
      border-radius: 8px;
    }

/****************** FIN PRESENTATION ******************/


/****************** Services et projets ******************/
    /* ===== SECTION INFOS ===== */
    .infos {
      background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
      color: #fff;
      padding: 100px 20px;
    }

    .infos .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .info-block {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 40px 30px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(8px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .info-block:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    }

    .info-block h2 {
      font-size: 1.6rem;
      margin-bottom: 1.5rem;
      text-align: center;
      position: relative;
    }

    .info-block h2::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background: var(--primary);
      margin: 12px auto 0;
      border-radius: 3px;
    }

    .info-block ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .info-block ul li {
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 1.05rem;
      line-height: 1.6;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .info-block ul li:last-child {
      border-bottom: none;
    }

    .info-block ul li span {
      font-size: 1.3rem;
    }

    .services strong {
      color: var(--secondary);
    }

    .projets li {
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    @media (max-width: 900px) {
      .infos .container {
        grid-template-columns: 1fr;
      }

      .info-block {
        padding: 30px 20px;
      }
    }

    /* ===== LISTE DE SERVICES (meilleur alignement) ===== */
    .services ul li {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 1.05rem;
      line-height: 1.6;
      flex-wrap: wrap; /* permet le retour à la ligne harmonieux */
    }

    .services ul li:last-child {
      border-bottom: none;
    }

    .service-title {
      flex: 0 0 240px; /* largeur fixe des titres (équilibre horizontal) */
      font-weight: 600;
      color: var(--secondary);
    }

    .service-desc {
      flex: 1; /* prend tout l’espace restant */
      min-width: 200px;
      color: #eee;
    }

    @media (max-width: 900px) {
      .services ul li {
        flex-direction: column;
        gap: 4px;
      }

      .service-title {
        flex: 1 1 auto;
        width: 100%;
      }

      .service-desc {
        flex: 1 1 auto;
        width: 100%;
      }
    }


/****************** Fin Services et projets ******************/

    #services, #projects {
        height: 12.5rem;
    }

    #home {
        margin-top: 1.5rem;

        /* Définition d'un container pour gérer l'affichage */
        .container {
            overflow: hidden;
            display: flex;
            flex-direction: row;

            /* Définition du carousel */
            .carousel {
                /*position: relative;*/

                /* Définition de l'élément contenant les diapositives */
                .carousel-inner {
                    display: flex;
                    width: 100%;
                    height: auto;

                    /* Définition des diapositives */
                    .slide {
                        flex: 0 0 100%;
                        transition: 1s ease-in-out;

                        /* Définition de l'affichage de l'image de chaque diapositive */
                        img {
                            width: 100%;
                            height: auto;
                        }
                    }
                }
            }
        }

    }

    #news {
        padding-left: 1rem;
        #insta {
            width: 100%;
            overflow-y: hidden;
        }
    }

    #contact {
        color: var(--white);

        h3 {
            margin-bottom: 10px;
            color: #000;
        }

        .contact-container {
            display: flex;
            flex-wrap: wrap;

            .main-container {
                display: flex;
                width: 100%;

                &:nth-of-type(2) {
                    text-align: center;
                    background-color: var(--primary);
                    font-weight: 600;

                    h3 {
                        font-size: 1.5rem;
                        font-weight: 300;
                        color: var(--white);
                    }
                }

                 .contact-info a {
                    font-weight: bold;
                    font-weight: 500;
                 }

                .address-hours, .contact-info, .social-media {
                    width: 33.33%;
                    padding: 2rem;
                }

                .map-container, .contact-form {
                    width: 50%;

                    input, textarea, select {
                        border-radius: 0.2rem;
                        font-size: 0.75rem;
                    }

                    button[type=submit] {
                        border-radius: 1rem;
                        background-color: var(--primary);
                        width: 7rem;
                        margin-top: 1rem;
                    }
                }

                .contact-form  {
                    padding: 2em;

                    label {
                        display: block;
                        margin: 10px 0 5px;
                    }

                    h3 {
                        font-size: 1.5rem;
                    }

                    button {
                        background: #555;
                        color: var(--white);
                        padding: 10px;
                        border: none;
                        cursor: pointer;

                        &:hover {
                            background: #777;
                        }
                    }

                    .form-row {
                        display: flex;

                        .input-container {
                            width: 100%;

                            &.shrink:nth-child(1) {
                                width: 33%;
                            }
                            &.shrink:nth-child(2) {
                                width: 67%;
                                padding-left: 1rem;
                            }

                            display: flex;
                            flex-direction: column;

                            label {
                                margin-bottom: 5px;
                            }

                            input, textarea, select {
                                width: 100%;
                                padding: 10px;
                                margin-bottom: 10px;
                                border: 1px solid #ccc;
                                background-color: var(--white);

                                &::placeholder {
                                    color: #9F9F9F;
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Responsive */
@media screen and (max-width: 66rem) {
    main {
        padding-top: 0rem;

        #home {
            margin-top: 0rem;
        }

        #contact {
            .contact-container {
                .main-container {
                    flex-direction: column; /* Sur petits écrans, chaque champ prend une ligne */
                    .map-container, .contact-form {
                        width: 100%; /* Chaque champ prend toute la largeur */

                        .form-row {
                            flex-direction: column; /* Sur petits écrans, chaque champ prend une ligne */
                            & > .input-container {

                                &:nth-child(1).shrink, &:nth-child(2).shrink {
                                    width: 100%; /* Chaque champ prend toute la largeur */
                                }

                                &:nth-child(2).shrink {
                                    padding-left: 0;
                                }
                            }
                        }
                    }

                    .address-hours, .contact-info, .social-media, .map-container, .contact-form {
                        width: 100%;
                        padding: 2rem;
                        text-align: center;
                    }
                }
            }
        }
    }

    header {
        position: static;
        font-size: 1.4rem;

        .logo img {
            width: 18rem;
            margin: -0.35rem;
        }

        nav {
            .burger {
                .burger_button .lines {
                    display: block !important;
                }

                .nav-links {
                    margin-right: unset;
                    opacity: 0;
                    transition: all .5s ease;
                    visibility: hidden;
                    position: absolute;
                    flex-direction: column;
                    justify-content: flex-start;
                    top: 3.2rem;
                    left: 0;
                    right: 0;
                    background-color: #303030;
                    gap: 1rem;

                    &.active {
                        transition: all .5s ease;
                        visibility: visible;
                        opacity: 1;

                        li {
                            transform: translateY(0);
                        }
                    }


                    li a {
                        padding: 0.5rem;
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}

footer {
    border-top: 4px solid #212529;
    border-top-color: rgb(128, 119, 105);

    .footer-copyright {
        padding: 2rem;
        text-align: center;
    }
}

/*
Code temporaire, à revoir
*/

#toast {
    position: fixed;
    background-color: #213cfd;
    background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
    color: #fff;
    font-size: 16px;
    -webkit-transition: bottom 350ms;
    -moz-transition: bottom 350ms;
    -o-transition: bottom 350ms;
    -ms-transition: bottom 350ms;
    transition: bottom 350ms;
    user-select: none;
}

#toast.active {
    top: 5rem;
    right: 0;
	z-index: 1000;
    width: 100%;
    max-width: 300px;
    padding: 10px;
}

/*
Spinner
 */

#lds-roller {
    /* change color here */
    color: var(--primary);
    position: fixed;
    width: 80px;
    height: 80px;
    right: 50%;
    top: 50%;
}
#lds-roller,
#lds-roller div,
#lds-roller div:after {
    box-sizing: border-box;
}
#lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
#lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
}
#lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
#lds-roller div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
}
#lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
#lds-roller div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
}
#lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
#lds-roller div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
}
#lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
#lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
#lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
#lds-roller div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
}
#lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
#lds-roller div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
}
#lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
#lds-roller div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
}
#lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
#lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Overlay */

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}