/*mars2020 style pour uploadImage*/
/* Utilisation de l'unité rem plutôt que em car rem est fonction du body de la page alors que em est fonction du parent.
*/

#nomFichierTmp {
    XX_display:none;
    display:block;
    text-align: right;
}

.btnSupprVisuels {
    font-size:0.8rem;
    color:darkblue;
}

body.dragover .dropzone /*quand page survolée avec image à déposer, met en valeur les zones de dépôts possibles (hors page générale)*/
{   background-color:#505050;
    background-color: rgba(0, 182, 0, 0.15) ; /*vert #00b600 */
    /*voir aussi + bas pour aspect btn imgPlus*/
}
  body.choisir_dropzone .dropzone  /*quand posé image sur page (et non sur dropzone précise)*/
{   OFF_color: black;
    /*background-color: #505050;*/
    background-color: rgba(0, 182, 0, 0.5) ; /*vert #00b600 */
    OFF_min-height: 40px;
}
body.choisir_dropzone .dropzone:hover
{   cursor: pointer;
    /*background-color: #777;*/
    background-color: rgba(0, 182, 0, 0.75) ; /*vert #00b600 */
}

/*si max atteint => ne montre pas que c'est cliquable (même si toujours possible) :*/
  body.choisir_dropzone .dropzone.img_max
, body.choisir_dropzone .dropzone.img_max:hover {
    cursor: default;
    background-color: initial;
}
/* ne marche pas ! après le drop il faut recliquer sur une zone ! bizarre. Comme si après le drag&drop, quelque-chose empechait à la .dropzone de recevoir le :hover !!
body.choisir_imageARemplacer .dropzone:hover
{
    cursor: pointer;
    background-color: #771CC9 ;
    background-color: rgba(0, 182, 0, 0.5) ;
}*/

body.choisir_dropzone .dropzone input /*btn choisir fichier à masquer*/
{   display: none;
}

body .dropzone.dragover /*quand zone de dépôt précise survolée, met en valeur la zone*/
{   /*color:black;
    background-color: orange;*/
    background-color: #777;
    background-color: rgba(0, 182, 0, 0.75) ; /*vert #00b600 */
}
OFF_body .dropzone.drop /*quand image lâchée sur zone de dépôts précise, met en valeur la zone*/
{   color:black;
    background-color: #00b600;  /* = rgb(0, 182, 0); */
}

.infoMini {
    font-size:0.8rem; line-height:1.0rem;
}

#result {
    OFF_display: none;
}
.dropzone {
    display: inline-block; width:100%;
    OFF_background-color: #444;
    /*padding: 5px 10px;*//*OFF mars2020*/
    /*padding: 10px;*//*OFF mars2020*/
    margin: 1px 0;
}
body.v25 .dropzone {
  margin: 0px 0;
}
.dropzone .conteneur {  /*zone contenant l'image miniature (canvas et/ou balise img)*/
    float: right;
    /*margin: -8px -8px -8px 0;*//*OFF mars2020*/
    XXheight: 70px;  overflow: hidden; /*pour pas voir le canvas déborder et meilleur ajustement*/
    XXbackground-color: #FFF; /*si canvas trop petit pendant upload, fond blanc + esthétique pendant*/

    /*max-height: 70px; était utile si canvas mis ici pour limiter hauteur*/
    max-width: 280px; /*multiple de largeur d'une img (70px) => 280px = 4*70px pour 4 images en largeur*/
    text-align:right;/*pour que la 2e ligne soit aligné à droite (mais peut-être sympa aussi d'aligner à gauche)*/

    position: relative; /*car imgPlus en relative*/
    height: 18px; /*hauteur de imgPlus*/
    line-height: 0px;/*évite débordement en bas de 3 à 7px*/

    padding-left: 3px;/*mars2020 : ecarte contenu qui se trouve juste à gauche du conteneur, nom, detail, etoile,…*/
}

.dropzone .conteneur .imgPlus { /*zone du btn montrant qu'on peut ajouter une image (doit rester visible si déjà une image existante)*/
/*lié au masquage du input de type file :*/
    display: inline-block;
    position: relative; /*pour ne pas voir le input en dehors de la zone*/
    /* devient  absolute  si .dropzone.img_rempli (le parent doit donc etre en relative)*/
    border: 1px dashed #999;
    color: #999;
    border-radius: 3px;
    /*padding: 1px;*/
    width: 18px; height: 18px;
    padding:0; margin:0px;
    overflow: hidden; /*pour ne pas pouvoir cliquer (utilsier btn chosiir fichier) si clique en dehors de imgPlus*/
}

