/*
gradient via http://www.colorzilla.com/gradient-editor/

couleur :
#0095dc = rgba(24, 148, 220, 1) : bleu
#E6F1F8 : bleu tres clair  //idem bleu sombre avec transparence : rgba(1, 114, 181, 0.10);
#0172b5 = rgba(1, 114, 181, 1) bleu sombre

!!!!!! en attendant que toutes les pages soient homogenes en jccd-v2 : voir "pour version FINALE" (ex: photo plsu carré que ronde car dans recherche, ça ferait trop bizarre de rester en rectangle)
*/

* { /*pour tous les elements*/
-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /*la largeur de l'element incluera les bordures et padding*/
}

html { font-size: 100%;  /* pour palier pb IE */
	font-size: 15px; /*sept2019: 15px au lieu de 14px*/
	/*contre effet graisse si police blanche (peut-etre a mettre qu'au zone concernee car pas sur tout navigateur => text-shadow pourrait etre lourd si partout)*/
	/*-webkit-font-smoothing: antialiased;*//*affine police (ex: police blanche)*//*source + astuce pour autre navigateur: http://darklg.me/2012/03/font-face-avec-anti-aliasing-windows (opacity:0.999;)/*/
	/*-webkit-font-smoothing: subpixel-antialiased;*//*par defaut ('none' existe aussi pour enlever l'anti-aliasing)*/
	/*text-shadow: 1px 1px 1px rgba(0,0,0,0.004);*//*pour FF*/
}

/* avr2020 OFF car la balise html ne doit pas avoir height: 100% car si on défile la page, le html n'occuppera plus toute la hauteur => ne réagira pas au dragenter (drag&drop visuel ligne cadeau) !
html { height:100%; } /*sinon un element table, par ex, ne pourra jamais occuper toute la hauteur de la page (page accueil par ex).*/

body {
	/*font-size: 13px;*/  line-height: 1.2em;/*corrige bootstrap qui met 20px*/
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	cursor:default;/*evite d'avoir le curseur qui se transforme tout le temps en curseur de selection de texte (n'empeche pas de pouvoir selectionner du texte)*/
	margin:0px;
	color:#555; /*couleur par defaut du texte : + sobre que noir*/

	/*max-width: 1111px;*//*max utilise classe largeurMaxPage*/  margin: 0 auto; /*limite largeur contenu et le centre*/

	display: -webkit-flex;  display: flex;
	-webkit-flex-direction: column;  flex-direction: column;
	/*min-height: 100vh;*/ /* toute la hauteur du viewport. vh=viewport height, 1vh = 1% de la hauteur du viewport*/ /*pas ok sous FF: le menu vertical s'arrete si on defile la page : sans ca, j'ai donc le menu qui s'arrete a la partie basse du contenu principal. SOlution : le mettre au niveau du contenu principal qui va donc s'agrandir*/

	/*motif de fond :*/
	background-color: #82788a;
	background-image: url('/images/deco/motifs/motif028.png');
	background-attachment: fixed;
	background-repeat: repeat;

	box-shadow: 0px 0px 6px 1px  rgba(150, 150, 150, 1);/*ombrage du contenu*/
}


h1 {
	line-height: 1em;
}

h2 {
	line-height: 1em;
  margin-block-start: 0.33em;
  margin-block-end: 0.43em;
}
.enTeteAccueil h2 {
  font-weight: normal;
  font-size: 1.16rem;
}

label
, .main
, input[type="submit"]
, input[type="button"]
{ /*pour ne pas pouvoir selectionner ces elements*/
	-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none;  -khtml-user-select: none;  user-select: none; /*empeche selection du texte de l'element (ex: libelle case a cocher)*/
	margin:0px;
}
input[type="submit"] { /*les bouton de validation*/
	-webkit-appearance: none;
	border-width: 0;
	cursor: pointer;
}
input[type="button"] { /*les bouton autre (ex: annuler)*/
	-webkit-appearance: none;
	border-width: 0;
	cursor: pointer;
}
input[type="text"]
, input[type="email"]
, input[type="search"]
{ /*les champs*/
	-webkit-appearance: none;
	border: 1px solid #999;/*contour sera + fort lors du focus*/
	border-radius:2px;
	background-color:#FFF;/*force fond a blanc sinon FF le colori en gris*/

	/*height:1.5em;
	font-size: 1.3em;*//*sinon ne prend pas en compte la taille par défaut du body ou html*/
	margin:0px;

	padding:6px 4px; /*texte moins contre bords du champ*/
	height: auto;/*permet au padding vertical d'être pris en compte*/
	/*height: 36px;*//*permet au padding vertical d'être pris en compte*//*pas auto car MDP utilise autre police => hauteur serait differente (ex: page connexion) ... sauf si utilise line-height*/
	line-height: 1.3em;/*height: auto est ok si line-heigth defini (meme en em au lieu de px)*/
	font-size: 18px;/*sinon ne prend pas en compte la taille par défaut du body ou html*//*grande police*/

	width: 100%;
}
input[type="text"]:focus  /*au focus : contour + joli (sous FF,...)*/ /*source: getbootstrap.com/css/#forms-control-focus*/
, input[type="email"]:focus
, input[type="search"]:focus
, input[type="submit"]:focus /*ex: bouton OK de validation (aussi sous Safari, ici)*/
, a.btn:focus
{
	border-color: #0095dc!important;
	/*outline: 0;*//*si je veux enlever le contour de focus de safari (mais ne gene pas)*/
	/*box-shadow: 0 1px 4px rgba(24, 148, 220, 1);*/
	box-shadow: 0 0 2px 2px rgba(24, 148, 220, 1);/*+net +visible (un peu comme safari)*/
}
input[type="text"].champPasOK  /*si champ erroné + focus dessus  => double ombre*/
, input[type="email"].champPasOK
, input[type="search"].champPasOK
, input[type="submit"].champPasOK
{	box-shadow: inset 0 0 6px 2px rgba(220, 31, 39, 1);/*ombre intérieure rouge pour mieux visualiser erreur*/
	border-color:rgba(220, 31, 39, 0.20);  /*avec contour : meme couleur rouge mais + clair sinon on voit coin angle blanc pas tres esthetique*/
	color : rgba(220, 31, 39, 1);/*el texte est aussi rouge*/
}
input[type="text"]:focus.champPasOK  /*si champ erroné + focus dessus  => double ombre*/
, input[type="email"]:focus.champPasOK
, input[type="search"]:focus.champPasOK
, input[type="submit"]:focus.champPasOK
{
	box-shadow: 0 0 2px 2px rgba(24, 148, 220, 1)/*ombre bleue qui indique focus le champ : comme + haut*/
			, inset 0 0 6px 2px rgba(220, 31, 39, 1);/*ombre intérieure rouge qui indique erreur : comme + haut*/
}

input[type="text"].champOK  /*si champ OK + focus dessus  => double ombre*/
, input[type="email"].champOK
, input[type="search"].champOK
, input[type="submit"].champOK
{	box-shadow: inset 0 0 6px 2px rgba(0, 166, 0, 1);/*ombre intérieure verte pour mieux visualiser erreur*/
	border-color:rgba(0, 166, 0, 0.20);  /*avec contour : meme couleur verte mais + clair sinon on voit coin angle blanc pas tres esthetique*/
	color : rgba(0, 166, 0, 1);/*el texte est aussi rouge*/
}
input[type="text"]:focus.champOK  /*si champ OK + focus dessus  => double ombre*/
, input[type="email"]:focus.champOK
, input[type="search"]:focus.champOK
, input[type="submit"]:focus.champOK
{
	box-shadow: 0 0 2px 2px rgba(24, 148, 220, 1)/*ombre bleue qui indique focus le champ : comme + haut*/
			, inset 0 0 6px 2px rgba(0, 166, 0, 1);/*ombre intérieure verte qui indique erreur : comme + haut*/
}



input[type="text"].grandH
, input[type="search"].grandH
, input[type="email"].grandH
, .btn.grandH { /*grandH permet d'avoir des champs et boutons grand en hauteur (ex: page connexion)*/
	/*padding:6px 4px;*/ padding: 6px 0.8em;
	height: auto;
	line-height: 1.3em;
	font-size: 18px;
	/*rq: bizarrerie sous FF:  .btn.grandH  n'aura pas tout a fait la meme hauteur que champ !*/
}
.btn.grandH {
	border: 1px solid #0095dc; /*car les champs ont un contour donc il faut le mettre ici aussi pour avoir exactement meme hauteur entre btn et champ*/
}
.btn.btnAnnuler.grandH {
	border-color: #9295aa;
    padding:6px 4px; /*pour un bouton de type Annuler, il faut etre au pixel près (ex: page connexion)*/
}
.btn.btnOK.grandH {
    padding:6px 4px; /*pour un bouton de type OK, il faut etre au pixel près (ex: page connexion)*/
}

img {
	border : 0;
}

section {
	margin-top : 5px;
}

a {
	text-decoration : none;
	color:inherit;
}

p {
	margin: 0.5em 0 0.5em 0;
}
.pPlus p { /*pour avoir marge avant et après balise p + grand (ex: info_mail_complete)*/
	margin: 0.4em 0 0.4em 0;
}

