/**PARAMETRES GENENRAUX**/
    *{
        box-sizing: border-box;
        }
    body{
        background-position: top;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color:#131E34;
        margin:0;
          }
    h1{
        color: #FFFFFF;
        font-family: montserrat;
        text-shadow: 0 0 1rem rgba(0,0,0,1);
        }
    h2{
        color:#FFFFFF;
        font-family:limelight;
        }
     h3{
        color:#b2ebf2;
        font-family:limelight;
        }
            
    .h2-center,.h3-center{
        text-align: center;
    }
    
    p,a,ul{font-family:Montserrat ;
        }
    p{
        color:#FFFFFF;
        text-align: justify;
        }
        .p-marginblue{
        color:#b2ebf2;
        text-align: center;
    }
    .services p{
        text-align: center;
    }
    a{
        text-decoration: none;
        }
    a{
        color:#b2ebf2;
        
        }
    a:hover{
        color:#FFFFFF;
        }
    ul{
        color:#b2ebf2;
    }
    .imstrong{
        font-weight: 700;
        color:#b2ebf2
    }
    /**HEADER**/
    .baseline{
        font-weight: 400;
        text-align: center;
        font-size:0.60rem;
            }
        /**NAV**/
        nav{
            flex-direction: column;
            }
        /**MENU MOBILE**/
        header input{
            display:none;
            }
        .menu-icon{
                float:right;
                cursor: pointer;
                font-size: 6rem;
                color:#ffffff;
                padding:1% 2% 0 0;
                }
    /**SECTION**/
        /**ARTICLE**/
        .article1{
            background-color:#131E34;
        }
        .a-bouton{
            background-color: #131E34;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0 auto;
            color:#ffffff;
        }
        .a-bouton:hover{
        color:#b2ebf2;
    }
        /**IMG**/
        .img-2colonnes{
        width:100%;
        }
    /**INDEX**/
        /**FLECHE**/
        .scroll-arrow {
            width: 0;
            height: 0;
            border-left: 3rem solid transparent;
            border-right: 3rem solid transparent;
            border-top: 1.7rem solid #DC4C0D; 
            animation: float 1.5s ease-in-out infinite;
            transition: border-top-color 0.3s;
            cursor: pointer;
            }

        .scroll-arrow:hover {
            border-top-color: #b2ebf2;
            }

        @keyframes float {
            0%, 100% {
            transform: translateY(0);
            }
            50% {
            transform: translateY(8px);
            }
        }
        /**LIST SERVICES**/
        .list-services{
            display:flex;
            flex-direction: column;
        }
    /**FOOTER**/
      footer{
        background-image: url("img/prismatic_studio/footer_desk.png");
        /**background-position: center;
        background-size: 100%;**/
        }
        .footer-rsbox{
        display:flex;
        justify-content: center;  
    }
       .footer-mentionsbox p{
    text-align:center;
}
/**A PROPOS**/
   .box-vousetes{
        text-align: center;
    }
/**CONTACT**/
 form input, form textarea {
              display:block;
              font-family:"montserrat";
              margin:0 auto 0 auto;
              background-color:#131E34;
              color:#ffffff;
            }
form input[type=submit]{
              color:white;
              background-color:#131E34;
              }