.dropzone .conteneur .imgPlus .picto {
    OFF_background-color: #d31409;

    text-align: center;
    width: 100%;
    display: inline-block;
    vertical-align: top;

    height: 18px;
    line-height: 16px;/*16px mieux que 18px (bizarre)*/
    font-size: 1.4rem;

    cursor:pointer;/*marche pas sous FF !*/
}
#formZoneCadeau .pictoDansTexteAjouterImage { /*dans texte de la zone d'ajout d'un cadeau, pour info*/
    border: 1px dashed #999;
    color: #999;
    border-radius: 3px;
    width: 18px;
    display: inline-block;
    height: 18px;
    line-height: 16px;
    font-size: 1.4rem;
    text-align: center;
    vertical-align: text-bottom;
}

.dropzone .conteneur .imgPlus input[type="file"] {
/*lié au masquage du input de type file :*/
    position: absolute;
    top: 0; right: 0;
    margin: 0;
    opacity: 0; /*background-color:hotpink;*/
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor:pointer;/*marche pas sous FF !*/

    /* Améliorations pour moins gener (même si invisible), au clic on peut voir une grande zone (sur iPad notamment) : */
    left: 0;
    padding-left: 18px;
    height: 18px; width: 18px;
    font-size: 10px;
}
/*si en mode spécial => empêche de pouvoir cliquer sur btn type file
Finalement, pendant mode choisir_imageARemplacer, j'autorise à choisir de mettre li'amge à une autre zone comme si en mode choisir_dropzone (donc tous reste accessible) => OFF_ pour éléments ci-après.
*/
OFF_body.choisir_imageARemplacer .dropzone .conteneur .imgPlus input[type="file"] {
/*lié au masquage du input de type file :*/
    /*background-color:steelblue;*/
    left: 500px; /*pour l'éloigner et donc ne plus être cliquable*/
}
/* + force ces valeurs pour éviter de prendre les valeurs lors du hover : */
OFF_body.choisir_imageARemplacer .conteneur .imgPlus {
    /* Même valeurs que  body.dragover .dropzone .conteneur .imgPlus  (mais avec important pour forcer) */
   /* border-color: #FFF !important;
    background-color:#333 !important;
    color:#FFF !important;*/
    opacity : 0 ; /*+ simple*//*rq: pas display:none car je veux que la place occupée par l'élément reste stable pour éviter désagrément visuel*/
}
/* + force le pointeur : */
OFF_body.choisir_imageARemplacer .conteneur .imgPlus .picto {
    cursor: default !important; /*remet fleche et non pointeur*/
}
/*FIN si en mode spécial => empêche de pouvoir cliquer sur btn type file*/


/*si img_rempli avec au moins 1 image :*/
.dropzone/* .conteneur*/.img_rempli .conteneur {
    height: inherit;
    /*margin: -10px -10px -10px 0;*//*OFF mars2020*/
}
.dropzone/* .conteneur*/.img_rempli  .conteneur .imgPlus { /*si zone avec déjà une image => change aspect btn +) et le place en bas à droite*/
    position: absolute;
    bottom: 0;
    right: 0;
    border: 0px;
    border-radius: 0px;
    background-color: #fcfbfb;
    color: #555;
    width: 20px;
    height: 20px;
}
.dropzone/* .conteneur*/.img_rempli .conteneur .imgPlus .picto {
    line-height: 20px;
}

/*si max déjà atteint, à l'affichage de la page, ne montre pas les zones imgPlus*/
.dropzone.img_max .conteneur .imgPlus {
    display: none;
}
/*FIN si img_rempli avec au moins 1 image :*/

/*quand page survolée avec image à déposer, met en valeur les zones de dépôts possibles (hors page générale)*/
body.dragover .dropzone .conteneur .imgPlus {
    border-color: #FFF;
    background-color:#333 ;
    background-color: rgba(0, 182, 0, 0.5) ; /*vert #00b600 */
    color:#FFF;
}

