@charset "UTF-8";
/* CSS Document */
/*- - - - - - - - - - - -Opérateurs logiques

Les opérateurs logiques disponibles pour les Media Queries sont: 
and: qui signifie un ET logique. Par exemple, la règle A and B est vraie si A et vrai et B est vrai aussi.
only: qui signifie UNIQUEMENT. Par exemple, la règle only A est vraie si A tout seul est vrai.
not: qui signifie NON. Par exemple, la règle not A est vraie si A est fausse.*/
@media  screen and (max-width: 640px ) {
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto !important;
        margin: 0;
        padding: 0;
    }
    #page, header,#banner, main, footer {
        min-width: 100% !important;
    }
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) exemple pour la navigation.
    Pour decouverte 1 et 2 on passe le parent en flex-direction column */

    .element1,
    .element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus avec la propriété display et la valeur none */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site - 2016-11-08-09h00";
        display: block;
        text-align: center;
        font-style: italic;
        color: #FFFFFF;
	  background-color: #39A299;
    }
    banner {
	 height: 240px !important;   
    }
    #logo-haut {
	width: 165px;
	height: 60px;
	float: none;
	margin: 0.5em auto !important;
	background-image: url(../images-site/logo-haut.png); background-repeat: no-repeat;
}

nav {
	min-width:100% !important;
	height: 0 !important;
}
nav a {
	min-width:100%;
	height: 30px;
	display: inline-block;
	float: none;
	margin:0 !important;
	padding: 0 !important;
	background-color: #555555;
	border-bottom: 1px solid #DEDEDE;
	text-align: center;
	line-height:2 !important;
	color:#FFFFFF !important;
}
nav img {
	display: none !important;
	float: none;
	margin: 0 !important;
	padding: 0 !important;
}
#banner {
	width: 100%;
	height: 360px;
	clear: both;
	background-image: url(../images-site/bandeau-banniere-640.jpg) !important; background-repeat: no-repeat;
}
.bouton {
	width: 150px !important;
	height: 35px !important;
	margin: 0.2em auto !important;
	border-radius: 5px;
	border: solid 2px #006785;
	background-color: rgba(51,193,195,0.5);
	font-family: Roboto-Bold;
	font-size: 1em !important;
	text-align:center;
	line-height: 2.5em !important;
}
#boutons-radio {
	width: 160px !important;
	height: 20px !important;
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
.bouton-radio {
	width: 8px !important;
	height: 8px !important;
	margin: 0 0.5em !important;
	background-color: rgba(255,255,255,0.5);
	border-radius: 8px;
	border: solid 2px #000000;
}
#bracelets {
	/*margin: 0 !important;
	padding: 0 !important;*/
	min-width: 100% !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
#bracelets img {
	margin: 0 !important;
	padding: 0 !important;
}
/*On passe decouverte en flex-direction column pour que son contenu soit positionné verticalement*/
#decouverte {
	/*margin: 0 !important;
	padding: 0 !important;*/
	display: flex;
	flex-direction:column !important;
	justify-content: center;
}

#decouverte-1 {
	/*padding: 0 !important;*/
	width: auto !important;
	height: 210px;
	margin:0 auto !important;
	background-image: url(../images-site/sport-smartphone-petite.jpg); background-repeat: no-repeat; background-size: cover;
}
#decouverte-2 {
	/*padding: 0 !important;*/
	width: auto !important;
	height: 210px;
	margin:0 auto !important;
	background-image: url(../images-site/courir-sur-la-plage_petite.jpg); background-repeat: no-repeat; background-size: cover;
}


#banner h1 {
	display: none !important;
	padding: 0.1em 0 0.1em 0 !important;
	/*margin: 0 !important;*/
	font-family: Arial !important;
	font-size: 2em !important;
	line-height: 0.9em 
}
#banner h2 {
	margin: 0.25em 0 0 0 !important;
	/*padding: 0 !important;*/
	font-family: Roboto-bold !important;
	font-size: 1.5em !important;
	text-align: center;
}

#intro h1 {
	font-family: Arial !important;
	margin: 0 0 0.5em 0 !important;
	padding: 0 !important;
	color: #FFFFFF;
	font-size: 2em !important;
	text-align: center;
}
#intro p {
	margin-bottom: 0.5em !important;
	font-family: Arial !important;
	line-height: 1.2em !important;
	color: #FFFFFF;
	font-size: 1em;
}
#decouverte h2 {
	font-family: Arial !important;
	padding: 3.5em 0 0 0 !important;
	margin-left: 0.3em;
	text-align:left;
	color: #FFFFFF;
	font-size: 22px;
}
#decouverte p {
	font-family: Arial !important;
	margin-left: 0.3em;
	color: #FFFFFF;
	font-size: 16px;
}
footer .rs {
	margin: 0 0.15em 0 0.15em !important;
	padding: 0 !important;
}
footer {
	min-width: 100% !important;
	padding: 0;
	margin: 0;
}
footer #logo-bas {
	display: none !important;
}
nav a {
	text-decoration: none;
	font-family: Arial !important;
	font-size: 1em;
	line-height: 1.5em;
	padding-left: 0.2em;
}
    }