/*supprimer la mise en forme de base d'une liste*/
ul.sansStyle {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
ul.simple {
	list-style: disc;
	margin: 0 0 0 0px;
	padding: 0 0 0 20px; /*sept2019: 20px au lieu de 40px*//* padding (gauche) de .blocBase */
}
ul.simple li {
	margin-top:0.2em;
}
ul.stylePicto {
	list-style: none;
	margin: 0 0 0 0px; margin-top:0.2em;
	padding: 0 0 0 24px; /*  padding (gauche) de .blocBase + margin-right de img.puce => 24=20+4*/
}
ul.stylePicto li img.puce { /*image servant de puce de liste (ex: FAQ)*/
    margin-right: 4px;/*espace après image et avant texte*/
	margin-left: -26px; /* largeur img + margin-right => 26=22+4*/
}

area {  /*zone area sur image de la BD*/
	display: block;/*permet affichage pointeur main sur area*/
	width:0; height:0; /*meme si pas visible au final*/
}

/*classes génériques (même nom de classe que Bootstrap) - 06/10/2025*/
.position-relative {
  position: relative !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
.align-middle {
  vertical-align: middle !important;
}
.text-start {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-end {
  text-align: right !important;
}
/* FIN classes génériques (même nom de classe que Bootstrap) */

.main
, area , .btn { /*pour forcer le curseur a montrer qu'on peut cliquer (ex: pret BL ou CF)*/
	cursor: pointer;
}

body #zone_contenuPrincipal {
	min-height: 100vh;/*permet au menu vertical de prendre toute la hauter (meme si on defile) + Menu horizontal ok sous FF si trop etroit !!*/
	background-color: #FFF;/*pour ne pas voir le fond de la page au travers du contenu (ex: accueil)*/
	overflow: hidden;  /*evite, par ex, que l'ombre blanche des fleches de la BD ne deborde*/
}

.largeurMaxPage {
	max-width: 1600px;
}

.zoneChp { /*contient libelle + chp*/
	display:inline-block;
	text-align:left;
	vertical-align: bottom; /*pour aligner base des champs, au cas ou label sur plusieurs lignes,...*/
}
.zoneChp label {  /*libelle des champs*/
	display:block;
	margin-bottom:3px; margin-top:5px;
}
.zoneChp label:after {
 	content: " :";  /*ajout " :" automatiquement à la fin du libelle*/
 }

.zoneChp input[type="submit"] { /*btn ok de connexion*/
}


.sansRetourAuto { white-space: nowrap !important; } /*evite retour a la ligne automatique*/
.avecRetourAuto { white-space: inherit !important; } /*force retour a la ligne automatique*/
.alignerAGauche , .txtAlignerAGauche { text-align: left !important; } /*force alignement a gauche*/
.alignerAuCentre , .txtAlignerAuCentre { text-align: center !important; } /*force alignement au centre*/
.txtAlignerADroite { text-align: right !important; } /*force alignement a droite*/
.smooth { /*jan2016*/
	-webkit-font-smoothing: subpixel-antialiased; /*ameliore lisibilite sous Safari*/
}
	/*-webkit-font-smoothing: antialiased;*//*evite mini bug de changement de graisse, selon survol du menu (dans Safari)*/
sup { /*jan2016: pour exposant*/
	line-height:1em;
	/*si utile : vertical-align:text-top ; font-size: 70%; line-height: 80%; */
	font-size: 70%;
}
.visible_none {
	display: none !important;
}
.visible_hidden {
	visibility: hidden !important;
}
.sansOmbre {
	box-shadow: none !important;
}
.fondTransparent {
	background-color: transparent !important;
}
.bug_fixed { /*pour palier au bug sous chrome du defilement du menu horizontal qui se fait mal. source: quiero-web.com/pense-bete-css-position-fixed-chrome-opera/ */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  /*une seule des 2 lignes, mais aussi pour opera*/
}

.txtGrasNoir strong
, .txtGrasNoir b {
    color:#000;
}


.caseDeFermeture { /* picto de fermeture de fenetre (petit X dans rond noir) */
	position: absolute; right: 0; top: 0;
	width: 50px; height: 50px;
	margin-top: -10px; margin-right: -10px; /*depasse largement pour pas avoir a viser precisemmment*/
	background-image:url(/images/commun/close.png); background-repeat:no-repeat; background-position:center;
	cursor:pointer;
}


.zone_flex {
	/*padding-top:20px;*//*ca depend si aide chat affichee au-dessus ou pas*//*padding-bottom:20px;*/
	margin: 0 auto;/*centre horizontalement*/

	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-justify-content: space-around;
	-webkit-flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/
	-webkit-align-items: flex-end;/*centre en bas verticalement le contenu*/
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/
	/*align-items: flex-end;/*centre en bas verticalement le contenu*/
    align-items: stretch;/*elements étirés pour avoir même hauteur*/
}
.zone_flex.space-evenly {
    justify-content: space-evenly;
}
.zone_flex .blocBase
{
    OFF_03042022_min-width: 244px;/*largeur minimum d'un bloc. rq: il faut que colX3 ne apsse pas à 2 colonnes, sinon pas ok pour fond coloré de colX3.couleur1sur2 */
  /*03/04/2022 : OFF car passait a 2 col à une certaine largeur étroite, si menu latéral présent*/
}
.zone_flex.colX1 .objet_flex { /*2 colonnes en largeur*/
    flex-basis: 100%;
}
.zone_flex.colX2 .objet_flex { /*2 colonnes en largeur*/
    flex-basis: 50%;
}
.zone_flex.colX3 .objet_flex { /*3 colonnes en largeur*/
    flex-basis: 33.33%;
}

.zone_flex.colAuto .objet_flex { /*adapte automatiquement le nb de colonnes en largeur, tout en permettant que chacun ait la même largeur*/
  flex: 1 1 200px ; /* Chaque bloc prend au moins 200px, s’étire jusqu’à remplir la ligne */
  /* Le premier 1 => flex-grow = agrandissement possible par rapport aux autres éléments
     Le deuxième 1 => flex-shrink = même principe mais pour le rétrécissement
     Le 3e chiffre (200px) => flex-basis = taille de base (initiale) avant que les 2 autres ne s’appliquent.
  */
 /* Utile pour certains cas extrêmes (vraiment trop étroite/grand) bien que ne semble pas utile à première vue : */
  min-width: 200px ;
  max-width: 100% ;
}

.objet_flex
{
    max-width: 700px;
    padding: 5px ;
}

.objet_flex .blocBase
{   height: 100%;
}

.objet_flex .flex_centreCellule {
  flex-direction: column;
  display: flex;
  height: 100%;
    /*permet centrage varticale (avec .flex_centreCellule > div) */
}
.objet_flex .flex_centreCellule > div {
  /*margin: auto;*/ margin-top: auto; margin-bottom: auto;/*finalement que sur marge verticales*/
    /*permet centrage varticale (avec flex_centreCellule)*/
}

/* * * * * couleur1sur1 (tous les blocs coloré. ex: légende) : * * * * */
/*pas de colX?? car peu importe*/
.zone_flex/*.colX1*/.couleur1sur1 .objet_flex .blocBase
{
  background-color: #e3f0ff;
  border-radius: 4px;
}
/*couleur plus aténuée coul02*/
.zone_flex/*.colX1*/.couleur1sur1.coul02 .objet_flex .blocBase
{
  background-color: rgba(227, 240, 255, 0.4) ;  /* #e3f0ff avec transparence */
}

/* * * * * couleur1sur2 : * * * * */
/* colX1 */
  .zone_flex.colX1.couleur1sur2 .objet_flex:nth-child(2n+1) .blocBase /* +1 = commencera par 1er bloc. 2n+1=odd (impair) */
/* colX2 */
/*ces 2 conditions permettent de colorier le 1er bloc, puis pas les 2 suivants, puis colorier les 2 suivants,… (il faut 2 conditions car nth-child permet de n'agir que sur 1 SEUL élément tous les X élements (et non sur Y éléments tous les X éléments). Rq: quand écran trop étroit, les blcos sont l'un sous l'autre => il faudra colorier faire 1 sur 2 et non 2 sur 4 (2 sur 4 donnant l'impression que c'est 1 sur 2 au final, comme un damier) */
, .zone_flex.colX2.couleur1sur2 .objet_flex:nth-child(4n+0) .blocBase /* +0 = commencera par 4e bloc car 4n */
, .zone_flex.colX2.couleur1sur2 .objet_flex:nth-child(4n+1) .blocBase /* +1 = commence par bloc 1, puis tous les 4 blocs (4n) */
/* colX3 */
, .zone_flex.colX3.couleur1sur2 .objet_flex:nth-child(2n+1) .blocBase /* +1 = commencera par 1er bloc. 2n+1=odd (impair). Comme colX1 en fait*/
{
    background-color: #e3f0ff;
    border-radius: 4px;
}

/*definition des largeur de bloc standard (1 bloc = 190px)*/
/*Bloc de 3 "zones" de large. Ne veu tpas dire 1, 2 ou 3 blocs de large (voir blocX3 pour ça*/
.bloc1, .bloc2, .bloc3 {
	display:inline-block;  width:100%;
}
.bloc1 {
	max-width: 190px;
}
.bloc2 {
	max-width: 380px;  /*380=190*2*/
}
.bloc3 {
	max-width: 570px;  /*570=190*3*/
    max-width: 620px; /*sept2019 : suite modif margin de sous-bloc "bloc3" de section* => 620 = 570 + margin-left/right 20*2 + margin-left/right ajouté au bloc 10*/
}
.blocMax {
    width: 100%;
}

.blocBase
{ /*bloc de base sans fond*/
    /*border-radius pas utile car pas de fond*/
    padding: 15px 20px 15px 20px ;
    margin: 5px;
}
.objet_flex .blocBase /*sauf si dans objet_flex*/
{ margin: 0px;
}
.bloc1 .blocBase:first-child
, .bloc2 .blocBase:first-child , .bloc3 .blocBase:first-child , .blocMax .blocBase:first-child
{ /*bloc de base sans fond*/
    margin-top: 0px ;
}
/*sauf si dans flex en colonnes (remet margin-top normal pour éviter que des 1re colonne monte + haut que les suivantes) :*/
.zone_flex.colX2 .blocBase:first-child
, .zone_flex.colX3 .blocBase:first-child
{
    OFF_margin-top: 5px ;
}
.blocBase.couleur
{ /*ex: page Connexion : bloc avec fond de couleur*/
    border-radius: 4px;
    /*padding: 10px 20px 25px 20px ;*/
    /*margin: 30px -20px 20px -20px;*/
    background-color: #e3f0ff;
}

/* marge & padding : *//* info : t=top r=right … => t0 = t=top avec 0=0px */
.marge-0 { margin: 0px !important; }
.marge-t0 { margin-top: 0px !important; }
.marge-r5 { margin-right:5px !important; }/*anciennement .margeDroite*/
.marge-b10 { margin-bottom: 15px !important; }

.padding-0 { padding: 0px !important; }
.padding-lr10 { padding-left: 10px !important; padding-right: 10px !important; }
.padding-b20 { padding-bottom: 20px !important; }
.paddingVertical_double { /*ex: exemple liste mariage, noel,… + Légende monAccueil*/
  padding-top:48px !important;
  padding-bottom:48px !important;
}

/* coins arrondis : */
.coin-0 { border-radius: 0px !important; }

.interligneGrand { /*ex: btns en pied de page*/
	line-height:2em;
}

/*tailles des titres*/
.titre {
    line-height: 1.1em;
}
.titre.normal
, .titre.label {
	margin: 0.5em 0 0.5em 0;
	text-align:left;
}
.titre.normal {
	font-size: 1.2em;
	line-height:1.4em;
	color: #110d32;
	font-weight: normal;
}
.titre.label {
	font-size: 1.2em;
	line-height:1.4em;
	color: #777;
	font-weight: normal;
}

.titre_page { /*titre avec soulignement (ex: me connecter)*/
	border-bottom: 3px solid #110d32;
	line-height: 1.3em;
	/*margin: 10px;*/
	color: #110d32;
    padding-right: 45px; padding-left: 45px; /*pour pas que la croix de fermeture de page (si NW) passe par-dessus le titre*/
}

.titre .infoDetail { /*ex: detail sous titre "pas de mail ?" de la page connexion*/
	font-size: 0.8em; line-height: 1em;
	color: #777;
}
.zoneChp .infoDetail { /*ex: detail sous titre "pas de mail ?" de la page connexion*/
	font-size: 0.9em; line-height: 1.3em;
	color: #777;
	margin-top: 3px; margin-bottom: 3px;
}

.texte_infoDetail { /*ex: page connexion, sous connexion rapide*/
	font-size: 0.9em; line-height: 1.3em;
	color: #777;
}


/* * * bloc d'information d'avertissement, d'erreur, de reussite :*/
.blocInfo p {
	line-height: 1.2em;/*reduit interligne des paragraphes*/
	margin-top: 0.75em; margin-bottom: 0em;
}
.blocInfo p:first-child  { /*ou first-of-type*/ margin-top: 0; }
.blocInfo.texteInfo p:last-child { /*ou last-of-type*/ margin-bottom: 0; }

.blocInfo {
	border: 1px solid #000;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	padding: 8px 14px 8px 14px;
	margin: 35px auto;/*marge haute et basse avec centrage si width reduit*/
	font-size:16px;/*pas en em, pour partir sur une valeur fixe*/
	text-align: center;
	clear:both; /*pour passer a la ligne tout seul( ex: pour info sur lots dans param article, car hauteur colonnes OD, OG peuvent differer)*/
	/*max-width: 570px;*/    max-width: 620px;
}
.blocInfo.neutre  {
	/*si besoin pour autre aspect + neutre*/
}
.blocInfo.info  {
	color: #c09853; background-color: #fcf8e3; border-color: #fbeed5;
}
.blocInfo.erreur {
	color:red;
	/*color: #b94a48;*/ background-color: #f2dede; border-color: #eed3d7;
}
.blocInfo.reussi {
	color:#66AC00;/*remplace #66CC00 car trop clair*/
	/*color: #468847;*/ background-color: #dff0d8; border-color: #d6e9c6;
}
.blocInfo.alerteMax { /*info alerte importante*/
	color: orangered;
	background-color: #000;
	border-color: orangered;
	/*font-size: 1em;*//*agrandi texte sinon un peu plus dur a lire sur fond noir*/
}
.blocInfo ul { /*pour reinitialiser les valeurs ul des bloc de texte (en cas d'utilisation de liste dans un bloc d'info)*/
	list-style: disc;  background: initial;  margin: initial;
	padding: 5px 5px 5px 30px;
	box-shadow: none ;
}


.miniBlocInfo { /*bloc + simple. Ex: retour info si reussi ou pas*/
	border-radius: 4px;
	padding:2px 4px;
	margin: 2px auto;
}

.blocInfo.alerteMax .enValeur { /*couleur des mots importants a mettre en valeur (selon couleur du message)*/
	color: rgb(255, 215, 38);
}

/* * * FIN bloc d'information*/






/* mars2018 - basé sur  copiedtext  (page liste, pour copier URL liste)
.pop = affichage du message rapidement (surgit de la zone déclencheuse puis repart). Comme pour copier URL d'un liste via clic dessus.
.zone_popupBref = zone qui va contenir les element utile (dont le bloc avec message à afficher : popupBref_afficheurTexte)
*/
.zone_popupBref {
	margin-top:25px;/*(évite que la zone chevauche texte au-dessus et empeche modification)*/
	position:relative;/*pour que l'element popupBref_afficheurTexte accepte absolute*/
}
/*tous les objet directement enfant en relatif*/
.zone_popupBref > * {
	position:relative;/*evite que l'element copiedtext soit par-dessous sous FF (ferait que label non cliquable)*/
}

.popupBref_afficheurTexte {
	position: absolute;
    font-size:1.3em;
	left: 0; top: 0; right: 0;
	text-align: center;
	opacity: 0;
		-webkit-transform: translateY(-0.5em);
	transform: translateY(-0.5em);
	color: #000;
	    -webkit-transition: all 0.5000s ease-out;
	transition: all 0.5000s ease-out;

	background-color: #00ad00;
	border-radius: 2px;
	color:#FFF;
	padding:8px 2px;
    margin-top: -16px; /*somme padding vertical haut et bas*/
}
.popupBref_afficheurTexte.vert
, .popupBref_afficheurTexte.vert .pastille { /*par défaut*/
	background-color: #00ad00;
}
.popupBref_afficheurTexte.orange
, .popupBref_afficheurTexte.orange .pastille {
	background-color: darkorange;
}
.popupBref_afficheurTexte.rouge
, .popupBref_afficheurTexte.rouge .pastille {
	background-color: red;
}
.popupBref_afficheurTexte.transparent {
	background-color: transparent;
}

.pop .popupBref_afficheurTexte
, .zone_popupBref.pop .popupBref_afficheurTexte
{
	opacity: 1;
	/*	-webkit-transform: translateY(-1.2em);
	transform: translateY(-1.2em);*/
		-webkit-transform: translateY(-70%); /*70% s'adapte meiux à hauteur du contenant*/
	transform: translateY(-70%);
}

.popupBref_afficheurTexte .pastille { /*24/09/2021 : simple rond avec √ dedans par exemple*/
  background-color: #00ad00;
  border-radius: 3rem;
  color: #FFF;
  line-height: 3rem;
  font-size: 2rem;
  height: 3rem;
  width: 3rem;
  display: inline-block;
}





/* * * texte cliquable et BTN (bouton) :*/
.txtCliquable.discret {
	color:rgba(0, 149, 220, 0.5);  /*bleu 50%*/
}

.txtCliquable {
	color: #0095dc;  text-decoration: none;  font-weight: normal;
	padding: 1px 6px;  margin: 0px 1px 0px 0px;
	border-radius : 2px;
	cursor: pointer;
}
.txtCliquable:hover {
	color: yellow !important;
	text-decoration: none;
	background-color: #0172b5 !important;;
}

.btn {
	display:inline-block;
	background-color: #0095dc ;  padding: 0.8em 0.8em; /*proprotionnel à font-size */
	text-align:center;  border-radius : 2px;
	color: #FFF;  font-size: 1em;  line-height:1em;  text-decoration:none;
	margint-top: 2px;
	margin-bottom: 2px;
}
.btn.petit {
	font-size: 1.0em;
	padding: 4px;
}
.btn.gros {
	font-size: 2em;
}
.btn.gros.fin {
	font-size: 1.5em;
	padding: 0.4em 0.4em;
}
.btn.sansFond { /*je le mets moins en valeur pour eviter de cliquer spontanément dessus, de croire que c'est le bouton principal (ex: page connexion : s'sincrire et page inscription : se connecter)*/
	background-color: transparent ;
	color:#0095dc;
}

.listeChoixBtns .btn {
    border-radius : 0;
    margin-right:1px;
}
.listeChoixBtns .btn.actif {
    background-color: #00ad00 ;
}
.listeChoixBtns .btn.premier {
    border-top-left-radius : 50px;
    border-bottom-left-radius : 50px;
    padding-left:1em;/*eloigne de l'arrondi*/
}
.listeChoixBtns .btn.dernier {
    border-top-right-radius : 50px;
    border-bottom-right-radius : 50px;
    padding-right:1em;/*eloigne de l'arrondi*/
}


.block {
	display: block;
}
.largeurTresLarge { /*ex: btn afficher la suite*/
	width:75%;
}
.largeurMax {
	width:100%;
}

.btn:hover {
	background-color: #0172b5 !important;
	color: yellow !important;
}


.survolZone:hover .txtCliquable.survolZone_enValeur  /*quand survol certaines zone, met en valeur le botuon poru montrer qu'on peut cliquer dessus (ex: btn masquer en-tete page liste)*/
{
	color:rgba(0, 149, 220, 1);  /*bleu 100%*/
	/*text-decoration: none;
	background-color: #0095dc;*/
	background-color: rgba(0, 149, 220, 0.15);  /*bleu 50%*/
}


/* personnalisation des boutons */
.btnAnnuler {
    background-color: #9295aa; background-color: rgba(53, 59, 74, 0.5); /*gris bleu*/
}



/* * * ANIMATION sur propriete classique*/
.anim_base,
.btn,
txtCliquable {
    -webkit-transition-property: opacity, color, background-color, border-color, top, right, left, bottom;
    -moz-transition-property: opacity, color, background-color, border-color, top, right, left, bottom;
    -ms-transition-property: opacity, color, background-color, border-color, top, right, left, bottom;
    -o-transition-property: opacity, color, background-color, border-color, top, right, left, bottom;
    transition-property: opacity, color, background-color, border-color, top, right, left, bottom;
    -webkit-transition-duration: 0.5s, 0.5s, 1s, 1s, 0.25s, 0.25s, 0.25s, 0.25s;
    -moz-transition-duration: 0.5s, 0.5s, 1s, 1s, 0.25s, 0.25s, 0.25s, 0.25s;
    -ms-transition-duration: 0.5s, 0.5s, 1s, 1s, 0.25s, 0.25s, 0.25s, 0.25s;
    -o-transition-duration: 0.5s, 0.5s, 1s, 1s, 0.25s, 0.25s, 0.25s, 0.25s;
    transition-duration: 0.5s, 0.5s, 1s, 1s, 0.25s, 0.25s, 0.25s, 0.25s;
}
.txtCliquable
{	/*permet de raccourcir la durée de l'effet quand on quitte le bouton (limite effet fantome disgracieux sur des petites surfaces)*/
	-webkit-transition-duration:	0.2s ;
	-moz-transition-duration:		0.2s ;
	-ms-transition-duration:		0.2s ;
	-o-transition-duration:			0.2s ;
	transition-duration:			0.2s ;
}

.txtCliquable:hover {
	-webkit-transition-duration:	0.5s ;
	-moz-transition-duration:		0.5s ;
	-ms-transition-duration:		0.5s ;
	-o-transition-duration:			0.5s ;
	transition-duration:			0.5s ;
}

.amim_tournoyerAxeY { /*generique*/
  animation: animation_tournoyerAxeY 10s linear infinite;
}
@keyframes animation_tournoyerAxeY {
  0% { transform: perspective(70px) rotateY(0deg) /*skewY(0deg)*/ ;
  }
/*
  25% { transform: perspective(70px) rotateY(88deg) skewY(-10deg) ;
  }
  35% { transform: perspective(70px) rotateY(92deg) skewY(-10deg) ;
  }
*/
  50% { transform: perspective(70px) rotateY(180deg) /*skewY(-10deg)*/ ;
  }
/*
  65% { transform: perspective(70px) rotateY(270deg) skewY(-10deg) ;
  }
  75% { transform: perspective(70px) rotateY(270deg) skewY(-10deg) ;
  }
*/
  100% { transform: perspective(70px) rotateY(360deg) /*skewY(0deg)*/ ;
  }
}
@keyframes animation_decoNaissance {
  0% { transform: perspective(150px) rotateY(0deg) skewY(0deg); filter: invert(100%)  brightness(100%);
  }
  50% { transform: perspective(150px) rotateY(-180deg) skewY(30deg); filter: invert(100%)  brightness(40%);
  }
  100% { transform: perspective(150px) rotateY(-360deg) skewY(0deg); filter: invert(100%)  brightness(100%);
  }
}
@keyframes animation_mariage {
  /*filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(49deg) brightness(103%) contrast(103%);*/
  0% { transform: perspective(150px) rotateY(0deg) skewY(25deg);  filter: invert(100%) brightness(150%) ;
  }
  50% { transform: perspective(150px) rotateY(180deg) skewY(-5deg);  filter: invert(30%) brightness(30%) ;
  }
  100% { transform: perspective(150px) rotateY(360deg) skewY(25deg);  filter: invert(100%) brightness(150%) ;
  }
}
@keyframes animation_anniversaire {
  0% { transform: perspective(150px) rotateY(0deg) skewY(0deg); filter: invert(100%) sepia(80%) saturate(1000%) hue-rotate(10deg) brightness(200%) contrast(100%); /**/
  }
  50% { transform: perspective(150px) rotateY(180deg) skewY(-30deg); filter: invert(100%) sepia(80%) saturate(100%) hue-rotate(-200deg) brightness(30%) contrast(100%); /*filter : hue-rotate saturate brightness*/
  }
  100% { transform: perspective(150px) rotateY(360deg) skewY(0deg); filter: invert(100%) sepia(80%) saturate(1000%) hue-rotate(1deg) brightness(200%) contrast(100%); /**/
  }
}


@keyframes amim_tournoyer_blocRectoVerso {
  0% { transform: perspective(150px) rotateY(0deg) ; /*1px devrait suffire mais si micro-décalage dans l'animation, augmenter un peu la valeur*/
  }
  25% { transform: perspective(150px) rotateY(90deg) ;
  }
  75% { transform: perspective(150px) rotateY(270deg) ;
  }
  100% { transform: perspective(150px) rotateY(360deg) ;
  }
}
@keyframes amim_tournoyer_recto {
  /*verso visible au départ*/
  0% { XXtransform: perspective(150px) rotateY(0deg); /*1px devrait suffire mais si micro-décalage dans l'animation, augmenter un peu la valeur*/
    filter: invert(100%) brightness(150%) ;
    opacity : 1 ;
  }
  24.9999% { opacity : 1; } /*toujours visible et va inverser visibilité, d'un coup à l'étape suivante (% très proche)*/
  25% { XXtransform: perspective(150px) rotateY(90deg);
    filter: invert(100%) brightness(30%) ;
    opacity : 0 ;
  }
  74.9999% { opacity : 0; } /*toujours invisible et va inverser visibilité, d'un coup à l'étape suivante (% très proche)*/
  75% { XXtransform: perspective(150px) rotateY(270deg);
    filter: invert(100%) brightness(30%) ;
    opacity : 1 ;
  }
  100% { XXtransform: perspective(150px) rotateY(360deg);
    filter: invert(100%) brightness(150%) ;
    opacity : 1 ;
  }
}
@keyframes amim_tournoyer_verso {
  /*verso non visible au départ*/
  0% { XXX_transform: perspective(150px) rotateY(180deg); /*1px devrait suffire mais si micro-décalage dans l'animation, augmenter un peu la valeur*/
    XXfilter: invert(100%) brightness(30%) ;
    opacity : 0 ;
  }
  24.9999% { opacity : 0; } /*toujours visible et va inverser visibilité, d'un coup à l'étape suivante (% très proche)*/
  25% { XXX_transform: perspective(150px) rotateY(270deg);
    filter: invert(100%) brightness(30%) ;
    opacity : 1 ;
  }
  50% {
    filter: invert(100%) brightness(150%) ;
  }
  74.9999% { opacity : 1; } /*toujours invisible et va inverser visibilité, d'un coup à l'étape suivante (% très proche)*/
  75% { XXX_transform: perspective(150px) rotateY(450deg);
    filter: invert(100%) brightness(30%) ;
    opacity : 0 ;
  }
  100% { XXX_transform: perspective(150px) rotateY(540deg);
    XXfilter: invert(100%) brightness(30%) ;
    opacity : 0 ;
  }
}

}
.anim_basculerAvantArriere { /*generique*/
  animation: animation_fete_basculer 2s ease-in-out infinite, animation_fete_couleur 5s ease-in-out infinite; /*2 animations*/
  transform-origin-y: 0px;/*comme si accroché en haut*/
}
@keyframes animation_fete_basculer {
  0% { transform: perspective(500px) rotateX(30deg); /*perspective(500px) pour limiter effet de perpective (+ le nb est grand, plus la perspective est faible*/
  }
  50% { transform: perspective(500px) rotateX(-5deg);
  }
  100% { transform: perspective(500px) rotateX(30deg);
  }
}
/*changement couleurs via hue-rotate*/
@keyframes animation_fete_couleur {
  0% { filter: invert(20%) sepia(50%) saturate(1000%) hue-rotate(360deg) brightness(200%) contrast(100%);  /*adapter filter avec : https://codepen.io/sosuke/pen/Pjoqqp */
  }
  50% { filter: invert(20%) sepia(50%) saturate(1000%) hue-rotate(0deg) brightness(200%) contrast(100%);  /*modif de hue-rotate*/
  }
  100% { filter: invert(20%) sepia(50%) saturate(1000%) hue-rotate(360deg) brightness(200%) contrast(100%);
  }
}

/* * * MENU * * */
nav#zoneMenu1 {
	-webkit-font-smoothing: subpixel-antialiased;/*evitera changement de graisse si mis en fixed */

	width: 100%;
	border-bottom:1px solid #FFF;/*marque separation avec deco*/
	z-index: 10;/*pour passer au-dessus de la deco*/

	height:2.6em; font-size: 11px; line-height: 2.6em;
	background-color: #110d32;

	position:relative;/*permet au motif de fond de s'afficher en relative sans prendre la largeur de la page, mais seulement du menu*/
}
nav#zoneMenu1 .fondMotif { /*pouravoir image en fond de menu avec opacite*/
	position: absolute; width: 100%; height: 100%; top: 0;
	background-image: url('/images/deco/motifs/motif028.png');
	background-attachment: fixed;
	opacity: 0.2;
}