body .dropzone.dragover .conteneur .imgPlus
, body.choisir_dropzone .dropzone .conteneur .imgPlus
, body.choisir_imageARemplacer .dropzone .conteneur .imgPlus:hover
, .dropzone .conteneur .imgPlus:hover
{   /* petit bordure à gauche et en haut du btn imgPlus pour mieux distinguer de l'image (mais pas si utile) (ne serait que si .img_rempli  !!!: img_rempli sur dropzone désormais => à modifier si utilisé)
    border-style: solid;  border-color: #FFF; border-top-width: 1px;  border-left-width: 1px;
    */
    background-color:#00b600 ;
    color:#EEE;
    border-color:#EEE;
}

/*quand on doit choisir une image à remplacer par une autre :*/

/* on peut masquer les autre images qu'on n'a pas à remplacer/changer : */
body.choisir_imageARemplacer .dropzone .conteneur img.zoneImg {
    opacity : 0.5 ; /*rq: pas display:none car je veux que la place occupée par l'élément reste stable pour éviter désagrément visuel*/
}
OFF_body.choisir_imageARemplacer .dropzone.zone_pour_imageARemplacer .conteneur .imgPlus {
    display:none;
}
body.choisir_imageARemplacer .dropzone.zone_pour_imageARemplacer .conteneur img.zoneImg {
    border: 2px dotted orange;
    opacity:1;
    padding: 2px;
}
body.choisir_imageARemplacer .dropzone.zone_pour_imageARemplacer .conteneur img.zoneImg:hover {
    border: none;
    /*opacity:0.75;*/
    /*padding: 2px;*/
    cursor: pointer;

    /*remplace image par pico de rempalcement :*/
    border: 0px dotted orange;
    border-color: transparent; /*pour disparaitre progressivement (mais peu visible car la bordure se réduit déjà avec animation)*/
    opacity: 1;
    background-image: url("/images/commun/picto-changer.svg");
    padding: 0px;/*reinitailise tous les coté*/
    padding-top: 70px ; /* 70px=largeur img. Pourcentage pas ok, car occupera le max de la largeur possible du conteneur !! 100%;/*que un cote (gauche par exemple) = astuce qui permet de ne plus voir l'image src de balise img; Source : https://css-tricks.com/replace-the-image-in-an-img-with-css/ */
    background-size:75%;
    background-repeat: no-repeat;
    /*background-color: rgba(255,255,255 , 0.1);*/
    background-color: orange ; /*pour bien voir picto-changer.svg blanc*/
    background-position: center;
}
/*FIN quand on doit choisir une image à rempalcer par une autre*/


OFF_body .dropzone.dragover .conteneur .imgPlus:hover /*ne recoit pas le hover si déjà hover sur dropzon (bizarre)*/
, body.choisir_dropzone .dropzone .conteneur .imgPlus:hover
, .FFdropzone .conteneur .imgPlus:hover
{   background-color:#008400 ; /*#009700*/
    color:#FFF;
    border-color:#FFF;
    font-weight: bold;
}
.dropzone/* .conteneur*/.img_rempli .conteneur .imgPlus:hover .picto
{   /* ajustement (que si petit bordure à gauche et en haut du btn imgPlus)
    line-height: 18px;*/
}
.dropzone .conteneur .imgPlus:hover .picto {
}


  #result_uploadImage  /*contient le canvas principal*/
, #nomFichierTmp /*info image upload/…*/
{
    display: none;
}
.dropzone canvas { /*l'image miniature (canvas)*/
    display: none;
    opacity: 0.3;/*pour mieux voir que pas encore uploadée*/
    border-radius: 3px;
}
.dropzone .conteneur img {  /*l'image miniature (balise img)*/
                /*width: 70px;
                background-color:lightcoral;
                height: 70px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;*/
}

.dropzone canvas /*cette mini copie de canvas n'est pas forcément utilisée*/
{ /*pour avoir même largeur canvas et img*/
    /*OFF_width:70px;*/
    max-width:70px;  max-height:70px;
}
.dropzone .conteneur .zoneImg /*l'image miniature (balise img)*/
{
    cursor: zoom-in;
    width: 70px; height: 70px;

    /*animation:*/
    transition-property: padding, border ;
    transition-duration : 0.25s ;
}
/*ne met pas curseur zoom-in si déjà en train de faire cette action de drag&drop*/
  body.choisir_dropzone        .dropzone .conteneur .zoneImg
