html    {
        height: 100%;
        }
        /*hauteur 100% nécessaire pour motif jusqu'en bas*/
        /*image de fond centrée et étirée, sans répétition, figée, avec couleur de remplacement*/

body    {   
        font-family:Inter, Arial, Helvetica, sans-serif;
        position: relative;
        }
        /*hauteur minimim 100% nécessaire pour motif jusqu'en bas*/

h1      {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        }

h2      {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        }

img     {
        vertical-align: middle;
        }
        /*supprimer les marges sous les images*/

p       {
        text-align: center;
        color: white;
        margin: 0;
        }
        /*application sur tous les textes de paragraphes*/

#white {
position : fixed;
z-index: 9999;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
background-color: white;
}

#home   {
        display: block;
        width: 220px;
        height: 124px;
        margin: 50px auto 25px auto;
        }

#logo   {
        position: absolute;
        }

#logo1  {
        position: absolute;opacity: 0;
        }

#logo2  {
        opacity: 0;
        }

/*chargement prioritaire d'images*/
.i{display:block;width:0px;height:0px;opacity:0;}

/*cadre principal*/
#principal{
        max-width: 960px;
        margin: 0 auto;
        padding: 25px;
        }
        /*largeur maximale, centrage et marges*/

#contour{
        box-shadow: 0px 10px 50px #dddddd;
        height: auto;
}

/*en-ete*/
        #header {
                background-color: black;
                background-position: center center;
                background-repeat: no-repeat; 
                background-size: cover;
                height: 5px;
                widht: 100%;
                text-align:center;
                position: relative;
                }
   
/*contenus depliants*/

/*class contenu englobe tous les contenus y compris about*/
.contenu{
        clear: both;
        height: 100%;
        width: 100%;
        position: relative;
        background-position: top;

}
/*position relative pour avoir la croix à l'intérieur*/

/*croix animee pour refermer le contenu*/
        .croix{
                background-image: url(../img/croix.png);
                background-position: center center;
                background-size: 100%;
                position: absolute;
                width: 15px;
                padding-bottom: 15px;
                right: 10px;
                top: 10px;
        }

        @keyframes spinning {
            from { transform: rotate(0deg) }
            to { transform: rotate(180deg) }
          }
          .croix:hover {
            animation-name: spinning;
            animation-duration: 0.5s;
            animation-iteration-count: 1;
            /* linear | ease | ease-in | ease-out | ease-in-out */
            animation-timing-function: ease-in-out;
          }

/*description des projets dans les contenus*/
        .description{
                float: left;
                margin-left: 5%;
                width: 25%;
                text-align: left;
                margin-top: 5%;
        }

        .t_des{text-align: left;font-size: 36px; font-weight: 700;color: black;}
        .p_des{margin-top: 20px;text-align: left;font-size: 12px; line-height: 20px;font-weight: 300;color: black;}
        /*mise en forme des descriptions des projets*/

        #link1,#link2,#link3,#link4{font-weight: 900;color: black;text-decoration: none;transition: 0.5s;}

        #link1:hover{color: #9c9c9c;}
        #link2:hover{color: #b878ff;}
        #link3:hover{color: #78a8ff;}
        #link4:hover{color: #ff54f5;}

/*images des projets dans les contenus*/
        .image{
                float: right;
                margin-right: 5%;
                width: 60%;
                margin-top: 5%;
        }

.clear{clear: both;margin-bottom: 5%;}
/*fermer les floats des elements des contenus et faire descendre la texture jusqu'en bas*/

/*mosaique de carres*/
.carre  {
        width:25%;
        padding-bottom: 25%;
        float:left;
        position: relative;
        background-size: 100%;
        background-position: center;
        }
        /*les projects sont par rangée de 4, s'imbriquent l'un après l'autre*/

        /*image adaptee au projet*/
        #carre1{background-color:#01a2e2;background-image:url(../img/box1.jpg);}
        #carre2{background-color:#e01f70;background-image:url(../img/box2.jpg);}
        #carre3{background-color:#f9bb42;background-image:url(../img/box3.jpg);}
        #carre4{background-color:#126646;background-image:url(../img/box4.jpg);}
        #carre5{background-color:#1e4a99;background-image:url(../img/box5.jpg);}
        #carre6{background-color:#852c81;background-image:url(../img/box6.jpg);}
        #carre7{background-color:#b5cf4e;background-image:url(../img/box7.jpg);}
        #carre8{background-color:#1fac55;background-image:url(../img/box8.jpg);}
        #carre9{background-color:#20ada2;background-image:url(../img/box9.jpg);}
        #carre10{background-color:#d82331;background-image:url(../img/box10.jpg);}
        #carre11{background-color:#ea8c76;background-image:url(../img/box11.jpg);}
        #carre12{background-color:#666769;background-image:url(../img/box12.jpg);}

        /*image s'agranti au passage de la souris*/
        .carre:hover{
                background-size: 120%;
        }

                /*contient les blocs de texte et doit prendre tout l'espace du carre*/
                .infos{
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    background-image:url(../img/fonce.png);
                    transition: 0.5s;  
                }

                .carre:hover .infos{
                        transition: 0.5s;
                        opacity: 1;
                }

                        .title{
                          position: absolute;
                          width: 100%;
                          font-size: 32px;
                          font-weight: 700;
                          margin: 0;
                          padding: 0;
                          top: 10%;
                          transition: 0.5s;
                        }

                        .subtitle{
                          position: absolute;
                          width: 100%;
                          font-size: 18px;
                          font-style: italic;
                          font-weight: 300;
                          margin: 10px 0 0 0;
                          padding: 0;
                          bottom: 10%;
                          transition: 0.5s;
                        }

                        /*au passage de la souris sur le cadre, les textes s'animent*/
                        .carre:hover .title{
                          top: 37%;
                          transition: 0.5s;
                        }

                        .carre:hover .subtitle{
                          bottom: 37%;
                          transition: 0.5s;
                        }

#clearall{clear: both;}

/*pied de page*/
#footer {
        padding: 50px 0;
        clear:both;
        text-align:center;
        }
            
#copyright  {
        color: black;
        font-size:14px;
        font-weight: 700;
        letter-spacing: 1px;
        }

/*responsive pour la mosaique de carres*/
@media screen and (max-width: 900px) {
        .carre{
        width:33.33%;
        padding-bottom: 33.33%;
        }
}

@media screen and (max-width: 700px) {
        .carre{
        width:50%;
        padding-bottom: 50%;
        }

}

@media screen and (max-width: 500px) {
        .title,.subtitle{
        display: none;
        }
}

/*responsive pour les contenus*/
@media screen and (max-width: 700px) {
        .description,.image{
        width:90%;
        }
}