/* tous écrans PC d'au moins 400px */
@media screen and (min-width:400px){

    /* titre et bloc main à gauche */
    body>header, main{
        display: block;
        clear: both;
		overflow-x:hidden;
		float:left;
        width:73% ; /* 750px/1026px */
    }

    /* bloc photo + adresse  et divers */
    #civil, #divers {
        float:right;
        width: 100%; /*250px/1026 ;*/
        background-color: transparent;
        color:white;
        padding: 0.5em  0.8% ; /*8px/16px 8px/1026px;*/
	}

    #skimium, #divers {
        float:none;
        margin-top: 15px;
		padding-top: 0px;
		width: 100%; /*250px/1026 ;*/
        background-color: transparent;
        color:white;
        margin-left: 3%;
		padding: 0; /*8px/16px 8px/1026px;*/
position: -webkit-sticky;
position: sticky;       
-webkit-filter: drop-shadow(8px 8px 10px #222 );
  filter: drop-shadow(8px 8px 10px 0 #737373);
  
    }

    #centre, #divers {
        float:center;
        margin-top: 0px;
		padding-top: 0px;
		width: 100%; /*250px/1026 ;*/
		background-color: transparent;
        color:white;
        padding: 0.5em  0.8% ; /*8px/16px 8px/1026px;*/
    }

    #contenu, #divers {
        margin-top: 0px;
		padding-top: 0px;
		width: 90%; /*250px/1026 ;*/
		background-image: url(images/fondgris.png);
		color:white;
		margin-left: 5%;
		padding: 0.5em  0.8% ; /*8px/16px 8px/1026px;*/
    }

    /* photo génie */
    #civil>img {
        display: block;
        width:70%;
        margin:auto;
        border: 3px solid transparent;
        border-radius: 5px;
    }

    /* coordonnées */
    #centre>img {
        display: block;
        width:100%;
        margin:auto;
        border: 3px solid transparent;
        border-radius: 5px;
    }

    /* photo skimium */
    #skimium>img {
        display: block;
        width:80%;
        margin:auto;
        border: 3px solid transparent;
        border-radius: 5px;
    }

    /* photo decathlon */
    #decathlon>img {
        display: block;
        width:100%;
        margin:auto;
        border: 3px solid transparent;
        border-radius: 5px;
    }

    /* pas de triangles pour détails à la demande */
    #expe h1>img, #divers h2>img {
        display:none;
    }
}

/* grand écran */
@media screen and (min-width:1050px){
    body{
        font-size: 16px;
    }
}

/* écran std */
@media screen and (min-width:640px) and (max-width:1049px){
    body{
        font-size: 14px;
    }
}

/* petit écran et tablettes */
@media screen and (min-width:400px) and (max-width:639px){
    body{
        font-size: 12px;
    }
}