/*

desktop             1280
laptop              1024 > 1280
only the burger     0 > 1023
tablette (paysage)  768 > 1023
mobile              < 767

*/

/* à déplacer dans main.css */

#prevnext{overflow: clip; }
.bloc_projet h3 {
    text-underline-offset: 2px;
    line-height: 0.85em;
    text-decoration: underline 3px solid;
}
.bloc_projet p{
    line-height: 1em;
    padding: 0 0 0.2em 0;
}

h1.titre-projet{text-decoration-line: underline;}

/*************************************************************************/
/* BIG SCREENS                                                           
/*
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px) {
    html {
    }

    body{}

}



/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px){
    :root{
        font-size: 20px;
        line-height: 24px;
    }
}

/*************************************************************************/
/* @media dédié uniquement au menu-burger                                */
@media all and (max-width: 1023px){ 
    /* <nav> toggle responsive du menu burger */
    .menu-toggle{ /* <button> */
        left: 50%;
        transform: translate(-50%, 0);

        display: flex;
        z-index: 999;
        position: fixed;
        justify-content: center;
        align-content: start;
      
        width: 4.5em;
        height: 4.5em;
        border-radius: 10em;
        border: solid 0.5em var(--hyperlink-color);
        background-color: var(--background-color);
        top: 3.5vh;
    }
    /* Effets au survol ou focus du bouton burger  */
        .menu-toggle:hover,  .menu-toggle:focus  {
            background-color: var(--hyperlink-color);
        }

    /* burger à personnaliser */
        .button-menu{
                display: flex;
                flex-direction: column;
                width: max-content;
                position: relative;
                cursor: pointer;
        }

        .button-menu::before, .button-menu::after, .button-menu{
                content: "";
                position: absolute;
                width: 85%;
                height: 6.5px;
                background-color: black;
                border-radius: 1em;
                transition: transform 1s ease-in-out, background-color 0.5s ease-in;
        }
            .button-menu::before{
                top: -8px;
                transform: rotate(3deg);
                width: 100%;
            }
            .button-menu::after{
                top: 8px;
                transform: rotate(5deg);
                width: 100%;
            }
            .button-menu {
                transform: rotate(-2deg);
                top: 21px;

            }
     

        /**/
        /* le burger se transforme en croix */
            #menu-toggle.open { 
                border-color: var(--background-color);
                background-color: transparent;
            }
            
            #menu-toggle.open { 
              & >  .button-menu::before{
                    transform: rotate(43deg);
                    transform-origin: left;
                    background-color: black;
                }
              & >   .button-menu::after{
                    transform: rotate(-45deg);
                    background-color: black;
                }
              & >   .button-menu {
                    transform: rotate(0deg);
                    background-color: white;
                  /*  width: 100%;
                    height:100%;*/
                }
             }


    nav#menu{ /* <nav> */
        display: none;
    }
    

    nav#menu.open { /* quand menu burger activé */
        /* style */
        background-color: var(--background-color);
        border: solid 0.5em var(--main-color);
        border-radius: 0.5em;
        line-height: normal;
        
        /* format */
        width: 90vw;
        height: 94vh;
        padding: 0;
        margin: auto;
        left: 5vw;
        top: 2vh;

       /* structure */
        display: flex;
          position: fixed;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        flex-direction: column;
        gap: 1em;
    }

        /* <nav> >> passage en burger */
        .open > .link {
            font-size:2em;
            margin: 1vh auto;
            line-height: normal;
            padding: 0 !important;
        }

        .link.switch.l1017 {
            margin: 5vh auto 1vh auto;
            height: 5%;
        }
         .open > .link.switch.l1019 {
            margin: 0vh auto 1vh auto;
            height: 7%;
        }

        .open > #logotype {
            position: absolute;
            top: 8vh;
            width: 100%;

            display: none;
            /*display: flex !important;*/

            justify-content: center;
        
            margin: 1vh auto;
            padding: 0 !important;
            color: black;
            font-size: 15vw;
            line-height: normal;
        }

        .logo-illu{
            display: none;
        }


        /* Disposition des langues */
        .switchbox {
            display: flex;
            font-size: 1.7em;
            padding: 0;
            margin: 1vh auto;
        }

}


/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 768px et 1023px 
pour un petit écran, écran portable -> passage en menu burger */
@media all and (min-width: 768px) and (max-width: 1023px){
    :root{
        font-size: 20px;
        line-height: 24px;
    }


}

/*************************************************************************/
/* GSM & Smartphone                         
/*    
/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 767px et 0px :-p 
pour un petit écran, téléphone portable */
@media all and (max-width: 767px){
    :root{
        font-size: 18px;
        line-height: 22px;
    }

    /* Couverture des sections - home.php */

    section {
        padding: 2em 7vw; /* Réduction des marges pour opti */
        scroll-margin: 0; /* Pour caler tout en haut la fenêtre apr!s le scroll */
    }

    .rose {
        width: auto;
        min-width: 100%;

        margin: -2em -7vw; /* Réduction des marges pour opti */
    }
    .couverture {
        width: auto;
        min-width: 100%;
        min-height: 100%;*/
    }

    .couverture-projet {
        margin: -2.5em -7vw 0 -7vw; /* Réduction des marges pour opti */
    }

    .intro {
        margin: 0 -7vw;/* Réduction des marges pour opti */
    }

        .intro h1{
            font-size: 28vw;
            line-height: 24vw;
        }
        .soustitre {
            font-size: 12vw;
            line-height: 0.8em;
        }

    article {
        min-width: 100%;
        width: 100%;
    }

    /* Grille projet - grille.php */
    #grille_projets {
        width: 100%;
        grid-template-columns: 1fr;
    }  
    .projet{
        padding: 0.5em 0;
    }

        .tourni{
            width : 55% !important;
            margin-left: 9%;
            margin-top: -9%;
        }

    /* Blocs de textes - h1, h3, p */

     h1.titre-projet {
        font-size: 25vw;
        line-height: 22vw;
        text-underline-offset: 3px;

        /* Coupe les mots trop longs */
            overflow-wrap: break-word;
            word-wrap: break-word;
            -ms-word-break: break-all;
            word-break: break-word;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
    }
        .dropcaps {
            max-width: 70%;
        }

    h3{
        width: 100%;
        min-width:auto;
        max-width: auto;
    }

    p {
        padding: 1em 0;
        width: 95%;
        min-width: auto;
        max-width: auto;
    }

    .projet > p:first-of-type {
        padding: 2em 0 1em 0;
    }

    /* Mosaïque images trio */
    .grille-3 {
        margin: 0 0em;
        gap: 1em;
        width: 100%;
    }
        .picture-3 {
            width: 80%;
        }
         .picture-3:nth-of-type(odd) {
            margin: 0 0 0 auto;
         }
    .grandes-images {
        margin: 0;
      
    }
        .picture-1 img {
            width: 100%;
        }

        /* PREVNEXT */

        #prevnext h2, #prevnext h3{
            font-size: 1.5em;
        }
        .prev, .next{
            padding : 20px;
            display: flex;
            width:30vw;
        }
         .next{
            flex-direction: column;
         }
        .prev{
            flex-direction: column-reverse;
         }
        .div2{
            padding-top: 0px;
        }
        .div3{
            font-size: 3em;
            padding: 15px;
        }
}



/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait){

}

/* Pour les mini-écrans type 'tamagotchis' */
@media all and (max-width: 299px){
        .open > .link {
            font-size:1.5em;
        }
}