/*====================================================== latelierdejeff.css ======================================================*/

html{box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{outline:none;}

/*---------------------------------------------------- Polices, couleurs, bold ---------------------------------------------------*/

h1
{
   visibility: hidden;
}

h2
{
    font-size: 24px;
    padding: 16px;
}

h3
{
    font-size: 20px;
    padding: 16px;
}

h4
{
    font-size: 16px;
    padding: 16px;
}

h2, h3, h4, .fat, .titlep
{
    color: #463f2e;
}

body
{
    background: #ffebbe url(Images/planchepin.jpg) fixed;
    background-size: 100% 100%;
    color: #662914;
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
}

a
{
    color: #662914;
    text-decoration: none;
}

.endtitle
{
    color: #463f2e;
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
}

.endtitle, .©
{
    text-align: center;
}

/*------------------------------------------ Navigation header et footer / Menus déroulants --------------------------------------*/

header li
{
    display: inline-block;
    vertical-align: top;
    position: relative;
}

header li a
{
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
}

header li:hover a, footer li:hover a
{
    color: #ae8269;
}

header li:hover .sub-menu, footer li:hover .sub-menu
{
    display: block;
}

header .sub-menu
{
    display: none;
    position: absolute;
    width: 200px;
}

.sub-menu li
{
    display: block;
    z-index: 2;
}

.sub-menu li a
{
    background-color: #662914;
}

.sub-menu li:hover a
{
    background-color: #ecd6b1;
}

.sub-menu li:not(:hover)
{
    color: #662914;;
}

.sub-menu
{
    display: none;
    position: absolute;
    width: 220px;
}

li a
{
    display: block;
    padding: 0px 1px 2px 2px;
}

/*--------------------------------------------------------------------------------------------------------------------------------*/

/* Bouton de début de page apparaissant au défilement*/

.reveal-unvisible
{
    opacity:0;
    transform:translateY(-30px);
    transition: 1s cubic-bezier(.5,0,0,1);
}

.reveal-visible.scroll{
    
    opacity:1;
    position: fixed;
    right: 5px;
    top: 90%;
    transform:translateY(0px);
    transition: 1s cubic-bezier(.5,0,0,1);
    z-index: 3;
}

/* Dispatching 1er groupe d'éléments (1, 4, 18, 27, 32, 38, 48) 1 élément par ligne */
.element1, .element4, .element18, .element27, .element32, .element38, .element48, .element49
{
    display: inline-block;
    margin: 18px;
    width: 97%;
}

/* Dispatching 2ème groupe d'éléments (2-14, 19-20, 28-31, 33-34, 39-40, 41-42, 43-44) 2 éléments par ligne */
.element2, .element3, .element5,.element6, .element7, .element8, .element9,.element10, .element11, .element12, .element13,
.element14, .element19,.element20, .element28, .element29, .element30, .element31, .element33, .element34, .element39, .element40, 
.element41, .element42, .element43, .element44, .element45
{
    display: inline-block;
    margin-left: 18px;
    vertical-align: top;
    width: 47%;
}

/* Dispatching 3ème groupe d'éléments (15-17, 21-23, 35-37) 3 éléments par ligne */
.element15, .element16, .element17, .element21, .element22, .element23, .element35, .element36, .element37, .element38A, .element38B, 
.element38C
{
    display: inline-block;
    margin: 20px;
    vertical-align: top;
    width: 30%;
}

/* Dispatching 4ème groupe d'éléments (24-26) 3 éléments par ligne de longueur précise */
.element24, .element25, .element26
{
    display: inline-block;
    margin: 18px;
    vertical-align: top;
    width: 37.3%;
}

/* Dispatching particulier aux icônes de réseaux sociaux (47-48) */
.element47, .element48
{
    display: inline-block;
    margin-left: auto;
    text-align: center;
    vertical-align: middle;
}

.element26 /* Dimension adaptative de la corbeille "Aérée" */
{
    height: auto;
    width: 16.2%;
}

/* Encadrements des photos */
.cadre
{
    border: 10px solid #675d44;
}

/* Logo Millsticks */

.tlogo
{
    border-radius: 2px;
    transition: 1s ease;
    vertical-align: middle;
}

.tlogo:hover
{
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
    transform: scale(1.9);
    transition: 1s ease;
}

/* Icônes Réseaux Sociaux et réaction switch au hover avec Javascript */

.footicon {height: 28px; width: 28px;}

/*-----------------------------------------------*/

.ressauxfooter1 {display: inline-block;}
.ressauxfootera1 {display: none;}

/*-----------------------------------------------*/

.ressauxfooter2 {display: inline-block;}
.ressauxfootera2 {display: none;}

/*-----------------------------------------------*/

/*---------------------------------------------------- Responsivité du site ------------------------------------------------------*/

span
{
    display:flex;
    justify-content: center;
}

.title
{
    display: inline-block;
    height: auto;
    max-width: 53%;
    padding-bottom: 20px;
    padding-top: 20px
}

.align
{
    display: flex;
    justify-content: center;
}

/* Flexibilité images et textes */

.wrapper
{
    font-weight: 900;
    display: inline;
    margin: 0 auto;
    text-align: center;
}

.justify
{
    text-align:justify ;
}

/* Effet loupe et déplacement au hover */

.loupeG
{
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
    transform: scale(1.9) translateX(-133px);
        transition: 1s ease;
    z-index: 1;
}

.loupe
{
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
    transform: scale(1.9);
        transition: 1s ease;
    z-index: 1;
}

.loupeD
{
    -webkit-transform: scale(1.9);
    -ms-transform: scale(1.9);
    transform: scale(1.9) translateX(+133px);
        transition: 1s ease;
    z-index: 1;
}

.loupeOFF
{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1) translateX(0px);
        transition: 1s ease;
        z-index: 0;
}