nav#zoneMenu1 .sous-zoneMenu1 { /*sous partie permettant au menu en lui-même (nav .listeMenus) d'avoir une largeur selon contenu et pas fenêtre complete */
	background-color: green;
	height: 509px; width: 100%;
	position: fixed;/*fixe ici plutôt que  nav .listeMenus */
	visibility: hidden;/*evite que ne passe par-desuss le reste le contenu principal. z-index pas ok ici (empecherait que les libelle, au survol, passe au-dessus du contenu prinipale).*/
}
nav#zoneMenu1 .sous-zoneMenu1_bis { /*sous sous partie permettant de pouvoir mettre des élements sous la liste des menus, sans pb avec position (ex: liste de personnes) */
	visibility: visible; position: absolute; /*permet à la largeur du menu de s'afficher sans prendre la largeur de la page, mais seulement du menu*//*fonctionne aussi grace au div  sous-zoneMenu1  en fixed*//*remplace ces valeurs dans .listeMenus */
	XXXheight:initial;
	margin: 0;
	padding: 0;
	XXXtext-align: center;
	width: 12%;
}
nav .listeMenus {
	list-style: none;
	cursor: default;
	width: 100%;  margin: 0;  padding: 0;
	text-align: center;
	display: block;
	XXXposition: fixed;
	height:2.6em;/*idem nav#zoneMenu1 */

	ZZZvisibility:visible; ZZZposition:absolute; /*permet à la largeur du menu de s'afficher sans prendre la largeur de la page, mais seulement du menu*//*fonctionne aussi grace au div  sous-zoneMenu1  en fixed*//*absolute mis dans .sous-zoneMenu1_bis */
}
nav .listeMenus li {
	display: inline-block;
	width:20%;
	/*height: 2.6em;	line-height: 2.6em;*/
	white-space: nowrap;
	height:100%;
	background-color: #110d32;/*met un fond uni car si horizontal, ce n'est pas le li qui est fixed donc on verrait au travers*/
}
nav .listeMenus li a {
	display: block;
	/*background-color: #2095ef;*/  color:#FFF;
	text-overflow: ellipsis; overflow: hidden; /*permet d'ajouter "..." si texte deborde de la ligne*/
	height:100%;
	text-decoration:none;/*pas soulignement*/
}
nav .listeMenus li a.actif /*menu actif*/
, nav .listeMenus li a:hover /*menu survol*/
{
	background-color:#0172b5;
	border-bottom:1px solid #FFF;/*marque separation avec deco*/
}
nav .listeMenus li a {
	border-bottom:1px solid #FFF;/*enleve marque separation avec deco*/
}
nav .listeMenus li a:hover {/*menu survol*/
	color:yellow;
}
nav .listeMenus li a .pictoMenu { /*l'image devant le nom du menu*/
	/* display: none; */
	/*width: 28px; height: 28px;*/
	display: inline-block;
	vertical-align: middle;
	margin-top:-0.17em;
	margin-right:3%;

	height:2.6em;  width: 2.6em;  background-size: 2.6em; /*permet d'adapter hauteur picto => aussi du menu*/
	/*background-image: url('/images/menu/menu-2016/loupe.svg');*/

}
/*liste des images pour chaque menu :*/
nav .listeMenus li.maListe a .pictoMenu {
	background-image: url('/images/menu/menu-2016/ma-liste.svg');
}
nav .listeMenus li.accueil a .pictoMenu {
	background-image: url('/images/menu/menu-2016/accueil.svg');
}
nav .listeMenus li.monAccueil a .pictoMenu {
	background-image: url('/images/menu/menu-2016/mes-connaissances.svg');
}
nav .listeMenus li.recherche a .pictoMenu {
	background-image: url('/images/menu/menu-2016/recherche.svg');
}
nav .listeMenus li.revoir-liste a .pictoMenu {
	background-image: url('/images/menu/menu-2016/revoir-liste.svg');
}
nav .listeMenus li.reglages a .pictoMenu {
	background-image: url('/images/menu/menu-2016/reglages.svg');
}
nav .listeMenus li.connexion a .pictoMenu {
	background-image: url('/images/menu/menu-2016/connexion.svg');
}
nav .listeMenus li.deconnexion a .pictoMenu {
	background-image: url('/images/menu/menu-2016/deconnexion.svg');
}
nav .listeMenus li.inscription a .pictoMenu {
	background-image: url('/images/menu/menu-2016/inscription.svg');
}


