/*!
 * Bootstrap v4.6.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)*/

 *,
 ::after,
 ::before {
     box-sizing: border-box
 }


 [tabindex="-1"]:focus:not(:focus-visible) {
     outline: 0 !important
 }

 abbr[data-original-title],
 abbr[title] {
     text-decoration: underline;
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
     cursor: help;
     border-bottom: 0;
     -webkit-text-decoration-skip-ink: none;
     text-decoration-skip-ink: none
 }


 a:not([href]):not([class]) {
     color: inherit;
     text-decoration: none
 }

 a:not([href]):not([class]):hover {
     color: inherit;
     text-decoration: none
 }

 [role=button] {
     cursor: pointer
 }

 .stretched-link::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     pointer-events: auto;
     content: "";
     background-color: rgba(0, 0, 0, 0)
 }

a:visited{
    color:black;
}


/*_________________________*/
/*_________GRILLE__________*/
/*_________________________*/

#grille_projets{
    width:100%;
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 3vh;
}
.bloc_projet{
    padding : 20px;
    position:relative;
}
.bloc_projet h2, .bloc_projet h3, .bloc_projet p{
    padding:0px;
    margin:0px;
}
.bloc_projet a{
  text-decoration: none;
}
.bloc_projet h2{
font-size: 4em;
line-height: 0.8em;
}
.bloc_projet h3{
text-transform: uppercase;
text-decoration: underline 3px solid black;
  font-size: 4em;
  letter-spacing: 2px;
  margin-bottom: -9px;
  z-index: 2;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: inline;
    text-underline-offset: 4px;
    text-decoration-line: underline;
}
.img_projet{
    width : 75%;
}
.bloc_projet:hover {
color : var(--hyperlink-color);
}
.bloc_projet:hover .image-grille{
filter: unset;
}
.bloc_projet:hover h3{
color : var(--hyperlink-color);
text-decoration: underline 3px solid var(--hyperlink-color);
text-decoration-line: underline;
}
.tourni {
  transform: rotate(90deg);
  margin-left: 9.5%;
  margin-top: -9.5%;
}

/*_________________________*/
/*_________PREVNEXT__________*/
/*_________________________*/

#prevnext{
    width : 100%;
    background-color: var(--second-color);
    display: flow-root;
}
#prevnext a{
    color : black;
    text-decoration: none;
}
#prevnext h3{
    text-decoration: underline 1px solid black;
    text-decoration-line: underline;
    text-transform: uppercase;
  text-underline-offset: 2px;
}
.prev, .next{
    padding : 30px;
    width:fit-content;
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto);
grid-column-gap: 0px;
grid-row-gap: 0px; 
position: relative;
transition: transform 0.5s ease;
align-items: initial;
justify-content: center;
}

.prev{
float: inline-start;
}
.next{
    float: inline-end;
}

.prev:hover, .next:hover{
color:var(--hyperlink-color) !important;
}
.prev:hover h3, .next:hover h3{
color:var(--hyperlink-color);
text-decoration: underline 1px solid var(--hyperlink-color) !important;
text-decoration-line: underline;

}

.div1 { grid-area: 1 / 1 / 1 / 1; }
.div2 { 
grid-area: 2 / 1 / 2 / 1;
width : 8vw; }
.div2 h3{
text-wrap: wrap;
display: inline;
line-height:0.9em;
color:black;}

.div3 { 
    grid-area: 1 / 2 / 2 / 2;
    font-size: 4rem;
    padding-top : 35px;
}

/*_________________________*/
/*_________404__________*/
/*_________________________*/

#introuvable{
padding-left: 30px;
  display: block;
  padding-top: 100px;
}


/*____________________________________________
______________________________________________
____________________MOBILE____________________
______________________________________________
______________________________________________*/
/*

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;
        }
}