@media (min-width: 590px) { /*largeur a partir de laquelle on peut afficher 9 mini perso de large*/

	/*on affiche le max de perso a decouvrir a partir de cette largeur (soit 8 en tout)*/
	.zone-decouverte .liste_perso .perso:nth-child(n) { /*n=tous  oblige de mettre nth-child sinon le CSS precedent serait prioritaire (dans l'ordre d'application du CSS)*/
		display: initial;
	}
}

@media (min-width: 570px) { /*largeur a partir de laquelle on affiche menu vertical*/

	/*ajustement si menu vertical :*/
	body {
		-webkit-flex-direction: row; flex-direction: row;
		overflow-x: hidden;/*oct2016: evite pb sous FF : on pourrait decaler contenu page de quelques pixels au niveau du menu ! (a cause du bouton Google+ qui ajoute un iframe en fin de contenu)*/
	}
	body nav#zoneMenu1 {
		/* min-width: 140px; */ /*width: 140px;*/ width: 12%;  /* max-width: 140px; */  /*-webkit-flex: 1;*/
		border-right:1px solid #FFF;/*marque separation avec deco*/
		border-bottom:0px;/*enleve marque separation avec deco*/

		height: initial;/*hauteur non limitee*/
	}
	body #zone_contenuPrincipal {
		-webkit-flex: 5;  flex: 5;
	}
	nav#zoneMenu1 .sous-zoneMenu1_bis {
		ZZZwidth: 12%; /*valeurs idem que dans nav#zoneMenu1 */
	}
	body nav .listeMenus {
		text-align: left;/*aligne contenu du menu sur la gauche*/
		ZZZwidth: 12%;  /*border-right:1px solid #FFF;*//*marque separation avec deco*/    /*valeurs idem que dans nav#zoneMenu1 */
		/*position: fixed;*/
		height:initial;/*idem nav#zoneMenu1 */
	}
	body nav .listeMenus li {
		display: block; /*sinon pas ok sous FF. inline-block si menu horizontal*/
		width: 100%;/*plein largeur disponible ()*/
		/* height: 5em; */
		background-color: initial;/*enleve le fond uni*/
	}
	body nav .listeMenus li a {
		/* height:100%; */
		line-height: 3.5em;
	}
	nav .listeMenus li a.actif /*menu actif*/
	, nav .listeMenus li a:hover /*menu survol*/
	, nav .listeMenus li a /*menu survol*/
	{	border-bottom-width:0px;/*enleve marque separation avec deco*/
	}
	nav .listeMenus li a.actif /*menu actif*/
	, nav .listeMenus li a:hover /*menu survol*/
	{	border-right:1px solid #FFF;/*palie au pb de la largeur du menu (ex:safari) : parfois micro decalage qui masque le bord droit global => ici le remet*/
	}

	nav .listeMenus li.deconnexion {
		margin-top:3em; /*pour le séparer des autres menus (si vertical)*/
	}
	nav .listeMenus li.inscription {
		margin-top:3em; /*pour le séparer des autres menus (si vertical)*/
	}

	/*libelle txtMenu debordant pour afficher texte complet. Source: demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html*/
	body nav .listeMenus li a .txtMenu {
		width:0;
		position:absolute;/*incompatible pour afficher les "..." du libellé si trop long : soit animation, soit "..."*/
		Xoverflow:hidden;/*libelle non visible par defaut*/

		letter-spacing:0.6px;
		white-space:nowrap;

		-webkit-transition: 0.25s;
		-o-transition: 0.25s;
		-moz-transition: 0.25s;
		transition: 0.25s;

		font-size: 1.2em;/*texte menu un peu + gros, si vertical*/
	}
	body nav .listeMenus li a:hover .txtMenu {
		width: auto;
		position:absolute;
		overflow: visible;

		font-size:1.3em;
		/* line-height:5em; */

		background-color: #0172b5;
		/*padding: 0 20px 0 5px;*/
		padding-right: 7px;
		/*padding-left:3%;*/

		border-top-right-radius: 2px;  border-bottom-right-radius: 2px;
	}

}