nav .listeMenus li a .txtMenu { /*le texte du menu*/
}

/*ajustement si menu vertical : mise, en fait, dans CSS responsive*/


.texteDiscret { color: #B7A1CD; } /*texte violet clair*/


/*deco page accueil :*/

	/*style en tete accueil :*/
	.enTeteAccueil .deco {
		height:194px; position: relative; z-index: 0;
	}
	.enTeteAccueil .deco .fond {
		position: absolute; z-index: -1; width: 100%; height:100%;
	}
	.enTeteAccueil .deco .fond .fondCouleur {
		position: absolute; width: 200%; /*height: 274px;height:320px; top:-100px; left:-100px;*/ height: 100%;
		/*background-color: #6c188b; background-color: #431071; background-color: #140b4c;*/ background-color: #110d32;
		/*box-shadow: inset 0 0px 44px 54px rgba(255, 255, 255, 1);*/

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor */
		background: -moz-linear-gradient(top,  rgba(17,13,50,1) 70%, rgba(17,13,50,0.15) 95%, rgba(17,13,50,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(17,13,50,1) 70%,rgba(17,13,50,0.15) 95%,rgba(17,13,50,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(17,13,50,1) 70%,rgba(17,13,50,0.15) 95%,rgba(17,13,50,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#110d32', endColorstr='#00110d32',GradientType=0 );*/ /*IE6-9 *//*desactivation car erreur dans console*/
	}
	.enTeteAccueil .deco .fond .fondMotif {
		position: absolute; width: 100%; height: 100%; background-image: url('/images/deco/motifs/motif028.png'); background-attachment: fixed; opacity: 0.1;
	}
	.titre1_accueil { /*le titre*/
		font-size: 1.6em;
		line-height:1.2em;
		color: #771CC9; color: #110d32;
		font-weight: normal;
		margin-top: -0.7em;	margin-bottom: 0em;
	}


	.enTeteAccueil .deco .decoHautFond { position: absolute; z-index: -1; width:100%; height:174px; left:0px;  top: 0; }

	.enTeteAccueil .deco .decoNaissance {
    position: absolute; z-index: -1; right: 15%; margin-right: 0px; top: -25px;
    filter: invert(100%)  brightness(500%);/*23/04/2025 suite images en svg au lieu de png (preparation pour design V25a)*/
}
	.enTeteAccueil .deco .decoAnniversaire {
    position: absolute; z-index: -1; right: 24%; margin-right: 0px; top: -45px;
    filter: invert(100%)  brightness(500%);/*23/04/2025 suite images en svg au lieu de png (preparation pour design V25a)*/
}
	.enTeteAccueil .deco .decoMariage {
    position: absolute; z-index: -1; right: 74%; margin-right: 0px; top: -30px;
    filter: invert(100%)  brightness(500%);/*23/04/2025 suite images en svg au lieu de png (preparation pour design V25a)*/
}
	.enTeteAccueil .deco .decoFete {
    position: absolute; z-index: -1; right: 45%; margin-right: 0px; top: -47px;
    filter: invert(100%)  brightness(500%);/*23/04/2025 suite images en svg au lieu de png (preparation pour design V25a)*/
}
 /*V25a*/
  .enTeteAccueil.V25a .deco .decoNaissance {
    animation: animation_decoNaissance 12s linear infinite;
    /*OFF_animation-delay: 0.3s; /*evite que les animation soient toute idem*/
  }
  .enTeteAccueil.V25a .deco .decoAnniversaire {
    animation: animation_anniversaire 20s linear infinite;
  }
  .enTeteAccueil.V25a .deco .decoMariage {
    animation: animation_mariage 16s linear infinite;
    transform-origin-x: 72px;/*pour aligner mieux sur la corde (qui n'est pas parfaitement au centre de l'image d'origine)*/
  }
  .enTeteAccueil.V25a .deco .decoFete {
    animation: animation_fete_basculer 2s ease-in-out infinite, animation_fete_couleur 5s ease-in-out infinite; /*2 animations*/
    transform-origin-y: 0px;/*comme si accroché en haut*/
  }

	.enTeteAccueil .deco .decoCadeauGauche { position: absolute; z-index: -1; left: 9%; margin-right: 0px; top: 60px; }
	.enTeteAccueil .deco .decoCadeauDroite { position: absolute; z-index: -1; right: 9%; margin-right: 0px; top: 55px; }

	.enTeteAccueil.V25a .deco .decoCadeau.cadeau {
    OFF_display: inline-block;
    position: absolute;
    /*left:260px; défini via style dans la balise concernée*/
		z-index: -1; /*position: absolute;  right: 50%; margin-right: -172px; top: 25px;*/
		OFF_width: 100%;
		OFF_max-width: 374px;
		OFF_margin-top: 40px;
		OFF_z-index: 0;/*pour passer au-dessus du logo*/
    height: 50px;
    margin: 0;
	}
  .blocAnimCadeau { /*bloc cadeau */
    top:-8px;
    /*width:60px; défini via style dans la balise concernée*/
  }
    .blocAnimCadeau.animCouleurTresLent
  , .animCouleurTresLent {
    animation: animation_fete_couleur 80s ease-in-out infinite;
  }
    .blocAnimCadeau.animCouleurTresRapide
  , .animCouleurTresRapide {
    animation: animation_fete_couleur 3s ease-in-out infinite;
  }
  .blocAnimCadeau.animCouleurRapide {
    animation: animation_fete_couleur 10s ease-in-out infinite;
  }
  .blocAnimCadeau.couleurFixe_rougeIntense {
    filter: invert(15%) sepia(92%) saturate(3657%) hue-rotate(353deg) brightness(50%) contrast(100%);
  }

  .blocAnimCadeau .decoCadeau {/*les images cadeau*/
     height: auto;
  }
  .blocAnimCadeau .decoCadeau.animer { /*une des iamges cadeau sur 1 angle*/
    animation: animation_tournoyerAxeY 12s linear infinite ;
  }
  .blocAnimCadeau .decoCadeau.delai_1tiers { /*une des iamges cadeau sur un autre angle (delau + tard que le précédent)*/
    animation-delay: 2s;
    /*width: 36px; top: 4px; left:2px;  essai pour version réduite à l'intéreiru, mais le nœud gêne*/
  }
  .blocAnimCadeau .decoCadeau.delai_2tiers { /*une des iamges cadeau sur un autre angle (delau + tard que le précédent)*/
    animation-delay: 4s;
    /*width: 32px; top: 8px; left:4px;  essai pour version réduite à l'intéreiru, mais le nœud gêne*/
  }
  .blocAnimCadeau .decoCadeau.delai_1demi { /*une des iamges cadeau sur un autre angle (delau + tard que le précédent)*/
    animation-delay: 3s;
  }


	.enTeteAccueil .deco .decoLogo {
		z-index: -1; /*position: absolute;  right: 50%; margin-right: -172px; top: 25px;*/
		width: 100%;
		max-width: 374px;
		margin-top: 40px;
	}

	.enTeteAccueil .deco .slogan {
		display: inline-block;
		z-index: 0;/*pour passer au-dessus du logo*/
		margin-top: 0px;/*utilise aussi classe decoLogo pour avoir meme info largeur, max-width, mais je ne veux aps de margin-top*/
		/*position: relative;*/
		/* background-color: rgba(31, 255, 80, 0.41); */
		text-align: right; padding-right: 25px;
		color: rgb(233, 0, 0); font-style: italic; font-size: 0.95em;
		/*triple ombre blanche pour qu'elle se voit :*/
		text-shadow:
			  0px 0px 3px white
			, 0px 0px 6px white
			, 0px 0px 9px white
		;
		text-shadow:0px 0px 4px #000, 0px 0px 8px #000 ;
		color:#ECECEC; /*evite totalement blanc (pour eviter de faire croire a un texte cache alors qu'il est sur un fond sombre)*/
	}

	.decoIE6 { position: absolute; z-index: -1; right: 50%; margin-right: -339px; top: 0px; }


    .blocAnimRectoVerso.slogan1 .decoSlogan
  , .blocAnimRectoVerso.slogan2 .decoSlogan
  , .blocAnimCadeau .decoCadeau
  {
    display: inline-block;
    position: absolute;
    left : 0;
  }
  .blocAnimRectoVerso.slogan1 .decoSlogan.recto {
    animation: amim_tournoyer_recto 4s linear infinite ;
  }
  .blocAnimRectoVerso.slogan1 .decoSlogan.verso {
    transform: rotateY(180deg); /*positionné à l'envers, au verso*/
    animation: amim_tournoyer_verso 4s linear infinite ;
  }
  .blocAnimRectoVerso.slogan2 .decoSlogan.recto {
    animation: amim_tournoyer_recto 7s linear infinite ;
  }
  .blocAnimRectoVerso.slogan2 .decoSlogan.verso {
    transform: rotateY(180deg); /*positionné à l'envers, au verso*/
    animation: amim_tournoyer_verso 7s linear infinite ;
  }

	.enTeteAccueil .deco .slogan {
    padding-right: 35px;
  }
    .blocAnimRectoVerso
  , .blocAnimCadeau
  {
    position:relative;
    display:inline-block;
  }
  .blocAnimRectoVerso.slogan1 { /*bloc avec Désir + Plaisir*/
    top: -15px; left: 5px;
    width: 68px; height: 46px;
    width: 51px; height: 35px;
    animation: amim_tournoyer_blocRectoVerso 4s linear infinite ;
  }
  .blocAnimRectoVerso.slogan2 { /*bloc avec d'offrir + de recevoir*/
    top: -15px;
    width: 80px; height: 46px;
    width: 60px; height: 35px;
    animation: amim_tournoyer_blocRectoVerso 7s linear infinite ;
  }

	/*FIN style en tete accueil*/

/*FIN deco page accueil*/



/*BD page accueil :*/
#zoneBandeDessinee {
	width: 100%;  position: relative; position:absolute;
	overflow-x: scroll;  -webkit-overflow-scrolling: touch;/*pour ecran tactile iOS sinon on ne peut pas faire defiler avec le doigt*/
	font-size:13px;
	line-height:1.2em;
	padding-bottom: 15px;/*permet à la barre de defilement horizontale de ne pas trop chevaucher la BD*/
}
.bulleBD {
	border:2px solid #6694ff;  /*bleu par défaut*/
	font-family: "Comic Sans MS", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	margin: 2px; height: auto;
	padding:5px 10px;
	border-radius:6px;
	text-align:center;
	box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 1); /*contour/ombre blanche autour des bulles : + joli que si touche les traits des dessins*/
}
.bulleFille  { color: fuchsia; border-color: fuchsia; }
.bulleGarcon { color: #6694ff; }

/*fleche droite et gauche de la BD, dans un cercle partiel :*/
#zoneDirectionDroite , #zoneDirectionGauche {
	display:none; /*non visible par défaut (s'affichera si pas ecran tactile avec fn isTouchDevice)*/
	position: absolute;
	/*top: 0px;  height:100%; width: 80px;*/
	top: 50%;  margin-top:-50px;
	width: 70px;  height: 100px;  box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 1); /*ombre blanche*/
	background-color: #0095dc;  background-repeat: no-repeat;
}
#zoneDirectionDroite {
	cursor: e-resize;
	background-image: url('/images/objetsDivers/fleches/rechercheSuivant.png');
	border-radius: 50px 0 0 50px;
	right: 0px;
	background-position:20px
}
#zoneDirectionGauche {
	cursor: w-resize;
	background-image: url('/images/objetsDivers/fleches/recherchePrecedent.png');
	border-radius: 0 50px 50px 0;
	left: 0px;
	background-position:12px;
}


