@font-face {
    font-family: "gotham";
    src: url("./font/Gotham_Book/Gotham_Book.otf");
}
@font-face {
    font-family: "lemon";
    src: url("./font/lemon_milk/LEMONMILK-Regular.otf");
}



html {
    box-sizing: border-box;
    font-size: 16px;
    height: 100%; 
}


*, *::before, *::after {
    box-sizing: inherit;
    position: relative; 
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    /* Fallback for browsers that don't support dvh */
    height: 100vh; 
    /* Main solution for modern browsers, overrides vh if supported */
    height: 100dvh; 
    overflow: hidden;
}

body {
    height: 100%; 
    overflow: hidden;
    
    display: flex; /* Le body gère le positionnement du wrapper au centre */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-family: "gotham", sans-serif;
    color: #1e1e1e;
    text-align: left;
    background-color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}



/* design scrollbar */
.presentation::-webkit-scrollbar,
.contact_footer::-webkit-scrollbar,
.graphisme::-webkit-scrollbar,
.codage::-webkit-scrollbar {
    background-color: transparent;
    width: 20px;
    height: 10px;
}
.presentation::-webkit-scrollbar-thumb,
.contact_footer::-webkit-scrollbar-thumb,
.graphisme::-webkit-scrollbar-thumb,
.codage::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #003946, #1dd5fe);
    background-clip: padding-box; /* Makes the border part of the thumb's size */
    border-radius: 50px;
    border: 5px solid transparent;
}





ul, 
li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}


a {
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}


h1,
h2 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-transform: uppercase;
    font-family: "lemon";
    font-weight: 600;
    letter-spacing: 2px;
    hyphens: none;
}

h1 {
    width: 80%;
    text-align: center;
    font-size: 2.9rem;
    line-height: 1.5em;
    color: #fff;
}

h2 {
    padding: 20px 0px;
    text-align: right;
    font-size: 1.7rem;
    color: #fff;
}
.presentation h2 {
    margin-bottom: 30px;
}
.codage h2,
.graphisme h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-right: 5px;
    color: #1f2937;
    color: #475367;
}






/* FIXED ELEMENTS */
/* Return top page */
.return_main_page {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 99;
}
.return_main_page img {
    width: 70px;
}

/* Navigation arrows > going to the linked page */
.nav-button {
    position: fixed;
    padding: 10px 15px; /* center nav arrows in their circle */
    background-color: #1f2937;
    color: white;
    border-radius: 50%;
    font-family: "lemon";
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.nav-button:hover {
    background-color: #4b5563;
}

#nav-left {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
#nav-left:hover {
    transform: translateY(-50%) scale(1.05);
}
#nav-right {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
#nav-right:hover {
    transform: translateY(-50%) scale(1.05);
}
#nav-up {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
#nav-up:hover {
    transform: translateX(-50%) scale(1.05);
}
#nav-down {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
#nav-down:hover {
    transform: translateX(-50%) scale(1.05);
}







#page-grid-wrapper {
    width: 300vw;
    /* Fallback for browsers that don't support dvh */
    height: 100vh; 
    /* Main solution for modern browsers, overrides vh if supported */
    height: 100dvh; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    position: absolute;
    top: 0;
    left: 0;
}

#page-grid-wrapper .page {
    width: 100vw;
    /* Fallback for browsers that don't support dvh */
    height: 100vh; 
    /* Main solution for modern browsers, overrides vh if supported */
    height: 100dvh; 
    flex-shrink: 0;
    overflow: hidden;
}


header,
.presentation,
.codage,
.graphisme,
.contact_footer {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}











#home-page {
    background: url("./Images-Liens/background.gif") no-repeat;
    background-size: cover;
    background-position: top center;
}

/* HOME-PAGE - HEADER */
header {
    overflow: hidden;
}

.video_background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100dvh;
    height: 100vh;
    object-fit: cover;
}

