/* Gestion du sélecteur universel */

* {margin:0;padding:0;box-sizing: border-box;list-style-type: none; text-decoration: none;}



/* Gestion des balises GENERAL */

body {
	background: rgb(212,171,109);
    background: linear-gradient(90deg, rgba(212,171,109,1) 0%, rgba(241,194,145,1) 35%, rgba(238,197,107,1) 100%);
    
}

body > section, .apropos {
    max-width: 1200px;
    /* max-width: 80vw; */
    margin: auto;
    padding: 30px 0px;
    border-bottom: 1px solid #999;
    color: #333;
}




h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
    font-family: verdana, cursive;
    margin: 30px auto;
    color: #FFF;
}

h1::before {
    content:"🚂 ";
}

/* ###################### */
/* Gestion du bloc HEADER */
/* ###################### */

/* Gestion logo et titre */

.logo img {
    width: 20%;
    vertical-align: middle;
    margin-right: 10px;
    
}

.logo {
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
    font-family: 'Permanent Marker', cursive;
    margin-right: 75px;
    color: #FFF;
}



/* Gestion du menu */

header {
    background: var(--header-bg);
    padding: 20px 30px;
    max-width: 1000px;
    margin-top:10px;
    margin: auto;
    border-radius:0 0 10px 10px;
    box-shadow: 5px 5px 5px rgb(22, 22, 22);
    
}

nav {
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 10px;
}

nav ul li a {
    background: #F1C291;
    padding: 2px 10px;
    font-size: 20px;
    font-weight: bold;
    color: #444;
    border-radius: 10px;
    border:1px solid #fff;
}

nav ul li a:hover {
	background: #FFF;
    color:#D78B3B;
    transition:all 600ms;
}

.titre {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    color:#fff;
    
    
}


/* ################################# */
/* Gestion du contenu  MAIN et ASIDE */
/* ################################# */

/* Gestion contenu MAIN */

main {
	float: right;
	width: 60%;
}

.contenu {
    
    margin: auto;
    border: none;
}

article {
    border-bottom: 2px dotted #999;
    padding: 20px;
    margin: 20px;
    background-color:var(--article-bg);
    border-radius: 10px;
    border: 1px solid #ccc;
}
article h2 {
    font-weight: bolder;
    margin-bottom: 12px;
    color:#D78B3B;
    font-style: italic;

}

/* Gestion contenu ASIDE */

aside {
	float: left;
	width: 30%;
    margin-left: 10px;
}

aside > div {
    margin: 30px auto;
    padding: 10px;
    background: #D78B3B;
    border-radius: 15px;
    height: auto;
    width:100%;
    text-align: center;
    font-family: verdana;
    font-size:.9rem;
    font-style: italic;
    

}

img {
    
    width: 100%;
    height: auto;
    vertical-align: center;
    padding: 10px;
    
}

aside > div > img:hover {
    transform: scale(1.3);
    transition: 1s;
    cursor: zoom-in;
}

aside > div > img:not(:hover){
    transform: scale(1);
    transition: 1s;
}

.jouet_train::before {
        content:"🚂 ";
}

.jouet_forme::before {
        content:"🍪 ";
}

.jouet_tour-hanoi::before {
        content:"🧦 ";
}


/* Gestion du PORTFOLIO */

/* ############################ */
/* Gestion de la page Portfolio */
/* ############################ */

.grille {

	display:flex;
	max-width:1200px;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin:10px auto;
	

}

.item {
	border:1px solid #000;
	padding:3px;
    margin:5px;
    background-color: #fff;
    border-radius:15px;
    opacity:.3;
}

#portfolio, 
.apropos > article > h2,
.form>h1  {
    text-align: center;
    font-size: 2rem;
    font-family: 'Permanent Marker', cursive;
    font-weight: bolder;
    color:#D78B3B;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
}

.item:hover {
    transform:scale(1.3);
    transition:1s;
    opacity:1;

}

.item:not(:hover){
    transform:scale(1);
    transition:1s;
    opacity:.3;
}

/* ############################ */
/*      A propos du site web    */
/* ############################ */


/* ########################## */
/* Gestion du contenu  FOOTER */
/* ########################## */

.clear {
    max-width: 1200px;
    margin-top: 15px;
    clear:both;

}

footer {
	background: #D78B3B;
	max-width: 1000px;
    height:100px;
    border-radius: 25px 25px 0 0;
	margin: auto;
	clear:both;
	text-align: center;
}

/* ########################## */
/* Gestion des pages WEB      */
/* ########################## */

.titre_web {
    font-size: 3rem;
    margin: 20px auto;
    font-weight: bold;
    font-family: verdana, cursive;
    color:#000;
    text-decoration: none;
    text-align: center;

}



/* ########################## */
/* Gestion des Media Queries  */
/* ########################## */

@media only screen and (max-width: 1100px) {

    body > section {
		padding: 30px 20px;
	}

    main {
        clear:both;
        width:100%;
             }
     aside {
         clear:both;
         width: 100%;
 
         }

         aside > div {
            margin: 10px auto;
            background: #fff;
            min-height: 150px;
            display:none;
        
        }

        img {
            max-width:100%;
            height:auto;
        }

        h1 {
            display: inline-block;
            vertical-align: middle;
            font-size: 30px;
            font-family: 'Permanent Marker', cursive;
            margin: 30px auto;
            color: #FFF;
        }

        h1::before { content:"";}
        h1::after {content: "🐌";}

        article {
            background-color: var(--article-bg-media);
               
        }
        
        article h2 {
            color:#444;
        }

        article h2::before{
            content:"▶ ";
        } 


}