.zoneBullesBD {
	display:none ;
}
.zoneBullesBD , .bulleBD {
	background-color: #fff;
	visibility: visible; position: absolute; width: auto; height: auto;
}


/*positionne les bulles par rapport à l'image de BD :*/
#bullesA { top: 20px; left:  250px;	display:block; }	#calque2 { top: 115%; left:   89%; display:none; }	#calque3 { top:  90%; left:  70%; }
#bullesB { top:  1px; left:  520px; }	#calque8 { top: 10px; left:   95%; }	#calque6 { top: 115%; left:  20%; }		#calque9 {			 right: 10%; }
#bullesC { top:  6px; left:  830px; }	#calque4 { top: 10px; left:  115%; }
#bullesD { top:  6px; left: 970px; }	#calque10{ top:  90%; left:    5%; }	#calque7 { top: 145%; left:  -5%; }		#calque11{ top: 90%; left:   5%; }
#bullesE { top:  6px; left: 1250px; }	#calque5 { top:  90%; left:    5%; }	#calque12{ top: 225%; left: 0;  }
#bullesF { top:  6px; left: 1530px; }	#calque13{ top: 50%;  left:   92%; }
#bullesG { top:  6px; left: 1665px; }	#calque14{ top: 125%; left:   70%; }
#bullesH { top: 20px; left: 1890px; }	#calque15{ top: 125px; left:   0%; }
#bullesI { top:  6px; left: 2030px; }	#calque16{ top: 115%; right:  0px;  width:180px; }		#calque17{ top: 98%;  left:  -118%; }
#bullesJ { top: 45px; left: 2370px; }	#calque18{ top: -40%; left:   115%; }
#bullesK { top: 25px; left: 2690px; }	#calque19{			  left:   15%; }	#calque20{ top:  230%; right: 10%; }
/*#calque1 { top: 6px; left: 636px; }*/

/*FIN BD page accueil*/


/*zone personne :*/
/*rq : signe > pour enfants directs (pas sous-enfants)*/

.liste_perso {
	display: -webkit-flex; /*active flex pour le contenu*/
	-webkit-flex-direction: row;

	-webkit-justify-content: space-around;/*aligment horizontal écartement avec marge aux extremites*/
	/*-webkit-justify-content: center;/*aligment centré, sans marge aux extremites*/

	-webkit-flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/

	display: flex; /*active flex pour le contenu*/
	flex-direction: row;  justify-content: space-around; /*aligment horizontal écartement avec marge aux extremites. element seuls sur derniere ligne : centré mais peuvent être assez éloigné l'un de l'autre*/
    justify-content: safe center; /*aligment horizontal écartement entre element toujorus idem, element seuls sur derniere ligne : centré masi pas trop éloigné l'un de l'autre*/
	flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/

	line-height: 0em; /*sinon amrge en bas de bloc (changer alors interligne pour zone info)*/
}
.liste_perso .perso {  /*zone personne*/
	text-align:center;
	/*padding: 5px;*//*suppr. :  voir :  sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*/
	border-radius:3px;
	transition-property: background-color ;  transition-duration: 0.7s ;
	float:left;/*utile si flex pas reconnu*/
	position:relative;/*permettra au bouton "retirer de la connexion rapide" de s'afficher en haut a droite, en absolu*/
}
.liste_perso .perso .photo {
	display: inline-block; /*permet centrage si info trop large*/
	line-height: 0em; /*sinon mini marge en bas de la photo => div pas tout a fait rond en realite*/
	overflow: hidden; /*evite que photo sorte de la zone si zone en rond alors que photo (sans que le photo soit aussi ronde)*/
	border-radius:50px;/*pour version FINALE*/border-radius:4px;
	transition-property: background-color, border-radius ;
	transition-duration : 0.3s ;
}
/*adapte zone personne selon la taille*/
.liste_perso.infoComplete .perso { /*par défaut*/
	 /*relatif a infoComplete : adapte info largeur / survol*/
	 /*max-width: 160px;*/ /*au minimum : 110 = 100+10 = largeur photo+padding du li*/
	 width: 142px; /*max-width ne marche pas sous FF, au survol. Les infos se mettant en absolute, la largeur est recalcule (ok sous Safari, mais FF n'a pas forcement tord) : solutions : forcer la largeur a une valeur fixe (max-width n'etant alors plus utile)*/ /*142px = 4 perso en largeur*/ /*il serait aussi possible de mettre en %. ex: 25% si je veux 4 en largeur ou 33.3333% si que 3 etc... (et d'adapter selon largeur fenetre via CSS responsive)*/

	 /*si dernier perso seul sur une ligne => au survol, les info sont en absolute => remonte la suite de la page => pas joli/ Pour limiter effet, hauteur minimale (mais si police + grande => le pb apparaitra mais + discret quand-meme) :*/
	 /*min-height: 174px; si 4 lignes d'info*/
	 /*min-height: 161px;*//*si 3 lignes d'info*//*mis sur  .liste_perso.moyen.infoComplete .perso a (pour que la partie basse reste cliquable)*/
}
.liste_perso.moyen.infoComplete .perso { /*si moyen*/
	 width: 142px;
}
.liste_perso.grand.infoComplete .perso { /*si grand*/
	 width: 170px; /*par défaut*/
}
.liste_perso.geant.infoComplete .perso { /*si geant*/
	 width: 210px; /*par défaut*/
}

.liste_perso.infoComplete .perso a { /*par defaut*/
	/*si dernier perso seul sur une ligne => au survol, les info sont en absolute => remonte la suite de la page => pas joli/ Pour limiter effet, hauteur minimale (mais si police + grande => le pb apparaitra mais + discret quand-meme) :*/
    /*dans balise  a  , pour que la partie basse reste cliquable*/
    display: block;
	min-height: 161px;
}
.liste_perso.moyen.infoComplete .perso a { /*si moyen*/
	min-height: 163px; /*minimum 141px + marge de 20 pour pas coller trop à ceux du dessous*/
}
.liste_perso.grand.infoComplete .perso a { /*si grand*/
	min-height: 215px; /*minimum 195px + marge */
}
.liste_perso.geant.infoComplete .perso a { /*si geant*/
	min-height: 274px; /*minimum 254px + marge */
}


.liste_perso.mini .perso .photo {
	width:25px; height:25px; /*height pas auto car ne fonctionne que si j'utilise une image et pas si je mets un span avec image par defaut en fond (quand sans photo)*/
}
.liste_perso.petit .perso .photo {
	width:50px; height:50px;
}
.liste_perso.moyen .perso .photo {
	width:100px; height:100px;
}
.liste_perso.grand .perso .photo {
	width:142px; height:142px;
}
.liste_perso.geant .perso .photo {
	width:200px; height:200px;
}

.liste_perso .perso .photo > img {  /*c'est son contenant qui limite la taille de la photo*/
	width: 100%; height:auto;
}

.liste_perso .perso .photo.sansPhoto {
	background-color: #E6F1F8 ;
}
.liste_perso .perso .photo.sansPhoto > img {
	/*width: 75%;  height: 75%;  margin-top: 14%;*//*si je veux + petit*/
	border-radius: 0;
}
/*rq : si photo ronde => parfois bord pas tout a fait rond alors que si le contenant est rond : ok*/

.liste_perso .perso .photo.sansPhoto .neutre  /*photo : ni garcon, ni fille*/
, .liste_perso .perso .photo.sansPhoto .fille
, .liste_perso .perso .photo.sansPhoto .garcon
{
	height: 100%; width: 100%; display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
    background-size: 100%;/*par defaut mais je peux adapter pour chaque cas*/
}
.liste_perso .perso .photo.sansPhoto .neutre {  /*par defaut (adulte)*/
	background-image: url(/images/photos/perso-neutre.svg);
	background-size: 90%;
	-webkit-transform: rotate(37deg);  transform: rotate(7deg); /*pour finalement le mettre bien droit*/
}
.liste_perso .perso .photo.sansPhoto .neutre.bebe {
	background-image: url(/images/photos/perso-neutre-bebe.svg);
	background-size: 100%;
}