.header_align {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.main_nav {
    width: 100%;
    margin-top: -30px;
    margin-bottom: 80px;
    text-align: center;
    color: #1f2937;
}
.main_nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 2rem;
}
.main_nav li {
   text-shadow: 
    0px 0px 2px #dbdddf,
    0 0px 2px #dbdddf,
    0 0px 2px #dbdddf;
    /* Hide text initially, jQuery will reveal it */
    visibility: hidden;
    /* animate opacity */
    opacity: 0;
}
.main_nav ul::after {
    content: '|';
    margin-left: -3px;
    font-size: 2.5rem;
    font-weight: 500;
    animation: blink-caret 0.6s infinite alternate;
}
@keyframes blink-caret {
    from { opacity: 1; }
    to { opacity: 0; }
}
.not_cursor {
    cursor: default;
}




















#top-page {
    background-image: url("./Images-Liens/flower_bande.jpg"),
    url("./Images-Liens/flowers_black.png");
    background-position: right, left;
    background-repeat: no-repeat;
    background-size: contain, cover;
}



/* Presentation */
.presentation {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 1fr;
}

.presentation_txt {
    margin: 40px 0;
    margin-right: 10px;
    padding: 60px 50px;
    padding-right: 30px;
    text-align: right;
    background-color: rgba(245, 245, 245, 0.95);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.signature {
    margin-bottom: 0;
    font-family: "lemon";
    font-size: 1.7rem;
    color: transparent;
    /* For better cross-browser compatibility, use -webkit-text-fill-color */
    -webkit-text-fill-color: transparent; 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #333; 
    /* For Firefox and other browsers, use text-stroke (though browser support might vary) */
    text-stroke-width: 1px;
    text-stroke-color: #333;
}

.presentation_img {
    height: 100%;
}
.presentation_img img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}


















#left-page,
#bottom-page {
    background: url("./Images-Liens/stripes.png"),
    linear-gradient(to right, #fff, #ced0dd);
    background-size: 70% 100%;
    background-repeat: no-repeat;
    background-position: right center;
}



/* CODAGE */
.codage {
    margin: 0 auto;
    padding: 100px 10px;
    padding-bottom: 100px;
    padding-left: 30px;
    display: grid;
    grid-template-columns: repeat(6, 190px);
    grid-template-rows: repeat(3, 190px);
    grid-gap: 10px;
    justify-content: center;
}

.thumbnail_codage,
.txt-codage {
    border: 3px solid rgb(255, 255, 255);
    border-radius: 50px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.thumbnail_codage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform 0.2s ease-in-out;
}
.txt-codage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    line-height: 1.4em;
    line-height: 1.3rem;
    text-align: center;
    font-family: lemon;
    font-size: 0.75rem;
    hyphens: none;
    background-color: #fff;
}
.thumbnail_codage:hover  {
    transform: scale(1.03);
}

/* arrows */
.txt-codage::after {
    content: ""; 
    display: block; 
    width: 40px; 
    height: 40px;
    background-image: url("./Images-Liens/forward-right.gif");
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-position: center;
}
.golf::after,
.pibou::after {
    background-image: url("./Images-Liens/forward-left.gif");
}

/* position of each div > SNAKE FORMAT BIG SCREENS */
.div_title_codage {order: 1;}
.concerts {order: 2;}
.concerts_ancien {order: 3;}
.concerts_nouveau {order: 4;}
.fbi {order: 5;}
.fbi_img {order: 6;}
.golf {order: 12;}
.golf_ancien {order: 11;}
.golf_nouveau {order: 10;}
.fleuriste {order: 13;}
.fleuriste_img {order: 14;}
.pibou {order: 9;}
.pibou_ancien {order: 8;}
.pibou_nouveau {order: 7;}
.badinages {order: 17;}
.badinages_img {order: 18;}
.jdcode {order: 15;}
.jdcode_ancien {order: 16;}
.filler1 {display: none;}
.filler2 {display: none;}















/* GRAPHISME */
.graphisme {
    margin: 0 auto;
    padding: 100px 40px;
    padding-right: 20px;
}
#gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.thumbnail-box:not(.div_title_graphisme) {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50px;
    border: 3px solid rgb(255, 255, 255);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: zoom-in;
    transition: transform 0.2s ease-in-out;
}
.div_title_graphisme {
    overflow: visible;
    width: 250px;
}