, body.choisir_imageARemplacer .dropzone .conteneur .zoneImg
{
    cursor: pointer;
}
.dropzone .conteneur.x3 .zoneImg /*l'image miniature (balise img) ou zone pointillée (zoneEnCours)*/
, .dropzone .conteneur.x4 .zoneImg
, .dropzone .conteneur.x5 .zoneImg
, .dropzone .conteneur.x6 .zoneImg
{
    AAwidth: 46px; AAheight: 46px;
}
.dropzone .conteneur.x3  /*largeur max selon nb éléments dans conteneur*/
, .dropzone .conteneur.x4
, .dropzone .conteneur.x5
, .dropzone .conteneur.x6
{
    AAmax-width: 138px; /*3 images * 46px de large = 138px*/
}
/*
PS : penser à adapter aussi le padding-… relatif à  body.choisir_imageARemplacer .dropzone.zone_pour_imageARemplacer .conteneur img.zoneImg:hover
*/

.dropzone .conteneur .zoneEnCours  /*l'image miniature (balise img)*/
{
    display: inline-block;
    /*background-color: #555;*/
    border: 2px dashed #00b600;
    /* border-radius: 75px; */
    padding: 4px;

    /*avec animation bordure : */
    background-image: url("/images/commun/upload-en-cours.gif?20191123");
    background-repeat: no-repeat;
    /*background-size: 145px 70px;
    background-position: -75px 0;*/
    background-size: 100%;
    border: none;
    /*legerement reduit pour pas coller bords :*/
    /*background-size: 137px 66px;
    background-position: -71px 0;*/
    border: 2px solid transparent ;
}
/* Pour pouvoir interrompre zoneEnCours (si bug par exemple), j'affiche un texte "STOP" : */
.dropzone .conteneur span.zoneImg.zoneEnCours {
    XXposition: relative; /*pour mieux placer le  content  (Annulé) ci-après*/
}
.dropzone .conteneur span.zoneImg.zoneEnCours::after
{
    content: "STOP";
    font-size: 0.7rem;
    color: #747474;
    /* position: absolute;  top: 0.8rem;  right: 9px; */
    text-align: center;
    width: 100%;
    margin-top: 6px;
    display: inline-block;/*pas utile si float utilisé*/
    /*pour éviter décalage au moement d'ajouté une 2e image :*/
     /*position: absolute; mais pb pour centrer*/
    float: left;
}
.dropzone .conteneur span.zoneImg.zoneEnCours:hover {
    cursor: pointer;
}
.dropzone .conteneur span.zoneImg.zoneEnCours:hover::after {
    color: orange;
}


/* * * * * zone pour miniature zoomée du visuel ligne cadeau * * * * */

#zoneZoomVisuel { /*zone qui accueille visuelZoom (dimension max de la page, mais à côté des miniatures)*/
    font-size: 1.0rem; /*rem ici*/

    display: block;
    background-color: rgba(101, 99, 98, 0.79);  /* en hexa = 656363 */
    position: fixed;
    top: 0px; /*left: 0px;*/
    right: 470px;
    z-index: 151; /*doit être derrière #zoneActionVolante mais devant menu */
    padding: 0px 2px 0px 0px; /* = valeurs de var padding_zoneZoomVisuel dans jacocado-upload.js*/
    width: 783px; height: 100%;
    text-align: right;
    opacity:1;
    overflow: hidden;
    line-height: 0; /*evite mini marge en bas de la légende*/
/*si aperçu miniature en attendant que image zoomée soit chargée :*/
    /*background-size: contain; background-repeat: no-repeat; background-position: center*/
/*Animation :*/
	transition: opacity 0.4s ease-in
              , width 0.4s ease-in
              , padding 0.4s ease-out
    ;
/* légende :
ease-in = depart lent
ease-out = depart rapide
*/
}
#zoneZoomVisuel.zoneNonVisible {
    opacity:0;
    width: 0px!important;
    padding: 0px ;
/* + lent pour masquer la zone*/
	transition: opacity 0.7s ease-in 0.7s
              , width 1.4s ease-in
              , padding 1.4s ease-out
    ;

}
#zoneZoomVisuel.zoneNonVisible.rapide {
/* + rapide pour masquer la zone (ex: si clic volontaire sur la croix de fermeture)*/
    transition-duration: 0.3s ;
    transition-timing-function: ease-out ;
}
#zoneZoomVisuel.zoneVisible {
/*	transition-duration: 1.4s, 1.4s, 1.4s ;  /* + lent pour masquer la zone*/
}