/*------------------------------------------------ Breakpoint à 1340 pixels -------------------------------------------------*/

@media all and (max-width:1340px) 
{   
    .wrapper 
    {
        display: flex;     
        margin-left: 16%;
        margin-right: 17%;
        padding: 0;       
        text-align: center;       
    }

    /* Disposition des textes */
    .element1, .element2, .element4, .element6, .element7, .element10, .element13, .element18, .element20, .element24, .element27, 
    .element28, .element30, .element32, .element34, .element38, .element38C, .element39, .element42, .element43, .element45, 
    .element49
    {
        display: block;
        height: auto;
        margin: auto;
        padding: 20px;
        width: 92%;
    }

    /* Disposition des images */
    .element3, .element5, .element8, .element9, .element11, .element12, .element14, .element15, .element16, .element17, .element19,
    .element21, .element22, .element23, .element25, .element26, .element29, .element31, .element33, .element35, .element36,
    .element37, .element38A, .element38B, .element40, .element41, .element44, .element46
    {
        display: block;     
        margin: auto;       
        text-align: center;       
    }

    .element26 /* Dimension adaptative de la corbeille "Aérée" */
    {
        height: auto;
        width: 37.25%;
    }

    /* Dispatching particulier aux icônes de réseaux sociaux (47): Synchronisation au texte */
    .element47, .element48
    {
        height: 28px;
        margin-left: auto;
        vertical-align: middle;
        width: 28px;
    }   

    /* Effet loupe au clic */

    .loupeG, .loupeD
    {
        -webkit-transform: scale(2.2);
        -ms-transform: scale(2.2);
        transform: scale(2.2);
            transition: 1s ease;
        z-index: 1;
    }

    .loupeOFF
    {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1) translateX(0px);
        transition: 1s ease;
        z-index: 0;
    }

    /* Encadrements des photos */
    .cadre
    {
        border: 5px double #675d44;
    }

}

/*------------------------------------------------ Breakpoint à 499 pixels ------------------------------------------------------*/

@media all and (max-width:499px) 
{
    body
    {
    background-color: #ecbc8c;
    }

    .element45, .element49
    {
        text-align: center;
    }

    .element47, .element48
    {
        margin: 7px;
    }
    .tlogo
    {
        display: block;     
        margin: auto;
       
        text-align: center;
    }
    .element15, .element16, .element17, .element21, .element22, .element23, .element25, .element35, .element36, .element37, 
    .element38A, .element38B
    {
        height: 150px;
        width: auto;
    }

}