.thumbnail-box:hover  {
    transform: scale(1.04);
}

.thumbnail-box img.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; /* Supprime l'espace sous l'image */
}

/* Styles du diaporama */
#slideshow-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    overflow: hidden;
    z-index: 100;
}

.slideshow-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto; 
    height: auto; 
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
}

/* Close button */
.close-slideshow {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 101;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Styles pour les médias dans le diaporama (images et vidéos) */
.slideshow-content .current-media { 
    max-width: 100%;
    /* Fallback for browsers that don't support dvh */
    max-height: 100vh;
    /* Main solution for modern browsers, overrides vh if supported */
    max-height: 100dvh;
    object-fit: contain;
    display: block;
    cursor: pointer; 
    margin: auto;
}

/* Styles pour le lien PDF dans le diaporama */
.pdf-display-button {
    background-color: #007bff; /* Couleur de bouton bleu */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.5em;
    cursor: pointer;
    text-decoration: none; /* Pas de soulignement par défaut */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.pdf-display-button:hover {
    background-color: #0056b3;
}

.slideshow-content figcaption {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px 15px;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    border-bottom-left-radius: 3px;
    background-color: rgba(0, 0, 0, 0.7); 
    max-width: 100%; /* Empêche la légende de déborder */
    box-sizing: border-box;
}

/* Navigation arrows slideshow */
.prev-arrow, .next-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 30px;
    text-align: center;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 20;
}
.prev-arrow {
    left: 0;
    border-radius: 3px 0 0 3px;
}
.next-arrow {
    right: 0;
    border-radius: 3px 0 0 3px;
}

























#right-page {
    background-image: url("./Images-Liens/peacock.jpg");
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: right center;
}



/* CONTACT + FOOTER */
.contact_footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    padding: 70px 20px;
}

/* Contact */
.formulaire {
    width: 100%;
    padding: 20px 30px;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
}

.form-wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
.form-wrap div:last-child {
    margin-left: 20px;
}

.formulaire label {
    display: block;
    width: 100%;
    max-width: 350px;
    text-align: left;
        margin: 0 auto;
    margin-left: 10px;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire textarea,
#formSubmit {
    width: 240px;
    height: 45px;
    vertical-align: middle;
    margin: 5px auto;
    padding: 0 10px;
    border: 2px solid #ccc;
    border-radius: 20px;
    font-family: "gotham";
    font-size: 0.9rem;
    color: #3e3e3e;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.9);
}
.formulaire input[type="text"]:focus,
.formulaire input[type="email"]:focus,
.formulaire textarea:focus {
    outline: 2px outset rgba(168, 226, 255, 0.8);
    border: none;
}
.formulaire textarea {
    width: 350px;
    height: 250px;
    padding: 15px;
    resize: none;
}
.formulaire textarea::placeholder {
    color: #3e3e3e;
}

#formSubmit {
    width: 100%;
    height: 45px;
    margin: 0 auto;
    text-align: center;
    display: block;
    border: 2px solid #ccc;
    background-color: #475367;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border 0.2s ease-in-out;
}
#formSubmit:active {
    border: 2px solid #89f5ff;
    background-color: #505659;
}

/* Lors de l'échec du formulaire */
.nom-requis, .prenom-requis, .email-requis, .txt-requis {
    display: none;
    margin-top: -15px;
    margin-left: 10px;
    font-style: italic;
    font-weight: 600;
    font-size: 0.8rem;
    color: red;
}
/* Lors de la validation du formulaire */
.validation-form {
    display: none;
    width: 100%;
    height: 100%;
    margin-top: -90px; /* bloque nouveau click sur #formSubmit */
    margin-bottom: 0;
    padding: 50px 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    border: 2px solid #89f5ff;
    z-index: 99;
}
.validation-form span {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
}