/* Contenu : */
#zoneZoomVisuel .contenu { /*contenu qui cotinet tout (image=visuelZoom, légende…)*/
    display: inline-block;
    position: relative;
    overflow: hidden ; /*évite micro débordement de l'image en bas par rapport à la légende (ex: si hauteur déborde de 0.5px)*/
    width: 100%; /*pour que la légende puisse déborder de la largeur de l'image (dans la limite de #zoneZoomVisuel*/
    /*max-width et top : placés en live selon place possible, selon visuelZoom*/

    /*évite que 2 clics à la suite (pour changer d'image => double clic), mette l'aspect de sélection sur l'image*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
#zoneZoomVisuel.legendeAuDessus .contenu {  /*si légende à placer au-dessus (≠par-dessus) de l'image*/
    padding-top: 1.4em; /* =line-height de .legende */
}
#zoneZoomVisuel.legendeEnDessous .contenu { /*si légende à placer en-dessous de l'image*/
    padding-bottom: 1.4em; /* =line-height de .legende */
}
/*si aucun des 2 => légende sera placée par-dessus (≠au-dessus) l'image (et en bas)*/

/* Légende : */
#zoneZoomVisuel .contenu .legende {
    line-height: 1.4em; /* =padding-top/bottom de ##zoneZoomVisuel.legendeAuDessus/.legendeEnDessous */
    bottom: 0; /*par défaut : légende sera en bas*/
    z-index: 153; /*pour être au-dessus de l'image (même si div placé avant img)*/

    display: block;
    position: absolute;
    right: 0;
    width: 100%;
    text-align: right;
    padding: 0px 10px; /*padding vertical à 0 (pour que padding-top de .contenu soit fixe) et line-height augmenté*/
    color: #FFF;
    text-shadow: 0px 0px 4px #000 , 0px 0px 4px #000 ; /*par défaut : double ombre franche car par-dessus image*/
    /*background-color: rgba( 0, 0, 0, 0.25 );*/
/* Sur une seule ligne + pour mettre "…" à la fin */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*selon pos_visuelZoom (si préférence de centrage de l'image, donc aussi de la légende)*/
  #zoneZoomVisuel .contenu.centrage
, #zoneZoomVisuel .contenu.centrage .legende {
    text-align: center;
}

#zoneZoomVisuel.legendeAuDessus .contenu .legende { /*si légende au-dessus et en haut*/
    bottom:inherit; /*pour enlever la valeur 0 mise par défaut*/
    top:0;
}
#zoneZoomVisuel.legendeEnDessous .contenu .legende { /*si légende en-dessous et en bas*/
}
  #zoneZoomVisuel.legendeAuDessus .contenu .legende
, #zoneZoomVisuel.legendeEnDessous .contenu .legende {
    text-shadow: 0px 0px 4px #222; /*ombre plus légère car pas par-dessus image*/
}
/*si aucun des 2 => légende en bas par défaut*/

/* Visuel zoomé : */
#zoneZoomVisuel #visuelZoom { /*balise img située dans zoneZoomVisuel (limage en elle-même)*/
    position: relative;/*permettra d'ajuster position top mise en live*/
    min-width: 150px; /*permet de voir micro image (et de pouvoir quand-même rendre accessible le btn suppr)*/
    /*max-width et top : placés en live selon place possible*/
}

/* Bouton supprimé visuel */
#OFF_zoneZoomVisuel .contenu .btnPicto { /*spécification en + des infos de .btnPicto.absolu (JC_CSS_1.css) : finalement à mettre via balise style direct dans code HTML car cahque élément aura ses propres particularité */
    z-index: 155;/*par-dessus si chevauchement*/
    OFF_bottom: 0; /*picto suppr placé en bas par défaut*/
    left: initial; /*positionné en bas à gauche mais de la photo et non de toute la largeur*/
}
#OFF_zoneZoomVisuel.legendeAuDessus .contenu .btnPicto { /*si picto suppr à metre en haut*/
    bottom:inherit; /*pour enlever la valeur 0 mise par défaut*/
    top:0;
}

/* * * * * FIN zone pour miniature zoomée du visuel ligne cadeau * * * * */