.liste_perso .perso .photo.sansPhoto .fille { /*par defaut (adulte)*/
	/*background-image: url(/images/photos/normales/photoDefautFille.png);*/
	background-image: url(/images/photos/perso-fille.svg);
}
.liste_perso .perso .photo.sansPhoto .fille.ado {
	background-image: url(/images/photos/perso-fille-ado.svg);
}
.liste_perso .perso .photo.sansPhoto .fille.enfant {
	background-image: url(/images/photos/perso-fille-enfant.svg);
}
.liste_perso .perso .photo.sansPhoto .fille.bebe {
	background-image: url(/images/photos/perso-fille-bebe.svg);
}

.liste_perso .perso .photo.sansPhoto .garcon {  /*par defaut (adulte)*/
	/* background-image: url(/images/photos/normales/photoDefautGarcon.png); */
	background-image: url(/images/photos/perso-garcon.svg);
}
.liste_perso .perso .photo.sansPhoto .garcon.ado {
	background-image: url(/images/photos/perso-garcon-ado.svg);
}
.liste_perso .perso .photo.sansPhoto .garcon.enfant {
	background-image: url(/images/photos/perso-garcon-enfant.svg);
}
.liste_perso .perso .photo.sansPhoto .garcon.bebe {
	background-image: url(/images/photos/perso-garcon-bebe.svg);
}


.liste_perso .zonePhoto {
	padding: 5px 5px 2px 5px;/*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*/ /*Cf CSS responsive*/
}
.liste_perso.decouverte .zonePhoto /*pas de texte en-dessous donc marge basse idem partout*/
{	padding: 5px;/*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*/ /*Cf CSS responsive*/
}
 /*les infos sous la photo : */
.liste_perso .info {
	line-height:1.2em;
	padding: 0 5px 5px 5px;/*sept2016: permet marge dans balise a donc reste cliquable (alors que pas le cas si padding sur le li)*/ /*Cf CSS responsive*/
 }
 .liste_perso.infoComplete .info {
	/*relatif a infoComplete : adapte info largeur / survol*/
	transition-property: background-color;  transition-duration: 0.7s;
 }


.liste_perso .info > span { /*tous*/
	display:block;
	line-height: 1.1em; /*ressert ligne des infos*/
}
.liste_perso.infoComplete .info > span { /*tous*/
	/*relatif a infoComplete : adapte info largeur / survol*/
	text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap; /*met ... si tronque*/
}
/*.liste_perso .info > span:nth-child(1) {*/  /*prenom*/
.liste_perso .info span.P {  /*prenom*/
	font-weight:bold;
	font-size:1.1em;
}
/*.liste_perso .info > span:nth-child(2) { */ /*nom*/
/*.liste_perso .info > span:nth-child(1) > span:nth-child(1) {*/  /*nom (inclus dans le span du prenom)*/
.liste_perso .info span.N {  /*nom*/
	font-variant: small-caps; /*rq: petites capitales un peu + gros sur FF*/
	font-size:1.2em;
	font-weight:normal;
}

.liste_perso .info span.SN { /*surnom*/
    font-size: 0.85em;
}

/*.liste_perso .info > span:nth-child(2) {*/  /*ville*/ /*2 au lieu de 3, si nom à la suite du prenom*/
.liste_perso .info span.V /*V = ville*/
{
	font-size:0.8em;
	text-transform: uppercase;/*en majuscules*/
	font-style:italic;/*et italique pour mieux differencier du nom*/
}
.liste_perso .info span.GV {  /*GV = grande ville*/
	font-size:0.8em;
    display: none;
}
.liste_perso .info span.GV:before {
    content: " (";
    text-transform: lowercase;
}
.liste_perso .info span.GV:after {
    content: ")";
}



/*.liste_perso .info > span:nth-child(3) {*/  /*age*/ /*3 au lieu de 4, si nom à la suite du prenom*/
.liste_perso .info span.A {  /*A = Age*/
	font-size:0.8em;
}
.liste_perso .info span.DN {  /*DN = Date Naissance*/
	/*font-size:0.8em;*/
    display: none;
}



/*survol*/
.liste_perso .perso:hover
, .liste_perso .perso a:focus
{  /*survol de la personne complète*/
	cursor:pointer;
	background-color: #E6F1F8;
}
.liste_perso.infoComplete .perso:hover .info
, .liste_perso.infoComplete .perso a:focus .info
{
	/*relatif a infoComplete : adapte info largeur / survol*/
	position:absolute;  z-index: 1;
	background-color: #E6F1F8;
	border-radius: 0 0 3px 3px;
	width: 100%;
	/*margin-left:-5px;*//*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 .perso:hover .info > span
, .liste_perso .perso a:focus .info > span
{  /*mise en valeur des infos*/
	color:#0172b5;
}
.liste_perso.infoComplete .perso:hover .info > span
, .liste_perso.infoComplete .perso a:focus .info > span
{  /*mise en valeur des infos*/
	/*relatif a infoComplete : adapte info largeur / survol*/
	text-overflow: initial;  overflow: initial;  white-space: initial; /*enleve ... si tronque*/
}
/*au survol, adapte info grande ville*/
.liste_perso.infoComplete .perso:hover .info span.GV
, .liste_perso.infoComplete .perso a:focus .info span.GV
{  /*GV = grande ville*/
	font-size:1em;
    display: initial;
    font-weight: bold;
}
.liste_perso.infoComplete .perso:hover .info span.GV:before
, .liste_perso.infoComplete .perso a:focus .info span.GV:before
{
    content: " (≈";
    /*text-transform: lowercase;*/
}/*
.liste_perso.infoComplete .perso:hover .info span.GV:after
, .liste_perso.infoComplete .perso a:focus .info span.GV:after
{
    content: ")";
}*/
/*au survol, adapte info grande ville*/
.liste_perso.infoComplete .perso:hover .info span.DN
, .liste_perso.infoComplete .perso a:focus .info span.DN
{  /*DN = Date Naissance*/
	/*font-size:1em;*/
    display: initial;
}


.liste_perso .perso:hover .photo
, .liste_perso .perso a:focus .photo
{  /*mise en valeur des infos*/
	border-radius:3px;
	background-color: #E6F1F8; /*bleu tres clair*/
	background-color: #FFFFFF; /*hesitation sur couleur (que si sans Photo)*/
}

/*si personne choisie/selectionnee => mis en valeur difféerente*/
.liste_perso .perso.selection
, .liste_perso.infoComplete .perso.selection:hover .info /*partie info, au survol*/
{
	background-color: #0095dc;
	color: #FFF;
}
.liste_perso .perso.selection:hover .info > span /*partie texte de info, au survol (que la couelur du texte, aps du fond (sinon il faudrait aussi remettre bords arrondis)*/
{
	color: #FFF;
}
/*FIN si personne choisie/selectionnee */

/*partie MDP :*/
.zoneSaisieMDP .MDP
, .zoneSaisieMDP .MDP_fictif {
	text-align: center;
	font-family: monospace; /*police a chasse fixe, pour que lors d'une selection de texte, ca corresponde bien*/
}
.zoneSaisieMDP .MDP
,  .zone-connexion-rapide .liste_perso .MDP_fictif { /*ce chp que pour zone-connexion-rapide*/
	width:100%;/*ok que si pas un champ password sinon s'agrandi trop bizarrement*/
	/*font-size:1.3em;*/

	top:0; position: absolute; display: block; /*pour superposition des 2 champs de MDP*/
}
.zoneSaisieMDP .MDP_fictif { /*contour transparent pour le chp ficitf. Ainsi si erreur, peut etre changé sur le vrai champ*/
	border-color:transparent;/*sauf si pour connexion rapide (+bas)*/
}
.zoneSaisieMDP .MDP
, .zoneSaisieMDP .MDP.champPasOK /*et aussi si champ pas ok car sinon serait visible car rouge si erreur*/
{
	background-color:transparent;  color:transparent; /*texte invisible pour voir au travers les bullets points s'afficher*/
	/*border-color:transparent;*//*que si pour connexion rapide (+bas)*/
}

.zoneSaisieMDP {
	position: relative;
}

 /*si on veut voir ce qu'on tape comme MDP : */
.zoneSaisieMDP.voirSaisie .MDP  {
	background-color:#FFF;  color:inherit; /*texte invisible pour voir au travers les bullets points s'afficher (mais fond blanc dans ce cas)*/
	border-color: #999;
}
.zoneSaisieMDP.voirSaisie .MDP_fictif {
	visibility: hidden;
}
/*mai2017: adaptation si page de liste*/
.pageListe.zoneSaisieMDP {
    width:90px;  display:inline-block;
}
.pageListe.zoneSaisieMDP .MDP_fictif
, .pageListe.zoneSaisieMDP .MDP
{
    padding: 0px;  line-height: 1em;  /* + petit */
    border: none;
    vertical-align: middle;
}


/*partie connexion rapide :*/
.zone-connexion-rapide .liste_perso .zoneSaisieMDP .MDP  ,  .zone-connexion-rapide .liste_perso .MDP_fictif { /*idem au-dessus mais ajusté pour zone-connexion-rapide*/
	height:1.5em;/*hauteur défini pour mieux ajuster élement*/
}
.zone-connexion-rapide .liste_perso .zoneSaisieMDP .MDP {
	/*Astuce pour pouvoir mettre le focus direct dans le champ au clic si support tactile ET afficher le clavier : le chp MDP occupe toute la zone de la photo et + */ /*157px pour aller jusque par-dessus le chp MDP fictif (car le chp MDP peut rester grand (partie haute) alors qu'on voit la partie MDP: il faut donc pouvoir cliquer sur le champ MDP pour le taper), mais doit d'arrêter avant le bouton OK, sinon on ne pourrait pas cliquer dessus :*/
	/*background-color: rgba(0, 128, 0, 0.5);*//*test couleur + visuelle*/
	top:-130px;  height: 157px;
	border-color:transparent;/*que si pour connexion rapide (+bas)*/
}
.zone-connexion-rapide .liste_perso .zoneSaisieMDP .MDP_fictif { /*contour transparent pour le chp ficitf. Ainsi si erreur, peut etre changé sur le vrai champ*/
	border-color:#999;/*sauf si pour connexion rapide (+bas)*/
}


.zone-connexion-rapide .liste_perso .perso {
	height:133px; /*pour s'arreter juste apres le prénom (et ne pas voir de suite champ MDP,...)*/
	overflow: hidden;
    font-size: 14px;/*force à 14px car ajustement assez précis*/
}

.zone-connexion-rapide .liste_perso .perso:hover .info > span
, .zone-connexion-rapide .liste_perso .perso a:focus .info > span
{  /*exception: met prenom en noir si connexion rapide*/
	color:#000;
}

.zone-connexion-rapide .liste_perso .info > span:nth-child(1) { /*ajuste pour descendre un peu le prénom ici*/
	margin-top: 3px;
}
.zone-connexion-rapide .liste_perso .zoneSaisieMDP {
	margin-top:10px; /*ne pas coller au prenom*/
	/*position: relative;*//*mis dans .zoneSaisieMDP + haut*/
}
.zone-connexion-rapide .liste_perso .perso.voir_zoneRetirerConnexionRapide .zone_MDPConnexionRapide {
	display:none;
}
.zone-connexion-rapide .liste_perso .perso .zoneRetirerConnexionRapide {/*mode zone non visible*/
	display:none;
}
.zone-connexion-rapide .liste_perso .perso.voir_zoneRetirerConnexionRapide .zoneRetirerConnexionRapide { /*mode zone visible*/
	display:block;
	margin: 0px auto; /*centre contenu (ex: si long prenom => + large)*/
}
.zone-connexion-rapide .liste_perso .perso .zoneRetirerConnexionRapide .texte {
	font-size:0.85em;  line-height:1.1em;
	padding: 10px 0 5px 0;
}




.zone-connexion-rapide .liste_perso .MDP:focus
/*, .zone-connexion-rapide .liste_perso .perso:hover .MDP*//*pas ok si tactile car ne permet plus de faire apparaitre le clavier (le champ MPD se deplace au moment du hover, donc avant le focus). En fait pb lie au opacity de .iconeEnleverConnexionRapide  . Mais effet moins joli finalement car remonte a chaque fois puis redescend pour afficher correctement le chp MDP.*/
{
	/*background-color: rgba(128, 78, 58, 0.5);*//*test couleur + visuelle*/   top:0;  height: 1.5em;
}