/*reduit texte menu vertical si trop etroit*/
@media (max-width: 1335px) {
	body nav .listeMenus li a .txtMenu {
		font-size: 1.1em;
		letter-spacing:0px;/*rapproche lettre qui sont ecartees a la base*/
	}
}
@media (max-width: 1100px) {
	body nav .listeMenus li a .txtMenu {
		font-size: 0.9em;
	}
}
/*FIN reduit texte menu vertical si trop etroit*/

@media (max-width: 990px) { /*en-dessous : adaptation du menu vertical (que les picto sans libelle)*/

	body nav .listeMenus li a {
		line-height: 5.5em;
	}

/*on masqque les libelles du menu :*/
	body nav .listeMenus li a .txtMenu {
		overflow:hidden;/*libelle non visible par defaut*/
	}

/*on agrandi les picto:*/
	body nav .listeMenus li a .pictoMenu {
		height:4.0em;
		width: 4.0em;
		background-size: 4.0em;
	}
/*et on reduit la largeur du menu a la largeur des picto*/
	body nav#zoneMenu1 {
		width: 4.4em;
	}
	nav#zoneMenu1 .sous-zoneMenu1_bis {
		width: 4.4em; /*valeurs idem que dans nav#zoneMenu1 */
	}
	body nav .listeMenus {
		ZZZwidth: 4.4em;
	}
}


@media (max-width: 768px) { /*largeur ipad vertical*/
/*zone droite de pub à réduire au minimum*/
	#tdButeeDroiteListe	/*, #buteeDroiteListe*/
	, #zoneInfoEtPub
	, #BDaide_v2
	{
		display: none;
	}
	/*largeur liste :*/
	#tdListeZoneCentrale {
		width:100%;
	}

    .zone_flex.colX1 .objet_flex
    , .zone_flex.colX2 .objet_flex
    , .zone_flex.colX3 .objet_flex
    , .zone_flex.colAuto .objet_flex
    {
        flex-basis: 100%;
    }
    /*change couleur des blocs si  .colX2.couleur1sur2*/
    .zone_flex.colX2.couleur1sur2 .objet_flex:nth-child(1n) .blocBase /*Enleve couleur de tous les éléments*/
    {   background-color: initial;
    }
    .zone_flex.colX2.couleur1sur2 .objet_flex:nth-child(odd) .blocBase /*Colorise les blocs impaires */
    {   background-color: #e3f0ff;
        border-radius: 4px;/*necessaire car certain element n'avait pas de fond de coleur => pas de coin arondi non plus*/
    }

}

@media (max-width: 624px) { /*pour avoir mini marges gauche et droite quand trop etroit*/

	#zone_contenuPrincipal {
		padding-left: 3px;
		padding-right: 3px;
	}
	/*a cause des marges mises au-dessus, on corrige certains autres elements*/
	header.enTeteAccueil {
		margin-left: -3px; margin-right:-3px;
	}
	  #OFF.enTeteAccueil .deco .decoNaissance
	, #OFF.enTeteAccueil .deco .decoAnniversaire
	, #OFF.enTeteAccueil .deco .decoMariage
	, #OFF.enTeteAccueil .deco .decoFete
	, .enTeteAccueil .deco .decoCadeauDroite
	{
		display:none;
	}
	.enTeteAccueil .deco .decoNaissance {
    left: 87px; top: -25px; width: 58px;
  }
	.enTeteAccueil .deco .decoAnniversaire {
    left: 247px; top: -33px; width: 70px;
  }
  .enTeteAccueil .deco .decoMariage {
   left: 10px;  top: -23px; width: 80px; transform-origin-x: 40px;
  }
	.enTeteAccueil .deco .decoFete {
    left: 150px; top: -8px; width: 110px;
  }
	.enTeteAccueil .deco .decoCadeauGauche {
		left: initial;
		right: 4%;
		width: 12%;
		top: 26px;
	}
}