/* *** * * ** * ** * zoneActionVolante  * ** * ** * */
/* plutot à mettre dans fichier css de base */


/*source : lcve*//*ajustement /*nov2019*/
#zoneActionVolante { /*zone volante (avec bouton valider) sans rien car direct sur la page*/
    display:none; /*non visible par défaut*/

    text-align: center;

	-webkit-transition-property:box-shadow , border-top ; /*pour animer disparition ombre*/
	-moz-transition-property:	box-shadow , border-top ; /*pour animer disparition ombre*/
	-ms-transition-property:	box-shadow , border-top ; /*pour animer disparition ombre*/
	-o-transition-property:		box-shadow , border-top ; /*pour animer disparition ombre*/
	transition-property:		box-shadow , border-top ; /*pour animer disparition ombre*/

	-webkit-transition-duration:0.4s , 0.4s ;
	-moz-transition-duration:	0.4s , 0.4s ;
	-ms-transition-duration:	0.4s , 0.4s ;
	-o-transition-duration:		0.4s , 0.4s ;
	transition-duration:		0.4s , 0.4s ;

	position:relative;
	border-top: 0px solid #666; /*nov2019*/
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
	background-color:  transparent ;
    color:#ffa500;

	padding:2px 0px; /*nov2019 : 2px au lieu de 7px*/
	width: 100%;
	bottom: 0;
	opacity:1;

	left:0; /*sert a la parage parametrage article (car btn decale dans zone OD/OG)*/
	clear: both; /*idem : pour ne pas se retrouver dans colonne OG mais bein en-dessous de OD et OG*/
	/*z-index:5;*/
    z-index:300;/*doit être devant #zoneZoomVisuel et devant menu */
}

#zoneActionVolante.elementFixe { /*zone volante (avec bouton valider) avec ombre*/
	position:fixed;
	-webkit-box-shadow: 0px -5px 8px rgba(150, 150, 150, 0.75);
	-moz-box-shadow: 0px -5px 8px rgba(150, 150, 150, 0.75);
	-ms-box-shadow: 0px -5px 8px rgba(150, 150, 150, 0.75);
	box-shadow: 0px -5px 8px rgba(50, 50, 50, 0.75);
	background-color: rgba(100, 100, 100, 0.92);/*gris sombre*//*nov2019*/
	border-top: 1px solid #666;/*nov2019*/

	/*margin-left: -5px;*//*si body a padding = 5 => la zone volante est decalee => corrige en negatif*//*oct2015: plsu utile depuis que left:0; mis dans #zoneActionVolante*/
}

/*texte blanc et fond de la zone en couleur (même si pas placée en fixed car doit bien se voir)*/
  #zoneActionVolante.vert
, #zoneActionVolante.orange
, #zoneActionVolante.rouge {
    color:#FFF;
    border-top: none;
}
#zoneActionVolante.vert {
    background-color: #009200;  /* + sombre que vert classique : #00b600*/
}
#zoneActionVolante.orange {
    background-color: #FE8406;  /* + sombre que orange classique : orange*/
}
#zoneActionVolante.rouge {
    background-color: #98120A; /* + sombre que rouge classique : #00b600*/
}
#zoneActionVolante.violet {
    background-color: #110d32; /* + sombre que violet classique : #771CC9*/
}

#zoneActionVolante .infoDansZoneVolante {
    display: inline-block;
    max-width: 750px;/*nov2019*/
    font-size: 0.9rem;
    line-height: 1.15em;
    text-align: left;

    margin: 0;
    padding: 4px;
}

#zoneActionVolante .infoDansZoneVolante .visuelMsg {
    float: left;
    width: 100px;
    /*padding: 0 3px 5px 3px;*/
    margin-right: 4px;
}
#zoneActionVolante .infoDansZoneVolante span.titre { /*titre*/
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin-bottom:0.3em;
}
#zoneActionVolante .infoDansZoneVolante .txt { /*texte du message*/
    display: block;
    /* display: inline-block;  float: left;*/
    padding: 0px 5px;
}
#zoneActionVolante .infoDansZoneVolante strong { /*mot important*/
    font-size: 1.0em;
    color: #771CC9;
}
#zoneActionVolante.rouge .infoDansZoneVolante strong { /*mot important*/
    color: yellow; /*plus visibel avec fond rouge*/
}
#zoneActionVolante.violet .infoDansZoneVolante strong { /*mot important*/
    color: yellow; /*plus visibel avec fond rouge*/
}

