*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Pour une image de background en hero-section, 
il est recommandé que le poids (taille du fichier) 
soit inférieur à 300 Ko pour un chargement rapide, 
idéalement autour de 100–200 Ko. */
.toggle{
    height: 10vh;
    width: 100vw;
}
.hero-section{
    height: 100vh;
    width:100%;
    background-image: url('../photos_chiots/puppies_at_the_morning_200Ko.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position:relative;
    display: flex;
    flex-direction: column;
}

.hero-section-2{
    height: 40vh;
    width:100vw;
    background-image: url('../photos_chiots/puppies_at_the_morning_200Ko.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position:relative;
    display: flex;
    flex-direction: column;
}

.hero-section::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35); 
    z-index: 0;
}

.hero-section-2::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35); 
    z-index: 0;
}

nav{
    position:absolute;
    top: 10px;
    right:0;
    height: 10vh;
    width:70vw;
    z-index: 10;
    display:flex;
    justify-content:end;
    flex-direction:row;
    transform:translateX(100%);
    background-color: transparent; 
    transition:transform 1.7s cubic-bezier(0.73,0.11,0.67,0.84);
}

nav.active{
    transform:translateX(0);
       
}
nav.fixed{ 
    transition:none;
}

nav ul{
    height: 10vh;
    display:flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    list-style-type: none;
    margin : 0 20px 0 0;
    padding:0;
}


nav ul li{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;/*essentiel pour que padding ne déborde pas  */
    color:rgb(241, 241, 249);
    text-decoration: none;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.1rem;
    font-size:1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    text-transform: uppercase;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    background-color: transparent; 
}   

nav ul li a{ 
   
    display: block; /* pour que le lien prenne toute la largeur et hauteur du li */     
    height: 100%; /* pour que le lien prenne toute la hauteur du li */
    width:100%; /* pour que le lien prenne toute la largeur du li */
    padding: 3vh 15px; 
    box-sizing: border-box;/*essentiel pour que padding ne déborde pas  */
    color:rgb(241, 241, 249);
    text-decoration: none;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.1rem;
    font-size:1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    text-transform: uppercase;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    background-color: transparent; 
}

nav ul li a:hover{
    color: rgb(190, 188, 188);
}

nav ul li:not(:first-child,.sub-menus li) {
    border-left: 1px solid rgb(241, 241, 249); /* couleur et épaisseur à ajuster */
    padding-left: 20px; /* espace après la ligne */
    margin-left: 20px;  /* espace avant la ligne */
}


 .sub-menus{
        display: none; 
        position: absolute;
        top: 100%; /* Positionné juste en dessous du parent */
        background-color: transparent;
        z-index: 1000;
        list-style-type: none;
        padding:0;
        margin: 0;
        width: auto;
        height: auto;
        border-radius: 8px; /* Bords arrondis pour un look moderne */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px); /* Flou d'arrière-plan pour un effet moderne */
        animation: fadeIn 0.3s ease-in-out;

    }

.submenu-arrow {
  display: none;

}

.nav-items{
    position: relative; /* Nécessaire pour positionner le sous-menu par rapport à ce parent */
    cursor: pointer; /* Indique que c'est cliquable */
}