/* Footer */
footer {
    width: 30%;
    margin: 0 auto;
    padding-left: 15px;
    line-height: 1.2rem;
}
footer p {
    margin: 0;
}
.DesignsBy {
    margin-bottom: 20px;
    margin-left: -15px;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: rgba(135,206,237, 0.8) 4px 4px;
    color: #404040;
}
.artistes {
    margin-right: 40px;
}
.mentions {
    font-size: 0.9rem;
    margin-top: 20px;
}


















/* */
/* */

/* RESPONSIVE DESIGN */

/* */
/* */








@media only screen and (max-width: 700px) and (min-height: 1070px) {
    
    /* CONTACT_FOTOER */
    .contact_footer {
        justify-content: center;
    }
    
}












@media only screen and (min-width: 1800px) and (min-height: 1200px)  {
    
    html {
        font-size: 23px;
    }
    
    /* Navigation arrows */
    .nav-button {
        padding: 20px 25px; /* center nav arrows in their circle */
    }
    
    /* CODAGE */
    .codage {
        grid-template-columns: repeat(6, 250px);
        grid-template-rows: repeat(3, 250px);
    }
    
    /* GRAPHISME */
    .thumbnail-box:not(.div_title_graphisme) {
        width: 160px;
        height: 160px;
    }
    .div_title_graphisme {
        width: 330px;
    }
    
    /* CONTACT */ 
    .formulaire input[type="text"],
    .formulaire input[type="email"] {
        width: 350px;
        height: 65px;
        border-radius: 50px;
    }
    #formSubmit {
        height: 60px;
        border-radius: 50px;
    }
    .formulaire textarea {
        width: 400px;
        height: 350px;
        padding: 20px;
    }
    
}







@media only screen and (min-width: 1300px) and (min-height: 1100px) {
    
    .presentation,
    .codage,
    .graphisme,
    .contact_footer {
        width: auto;
        height: auto;
        overflow: visible;
    }
    
    .codage,
    .graphisme,
    .contact_footer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    /* PRESENTATION */
    .presentation_img {
        height: 100vh;
    }
    
    /* GRAPHISME */
    .graphisme {
        width: 80%;
    }
    
    /* CONTACT_FOOTER */
    .contact {
        left: 300px;
    }
    
    footer {
        width: 100%;
        margin-left: -400px;
    }
    
}










@media only screen and (min-width: 1200px) {
    
    /*PRESENTATION */
    .presentation {
        grid-template-columns: 1fr 1fr;
    }
    
}




@media only screen and (min-width: 1201px) and (max-height: 500px)  {
    
    .contact_footer {
        align-items: flex-start;
    }
    footer {
        padding-top: 30vh;
    }
    
}





@media only screen and (min-width: 701px) and (min-height: 800px) {
    
    /* CONTACT_FOOTER */
    .contact_footer {
        justify-content: center;
    }
    
}







@media only screen and (max-width: 1300px) {
    
    /* CODAGE */
    .codage {
        grid-template-columns: repeat(5, 190px);
        grid-template-rows: repeat(4, 190px);
    }
    .concerts {order: 2;}
    .concerts_ancien {order: 3;}
    .concerts_nouveau {order: 4;}
    .fbi {order: 5;}
    .fbi_img {order: 10;}
    .golf {order: 9;}
    .golf_ancien {order: 8;}
    .golf_nouveau {order: 7;}
    .fleuriste {order: 6;}
    .fleuriste_img {order: 11;}
    .pibou {order: 12;}
    .pibou_ancien {order: 13;}
    .pibou_nouveau {order: 14;}
    .badinages {order: 15;}
    .badinages_img {order: 20;}
    .jdcode {order: 19;}
    .jdcode_ancien {order: 18;}
    .filler1 {display: block; order: 17;}
    .filler2 {display: block; order: 16;}
    
    /* arrows */
    .txt-codage::after {
        background-image: url("./Images-Liens/forward-right.gif");
    }
    .golf::after,
    .jdcode::after {
        background-image: url("./Images-Liens/forward-left.gif");
    }
    .fbi::after,
    .fleuriste::after,
    .badinages::after {
        background-image: url("./Images-Liens/forward-down.gif");
    }
    
}