/** MEDIA QUERIE : PARAMETRES ECRANS DE MOINS DE 1100PX DE LARGE**/
@media only screen and (max-width: 1100px) {
    body{
        background-image: url("img/prismatic_studio/wallpaper_mobile.png");
          }
    .bodylike{
        margin-top: 30%;
    }
    p,a{
        font-size: 2.2rem;
    }
    p{
        line-height: 3.5rem;
    }
    .p-marginblue{
        font-size: 2.6rem;

    }
    h1{
        font-size: 6.5rem;
        margin-left:5%;
    }
    h2{
        font-size: 4.6rem;
        }
    h3{
        font-size: 4rem;
    }
    /**HEADER**/
    header{
        background-color:#131E34;
        padding:2%;
        border-bottom: 0.25rem solid #b2ebf2;
        position:fixed;
        top:0;
        z-index:1000;
        width:100%;
    }

    .logo_prismaticstudio_header{
        width:20%;
        padding-bottom: 2%;
    }
    .baseline{
        display:none;
            }
            /**MENU MOBILE**/
            
            .menu-items{
                display: none;
                flex-direction: column;
                border-top:0.25rem solid #b2ebf2;
                margin:1% 0 0 0;
                gap:6rem;
                padding:4% 0 2% 5%;
                }

                
            *#toggle:checked ~ .menu-items {
                display: flex;
                }
            /**.menu-items a {
                margin-top: 10px;
                padding-bottom:1vw;
                }
            .menu-items a:link{
                margin-top: 10px;
                margin-left: 10px;
                } **/
    
    /**SECTION**/
        /**ARTICLE**/
        article{
        padding:5%;
        }
        .longpage{
        min-height: 35rem;
    }
    /**INDEX**/
    .accroche{
        margin: 90% 0 40% 10%;
        }
    .list-services{
        margin:15% auto 15% auto;
        width:fit-content;
        font-size:2.5rem;
        gap:2.5rem;
    }
    .a-bouton{
            width:43rem;
            height:9rem;
            font-size:2.5rem;
            margin:10% auto 0 auto;
        }
  
        /**FLECHE**/
            .scroll-arrow {
                margin: 0 auto;
                }  
        /**CONFIANCE**/
        .div-confiance{
            display:flex;
            flex-direction: column;
            gap:10rem;
            align-items: center;
        }
        .grid-confiance{
            width:75%;
        } 
        
    /**FOOTER**/
    footer{
        padding:5%;
        border-top:solid #b2ebf2 0.4rem;
        background-position: center;
        }
        .footer-logobox{
margin:0 auto 5% auto;
width:20rem;
    }
    .logo_prismaticstudio_footer{
    width: 100%;
    margin:0 0 2% 0;
    }
        .footer-rsbox{
        gap:3%;
    }
        .icones-rs{
        width:6rem;
    }
    /**A PROPOS**/
    .picto{
        width:50%;
    }
     .box-vousetes{
        padding:5%;
    }
    /**SERVICES**/
    .div-3colonnes{
        display:flex;
        flex-direction: column;
        gap:4rem;
    }
    .services{
        border:solid #4982AD 0.4rem;
        padding:2%;
    }
    /***REALISATIONS*/

.puce-real{
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 2rem solid transparent;
            border-bottom: 2rem solid transparent;
            border-left: 2rem solid #DC4C0D;
            margin-right: 0.5rem;
            vertical-align: middle;
            transition: transform 0.3s,border-left-color 0.3s;
            }