#zoneActionVolante .infoDansZoneVolante .btnAnnuler { /*btn annuler*/
    /*font-size: 1.0em;*/
    float: right;
    margin-left: 12px;
    /*padding: 10px 4px;*/
}
#zoneActionVolante .infoDansZoneVolante .btnPicto.ferme {
    margin-top: -1.1em; /*sort un peu du cadre*/
    background-color: #000;
}
#zoneActionVolante .infoDansZoneVolante .btnPicto.ferme .picto {
    transform: scale(0.9); /*légèrement réduit*/
}



#zoneActionVolante a , #zoneActionVolante_vA a ,
#zoneActionVolante input , #zoneActionVolante_vA input { /*les boutons dans zone en bas (ok, annuler)*/
	display:inline-block; /*a mettre, peut-etre, a tous les boutons*/
	OFF_margin: 2px 18px ;  /*marge horizontale pour ecarter les boutons*/
	margin: 2px 5px ;  /*marge horizontale pour ecarter les boutons*/
	OFF_padding: 10px;
	OFF_font-size: 0.95rem; /*grossir un peu les boutons*/
	OFF_position:relative; /*oct2015: sert au bouton valider de la page paremetrer article pour decaler avec left*/
}

/* *** * * ** * ** * FIN zoneActionVolante  * ** * ** * */

/*pour afficher/masquer messages d'info (peu important. jsute pour mieux voir étape)*/
/*body.modeNonProg .siProg {
    display: none;
}*/
body .siProg {  /*par défaut : masqué*/
    display: none;
}
body.modeProg .siProg { /*pour voir les zones que je cache en mode normal*/
    display: initial;
}



/* * * * * * * * * * * RESPONSIVE * * * * * * * * * * */

@media (min-width: 570px) { /*le menu NE passe PAS en horizontal*/
/*l'image ne doit pas utiliser le  top  mis en live si plein écran (cf "si affichage de zoneZoomVisuel en plein écran ou à gauche des miniatures" dans jacocado-upload-01.js)  */
    #zoneZoomVisuel #visuelZoom {
        top: initial !important;
    }
}


@media (max-width: 569px) { /*le menu passe en horizontal*/

/*réduit taille miniature*/
    .dropzone .conteneur .zoneImg {
        height: 40px;
        width: 40px;
    }

/*si trop étroit, une image zoomée occupe alors toute la place à l'écran (et ne se met plus à gauche des miniatures)
    le visuel sera centré, le btn suppr sera tout en bas, la légende sera tout en bas
*/
    #zoneZoomVisuel {
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        right: initial !important;
    }
    #zoneZoomVisuel.zoneNonVisible {
        height: 0;/*pour masquer la zone (sinon, resterait avec opacity à 0 mais toujours présent sur la page en 1er plan*/
    }

    #zoneZoomVisuel .contenu {
        max-width: 100% !important;
        min-width: 100% !important;
        /*toute la hauteur pour pouvoir centrer image (et btn suppr toujours tout en bas à gauche) :*/
        top: initial !important;
        height: 100%;
        text-align: center;/*centre l'image*/
    }

    #zoneZoomVisuel #visuelZoom {
        max-width: 100% !important;
    }

    #zoneZoomVisuel .btnPicto.ferme {
        margin-top: 10px !important;  margin-left: 10px; /*décale pour être moins au bord*/
        padding: 7px;  /*grossi btn pour etre mieux cliquable*/
    }
    #zoneZoomVisuel .btnPicto.suppr {
        margin-bottom: 10px !important;  margin-left: 10px;
        padding: 7px;
        left: 0 !important; /*car  left:initial  était ajouté lors de la création de l'element */
    }
      #zoneZoomVisuel .btnPicto.ferme .picto
    , #zoneZoomVisuel .btnPicto.suppr .picto {
        transform: scale(1.3); /*agrandi picto suite augmentation padding*/
    }

    #zoneZoomVisuel .contenu .legende {
        padding-left: 40px;/*pour pas taper dans le bouton supprimer*/
        padding-right: 40px;/*pour équilibrer avec padding-left*/
        text-align: center;
    }

/*zoneActionVolante*/
    #zoneActionVolante .infoDansZoneVolante {
        width: 100%;
        /*font-size: 0.8rem;*/
    }


}