@media only screen and (max-width: 1200px) {
    
    /* CONTACT_FOOTER */
    .contact_footer {
        display: flex;
        flex-direction: column;
    }
    
    footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 95%;
        margin-top: 40px;
    }
    .mentions {
        text-align: right;
        color: #fff;
    }
    
}





@media only screen and (max-width: 1070px) {
    
    /* CODAGE */
    .codage {
        grid-template-columns: repeat(4, 190px);
        grid-template-rows: repeat(5, 190px);
    }
    
    .concerts {order: 2;}
    .concerts_ancien {order: 3;}
    .concerts_nouveau {order: 4;}
    .fbi {order: 5;}
    .fbi_img {order: 9;}
    .golf {order: 8;}
    .golf_ancien {order: 7;}
    .golf_nouveau {order: 6;}
    .fleuriste {order: 13;}
    .fleuriste_img {order: 14;}
    .pibou {order: 10;}
    .pibou_ancien {order: 11;}
    .pibou_nouveau {order: 12;}
    .badinages {order: 20;}
    .badinages_img {order: 19;}
    .jdcode {order: 15;}
    .jdcode_ancien {order: 16;}
    .filler1 {order: 18;}
    .filler2 {order: 17;}
    
    .fleuriste::after,
    .jdcode::after {
        background-image: url("./Images-Liens/forward-right.gif");
    }
    .badinages::after {
        background-image: url("./Images-Liens/forward-left.gif");
    }
    
}





@media only screen and (max-width: 840px) {
    
    /* CODAGE */
    .codage {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 190px);
    }
    .concerts {order: 6;}
    .concerts_ancien {order: 5;}
    .concerts_nouveau {order: 4;}
    .fbi {order: 2;}
    .fbi_img {order: 3;}
    .golf {order: 7;}
    .golf_ancien {order: 8;}
    .golf_nouveau {order: 9;}
    .fleuriste {order: 15;}
    .fleuriste_img {order: 14;}
    .pibou {order: 12;}
    .pibou_ancien {order: 11;}
    .pibou_nouveau {order: 10;}
    .badinages {order: 17;}
    .badinages_img {order: 18;}
    .jdcode {order: 13;}
    .jdcode_ancien {order: 16;}
    .filler1 {display: none;}
    .filler2 {display: none;}
    
    .fbi::after,
    .golf::after {
        background-image: url("./Images-Liens/forward-right.gif");
    }
    .concerts::after,
    .pibou::after,
    .fleuriste::after {
        background-image: url("./Images-Liens/forward-left.gif");
    }
    .jdcode::after {
        background-image: url("./Images-Liens/forward-down.gif");
    }
    .badinages::after {
        background-image: url("./Images-Liens/forward-right.gif");
    }
    
    /* CONTACT */
    .formulaire input[type="text"],
    .formulaire input[type="email"]
    {
        width: 230px;
    }
    .formulaire textarea {
        width: 320px;
    }
    
}








@media only screen and (max-width: 700px) {
    
    h2 {
        font-size: 2rem;
    }
    
    /* PRESENTATION */
    .presentation {
        grid-template-columns: 1fr; 
    }
    .presentation_img {
        display: none;
    }
    
    /* CODAGE */
    #left-page {
    background-size: cover;
    }
    
    /* GRAPHISM */
    #bottom-page {
    background-size: cover;
    }
    
    /* CONTACT_FOOTER */
    #right-page {
        background-size: cover;
    }
    .contact_footer {
        padding-right: 10px;
    }
    .contact {
        width: 100%;
    }
    .form-wrap {
        display: block;
        text-align: center;
    }
    .form-wrap div:last-child {
        margin-left: 0;
    }
    .formulaire input[type="text"],
    .formulaire input[type="email"],
    .formulaire textarea,
    #formSubmit {
        width: 100%;
        max-width: 350px;
        height: 55px;
    }
    .formulaire textarea {
        height: 220px;
    }
    
    footer {
        display: block;
    }
    .DesignsBy {
        text-shadow: none;
        color: #ffeb53;
    }
    .artistes {
        color: #fff;
        width: 100%;
    }
    .mentions {
        margin-top: 20px;
    }
    
}