.zone-connexion-rapide .liste_perso .zone_MDPConnexionRapide .btnOK { /*btn ok*/
	width:100%;
}
.zone-connexion-rapide .liste_perso input[type="submit"] { /*le bouton OK*/
	margin-top: 11px; /*evite que le bouton ok ne colle le chp MDP*/
	margin-bottom:10px; /*separe la case "memoriser"*/
}

.zone-connexion-rapide .liste_perso .perso .zonePhoto { /*pour animation pour afficher demande MDP*/
	margin-top: 0 ;
	transition-property: margin-top ;
	transition-duration : 0.5s ;
}
.zone-connexion-rapide .liste_perso .perso:hover .zonePhoto
, .zone-connexion-rapide .liste_perso .perso.voir_zoneMDP .zonePhoto /*permet d'activer/desactiver cette classe pour afficher/masquer la zone de saisie de MDP*/
{ /*au survol : remonte zone pour afficher info MDP,...*/
	margin-top:-105px;
}

/*btn retirer de la connexion rapide :*/
.zone-connexion-rapide .liste_perso .perso .iconeEnleverConnexionRapide {
	position: absolute;
	/*opacity:0;*//*pb iOS iPad : une fois mis a 1 (au survol) : empeche que le focus sur champ MDP affiche le clavier iOS !! (mais ne pose aps de pas de pb sous iPhone!!)*/
	right: 0px;  top:-30px;/*en dehors de la zone. Permettra d'apparaitre en douceur avec animation quand valeur changera lors du focus*/
}
.zone-connexion-rapide .liste_perso .perso:hover .iconeEnleverConnexionRapide
{
	opacity:1;
	top:0px;
}
/*FIN partie connexion rapide*/

/*zone-decouverte - zone pour decouvrir listes en page d'accueil */
.zone-decouverte .liste_perso .perso:nth-child(n+6) { /*n+6 = masque a compter du 6e enfant (=> n'affiche que les 5 1er). Source : marevueweb.com/css-html/liste-nth-child-propriete */
	display: none;
}
/*FIN zone-decouverte*/

/*FIN zone personne*/


#zone_contact {
	/*padding-top:20px;*//*ca depend si aide chat affichee au-dessus ou pas*/ padding-bottom:20px;
	margin: 0 auto;/*centre horizontalement*/
	line-height: 2em; /*écarte lignes si l'une en-dessous de l'autre (si écran trop étroit)*/

    /*30oct2019 : OFF car finalement, me semble + joli si btn reseau sociaux sous btouotn de pied de page. centrage + jolie => pas besoin de flex, utile que si tout centrer sur 1 seule ligne, ici*/
	OFF_display: -webkit-flex;
	OFF_-webkit-flex-direction: row;
	OFF_-webkit-justify-content: space-around;
	OFF_-webkit-flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/
	OFF_-webkit-align-items: flex-end;/*centre en bas verticalement le contenu*/
	OFF_display: flex;
	OFF_flex-direction: row;
	OFF_justify-content: space-around;
	OFF_flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/
	OFF_align-items: flex-end;/*centre en bas verticalement le contenu*/
}

.lienFacebook
, .lienTwitter
{	width: 25px;
	height: 25px;
	display: inline-block;
	background-repeat: no-repeat;
	margin-left: 12px; margin-right: 12px;

	border-radius: 50px;
	/*background-color: #AAA;*/background-color: #0095dc;

	padding:0; /*evite padding due balise a */
}
.lienFacebook {
	background-image: url("/images/commun/logo-facebook-blanc.png");
	background-size: 12px;
	background-position: 7px 4px;
}
.lienTwitter {
	background-image: url("/images/commun/logo-twitter-blanc.png");
	background-size: 21px;
	background-position: 2px 5px;
}

div#___plusone_1
, div#___plusone_0 /*le nom semble changer aleatoirement*/
{ /*botuon Google+ trop large*/
	width:60px!important;
}



/*	*	*	*	*	*	*	*	*	*	*	*	*	*	FENETRE POPUP - fenetreSimple	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

#zoneLoader /* zone affichant le loader pour montrer que ça travaille */
, .pictoLoader {  /*picto simple a mettre ou je veux (ex: dans bloc info quand genere FK)*/
	display: none;/*none par defaut. C'est l'effet fadeIn en Jquery,… qui l'affichera (evite de l'afficher avant meme que son contenu ne soit present)*/
	background-image:url(../images/commun/loader.gif); background-repeat:no-repeat; background-position:center;
	background-color: #222;
	-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; /*demi largeur*/
}
#zoneLoader { /* complement : zone affichant le loader pour montrer que ça travaille */
	position: fixed; left: 50%; top: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px;  /*margin = demi largeur*/
	z-index: 999;
}
.pictoLoader {
	width: 20px;		height: 20px;
	display: inline-block;
	vertical-align:middle;  margin:0 5px 5px 5px;
}


.fenetre.fenetreSimple {
	display: none;/*none par defaut. C'est l'effet fadeIn en Jquery,… qui l'affichera (evite de l'afficher avant meme que son contenu ne soit present)*/ position: fixed; /*top: 0; right: 0;*/
	/*width: 500px;*/  min-width: 150px;
	margin: 0; padding:10px; background-color:#FFFFFF; /*border: 1px solid #999;*/
	-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1); box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	z-index:200; /*pour par-dessus btn connexion*/
	background-clip: padding-box; /*ajuste mieux l'arrondi sous FF*/
	/*font-size: 0.9em;*/
}
.fenetre.fenetreSimple .blocTitre { /*titre en haut du bloc popup qui contient classe fenetreSimple*/
	text-align: center;
	background-color:#999;
	margin: -10px -10px 7px -10px;
	border-radius: 4px 4px 0 0; /*essayer d'adpter par rapport au radius de .fenetreSimple*/
	padding: 10px 10px;
	color: #FFF;
	margin: -10px -10px 7px -10px;
	border-top: 0px solid #555;
	font-size: 1.1em;
}

.fenetre.fenetreSimple .blocMessagePopUp /*pour afficher message erreur,… si besoin apres clic sur bouton valider*/
, .fenetre.fenetreSimple .blocInfoPopUp {
	display:block;
	margin: 10px 0 0 0 ;
}
.fenetre.fenetreSimple .blocInfoPopUp { /*texte d'info en bas d'un popup*/
	font-size: 0.8em; color:#777;
	margin-top: 15px; /*margin-bottom: 15px;*/
}

