/* tous écrans mobiles */
@media screen and (max-width:399px){
    body{
        font-size: 5px;
        position: relative; /* pour photo  */
    }

    /* titre  à gauche */
    body>header{
        display: block;
        float:left;
        overflow-x: auto;
		width:60%;
        margin-bottom: 0.5em;
    }

    /* photo decathlon à gauche */
    #decat {
        display:none;
    }
    /* photo decathlon1 à gauche */
    #decat1>img {
        width:0%;
    }
    /* photo sled à gauche */
    #sled {
        display:none;
    }
    /* photo corona à gauche */
    #coro {
        display:none;
    }
    /* photo carte à droite */
    #carte {
        display:none;
    }
    /* photo carte1 à droite */
    #carte1>img {
        width:0%;
    }
    /* photo carte2 à droite */
    #carte2 {
        display:none;
    }
    /* photo cheque vacances à droite */
    #cvac {
        display:none;
    }

    /* photo génie à droite */
    #civil {
        display:none;
    }
    
    #skimium>img {
        position: absolute;
        right:0px;
        top:0px;
        display: block;
        float:none;
        width:20%;
        max-width:130px;
        border: 3px solid transparent;
        border-radius: 5px;
        box-shadow : 0 0 3px blue;
    
	}

    /* bloc civilité sous photo */
    #civil{
        clear: both;
    }

    /* nom de la personne  - idem version Pc pour autres titres */
    #civil h1{ 
        font-size: 2em;
        margin: 0.625em  0px; 
        font-weight: bold;
        color: white;
        background-color: transparent;
    }
/*Le contenu central*/
#contenucentre {
float:center; /* on aligne la div au centre */
margin-top: 50px;
margin-left: auto;
margin-right: auto; 
width:100%;
height:auto; /* la hauteur de l'image est de  pixels */
text-align: center;
font-size: .5em;
background-image: url(images/fondgris.png); /* le fond est gris transparent */
}
#contenucentre ul {padding: 5px;}

/* le pied de page */
#footer {
margin: auto;
margin-left: auto;
margin-right: auto; 
margin-top: 0px;
width: 100%; height:auto;
text-align: center;
font-size: 2px;
border-top:1px dotted #000;
border-bottom:1px dotted #000;
height: 200px; 
background-image: url(images/fondgrispied.png);
}
/* pied de page gauche*/
#piedgauche {
margin-top: 0px;
margin-left: 0px;
float:left; /*  on aligne la div à gauche */
width:25%;
text-align: left;
font-size: 2px;
}
/*pied de page central*/
#piedcentre {
float:left; /* on aligne la div au centre */
margin-top: 0px;
margin-left: auto;
margin-right: auto; 
width:49%;
height: 150px; 
text-align: center;
font-size: 2px;
}
/* pied de page droite */
#pieddroit {
margin-top: 0px;
float:right; /* on aligne la div à droite */
width:25%;
text-align: center;
font-size: 2px;
}

.Style61 {
	font-family: "Spicy Rice";
	font-style: italic;
	font-size: 10px;
	color: #FFFFFF;
}


    /* bloc divers */
    #divers {
        background-color: transparent;
        color: white;
        padding: .5em  0.77972709551657% ; 
    }

    
    /* triangles pour détails à la demande */
    /* ----------------------------------- */
    #expe h1, #divers h2 {
        position: relative;
    }

    #expe h1 img, #divers h2 img {
        position: absolute;
        right: 0px;
        bottom : 0px;
    }

    /* énum divers et expé à la demande et positionnés en ligne */
    ul{
        display:none;
    }

    ul li{
        display: inline;
    }

    ul li:after {
        content:' - '; /* séparateur */
    }

    ul li:last-of-type:after {
        content:'.'; /* un point après le dernier */
    }

    /* affichage à la demande  */
    #expe h1:hover+ul, #divers h2:hover+ul{
        display: block;
    }

    /*  rotation triangle */
    #expe h1 img:hover, #divers h2 img:hover {
        transform: rotate(180deg);
        transition: transform 0.2s ease-in-out;
    }
}