@media only screen and (max-width: 650px) {
    
    h2 {
        font-size: 1.8rem;
    }
    
    /* HEADER */
    .main_nav ul {
        font-size: 1.7rem;
    }
    
    /* CODAGE */
    .codage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(9, 190px);
    }
    .concerts {order: 3;}
    .concerts_ancien {order: 5;}
    .concerts_nouveau {order: 7;}
    .fbi {order: 2;}
    .fbi_img {order: 4;}
    .golf {order: 6;}
    .golf_ancien {order: 8;}
    .golf_nouveau {order: 10;}
    .fleuriste {order: 12;}
    .fleuriste_img {order: 14;}
    .pibou {order: 9;}
    .pibou_ancien {order: 11;}
    .pibou_nouveau {order: 13;}
    .badinages {order: 16;}
    .badinages_img {order: 18;}
    .jdcode {order: 15;}
    .jdcode_ancien {order: 17;}
    
    .txt-codage::after {
        background-image: url("./Images-Liens/forward-down.gif");
    }
    
}





@media only screen and (max-width: 460px) {
    
    /* FIXED ELEMENT */
    .nav-button {
        padding: 5px 10px;
    }
    
    
    
    /* GRAPHISME */
    .graphisme {
        padding-right: 0;
        padding-left: 20px;
    }
    .graphisme h2 {
        justify-content: flex-start;
        padding-left: 20px;
    }        
    .thumbnail-box:not(.div_title_graphisme) {
        width: 40%;
    }
    .div_title_graphisme {
        width: 100%;
    }
    
}







@media only screen and (max-width: 380px) {
    
    /* CODAGE */
    .codage {
        padding-top: 0;
        padding-left: 20px;
        padding-right: 0;
        grid-template-columns: repeat(1, 80%);
        grid-template-rows: repeat(18, 190px);
    }
    .codage h2 {
        justify-content: flex-start;
        align-items: flex-end;
        padding-left: 20px;
    }    
    .concerts {order: 3;}
    .concerts_ancien {order: 4;}
    .concerts_nouveau {order: 5;}
    .fbi {order: 1;}
    .fbi_img {order: 2;}
    .golf {order: 6;}
    .golf_ancien {order: 7;}
    .golf_nouveau {order: 8;}
    .fleuriste {order: 12;}
    .fleuriste_img {order: 13;}
    .pibou {order: 9;}
    .pibou_ancien {order: 10;}
    .pibou_nouveau {order: 11;}
    .badinages {order: 14;}
    .badinages_img {order: 15;}
    .jdcode {order: 16;}
    .jdcode_ancien {order: 17;}
    .jdcode_nouveau {order: 18;}

}






@media only screen and (max-width: 280px) {
    
    h1, h2,
    .txt-codage {
        hyphens: auto;
    }
    
    /* GRAPHISME */    
    .thumbnail-box:not(.div_title_graphisme) {
        width: 80%;
    }
    
}






@media only screen and (max-width: 460px), only screen and (max-height: 450px) {
    
    /* HEADER */
    .main_nav {
        margin-bottom: 20px;
    }
    .main_nav ul {
        font-size: 1.5rem;
    }
    h1 {
        font-size: 2rem;
    }
    
    
}











@media only screen and (max-width: 350px), only screen and (max-height: 320px) {
    
    /* FIXED ELEMENTS */
    .return_main_page img {
        width: 50px;
    }
    
}







@media only screen and (max-height: 460px) {
    
    .main_nav {
        margin-top: 0px;
        margin-bottom: 20px;
    }
    
}






@media only screen and (max-height: 220px) {
    
    /* HEADER */
    .main_nav {
        margin: 0;
    }
    h1 {
        font-size: 1.5rem;
    }
}