.sub-menus li{
        padding: 5px 20px;
        white-space: nowrap; /* Empêche le texte de se casser */
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
@keyframes slideInFromTop {
        0% {
            transform: translateY(-20px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

.sub-menus li:hover{
        background-color: rgba(255, 255, 255, 0.1); /* Couleur de fond au survol */
    }

.sub-menus.vertical-animation-sub-menu {
        animation: slideInFromTop 0.5s ease-out forwards;
        display: block;
    }
.sub-menus li a {
    display: block; /* pour que le lien prenne toute la largeur et hauteur du li */     
    text-decoration: none;
    text-transform: none;
    color: rgb(241, 241, 249);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.1rem;
    font-size:0.8rem;
    font-weight: 400;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

.hero-section .title{
    position: relative;
    display: flex;
    align-items:flex-end;
    height: 27vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
}

.hero-section-2 .title{
    position: relative;
    display: flex;
    align-items:center;
    height: 38vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
}

.title h1 a{    
    
    letter-spacing: 0.8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    text-decoration: none; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(241, 241, 249);
    transition: color 0.3s ease;
}

.title h1 a:hover{
    color: rgb(190, 188, 188);
}

.subtitle{
    height: 40vh;
    display: flex;
    align-items:center;
    z-index: 2;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 4vw;
}

.hero-section .subtitle h2{
    color: rgb(241, 241, 249);
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.8px;
}
.hero-section-2 .subtitle h2{
    color: rgb(241, 241, 249);
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.8px;
}

.description{
    height:17vh;
    display: flex; 
    align-items:flex-end;
    z-index: 2;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 4vw;
}
.description h3{
    letter-spacing: 1px;
     color: rgb(241, 241, 249);
    font-weight: 100;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}



@media only all and (min-width:1px) and (max-width:900px){

.hero-section{
    height: 40vh;
    width:100%;
    background-image: url('../photos_chiots/puppies_at_the_morning_200Ko.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position:relative;
    display: flex;
    flex-direction: column;
}

    nav{
    position:fixed; 
    top:0;
    min-width:100vw;
    height: 100vh;
    overflow-y: auto; /* permet le scroll si le contenu dépasse */
    z-index: 9;
    transform:translateY(-100%);
    transition:transform 0.2s cubic-bezier(0.73,0.11,0.67,0.84);
    background-color:rgb(23,23,23);
}
    nav.active{
        transform:translateY(0);
    }

    nav ul{
    display:block;
    width: 100%;
    list-style-type: none;
    height:auto;
    margin: 20vh 0 0 0;
    
    }

    nav ul li{
        width:100%;
        display:block;
        margin:3vh 0;
        height:auto;
        box-sizing: border-box; /* essentiel pour que padding ne déborde pas */
        text-align: center;
       
    }


    nav ul li a{
    display:inline-block;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box; /* essentiel pour que padding ne déborde pas */
    /* padding: 0 15px; crée une zone cliquable autour du texte */
    color:rgb(241, 241, 249);
    text-decoration: none;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-size: 16px; */
    font-size: 1rem;
    letter-spacing: 0.11em;
    font-weight:  0.3em;
    transition: color 0.3s ease;
    text-transform: uppercase;
}
   
    nav ul li:not(:first-child,.sub-menus li)  {
        border: 0; /* supprimer la bordure */
        padding-left: 0; /* espace après la ligne */
        margin-left: 0;  /* espace avant la ligne */
    }
    .nav-items{
        cursor: pointer; /* Indique que c'est cliquable */
        display:flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin:0;
        padding:0;
    }

     .sub-menus{
        display: none;
        width:100%;
        height:auto;
        background-color:rgb(23,23,23);
        position: static; /* S'insère dans le flux, pousse le reste */
        z-index: 1;
        list-style-type: none;
        padding: 0;
        margin: 0;
        box-shadow: none;
        backdrop-filter: none;
        animation: none;
        border-radius: 0;
        border-top: 1px solid #444; /* optionnel, pour séparer du parent */
    }
    .sub-menus.vertical-animation-sub-menu {
        animation: none;
        display: block;
    }
.sub-menus li{
        margin:0;
        padding:0;
        white-space: nowrap; /* Empêche le texte de se casser */
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease;
        height:auto;
    }

    .sub-menu-sign{
        display: inline-block;
        font-size: 1.1rem;
        font-weight: bold;
        margin-left: -8px;
        margin-bottom: 8px;
        padding-bottom: 5px;
        transition: color 0.3s;
        color: rgb(241, 241, 249);
        position: relative;
        /* top: 2px; ajuste la hauteur pour aligner avec le texte */
    }

    .nav-items .sub-menu-sign::after {
    content: "+";
    }
    .nav-items.open .sub-menu-sign::after {
    content: "-";
    }

   
.sub-menus li a {
    display: inline-block; /* pour que le lien prenne toute la largeur et hauteur du li */     
    text-decoration: none;
    text-transform: none;
    color: rgb(241, 241, 249);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.1rem;
    font-size:0.8rem;
    font-weight: 400;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    /* width: 100%;
    height: 100%; */
}

    .hero-section .title{
    position: relative;
    display: flex;
    align-items:center;
    height: 38vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
    }

        .hero-section-2 .title{
    position: relative;
    display: flex;
    align-items:center;
    height: 38vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
    }

    .hero-section .subtitle{
    position: relative;
    display: flex;
    align-items:center;
    height: 15vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
    }

        .hero-section-2 .subtitle{
    position: relative;
    display: flex;
    align-items:center;
    height: 15vh;
    margin-left: 4vw;
    color: rgb(241, 241, 249);
    z-index: 1;
    }

    
    .description{
        display: none;
    }

    .title{
        margin-left: 2vw;
    }


    .nav-toggler{
        position:fixed;
        z-index:10;
        top:30px;
        right:20px;
        height:30px;
        width:40px;
        outline:none;
        cursor: pointer;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        border: none;
    }

    .line{
        position: absolute;
        display:block;
        width:100%;
        height: 2px;
        background: rgb(241, 241, 249);
        transition: transform 0.3s ease-out, opacity 0.1s ease-out;
    }
    .l1{
        transform:translateY(-10px);
    }
    .l3{
        transform:translateY(10px);
    }
    .nav-toggler.active .l1{
        transform:translateY(0px) rotate(45deg);
    }
    
    .nav-toggler.active .l2{
        opacity:0;
    }
    .nav-toggler.active .l3{
        transform:translateY(0px) rotate(-45deg);
    }
}

/* ---------------------------------TAILLE DES TITRES------------------------------ */

/* ----------- MEDIA QUERY : min-width:1281px ----------- */
@media only all and (min-width:1281px) {
    .title h1 a { font-size: 5rem; }
    .hero-section .subtitle h2 a { font-size: 3rem; font-weight:100; }
    .hero-section-2 .subtitle h2  { font-size: 1.5rem; font-weight:100; }
    nav ul li a { font-size: 1.2rem; }
}

/* ----------- MEDIA QUERY : min-width:901px and max-width:1280px ----------- */
@media only all and (min-width:901px) and (max-width:1280px) {
    .hero-section .title h1 { font-size:3.5rem; font-weight: 700; }
    .hero-section-2 .title h1 { font-size: 3rem; font-weight: 700; }
    .hero-section .subtitle h2 { font-size: 1.5rem; font-weight:100;}
    .hero-section-2 .subtitle h2 { font-size: 1.5rem; font-weight:100;}
    .description h3 { font-size: 1.2rem; }
    nav ul li a { font-size: 0.9rem; }
}

/* ----------- MEDIA QUERY : min-width:501px and max-width:900px ----------- */
@media only all and (min-width:501px) and (max-width:900px) {
    .title h1 { font-size: 3.5rem; }
    .hero-section .subtitle h2 { font-size: 2rem; font-weight: 100; }
    .hero-section-2 .subtitle h2 { font-size: 1.5rem; font-weight: 100; }
    .description h3 { font-size: 1.5rem; }
}

/* ----------- MEDIA QUERY : min-width:1px and max-width:500px ----------- */
@media only all and (min-width:400px) and (max-width:500px) {
    .title h1  { font-size : 2.2rem; }
    .subtitle h2  { font-size: 1.5rem; font-weight: 100; }
    .description h3  { font-size: 1.1rem; }
}

@media only all and (min-width:351px) and (max-width:399px) {
    .title h1  { font-size : 2.4rem; }
    .subtitle h2  { font-size: 1.5rem; font-weight: 100; }
    .description h3  { font-size: 1.1rem; }
}

@media only all and (min-width:1px) and (max-width:350px) {
    .title h1  { font-size : 1.6rem; }
    .subtitle h2  { font-size: 1rem; font-weight: 100; }
    .description h3  { font-size: 1.1rem; }
}