.check-real{
    display: none;
}
.tiroir {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.check-real:checked + h2 + .tiroir {
    max-height:100rem;
}
.check-real:checked + h2 label .puce-real {
  transform: rotate(90deg);
}
.logo-real{
    width: 100%;
    background-color: #ffffff;
    padding: 10%;
}

    /**CONTACT**/
form input[type=submit]{
              width:60%;
              height:7rem;
                border:solid #DC4C0D 0.4rem;
            
              }
        form input, form textarea{
              width:100%;
              font-size:2.2rem;
            border:solid #4982AD 0.4rem;
            padding:2%;
            margin:3% auto 3% auto;
              }
        form textarea{
            height:20rem;
        }
    form input[type=submit]:hover{
                    width:60%;
                    border:solid #b2ebf2 0.4rem;
                    }

}
/** MEDIA QUERIE : PARAMETRES GRAPHIQUES ECRANS DE PLUS DE 1100PX DE LARGE**/
@media only screen and (min-width: 1100px) {
    /**PROVISOIRE
    header{
        border:solid red 1px;
        } 
    section{
        border:solid rgb(0, 255, 26) 1px;
        }
    FIN PROVISOIRE**/
    body{
        background-image: url("img/prismatic_studio/wallpaper_desk.png");
        
          }
    .bodylike{
        display:flex;
    }
    p,a{
        font-size: 1rem;
    }
    p{
        line-height: 1.6rem;
    }
    .p-margin,.p-marginblue{
        margin-left:20%;
        margin-right:20%;
    }
    .p-marginblue{
        font-size: 1.2rem;
    }
    h1{
        font-size: 4rem;
        margin-left:5%;
    }
    h2{
        font-size: 2.3rem;
    }
    h3{
        font-size:1.5rem;
    }
    /**HEADER**/
    header{
        width:20%;
        padding:3% 0 0 0;
        position: fixed;

    }
    .logo_prismaticstudio_header{
        display:block;
        width:60%;
        margin:0 auto 0 auto;
    }
    .baseline{
        line-height: 1rem;
    }
        /**NAV**/
        nav{
            display: flex;
            margin:20% 10% 0 10%;
            gap: 1rem;
            }
        /**MENU MOBILE**/
        .menu-icon {
            display: none;
                    }
    /**SECTION**/
    section{
        width: 80%;
        margin: 0 0 0 20%;
    }
    article{
        padding:2%;
    }
    .div-2colonnes{
        display:flex;
        gap:2%;
        justify-content: center;
        align-items: center;
    }
    .div-3colonnes{
        display:flex;
        gap:2%;
        justify-content: center;
    }
    .box-2colonnes{
        width:48%;
        padding:2%;
    }
    .longpage{
        min-height: 36rem;
    }
    /**INDEX**/
    .accroche{
        margin: 24% 0 10% 4%;
    }
    .list-services{
        margin:0 auto 0 auto;
        width:fit-content;
        font-size:1.5rem;
        gap:1.2rem;
    }
    .a-bouton{
            width:22rem;
            height:5rem;
            font-size:1.2rem;
            margin:5% auto 0 auto;
            border:0.1rem solid #DC4C0D;
        }
         .a-bouton:hover{
        border:0.1rem solid #ffffff;
    }
        /**FLECHE**/
            .scroll-arrow {
                margin: 0 0 0 32%;
                }
        /**CONFIANCE**/
        .div-confiance{
            display:flex;
            justify-content:center;
            gap:10%;
        }
        .grid-confiance{
            height:6rem;
        }
    
    /**FOOTER**/
    footer{
        display:flex;
        border-top:solid #b2ebf2 0.1rem;
        background-position: center;
        background-size: 100%;
        }
    .footer-logobox{
        width: 20%;
        padding-left:2%;
    }
    .footer-box{
        width:80%;
    }
    .footer-logobox,.footer-box{
        margin-top:2%;
    }
    .logo_prismaticstudio_footer{
    width: 40%;
    }
    .footer-rsbox{
        gap:3%;
    }
    .icones-rs{
        width:3rem;
    }
    /**A PROPOS**/
    .box-vousetes{
        width:30%
    }
    .div-vousetes{
        display:flex;
        gap:5%;
        justify-content: center;
    }
    .box-vousetes{
        padding:5%;
    }
    .picto{
        width:75%;
    }
/**SERVICES**/
    .services{
        width:25%;
        border:solid #4982AD 0.1rem;
        padding:2%;
    }
/**REALISATIONS**/
.puce-real{
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 0.8rem solid transparent;
            border-bottom: 0.8rem solid transparent;
            border-left: 1rem solid #DC4C0D;
            margin-right: 1rem;
            vertical-align: middle;
            transition: transform 0.3s,border-left-color 0.3s;
            }
h2 .label-real:hover .puce-real {
  border-left-color: #b2ebf2;
}
h2 .label-real:hover {
color: #b2ebf2;
  cursor: pointer;
} 
.check-real{
    display: none;
}
.tiroir {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.check-real:checked + h2 + .tiroir {
    max-height:100rem;
}
.check-real:checked + h2 label .puce-real {
  transform: rotate(90deg);
}
.logo-real{
    width: 100%;
    background-color: #ffffff;
    padding: 10%;
}



/**CONTACT**/
form input[type=submit]{
              width:30%;
              height:3rem;
                border:solid #DC4C0D 0.1rem;
            
              }
        form input, form textarea{
              width:60%;
              font-size:1rem;
            border:solid #4982AD 0.1rem;
            padding:0.5%;
            margin:1% auto 1% auto;
              }
        form textarea{
            height:6rem;
        }
    form input[type=submit]:hover{
                    width:30%;
                    border:solid #b2ebf2 0.1rem;
                    }
}