@media (max-width: 569px) { /*le menu passe en horizontal, il faut alors remettre des tailles normales*/

/*on enlève marges horizontales :*/
	#zone_contenuPrincipal {
		padding-left: 0px; padding-right: 0px;
	}
    .titre_page { /*pour le coup, pour certains éléments (ex: trait soulignement des titres), je ne veux pas que ça touche les bords pour faire + joli*/
        width: 95%;
        padding-right: 45px; padding-left: 0px; /*pour pas que la croix de fermeture de page (si NW) passe par-dessus le titre*/
        text-align: left;/*gagne en place car padding-left réduit ainsi ci-dessus*/
    }

    .zone_flex .objet_flex {
		  width:100%;
      padding-left:0; padding-right:0;
    }
    .zone_flex.couleur1sur2 .objet_flex {
      padding: 0px ;
      /*ici, les couleurs alternent, donc ok si les blocs se touchent*/
    }
    .blocBase  /*à utiliser : pour élement devant prendre pleine largeur => retirer coins arrndis et marges latérales*/
	{
		width:100%;
		border-left: 0px solid white; border-right: 0px solid white;
		-webkit-border-radius: 0px !important;  -moz-border-radius: 0px !important;  border-radius: 0px !important;
        margin-left: 0px !important; margin-right:0px !important;
	}
    .btn.largeurMax {
        width: 98%;
    }


/*on masqque les libelles du menu :*/
	body nav .listeMenus li a .txtMenu {
		overflow:hidden;/*libelle non visible par defaut*/
	}

/*on agrandi les picto:*/
	body nav .listeMenus li a .pictoMenu {
		height:2.6em;  width: 2.6em;  background-size: 2.6em;
		display: block;  margin: 0 auto; /*permet de passer le libelle en-dessous*//*permet d'appliquer cesure/ellipse (avec ajout de "...") si trop etroit (car ici, pas le libelle a afficher au survol) */
	}
	body nav#zoneMenu1 {
		width: 100%;
	}
	nav#zoneMenu1 .sous-zoneMenu1_bis {
		width: 100%; /*valeurs idem que dans nav#zoneMenu1 */
	}
	body nav .listeMenus {
		ZZZwidth: 100%;
		background-color: #110d32; border-bottom: 1px solid #FFF; /*sept2016: si moins que 5 menus => adaptation*/
	}

	/*activer si je veux gros picto avec gros menu si horizontal avec picto sous libelle :*/
	body nav#zoneMenu1 {
		line-height: 1.1em;/*rapproche le libelle du picto (verticalement)*/
		height:4.4em;
	}
	body nav .listeMenus {
		height:4.4em;
	}
	body nav .listeMenus li a {
		line-height: 1.1em;/*ide mau-dessu, dans  body nav#zoneMenu1  */
	}
	body nav .listeMenus li a
	, body nav .listeMenus li a.actif
	, body nav .listeMenus li a:hover
	{	border-bottom: none;/*sept2016: si moins que 5 menus => adaptation*/
	}

	body nav .listeMenus li a .pictoMenu {
		height:3em;  width: 3em;  background-size: 3em;
		margin-top:1px;/*ajuste un chouille le haut et le bas*/
		height:3.09em;
	}
	body nav .listeMenus li a .txtMenu {
		/*display:block;*//*passe libelle en-dessous*//*mis dans pictoMenu poru pouvoir faire cesure*/
	}


}



@media (max-width: 480px) { /*un peu + etroit que iPhone horizontal*/

	.xxxxxxxx  /*a utiliser : pour element devant prendre pleine largeur => retirer coins arrndis et marges laterales*/
	{
		width:100%;
		border-left: 0px solid white;
		border-right: 0px solid white;
		-webkit-border-radius: 0px;  -moz-border-radius: 0px;  border-radius: 0px;
	}

/*pour 3 personnes tiennent en largeur (de taille normale) (ex: connexion rapide)*/
	.liste_perso .perso {
		/*padding-right: 3px;  padding-left: 3px;*//*suppr : voir: sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*/
	}
	.liste_perso.infoComplete .perso:hover .info {
		/*relatif a infoComplete : adapte info largeur / survol*/
		/*margin-left:-3px;*//*selon padding du li => 5 (ou 3 si fenetre etroite)*//*suppr : voir: sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*/
	}
	.liste_perso .zonePhoto {
		padding: 3px 3px 2px 3px;/*sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*//*2px : pour écarter de la photo*/
	}
	 /*les infos sous la photo : */
	.liste_perso .info {
		padding: 0 3px 3px 3px;/*sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*/
	 }


}