.champCommentaireAEcrire /* chp pour taper son commentaire */
{ border: solid 2px #b75c00; background-color: #fffbe2; color:#b75c00; /*height=30px; ok pour IE mais pas ailleurs*/
padding: 2px 0px 2px 4px;
}

.ligneCom /* pour laisser espace entre les lignes de com */  { margin: 0 0 5px;
	color: #b75c00; font-size: 13px; font-family: Calibri, Optima, "Gill Sans", "Trebuchet MS"; /*juin2016: forme ici plutot que dans "div div div" !! */
}
body.v25 .ligneCom{
  font-size: 1rem;
  line-height: 1.2em;
}
.ligneComNouveau { background-color: yellow; } /*jaune, pour nouveau com*/
.ligneComRecent {background-color: #ffff87; } /*demi jaune, pour com recent*/
.ligneComDerniereConnexion {background-color: #fffbc3; } /*jaune faible, pour com depuis derniere connexion*/

.ligneCom span.txtDuCom { /*texte d'un com*/
	word-wrap: break-word; overflow-wrap: break-word; /*pour couper mot trop long (ex: adresse internet trop longue)*/ /*il est dit que overflow-wrap rempalcera word-wrap (bien que pas ok sous Safarai par ex)*/
	word-break: break-word;  /*oct2016: iPhone (4)*/
}
.ligneCom.ageCom2 span.txtDuCom { /*couleur du texte du com selon age du com*/
	color:#b88a5c ; /*legerement + clair*/
}
/*pas de ageCom3 pour bien avoir une nette difference entre com vieux et recent*/
.ligneCom.ageCom4 span.txtDuCom { /*clairement + vieux*/
	color:#b89c81 ; /*+ gris que marron*/
}
.ligneCom.ageCom5 span.txtDuCom { /*tres vieux com*/
	color:#b8b3ae ; /*très gris*/
}

.ligneCom:hover span.txtDuCom { /*au survol, on ravive la couleur pour bien reussir à lire*/
color: #b75c00; /*marron normal*/
}

.ligneCom span.txtDuCom { /*pour animer la coloration*/
-webkit-transition-property:color ;
-moz-transition-property:	color ;
-ms-transition-property:	color ;
-o-transition-property:		color ;
transition-property:		color ;
-webkit-transition-duration:0.7s ;
-moz-transition-duration:	0.7s ;
-ms-transition-duration:	0.7s ;
-o-transition-duration:		0.7s ;
transition-duration:		0.7s ;
}


.commentaire1Aspect /* couleur, contour et fond du commentaire 1 - celui d'un cadeau */   { font-size: 11px; background-color: #fffbe2; margin: 0 0 3px; padding: 1px 0 1px 1px; border: solid 3px white }
.commentaireListeAspect { border: solid 2px #f7e1bd } /*#e2c8a2  #f7e1bd*/
.commentaireMargePlus /* couleur, contour et fond du commentaire 1 - celui d'un cadeau */ { padding: 6px 1px 3px 10px }
.commentaireGauche /* pour aligner a gauche. ajouter clear: left pour que ce soit ok si pls com prives */  { float: left; clear: left; }
.zoneGC .zonesComGC div.commentaireGauche { margin-left: 12px; } /*avec div pour ne cibler que ceux des com prives*/
.commentaireDroit { float: right }
.commentaireDimension50 /* largeur de 50% */ {
	width: 47.5% ;
	max-width: 362px;/*fev2015: max si URL trop longue*/
}
.commentaireDimension75 /* largeur de 75% */ {
	width: 85% ;
	max-width: 500px;/*fev2015: max si URL trop longue*/
}
.commentaireDimension100 /* largeur de 50% */ {
	width: 100% ;
	/*max-width: 362px;*//*fev2015: max si URL trop longue*/
	max-width: 675px;/*mai2015: max si URL trop longue*/

}
.iconePlus /* icone + qui se trouve entre icone de visibilite de monde et la pers */ { vertical-align: top; }
.iconePriveCom { /*picto prive pour zone commentaire privee*/
background-image: url("../images/com/pictoPrive.png"); background-repeat: no-repeat; width: 34px; height: 11px; }
.iconeMondeCom /* icone de visibilite du monde dans les com */
{ background-image: url("../images/com/pictoTous.png"); background-repeat: no-repeat; width: 16px; height: 16px;}
.iconeMondeComSauf /* icone de visibilite du monde dans les com */
{ background-image: url("../images/com/pictoTousSauf.png"); background-repeat: no-repeat; width: 16px; height: 16px;}

.btnModifierCom, .btnSupprimerCom { background-repeat: no-repeat; margin: 0 0 0 -3px; XXposition: absolute; padding: 0 0 0 15px; width: 15px; height: 15px; vertical-alignXXX: top; }
.btnModifierCom /* le btn modif 1 com. absolute permet d'afficher l'image MAIS ne va pas à la ligne si besoin => padding permet tout ok (à tester sous IE). SAuf que si espace à la fin de la ligne=> le btn n'apparait pas! Et si pas d'espace => renvoi le dernier mot à la ligne avec le btn. => ajouter espace + espace insécable et décalé margin à -3px. Sous IE, vertical-align fait un decalage qd survol. */ { background-image: url("../images/btnModifierMini.png"); background-repeat: no-repeat; margin: 0 0 0 -3px; XXposition: absolute; padding: 0 0 0 15px; width: 15px; height: 15px; vertical-alignXXX: top; }
.btnSupprimerCom /* idem mais pour le btn suppr 1 com. */ { background-image: url("../images/btnSupprimerMini.png"); }

.btnNouveauCom /*float suffit pour afficher l'image. */ { background-image: url("../images/icones1/bulleComAjouter2.png"); background-repeat: no-repeat; margin: -12px 0 3px; width: 15px; height: 14px; float: right; vertical-align: bottom; }
body.v25 .btnNouveauCom {
  width: initial;  height: initial;
  background-image: none;  /*aucune image en fond car picto via fontello*/
  
  background-color: rgb(34, 200, 21);
  border-color: rgb(34, 200, 21);
  border-radius: 4px;
  padding: 2px 5px ;
  padding-right: 2px ; /*Meilleur équilibre visuel (car picto à droite)*/
  color: #FFF;
  background-position: right 3px center; /*3px depuis la droite et centré verticalement*/
  display: inline-block;
}
body.v25 .btnNouveauCom::before{
  content: "Ajouter un commentaire" ;
}
body.v25 .boutonsLigne .btn.btnNouveauCom /*pour zone boutonsLigne (pas dans les commentaires en eux-même) */
{
  float: none;/*évite float utilisé dans la zone des commentaires. Voir .btnNouveauCom*/
  margin-top: initial;/*évite décalage de -12px utilisé dans la zone des commentaires. Voir .btnNouveauCom*/
}
body.v25 .boutonsLigne .btnNouveauCom::before{
  content: "Commenter" ;
}

.btnNouveauCom:hoverXX /*que pour safari car pas sur balise a. */ { background-image: url("../images/icones1/bulleComAjouter.png"); }
.iconeBtnNouveauComLigne /*pour icone permettant ajout d'un com pour ligne ou groupe ou liste. Icone mise a gauche au survol*/ { background-image: url(../images/icones1/bulleCom.png); background-repeat: no-repeat; width: 15px; height: 14px; }

.iconeBtnNouveauComLigne:hoverXX /*pour icone permettant ajout d'un com pour ligne ou groupe ou liste. Icone mise a gauche au survol*/ { background-image: url(../images/icones1/bulleComAjouter.png); }
.photoComPar /* photo indiquant par qui est ecrit le com */ { margin: 0 0 0 -20px; padding: 0 0px 0 0; width: 16px; height: 16px; /*-moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px;*/ }
.photoComPour /* photo indiquant pour qui est ecrit le com. picto en haut a droite montrant par qui est visible ce com */ { margin: 0; width: 16px; height: 16px; }
div div div  { /*color: #b75c00; font-size: 13px; font-family: Calibri, Optima, "Gill Sans", "Trebuchet MS";*//*juin2016: absurde => mis dans .ligneCom*/ }
.zonesComCadeau /*pour decaler les zones de com par rapport a la ligne d'un cadeau*/  { width: 100%; float: right; padding-right: 5px; }
.zoneGC .zonesComGC /*pour decaler un peu a droite les zones de com d'un GC*/   { padding: 0px 5px 0px 9px; width: 100%; float: right } /*pour com de GC*/
#zoneComListe .zonesComGC /*pour decaler un peu a droite les zones de com d'un GC*/   { padding: 0px 0px 0px 3px; width: 100%; float: right } /*pour com de liste*/

.titreComGC    { background-image: url("../images/objetsDecoration/fondDegradeListeO-E.png"); background-repeat: no-repeat; background-position: 0 center }
.titreComGC_txt, .titreComGCListe_txt { color: #b75c00; font-size: 11px; margin-right: 10px; margin-left: 5px; }
.titreComGCListe_txt  { /*complement*/ font-size: 13px; }
.titreComGC_zone  { margin-top: 10px }
/*le texte du titre du genre Les commentaires de ce groupe*/