.fenetre.fenetreSimple.coul_reussi { /*ex: message de reussite suite a creation AV*/
	text-align: left;
	border: none; /*pas utile car fond colore et ombre existante sur fenetreSimple*/
}
.coul_reussi { /*pour etre utiliser ailleurs (defini couleur, du texte, du fond de la bordure)*/
	color: #66AC00;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
.coul_erreur {
	color:red;
	/*color: #b94a48;*/ background-color: #f2dede; border-color: #eed3d7;
}


.fenetre.fenetreSimple.enregistrementOK { /*aspect confirmation/enregistrement (ex: quand on valide modif des infos simples d'un article)*/
	background-color: green;
	border-color: transparent;
	color: #FFF;
	font-size: 7em; line-height: initial;  /*pour mettre une grosse coche*/
}


.caseDeFermeture { /* picto de fermeture de fenetre (petit X dans rond noir) */
	position: absolute; /*right: 0; top: 0;*/ right: 19px;top:20px;
	width: 50px; height: 50px; margin-top: -25px; margin-right: -25px; /*depasse largement pour pas avoir a viser precisemmment*/
	background-image:url(../images/commun/close.png); background-repeat:no-repeat; background-position:center;
	cursor:pointer;
}
.caseDeFermeture.pageEntiere { /* picto de fermeture montrant qu'on peut fermer la fenetre (si ouverte via nouvelle fenetre) */
	margin: 0px;
	background-position: right 1px;
	width: 30px;  height: 30px;
	background-color:initial;
	/*si je veux que la croix soit un peu cachee avant survol : background-position: 9px -8px; width: 30px; height: 30px;*/
}

/*avr2020 : tous les picto dans un bouton (peut avoir un label/texte potentiel)*/
.btnPicto {
    display: inline-block;
    white-space: nowrap; /*si trop étroit, évite que le label passe en-dessous*/
    border-radius: 20px;
    border: 2px solid #FFF;
    padding: 2px 2px 2px 2px;
    /*margin: 2px;*/
    color: #FFF;
    /*line-height: 1em;*/
    transform: scale(1);
    transform-origin: center; /*si besoin d'agrandir, ça se fera par rapport au centre par défaut*/
}
.btnPicto.absolu { /*palcé en absolu avec des valeurs par défaut (ajsutement apsicifique à faire en + pour l'élément concerné (ex: z-index, position top/bottom/…, …) )*/
    position: absolute;
    margin : 3px;  /*pour pas toucher bord photos*/
    /*display: inline-block;*//*semble inutile finalement*/
}
/*si besoin d'agrandir avec transform:scale(1.5) ça se fera par rapport au point d'origine …*/
.btnPicto.origineNO {
    transform-origin: top left; /*… Nord-ouest*/
    top: 0; left: 0; /*sera utile si positionnement absolue*/
}
.btnPicto.origineNE { /*… Nord-Est*/
    transform-origin: top right;
    top: 0; right: 0;
}
.btnPicto.origineSE { /*… Sud-Est*/
    transform-origin: bottom right;
    bottom: 0; right: 0;
}
.btnPicto.origineSO { /*… Sud-Ouest*/
    transform-origin: bottom left;
    bottom: 0; left: 0;
}
.btnPicto.ajout {
    background-color: #00b600;
}
.btnPicto.modif {
    background-color: #ffa500;
}
.btnPicto.suppr {
    background-color: #D31409;
}
.btnPicto.ferme { /*croix qui ferme fenêtre*/
    background-color: rgba(0,0,0, 0.3);  /*transparent: noir au survol*//* #656363 = même gris que celui du fond de #zoneZoomVisuel mais isi en hexa*/
}
/*Survol*/
.btnPicto:hover { /*en général : fond bleu sombre au survol*/
    cursor: pointer;
    background-color: #0172b5;
    color : yellow;
}
.btnPicto.ajout:hover {
    background-color: #007200;
}
.btnPicto.modif:hover {
    background-color: #b55a00;
}
.btnPicto.suppr:hover {
    background-color: #a60000;
}
.btnPicto.ferme:hover {
    background-color: #000;
    color : #FFF;
}

/*si besoin dde garder couelur d'origine => + sombre*/

/*le picto en lui-même*/
.btnPicto .picto {
    padding: 0px;
    display: inline-block;
    background-repeat: no-repeat;

    background-image: url("/images/icones3/pictos-base.svg"); /*les pictos blanc, sans fond*/
    background-size: 140px 60px; /*si besoin d'agrandir picto, plutôt utiliser transform: scale(…) pour éviter de devoir repositionner chaque background-position*/
    width: 20px; height: 20px;
    vertical-align: middle;
}
.btnPicto.ajout .picto {
    background-position: 0px 0px;
}
.btnPicto.modif .picto {
    background-position: -20px 0px;
}
.btnPicto.suppr .picto {
    background-position: -40px 0px;
}
.btnPicto.suppr:hover .picto { /*change picto si survolé*/
    background-position: -40px -20px;
}
.btnPicto.ferme .picto {
    background-position: -120px 0px;
}

/*le texte/label du picto (facultatif)*/
.btnPicto .label {
    vertical-align: middle;
    display:none;
}
/*pour tous les labels, met padding right/left, selon origine NSEO, pour ne pas coller les bords du bouton et du picto*/
  .btnPicto.origineNE .label
, .btnPicto.origineSE .label {
    padding-right: 2px; /*pas mis dans .btnPicto car padding-right que si label existe*/
    padding-left: 5px; /*minimum pour pas coller le picto*/
}
  .btnPicto.origineNO .label
, .btnPicto.origineSO .label {
    padding-right: 5px; /*pas mis dans .btnPicto car padding-right que si label existe*/
    padding-left: 2px; /*minimum pour pas coller le picto*/
}
.btnPicto:hover .label {
    display: inline-block;
}

/*FIN avr2020 : tous les picto dans un bouton (peut avoir un label/texte potentiel)*/



/* * * * * LISTE ul, li * * * * */

  ul.tiret
, ul.disc_mini /* je met le caractère · (alt maj f)*/
, ul.tiret_vide
{
	padding-left: 1.85em;
	list-style-type: none;
}
ul.tiret li:before {
    content: "-\a0"; /*tiret + espace inseccable en hexadecimal*//*info style liste ul, li : http://www.alsacreations.com/article/lire/1210-donnez-du-style-a-vos-listes.html  */
	/*esapce inseccable : source : https://developer.mozilla.org/fr/docs/Web/CSS/::before*//*code hexadecimal pour une espace inseccable : \a0 en tant que contenu (utilisez \0000a0 lorsqu'à la suite d'une telle espace il y a des caracteres) */
	/*ne change rien semble-t-il (si texte avec justification : fait pas joli car espace parfois + large entre tiret et 1re lettre)*/

	margin-left: -0.7em;
}
ul.disc_mini li:before {
    content: "·\a0"; /*idem mais autre caractère*/
	margin-left: -0.7em;
}

ul.calerAGauche { /*sans marge à gauche*/
	padding-left: 0em;
    list-style-position: inside;
}
ul.calerAGauche li:before { /*sans marge à gauche*/
	margin-left: 0em;
}

ul.tiret_vide {
	margin-left: 1.5em;
}

/* * * * * FIN LISTE ul, li * * * * */


/* * * * * idées cadeaux par jacocado * * * * */
.zone-idees-cadeaux-compact {
    margin-top:2em;
    margin-bottom:2em;
    text-align: center;
}
.zone-idees-cadeaux-compact .illustration {
    width: 70px;
    padding: 5px 15px;
    vertical-align: middle;
    transition-property: width, height, padding;
    transition-duration: 0.5s , 0.5s , 0.5s;
}
.zone-idees-cadeaux-compact:hover .illustration {
    padding: 5px 1px;  /*reduit marge pour agrandir iamge tout en gardant même largeur (afin de ne pas aller dessous si fenetre trop etroite)*/
}
.zone-idees-cadeaux-compact .sousZone {
    display: inline-block;
    text-decoration: none;
    color: initial;
    cursor: pointer;
    border-radius: 3px; padding: 5px 7px 7px 7px;
    transition-property: background-color;
    transition-duration: 2s;
}
.zone-idees-cadeaux-compact:hover .sousZone {
    background-color: #e3f0ff; /*poru mettre en valeur la zone cliquable*/
}
.zone-idees-cadeaux-compact .titre
{
display: inline-block; vertical-align: middle; font-size: 1em; text-align: right; line-height: 1.3em
}
.zone-idees-cadeaux-compact .zoneImage
{    position: relative;    display: inline-block
}

.zone-idees-cadeaux-compact .coupDeCoeur /*la zone ronde  avec le coeur dedans*/
{
    display: block;
    position: absolute;
    /*top:50%;    left:50%;*/  top: 90%; left: 60%;
    transform:translate(-50%,-50%);
    padding:10px;
    background-color: #262626;    background-color: #FFF;
    /*border:5px solid #FFF;*/
    border-radius: 50%;
    box-shadow:0px 0px 5px rgba(0,0,0,0.8);
    z-index:1;
    /*overflow: hidden;*//*sans ca : permet que le cour passe par-dessus la zone ronde de fond (+ sympa)*/
}
/*pour ajouter un brin de relief avec fon en 2 couleur :
.zone-idees-cadeaux-compact .coupDeCoeur:before
{
    content: '';
    position: absolute;
    top: 0;
    left:-50%;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.3);
}
*/
.zone-idees-cadeaux-compact .coeur /*le coeur en lui-même*/
{
    display: block;
    position: relative;
    width: 14px;
    height: 14px;
    background-color: #F00;
    transform:rotate(45deg) translate(2px,2px);
    animation: animationBattementDeCoeur 1.5s linear infinite;
}
/*animation cœur. source : http://www.onlinecoding.org/how-to-create-animated-heartbeat-using-css-pure-css-tutorials-html5-css3-keyframes-animation/ */
.zone-idees-cadeaux-compact .coeur:before
{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #F00;
    position: absolute;
    top: -50%;
    left: 0;
    border-radius:50%;
}
.zone-idees-cadeaux-compact .coeur:after
{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #F00;
    position: absolute;
    bottom: 0%; /*bottom*/
    right: 50%;
    border-radius:50%;
}
@keyframes animationBattementDeCoeur
{
    0% { transform:rotate(45deg) translate(2px,2px) scale(1);
    }
    30% { transform:rotate(55deg) translate(2px,2px) scale(1);  /*25%*/
    }
    40% { transform:rotate(65deg) translate(2px,2px) scale(1.4);  /*30%    1.4 : normal. 3.4=gros attire + l'attention*/
    }
    50% { transform:rotate(75deg) translate(2px,2px) scale(1.2);
    }
    60% { transform:rotate(65deg) translate(2px,2px) scale(1.4);  /*70%     1.4 : normal. 2.4=gros attire + l'attention*/
    }
    80% { transform:rotate(30deg) translate(2px,2px) scale(1);  /*90%*/
    }
    100% { transform:rotate(45deg) translate(2px,2px) scale(1);
    }

}




.zone-idees-cadeaux {
	margin-top:15px; margin-bottom:15px;
    font-size: 13px;
}
.zone-idees-cadeaux div.sousZone {
	display: inline-block; background-color: #e3f0ff; border-radius: 3px; padding: 5px 7px 7px 7px;
}
.zone-idees-cadeaux ul.listing {
	padding: 0px; margin: 0px; margin-top: 7px; list-style-type: none;
}
.zone-idees-cadeaux h1 {
	font-size: 1.4em;
	font-weight: bold;
	margin-top: 0.4em;
	color: #110d32;
}
.zone-idees-cadeaux h2 {
	font-size: 1.2em;
	font-weight: bold;
	margin-top:0.2em;
	margin-bottom: 0.3em;
	color: #110d32;
}
.zone-idees-cadeaux h3 {
	font-size: 1.7em; line-height:1em;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	color: #110d32;

	margin-top: 1.25em;
}

.zone-idees-cadeaux h4 {
	font-size: 1.25em; line-height:1em;
	margin-top: 0.6em;
	margin-bottom: 0.3em;
	color: #110d32;
}




.zone-idees-cadeaux li.zone_idee_1 {
	background-color: #FFF;
	border-radius: 3px;
	padding: 5px 10px;
    margin-bottom: 10px;

	display: inline-block;
	width: 335px;

	text-align: left;
    vertical-align: top;
}
.zone-idees-cadeaux li.zone_idee_1 ul.limiterLargeur {
	max-width: 500px;
}

.zone-idees-cadeaux li.zone_idee_1 .detail_faireSoiMeme {
	padding-left:3em;
	display:none;/*non visible par defaut*/
}

.zone-idees-cadeaux li.zone_idee_1 .detail_faireSoiMeme > .col3 {
		-webkit-column-width : 228px;
		-webkit-column-gap : 2.85em ;
		/*-webkit-column-rule: 1px dashed rgba(0,0,0,0.1);*/
	-ms-column-width : 228px;
	-ms-column-gap : 2.85em ;
	/*-ms-column-rule: 1px dashed rgba(0,0,0,0.1);*/
		-moz-column-width : 228px;
		-moz-column-gap : 2.85em ;
		/*-moz-column-rule: 1px dashed rgba(0,0,0,0.1);*/
	column-width : 228px;/*largeur colonne prevue (passera a 1 ou 3 colonnes selon largeur page)*//*valeur precise pour faire en sorte que ne passe pas de 3 a 2 col puis a nouveau 3 quand menu reduit en largeur*/
	column-gap : 2.85em ;/*largeur gouttiere*/
	/*column-rule: 1px dashed rgba(0,0,0,0.1);*/  /*solid / dashed / dotted*/
		/*pource http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html*/

	/*background-color: lightblue;*/
	text-align:justify;
	padding-bottom: 20px;/*marque mieux separation pour pousser à lire la colonne de droite et non le texte en-dessous*/
}

.zone-idees-cadeaux li.zone_idee_1 .zone_illustration {
	float: left; margin-right: 7px;
}

.zone-idees-cadeaux li.zone_idee_1 img.illustration {
	vertical-align: middle; height: 100px; border: 2px solid #FFF; /*border: 2px solid #e3f0ff;*/
    transition-property: transform;
	transition-duration : 0.5s ;
}
.zone-idees-cadeaux li.zone_idee_1 img.illustration:hover {
    cursor: pointer;
    transform: rotateZ(-6deg);
}
.zone-idees-cadeaux li.zone_idee_1.detail_1_actif img.illustration:hover {
    cursor:default;
    transform: rotateZ(0deg);/*si  detail_1_actif  => annule effet*/
}
.zone-idees-cadeaux .detailBase {
	font-size:0.85em; line-height:1.15em;
}

.zone-idees-cadeaux li.zone_idee_1 img.visuel_A { /*le grand sur la droite*/
	vertical-align: top; width: 50%;
	float: right; /*margin-left: 7px;*/
}
.zone-idees-cadeaux li.zone_idee_1 img.visuel_B { /*les petits dans info*/
	/*vertical-align: top;*/ width: 100%;/*on ajoutera max-width dans attribut style pour chaque image*/
	/*float: right; margin-left: 1.0em;*/
}
.zone-idees-cadeaux li.zone_idee_1 img.agrandissable { /*images agrandissable*/
    cursor: pointer;
	transition-property: width , transform;
	transition-duration : 0.5s , 0.5s ;
}
.zone-idees-cadeaux li.zone_idee_1 img.agrandissable:hover { /*images agrandissable*/
    transform: rotateZ(-1deg);
}
.zone-idees-cadeaux li.zone_idee_1 img.visuel_B.largeur_demi { /*les petits dans info*/
	width: 50%;
}
.zone-idees-cadeaux li.zone_idee_1 img.visuel_B.largeur_maxi { /*les petits dans info*/
	width: 100%;
    transform: rotateZ(0deg)!important;  /*meme si survol*/
}

.zone-idees-cadeaux .detail_1 {
	margin-bottom:14px; max-width: 1000px;
	display:none;/*non visible par defaut*/
}
.zone-idees-cadeaux li.zone_idee_1 big { /*juste la couleur est plus sombre (pas mis en gras, qui doit se faire en + si besoin)*/
	font-size:1em; /*utilise balise big => je reinitailise*/
	color: #110d32;
}

.zone-idees-cadeaux li.zone_idee_1 .zone_btnAjouterAMaListe {
    clear: both;
    text-align: center;
    padding-top: 0.65em;
}
.zone-idees-cadeaux li.zone_idee_1 .btnAjouterAMaListe {
    /*margin-top: 0.75em;*/
}
/*si detail_1 est visible (via classe detail_1_actif) :*/
.zone-idees-cadeaux li.zone_idee_1.detail_1_actif img.illustration {
	height: 150px;
}
.zone-idees-cadeaux li.zone_idee_1.detail_1_actif {
	width:100%;
	font-size: 1.1em;  line-height: 1.3em;
}
/* * * * * FIN idées cadeaux par jacocado * * * * */


/* * * * * liste cadeaux * * * * */
.zoneGC .lignes.coche_C .titreC { /*titre d'un cadeau coché*//*rq: la classe du fichier CSSpageCadeaux .titreCBarre n'a donc plus lieu d'exister*/
    color: #404040;
    font-weight: normal;
    text-decoration: line-through
}
.zoneGC.cochesVisibles .lignes.coche_C .titreC { /*titre d'un cadeau coché si le cadeau est dans un groupe dont le proprietaire voit les lignes cochées (texte vert)*//*rempalcer donc aussi ce qui a été attribué juste avant*/
    text-decoration: none;
    color: rgb(0, 166, 0);
   /* font-weight: bold;*/
}
.infoQuiCocheQuoi_txt { /*pour le texte d'info "X voit qui coche quoi"*/
    color: rgb(0, 166, 0); /*vert*/
}


/*mai2017 : suite à pb zone invisible mais empeche survol, cocher,… */
#formZoneCadeau, #formZoneGroupeCadeau, #formZoneCaseCadeau, #formZonePhoto
{
    background-color: lightcoral;
    background-color: rgba(255, 255, 255, 0);
}


/* * * * * FIN liste cadeaux * * * * */

.zone-beta-test {
    max-width: 98%; margin-top: 0em; margin-bottom: 0.8em;
    font-size:1.1em;
    text-align: left;
}
.zone-beta-test h1
{
    display: inline-block ;
    font-size:1em;
    background-color: #000;
    padding: 5px 10px;
    border-radius: 3px;

    float: left;
    margin-right: 1em;
    height: 2.5em;
    line-height: 2.5em;
    padding: 0px 10px;
}