@charset "UTF-8";
/*
Les couleurs :
#00b9f0 : bleu LCVE (cliquable)
#025d7b : bleu sombre (survol)
#F7F7F7 : gris tres leger (ligne de lot du stock)
#A49E22 : vert (ex: element actif)
vert sombre (ex :bloc, picto) : green
rgb(234, 234, 48) : Or
orange  : orange
orangered : rouge
rgba(127, 189, 207, 0.28)  : gris #EEE survolee => devient legerement bleu gris (ex: ligne cumul dblClick du stock)  si cliquable, sinon juste assombri en #DDD pour bien voir la ligne survolee (ex: listing_K)  ou bleu sombre si ligne claiquable (ex: choix client dans 1 doc ou param article)
*/

* { /*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: 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*/
}

html { height:100%; } /*sinon un element table, par ex, ne pourra jamais occuper toute la hauteur de la page (page accueil par ex).*/
body {
	/*height:100%;*//*epoque ou je voulais que le pied de page soit en bas meme si page pas remplie*//*3dec2013:suppr car si la page deborde de la fenetre en hauteur, le body reste limite a la hauteur de la fenetre. De se fait, un menu affiche ne se masquera pas en cliquant dans le vide car le body s'arrete plus haut.*/
	line-height: 1em; /*corrige bootstrap qui met 20px*/
	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)*/
	padding: 0 5px;/*avr2014: pour que si on reduit un peu, ne touche pas les bords (si encore + etroit : enlevera cette marge) )*/
} /*idem que pour html*/

.taille-075 { /*75% de 1rem (ex: pour agrandir texte des boutons qui sont dans sous-partie, donc trop petit. ex: statK4)*/
	font-size: 0.75rem!important;
}

table {
    border-collapse: collapse; /*enleve espaces entre cellule du tableau*/
}
.overflowSuppr_OFF { /*certain bloc affiché/masqué via Jquery (ajoute overflow:hidden) ont des problèmes d'affichage quand ceux-ci contiennent des element avec opacity (ex: btn modif suiviK)*/
    overflow: auto !important; /*ou initial*/
}

.smooth { /*jan2016*/
	-webkit-font-smoothing: subpixel-antialiased; /*ameliore lisibilite sous Safari*/
}
.smoothFin { /*idem mais laisse le texte fin*/
	-webkit-font-smoothing: antialiased;/*evite mini bug de changement de graisse (dans Safari) quand texte clair sur fond sombre. Attention : autres navigateurs sont plutôt gras*/
}

.exposant { /*jan2016: pour exposant*/
	line-height:1em;
	/*si utile : vertical-align:text-top ; font-size: 70%; line-height: 80%; */
	font-size: 70%;
}

div.texteInfo p , div.texteErreur p, div.texteReussi p, div.texteAlerteMax p
, span.texteInfo p , span.texteErreur p, span.texteReussi p, span.texteAlerteMax p
, .zoneConfirmation p { /*les paragrpahe des bloc de texte d'info (toutes couleurs)*/
	line-height: 1.3em;/*reduit interligne des paragraphes*//*fev217: de 1.2 a 1.3*/
}
div.texteInfo p:first-child , div.texteErreur p:first-child , div.texteReussi p:first-child  , div.texteAlerteMax p:first-child { /*ou first-of-type*/ margin-top: 0; }
div.texteInfo p:last-child , div.texteErreur p:last-child , div.texteReussi p:last-child , div.texteAlerteMax p:last-child { /*ou last-of-type*/ margin-bottom: 0; }

button {
	background-clip: padding-box;  /*evite pb de debordement du contour sous FF*/
}

label
, .main
, .btnBlocId
, input[type="submit"]
, input[type="button"]
/*, .bouton OFF 02/01/2022 poru n° RK stat ok dans FF poru copier/coller tableur*/
, .boutonArticles
, .carousel { /*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)*/
}

.selectionPossible
, .btnBlocId.idK /*n° client dans listing selectionnable pour copier/coller facile vers tableur*/
{ /*reautorise selection du texte de l'element si exception (ex: bloc fiche pour valider)*/
	-webkit-user-select: text;  -moz-user-select: text;  -ms-user-select: text;  -o-user-select: text;  -khtml-user-select: text;  user-select: text;
}

table thead tr { /*ligne de titre classique*/
	color:#777
}

tr.ligneAjoutee
, tr.ligneModifiee
{
    color: green !important; /*pour mettre en valeur une ligne ajoutée ou modifiée (ex: suiviK)*/
}

#pictoProduitStar.pictoActif { /*etoile active pour produit star (dans param article)*/
	color: #00b9f0;
	font-size: 0.9em;
	padding: 2px 4px;
}

body.style2 .articles li.produitStarActif
, .articles li.produitStarActif { /*le produit star de la page accueil*/
	/*box-shadow: 4px 4px 15px rgba(150, 150, 150, 1);*/ /*une ombre + importante*/
	z-index: 99;/*pour que ombre passe devant autres articles (mais attention, mais pas devant popup details)*/
	/*il faut garder couleur fond anime pour survol article :*/
	/*transition-property: box-shadow		, background-color;
	transition-duration: 0.5s			, 0.7;
	transition-timing-function: ease-out, ease ;
	*/
	/*mai2015: autre style sans ombrage :*/
	background-color: rgba(3, 176, 226 , 0.1);/*fonc bleu legeremtn colore poru mettre en avant*/

}


/* btn effacer (petite croix) au bout d'un chp :*/

.zoneChpEtBtnEffacer.chpRempli .btnEffacer /*visibel que si chpRempli*/
{    display: inline-block;
}

.zoneChpEtBtnEffacer .btnEffacer
, #menuRechercher #zone_entete_rechercher .btnEffacer
{ /*btn effacer champ recherche*/
    background-image: url("/images/pictos_basiques/picto-effacer-champ.svg");

    background-position: center center;
    background-repeat: no-repeat;
    /*position: absolute;*/
    padding: 0;
    margin-top: 0px;
    opacity: 0.5;
    cursor: pointer;
    display: none;

    vertical-align: middle;

    OFF_CAR_QUE_SI_MENU_CSS_height: 100%;
    OFF_CAR_QUE_SI_MENU_CSS_width: 48px;/*taille de la zone cliquable*/
    OFF_CAR_QUE_SI_MENU_CSS_margin-left: -48px;/*decale pour pas etre sur btn OK*/
    OFF_CAR_QUE_SI_MENU_CSS_background-size: 38px;

    /*dimensions pour champ normaux*/
    width: 1.8em;  height: 1.8em; /*1.8 = line-height des champs normaux. ex: input[type="text"]*/
    margin-left: -2.2em; /*pour pas être trop contre le bord droit du champ*/
    background-size: 1.4em;
}
.zoneChpEtBtnEffacer .btnEffacer:hover
, #menuRechercher #zone_entete_rechercher .btnEffacer:hover
{ /*btn effacer champ recherche*/
    opacity: 1;
}

/* FIN btn effacer (petite croix) au bout d'un chp*/


.contourLumineux { /*ex: bloc choixPackArticles*/
    /*contour lumineux :*/
  box-shadow: 0px 0px 6px 0px #FFCC00;  /*jaune = #FFCC00 = rgba(255, 204, 0, 1) = */
}



/* * * * permet affichage param avec bon alignement (partie existe aussi dans document.css) * * * */
.unTableau th.th_ligneParam_titre {
	/*font-size: 0.85em;*/ /*mis + loin dans ligneParam*/
	padding-right: 5px; /*les td ont un padding donc il faut ausis le mettre pour les titres (ex: dans panier)*/
}
.ligneParam , .ligneParam_titre {
	width: auto;
	float: right;
	 /*en + ou different de document.css sauf cette valeur : 2 au lieu de 3*/
	margin-top: 2px;
	text-indent: 0em;
	white-space: nowrap; /*l'ensemble du bloc des param doit rester sur 1 seule ligne*/
	clear: right;/*va a la ligne si y'a un prix en bout de la ligne DAL (evite de mettre un <br> quand on affiche "PU HT=xx")*/
}
.ligneParam , .unTableau th.th_ligneParam_titre { /*partie englobant tous les parametres d'une ligne DAL (doit se mettre en bout de ligne plutot qu'en haut) */
	font-size: 0.85em;
	line-height: 1.1em;/*reduit l'interligne*/
}
.ligneParam span , .ligneParam_titre span { /*chaque param dans un bloc poru tous avoir meme largeur (alignement parfait entre diverse ligne et peut aller a la ligne si texte trop grand)*/
	/*background-color: lightgreen;*/
	width: 4.5em; /*peut etre different dans document.css*/
	display: inline-block;
	padding-right: 1px;
	text-align: right;
	vertical-align: text-top;
	font-family: "courier new";	font-size: 1em;
	white-space: normal; /*la valeur de chaque case peut aller a la ligne (pour texte exceptionn tel que "add unique jusqu'a +2,75"*/
}
.ligneParam span:nth-child(1) { /*1er param Ro/K. peut deborder davantage car premier colonne donc ne fait provoque pas de decalage*/
	width: auto; max-width: 7em; min-width: 5em;
}
.ligneParam span:nth-child(5) , .ligneParam_titre span:nth-child(5) { /*la colonne axe peut etre un peu plus etroite*/
	/*background-color: lightgreen;*/
	width:4em;
}
.ligneParam span.italique { /*personnalsier la mise enforme de certain param (si Kerato, Dc ou puissance lunette pour param autre que Ro et Dt)*/
	color: #777;
}

/*exception si ligneParam pour EEPO dans Divers (pas besoin de float,…) - 31/07/2023*/
  body.divers_D1 .ligneParam
, body.divers_D1 .ligneParam_titre
{
	float: none;
	margin-top: initial;
	clear: none;
  font-size: 12px; /*en px pour avoir meme taille entre titre tableau et valeurs dans tableau*/
}
  body.divers_D1 .ligneParam span
, body.divers_D1 .ligneParam_titre span
{
	vertical-align: initial;
}
body.divers_D1 .ligneParam span:nth-child(1) { /*1er param Ro/K. Puisque float a été désactivé via  body.divers_D1 .ligneParam  j'enlève exceptions, */
  min-width: initial;
  max-width: initial;
  width: 4.5em; /*remet valeur de base de  .ligneParam span  (pour ne plus avoir valeur "auto"*/
}
body.divers_D1 #contenuAffichage.S_mesEEPO ul.tableau1 .zoneIll {
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
  line-height: 0; /*evite marge en bas*/
}
body.divers_D1 #contenuAffichage.S_mesEEPO ul.tableau1 .zoneIll > img {
  width: 40px;
  border-radius: 3px;
}



  .ligneManagement
, .lignePS
, .ligneLot
, .ligneFranchise , .ligneRemise
, .ligneRCN { /*ligne pour page d'un doc*/
	/*display: inline-block;*/ width:100%; /*permet d'occuper toute la largeur tout en laissant les parametres (classiques) se postionner correctement au-dessus (si fenetre etroite)*/ /*l'inconvenient par rapport a block : pousse a occuper toute la largeur de la fenetre (selon quantite de texte d'une ligne). Avantage : les parametres vont a la ligne et poussent les Parametres Speciaux, management sectoriel,... en dessous.*/
	/*avr2014: ajouter clear:both a block poru avoir les avantages sans les inconvenient des 2 techniques ci-dessus*/
	display: block; clear: both;/*les PS passent bien dessous*/
	padding-left: 2.3em;/*ATTENTION : l'espace dependra de la taille de la police*/  /*preferable a text-indent car, si plusieurs lignes, seront l'une sous l'autre (text-indent ne decalant que la 1ere ligne)*/
}
.ligneRCN {
	padding-top:0.3em;
}
.ligneRCN span:nth-child(2) { /*comme  body fieldset#zone-documents span.RCN span:nth-child(2)   dans document.css*/
	font-size: 0.9em;
	/*padding-left: 2.3em;*/text-indent: 0;/*juil2018: si pls lignes a diverses dates, decalage bizarre*/
	display: block;
	line-height: 1.1em;
}

.ligneLot /*(ex: dans panier, ligne de lot pour mettre dans une meme partie le libelle n° lot et les lots concerne.) */
, .ligneFranchise , .ligneRemise {
	/*background-color: lightblue;*/
	padding-top: 5px;
	/*YYYtext-indent: 0em;*/
}
body.choisirLotBLRK .ligneLot {
    font-size:1.2em;
}

/*pour parametres speciaux affiches dans BL, par ex*/
.lignePS {
}
.lignePS span { /*contient le libelle ET la valeur*/
	white-space: nowrap;
	margin-right:7px;/*pour espacer les parametres*/
	font-size:0.8em;
}
.lignePS span:last-child { /*pour dernier PS*/
	margin-right:0;/*marge inutile pour le dernier eleement*/
}

.ligneManagement span { /*contient le libelle ET la valeur*/
	font-size:0.8em;
}



/* * * * FIN permet affichage param avec bon alignement * * * */







.ENCOURS { /*objet pas disponible en cours de construction sur le site, par le programmeur*/
opacity: 0.1;
}
/*.infoPROG*/ pre {
    margin: 0.2em 0;
    padding: 2px 6px;
    margin:0px;
    width: 100%;
/*même valeurs que  .infoPROG  ci-dessous : */
    color:#69b391;
    background-color:#025003;/*un peu différent pour faire distinction justement*/
    border-bottom: 1px dashed #20372d ;
}
.infoPROG { /*petit texte discret pour le programmeur*/
	font-size:0.9em; line-height: 1.1em;
	display:none; /*non visible par defaut*/
	text-align: left;
    word-wrap: break-word;
/*même valeurs que  pre  ci-dessus : */
    color:#69b391;
    background-color:#02464c;
    border-bottom: 1px dashed #20372d ;
}
.infoPROG strong {
    color: #96ffcf;
}
/*.infoPROG*/ pre .libelle {
    font-weight: normal;
    color: #477861;
}
/*.infoPROG*/ pre strong { /*pour mettre en valeur (couleur) mais quand-même pas en gras*/
    font-weight: normal;
}

.texteDiscret { /*couleur de texte discret (ex: prix TTC pour CVE)*/
	color:#888 ;
}
.texteTresDiscret { /*couleur de texte encore + discret (ex: aucun de la zone RCN ou pas de valeur dans fiche K)*/
	color:#AAA ;
}

/*rapproche les caractères (ex: pour certains labels qui pose pb avec des propositions par le navigateur. ex: nom, prénom prescripteur) */
.texteCondense_M {
  /*"M" pour Medium. On pourra ajuster avec d'autres classes avec XS, S, M, L, XL,…*/
  letter-spacing: -0.15em ;
}
/*idem .texteCondense_M mais que pour le placeholder - 03/08/2023 */
  input.placeholderCondense_M:-moz-placeholder, textarea.placeholderCondense_M:-moz-placeholder /*marche pas sous FF (je laisse car changera peut-etre et c'est + logique)*/
, input.placeholderCondense_M::-moz-placeholder, textarea.placeholderCondense_M::-moz-placeholder /*avec double : ca marche !*/
{
  letter-spacing: -0.15em;
}
input.placeholderCondense_M::-webkit-input-placeholder, textarea.placeholderCondense_M::-webkit-input-placeholder { /*pour Safari*/
  letter-spacing: -0.15em;
}
input.placeholderCondense_M.placeholder, textarea.placeholderCondense_M.placeholder /*aussi pour opera*/ {
  letter-spacing: -0.15em;
}
input.placeholderCondense_M::placeholder, textarea.placeholderCondense_M::placeholder {
  letter-spacing: -0.15em;
}
/*!!! il faut faire différent groupes ( input… + valeurs) sinon ça ne marche pas (ex: les déclarations -moz- blqoue celle de -webkit- !!!) */



label.discret { /*texte ecrit + petit que la normal car moisn important (ex: pas de porteur precis...)*/
	display:block;
	margin-top:2px;
}

#pictoEnregistrementEnCours {  /*picto du loader*/
	padding: 2px;
	background-color: black;
	border-radius: 20px;
	vertical-align: middle; /*pour caler un peu mieux meme si pas encore parfait*/
}


.main { /*pour forcer le curseur a montrer qu'on peut cliquer (ex: pret BL ou CF)*/
	cursor: pointer;
}
.sansRetourAuto { /*evite retour a la ligne automatique*/
	white-space: nowrap !important;
}
.avecRetourAuto { /*force retour a la ligne automatique (ex: si mis newWindow poru picto => sans retour par défaut => change cela (ex: btn JV))*/
	white-space: inherit !important;
}

.sansGras { /*evite texte en gras*/
	font-weight: normal !important;
}


.toutEnMAJ { /*pour mettre tout en majuscule*/
	text-transform: uppercase;/*desactiver pour test, car en vrai, le texte est enregistre en BD tel que saisi (cad pas forcement tout en MAJ) => permet de mieux voir si je corrige bien auto en MAJ, en php (si bien pris en compte)*/
	/*border-right: 2px solid #999; padding-left: 1px;*//*je met cette petite bordure pour me dire, a moi seulement : ce champ doit etre en MAJ*/
}

td { text-align: left; vertical-align:top; }
.tdGauche { text-align: left !important; }
.tdCentre, .centrage { text-align: center !important; }
.tdDroite { text-align: right !important; }
.tdHaut { vertical-align:top !important; }
.tdMilieu { vertical-align:middle !important; }
.tdBas { vertical-align:bottom !important; }

.italique { font-style: italic; }
.gras { font-weight:bold; }

.vAlignTop {
    vertical-align: top !important;
}

table tr.barre td { /*ligne tr d'un tableau de style barre, mis sur td sinon la couleur du barre est noir, meme si texte gris (ex: lot errone) */
	text-decoration: line-through;
	color: gray;
}

h1, h2, h3, h4, h5 {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}
h1, h2, h3 {
	line-height: 1.2em; font-size: 1.2em; /*text-align: left;*/
	color: #777;
}
h1 {
	margin-bottom: 7px;
}
h1.debutPage { /*titre situe en debut de page (connexion, stock sans menu)*/
	margin-top: 1em;
}

body.document h1 { /*pour page d'un doc*/
	margin-bottom: -2px;/*pour remonter un peu les elements juste en dessous (ex: doc en lien et info creation/modif)*/
}

div.margeBasse { /*ex: marge sous div contenant h1 d'un doc*/
	margin-bottom: 15px;
}

.accueil h2 {/*page accueil*/
	font-size: 0.9em;
	/* color: #777; */
	font-weight: normal;
	line-height: 1.4em;
	/* padding-left: 1em; */
	color: #777;
}
#pageLA h1 {/*page Liste Articles*/
	/*text-align: left;*/
	font-size: 1.5em;
	/*color: #025d7b;*/color: #777;
	font-variant: small-caps;
	/*font-family: 'Electrolize', sans-serif;*/
	display:none;
}

#blocActu {
    padding: 3px;
    padding-bottom: 0px;
    text-align: justify;
}
#blocActu .date {
	color: #AAA;
  float: right;
  font-size: 0.7rem;
  line-height: 1.0em; /*attnetion : si trop => bug : décale image alignée à droite en-dessous*/
  padding-left: 2rem;
  margin-top: -13px;
/*marge sous date (évite texte trop proche) mais on laisse image aller très proche*/
  margin-bottom: 2px; /* #blocActu .date  = inverse de  valeur #blocActu .actu:nth-of-type(even) img  et de  #blocActu .ligneDeveloppable + .zoneContenuActu img */
}
#blocActu h3 {
	color: #333;
  width: 100% ; /*lié à .ligneDeveloppable */
  padding-left: 0;
}
/*Gros titre pour actu, mais pas pour ligne developpable car ancien (don se doit d'être plus discret) - 27/02/2023*/
  #blocActu .actu > div:not(.ligneDeveloppable) h3
, #blocActu .actu > div.ligneDeveloppable.contenuVisible h3
{
  font-size: 1.7em;
}
#blocActu .actu {
  display: inline-block;
	width:100%;
  margin: 0.7em 0 0em 0;
}
.zoneContenuActu {
  margin-bottom: 1.5rem;
}
#blocActu p {
    margin-bottom:0.5em;
    line-height:1.3em;
    color:#777;
    font-size: 0.9em
}
#blocActu img {
    float:left;
    width:40%;
    max-width:230px;
    padding: 0.3em 1em 1em 0;
}
/*1 actu sur 2 : image à droite*/
#blocActu .actu:nth-of-type(even) img {
  float: right;
  padding: 0.3em 0 1em 1em;
  clear: both;
/*marge sous date (évite texte trop proche) mais on laisse image aller très proche*/
  margin-top: -2px;  /* #blocActu .date  = inverse de  valeur #blocActu .actu:nth-of-type(even) img  et de  #blocActu .ligneDeveloppable + .zoneContenuActu img */
}
/*
#blocActu .actu:nth-of-type(even) .date {
  margin-top: -13px;
}*/

/*actu réduite pouvant être développée*/
.ligneDeveloppable {
  cursor: pointer;
  display: flex;
  width: 100%;
  padding: 0.4rem 0.65rem;
  font-size: 1rem;
  color: #555;
  text-align: left;
  background-color: rgba(0, 149, 220, 0.1); /* ou #00b9f0 ; */
  border: 0;
  border-radius: 4px;
  overflow-anchor: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
  justify-content: center;
}
/*le pseudo-bouton Lire*/
.ligneDeveloppable h3:before {
  content: "Lire";
  float: right;
  font-size: 0.8rem;
  font-weight: normal;
  color: #00b9f0;
  padding-left:0.25rem;
}
/*le chevron en bout de ligne*/
.ligneDeveloppable::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  /*OFF_background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");*/
  background-image: url('/images/picto/chevron-vers-le-bas.svg') ;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
  transform: rotate(-90deg);
  margin-left: 1em;
  filter: invert(34%) sepia(0%) saturate(0%) hue-rotate(173deg) brightness(92%) contrast(91%);
}
/*actu dans zone developpable uniquement*/
#blocActu .ligneDeveloppable + .zoneContenuActu {
  overflow: hidden;  /* corrige bug sous FF */
}
/*image dans contenu developable (+ = qui suit ligneDeveloppable)*/
#blocActu .ligneDeveloppable + .zoneContenuActu img {
  clear: both;
/*marge sous date (évite texte trop proche) mais on laisse image aller très proche*/
  margin-top: -2px;  /* #blocActu .date  = inverse de  valeur #blocActu .actu:nth-of-type(even) img  et de  #blocActu .ligneDeveloppable + .zoneContenuActu img */
}
#blocActu .ligneDeveloppable + .zoneContenuActu .date {
  margin-top: inherit; /*evite que ce soit masqué sous le bloc titre developpable*/
}

/*adapatations au survol*/
.ligneDeveloppable:hover {
  background-color: #025d7b !important;
  color: #FFFFFF !important;
}
#blocActu .ligneDeveloppable:hover h3 {
	color: #FFF;
}

/*couleur du chevron en bout de ligne, au survol*/
.ligneDeveloppable:hover::after {
  filter: brightness(0) invert(100%);
}

/*adaptations une fois le contenu visible*/
.ligneDeveloppable.contenuVisible {
  background-color: initial;
  /*OFF2024 padding: 0 0.2rem;/*depuis 27/02/2023 le titre est grossi donc on peut réduite padding*/
}
/*le pseudo-bouton Lire disparait*/
.ligneDeveloppable.contenuVisible h3:before {
  content: "";
}
/*direction du chevron en bout de ligne*/
.ligneDeveloppable.contenuVisible::after {
  transform: rotate(-180deg);
}



section {
	text-align:left; /*le body fait le centrage*/
}
footer {
	clear:both;
	margin-top:60px;
	color:#AAA;  font-size:0.75em;
	border-top: 1px dotted #ddd;
	text-align: center;
	display: inline-block; width: 100%; /*sinon pas ok sur page param article (margin ne serait pas pris en compte)*/
    line-height: 2em;
    padding-bottom:1em;
}

body {
	font-size: 1em;
	color:#000; /* le texte normal legerement gris */
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	/* font-family: 'Titillium Web', sans-serif; */
	/* font-family: 'Electrolize', sans-serif; */
	/* font-family: 'Dosis', sans-serif; */
	/* font-family: 'Gafata', sans-serif; */

	margin: 0px;
	background-color:#EEE;
	text-align: center; /*contenu au centre*/
}

table { /* taille des textes situe dans table - pour que le texte soit redimensionnable */
	font-size: 1em;
}

.invisibleVisibility { visibility: hidden; }
.invisibleDisplay { display:none; /*!important : re-enleve car pb pour message qui s'affiche via JQuery qui resteraient invisibles a cause de ca (ex: confirmation reglement). crer autre classe ci-apres: invisibleForce*/; }
.invisibleForce { display:none !important;/*force a etre masque : pour filtre recherche par ex: Divers dans K*/ }


.arrondis_E { /*coins arrondis à l'Est*/
	-webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
}
.arrondis_O { /*coins arrondis à l'Ouest*/
	-webkit-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
}

.texteInfo h3 , .texteErreur h3 , .texteReussi h3 , .texteAlerteMax h3 {
  padding-left: 0!important ;
  color: inherit; /*pour que titre de la même couleur que texte - 23/03/2024*/
}
.texteInfo , .texteErreur , .texteReussi , .texteAlerteMax { /*texte d'information, d'erreur, de reussite*/
	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; /* en 2e, il y avait 35px, je sais pas pourquoi une si grosse marge qui est genantte pour petit champ pas tres large*/
	margin-top: 5px; margin-bottom: 5px;
	font-size:0.9em;
	text-align: left;
	clear:both; /*pour passer a la ligne tout seul( ex: pour info sur lots dans param article, car hauteur colonnes OD, OG peuvent differer)*/

	line-height: 1.4em;/*fev2017*/
}
.texteInfo sup , .texteErreur sup , .texteReussi sup , .texteAlerteMax sup { /*balise sup dans texte d'information*/
    line-height: 1em;
    font-size: 0.7em;
}
.texteInfo  {
	color: #c09853; background-color: #fcf8e3; border-color: #fbeed5;
}
.texteInfo.enValeur { /*couleur + prononcée pour attirer un peu + l'attention (ce genre de message doit rester rare sinon, l'utilisateur n'y fera plus attention) (ex: info pour RK depuis BL)*/
    color: #863825;
    background-color: #ffd020;/*au ca soù dégradé ne foncitonen pas*/
    border-color: #fbeed5;
    /*dégradé linéaire :  background: linear-gradient(135deg, #ffd020 0%,#ffe382 100%); */
    /*dégradé arorndi : */ background: radial-gradient(ellipse at bottom, #ffe382 0%,#ffd020 100%);
}
.texteErreur {
	color:red;
	/*color: #b94a48;*/ background-color: #f2dede; border-color: #eed3d7;
}
.texteReussi {
	color:#66AC00;/*remplace #66CC00 car trop clair*/
	/*color: #468847;*/ background-color: #dff0d8; border-color: #d6e9c6;
}
.texteAlerteMax { /*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*/

	-webkit-font-smoothing: subpixel-antialiased; /*ameliore lisibilite sous Safari (sur fond sombre)*/
}
.texteInfo ul , .texteErreur ul , .texteReussi ul, .texteAlerteMax 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; /*avant fev2015:padding: 5px 30px ;*/
	box-shadow: none ;

	margin-bottom: 0;/*fev2017*/
}
.texteInfo p , .texteErreur p , .texteReussi p , .texteAlerteMax p
, .zoneConfirmation p { /*pour paragraphe avec espace avant et apres (mais + petit que la normal)*/
	margin-top: 0.75em; margin-bottom: 0em;
}
.texteInfo p:first-child , .texteErreur p:first-child , .texteReussi p:first-child , .texteAlerteMax p:first-child
, .zoneConfirmation p:first-child { /*sauf le p du debut (on garde ainsi le padding qu'on a mis au bloc contenant ces p)*/
	margin-top: 0em;
}
.zoneModifiee { /*pour mettre en valeur une zone modifiee*/
	/*background-color: #dff0d8;*/  /*background-color: rgba(211, 227, 204, 0.5);se voit mieux si fond gris*/ background-color:rgba(205, 230, 184, 0.7) !important;/*encore mieux (= #d6e9c6 en RVB generique dans colorimetre*/
	/*color: #66CC00;ne se mettra pas partout (ex: date bientot perimee dans bloc et le texte reste blanc)*/
	border-color: green !important ;
    /*17/05/2022 : ajout de !important ci-dessus pour fond et contour poru que ce soit aussi sur les chamsp avec readonly (ex: id_superCompte de fiche K)*/
	border-width: 1px;/*evite grosse bordure sous FF*/

	-webkit-transition-property: opacity, background-color;
	-moz-transition-property: opacity, background-color;
	-ms-transition-property: opacity, background-color;
	-o-transition-property: opacity, background-color;
	transition-property: opacity, background-color;

	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-ms-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
}
.zoneModifiee.valAuto { /*mars2020 : valeurs modifiée automatiquement*/
    background-color: rgba(255, 253, 159, 1);
    border-color: rgb(232, 228, 0);
}

#zoneActionVolante .infoSimple { /*texte sans bloc couleur comme texteInfo. ex: iporu RK : nfoAide_RK_mailAuClient*/
    color:#777;
    font-size: 0.9em;
}
#zoneActionVolante .texteInfo , #zoneActionVolante .texteErreur , #zoneActionVolante .texteReussi , #zoneActionVolante .texteAlerteMax { /*si dans zone zoneActionVolante*/
	margin-left:5px;  margin-right:5px;
	text-align:center;
}
.texteInfo.reduit , .texteErreur.reduit , .texteReussi.reduit , .texteAlerteMax.reduit
{ /*pour taille reduite de l'affichage d'un bloc de texte d'info*/
/*	margin: 2px 2px 0px 0px;*/
	line-height: 1.3em; font-size: 0.8em;
	/*padding: 2px 14px;*/padding: 3px 6px;/*avr2019*/
}
.texteInfo .txtReduit , .texteErreur .txtReduit , .texteReussi .txtReduit , .texteAlerteMax .txtReduit /*si pour une sous-partie (ex: <p>) => txtReduit et non seulement reduit*/
{	line-height: 1.3em; font-size: 0.8em;
}
.texteInfo .txtAlerte , .texteErreur .txtAlerte , .texteReussi .txtAlerte , .texteAlerteMax .txtAlerte /*si pour une sous-partie (ex: <p>) => txtAlerte avec texte rouge*/
{	color: red; font-weight: bold; font-size: 1.1em
}

.texteInfo.margesV_plus , .texteErreur.margesV_plus , .texteReussi.margesV_plus , .texteAlerteMax.margesV_plus
{ /*pour mettre encore plus en valeur le bloc d'info (ex: confirmation CK passée, alerte controler fiche K)*/
    margin-top: 40px !important;  margin-bottom: 40px !important;
    padding:40px !important;
}


.infoSiteCVE { /*bloc info general sur le site (a l'attention de CVE)*/
	margin-top: 0px;
	border-width: 0px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	padding: 1px 5px 3px 5px;
	background-color: #000;
	color: #FFF;
	text-align: center;
	font-size: 0.8em;
}

.RCN ul { /*pour reinitialiser les valeurs ul des bloc de RCN (ex: liste BL en cours)*/
 	box-shadow: none ;
}

.infoNavigateur { /*pour informer sur navigateur ancien (sur fond rouge)*/
	display: block; padding: 5px; background-color: orangered; color: #EEEEEE;
}


.actionConfirmee {
	display:inline-block;
	margin-top:5px;/*car marge du menu au-dessus existante*/
	margin-bottom:20px;
	opacity:0;

	-webkit-transition-property:	opacity,	background-color;
	-moz-transition-property:		opacity,	background-color;
	-ms-transition-property:		opacity,	background-color;
	-o-transition-property:			opacity,	background-color;
	transition-property:			opacity,	background-color;

	-webkit-transition-duration:	0.7s,		0.7s;
	-moz-transition-duration:		0.7s,		0.7s;
	-ms-transition-duration:		0.7s,		0.7s;
	-o-transition-duration:			0.7s,		0.7s;
	transition-duration:			0.7s,		0.7s;
}

/*juil2020 : la page de paiement en ligne, n'a pas les scripts de base => le message s'affichant avec echo actionReussie( ) ne se verraient pas => force opacity en CSS */
body.page_paiementEnLigne .actionConfirmee {
  	opacity:1;
}

/*	*	*	*	*	*	*	*	*	*	*	*	*	*  ELEMENT FORMULAIRE  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

/* Les champs */

.champPasOK { /*, input.champPasOK, textarea.champPasOK, select.champPasOK {  style des elements contenant une erreur 092012: sans "#zoneFormulaire " devant (SAUF pour premier ".champPasOK"*/
	background-color: #ffa500 !important; border: solid 2px #d31409;

  /* + discret car si trop visible, l'utilisateur ne voit pas le message en haut */
  background-color: #F2dede !important;
  border: solid 1px #d31409;
  color: red;
  padding: 4px 7px; /*laisse un peu respirer les zone avec multiples éléments (ex: zonePRTR_casesPrevenir)*/
}
.champPasOK.zoneArrondieSiPasOK { /*pour epouser mieux la forme de la zone (ex: si choix btn radio chgmt proprio dans fiche K)*/
	border-radius: 20px;
	padding:0px 6px 0 3px;
}

li.champPasOK { /*mars2017: si une zone complete en champPasOK (li) => aere un peu*/
	padding: 2px 5px 1px 5px;
}
li.champPasOK label { /*mars2017: si une zone complete en champPasOK (li) => libellé moins viisble => change leur couleur*/
	color: #d31409;
}

div.infoParametres.libellePasOK { /*paramatre pas ok situe dans la description de l'article (permet de mieux voir les limites imposees si erreur - surtout pour iris peint dont valeur libre car autre article via menu fixe)*/
	font-weight: bold;	background-color: orange;	padding: 2px 4px;	border-radius: 3px;
	display: block;	margin-bottom:1px;
}
div.infoParametres.libellePasOK span { /*pour le span qui suit (le libelle de parametre)*/
	color: red ;
}

div.infoDetailsPage { /*juil2015: blco d'info. Ex: dates fiche K*/
	float: right;
	/*margin-top: -0.45em;*/
	text-align: right;
	font-size: 0.75em;
	color:#777;
	margin-right: 3px;
    padding-bottom: 10px;
}

.ZZZchampLargeurGrand { width:100% !important;  }
.ZZZchampLargeurMoyen { width:410px !important; }
.ZZZZchampLargeurPetit { width:256px !important; }
.ZZZZchampLargeurMini  { width: 80px !important; }

.nano  { width: 42px; }
.nano2  { width: 54px; }
.mini               { width: 80px; }
.mini.largeurPlus05 { width:90px; }
.mini.largeurPlus1  { width:100px; }
.mini.largeurPlus2  { width:120px; }
.mini.largeurPlus3  { width:140px; }
.petit				{ width:160px; }
.petit.largeurPlus1	{ width:180px; } /*pour avoir un peu + de largeur sans creer un nouveau nom*/
.petit.largeurPlus2	{ width:200px; } /*idem*/
.petit.largeurPlus3	{ width:230px; } /*idem*/
.petit.largeurPlus4	{ width:240px; } /*idem*/
/*.petit.largeurPlus2b{ width:210px; }*/ /*idem*/
.moyen { width:320px; }
.grand { width:410px; }
.max { width:100%; } /*valeurs generales. par defaut si pas un champ, un menu ...*/

.margeD.PuLuLe { /*Marge droite pour espace entre partie Puissance Lunettes et Puissances Lentilles*/
    margin-right:10px !important; /* pour que .petit +10 + .petit = select.petit (80+10+10=170px)*/
}

input.max { width:100%;  }
input.grand { width:410px; }
input.moyen { width:320px; }
input.petit { width:160px; }
input.mini  { width: 80px; }
input.nano  { width: 42px; }
input.nano2  { width: 54px; }

/*pour faire au moins cette largeur*/
.grandEtPlus { min-width:410px; }
.moyenEtPlus { min-width:320px; }
.petitEtPlus { min-width:160px; }
.miniEtPlus  { min-width: 80px; }
.nano2EtPlus  { min-width: 54px; }
.nanoEtPlus  { min-width: 42px; }

.elementGrand { /*champ ou autre element qui doivent etre le plus large possible*/
	width:100%;
}

.zoneBoutons { /*regoupe plusieurs bouton pour les centrer*/
	text-align:center;
}

textarea { /*champ sur pls ligne*/
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; /*pour FF qui prend une autre police si pas definie explicitement ici*/
}

input[type="submit"] { /*que bouton de validation sinon concerne aussi les case a cocher (qui serait sans coche),... */
	appearance:button;
	-moz-appearance:button; /* Firefox */
	-webkit-appearance:button; /* Safari and Chrome */
}

input, textarea { /*les champs*/
	font-size: 1em;/*avr2014: avant : 1.01em mais mis que pour input[type="number"] + loin*/
	margin: 0; margin-bottom: 1px;/*dec2016: evite bug safari, fiche client: ligne champs du bas manquant de SIRET et TVA*/
	border: 1px solid #CCC; padding: 2px 3px;
 box-sizing: border-box;
	line-height: inherit;  font-family: inherit; /*bizarrement les input ont une hauteur un peu + grande qu'une balise a ou span*/
	/* defini au tout debut gloablement (avec *) -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*/
}
input[type="radio"] , input[type="checkbox"] { /*case a cocher et btn radio*/
	/*margin: 3px 3px 4px 1px;*/
	cursor:pointer;
	/*width: 15px; height: 15px;*/

	/*mars2015: pour corriger sous IE9*/
	width:19px;	height: 19px;  /*pour agrandir la taille des case a cocher et btn radio (max sous Safari : 14px pour checkbox : 15px pour radio. IE9: reduit => passe a 19px)*/
	margin: 1px 2px 2px 0px; /*dec2015: marge droite 2 au lieu de 1*/
	border-width:0px;
	vertical-align: middle;
}
input[type="radio"]:checked , input[type="checkbox"]:checked { /*case a cocher et btn radio*/
	opacity:1 !important;
}

  input[type=radio]:disabled /*~ pour tous les btn radio desactives (zone generer)*/
, input[type=checkbox]:disabled /*pour tous les case à cocher desactives - 22/10/2021*/
{
	cursor: default;
}
  input[type=radio]:disabled ~ span  /*~ pour tous les freres*/
, input[type=radio]:disabled ~ .inactif /*dec2015: ~ pour tous les freres avec cette classe (ex: texte du bouton radio )*/
/*idem pour case à cocher - 22/10/2021*/
  input[type=checkbox]:disabled ~ span
, input[type=checkbox]:disabled ~ .inactif
{
	color: #AAA;
	cursor: default;
}

select { /*les menus locaux*/
	margin: 1px 0px; /*car marges differentes sous FF*/
	cursor:pointer;

    font-size: 0.75rem; /* 0.815rem ≈ 13px ; 0.75rem ≈ 12px ; 0.69rem ≈ 11px ;  (avant mars2020 : 11px) (info : REM : selon taille html)*/
    /*mars2020 : police + grande pour les menus : mais pb sous safari : Safari ne calcule pas pareil taille texte, de menu select, que pour FF (ex: 1rem => 13px sous safari et 16px sous FF).

    Utiliser qui fait menu avec fond gris uni mais avec contour noir (seul Safari perd son aspect de menu avec les fleches sur fond bleu. MAIS sous FF, si attribut contour => perd tout son aspect de menu. ex : calculateur intégré qui colorise aspect et cahnge contour => pb):
        -webkit-appearance: menulist-button;
    ou Mettre bordure à 1px (pas 0 sinon plus de bordure sous FF). FF perd aussi aspect du menu, donc pas top :
        border : 0px solid #ccc ;
    source : https://stackoverflow.com/questions/503101/text-size-for-drop-down-menu-input-select-not-working-in-safari
    */
}

select.menuInactif { /*simule menu inactif (ex: numero lot fige)*/
	color: #777;   border: 1px dashed #AAA;  background-color: #FFF;
	-webkit-appearance:none;/*pour que Safari oublie son style propre*/
	-moz-appearance: none;  text-indent: 1px;  text-overflow: '';/*pour FF (source: commentaire http://css-tricks.com/almanac/properties/a/appearance/) */	/*-moz-appearance: tabpanels;(en creux, mais ne met pas les pointilles)*/
	appearance:none; /*a priori pas ok sous IE*/
	padding: 2px 5px; /*6px - 1px de text-indent = 5px*/  /*sous FF, il faudrait 0 au lieu de 5 car daja une marge existante*/
	cursor:default;
}

textarea[readonly="readonly"] , textarea[readonly] ,	/*champ multilignes en lecture seule*/
input[readonly="readonly"] , input[readonly] {			/*champ simple en lecture seule (ex: ref porteur) Vu ici : http://stackoverflow.com/questions/14014329/moz-placeholder-does-not-work-in-firefox */
	border-width:0px;
	padding-left:0px; padding-right:0px;
	cursor: not-allowed ; /*curseur avec signe stationnement interdit pour montrer pas modifiable*/
  background-color: #FFF;/*évite que sous FF, le fond soit gris sombre*/
}


.texteUnite { /*texte apres un champ (ex: euros, % ...)*/
	font-size:0.7em; display: inline-block;
}
.texteUnite.erreur {
    color: red;
    font-weight: bold;
}

/*styliser placeholder (texte informatif dans champ avant saisie texte): */
input:-moz-placeholder, textarea:-moz-placeholder , /*marche pas sous FF (je laisse car changera peut-etre et c'est + logique)*/
input::-moz-placeholder, textarea::-moz-placeholder /*avec double : ca marche !*/
{ color: #CCC; font-style:italic; } /*semble pas ok sous FF*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #CCC;  font-style:italic; } /**/
input.placeholder, textarea.placeholder { color: #CCC;  font-style:italic; } /*aussi pour opera*/
/*!!! il faut faire différent groupes ( input… + valeurs) sinon ça ne marche pas (ex: les déclarations -moz- blqoue celle de -webkit- !!!) */


/*elements avec un aspect de bouton : */
input[type="submit"] ,						/*btn par defaut de validation de formulaire (avec precision du type)*/
input[type="button"] ,						/*btn de formulaire de type bouton normal*/
a.bouton ,
.articles li .boutonArticles ,				/*btn info et choisir (partie choix article)*/
#zoneArticleInfoContenu .boutonArticles , /*btn dans fenetre + d'info d'un article*/
#zonePopUpContenu .boutonArticles
, .bouton {	/*btn dans fenetre pop up (ex: commande de stock) ("pop up" pour etre plus general)*/
	cursor: pointer;
	background-color: #00b9f0;
	padding: 2px 8px; border-width: 0; margin: 0;
	font-size: 0.9em; text-decoration:none; color: #FFFFFF;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;

	vertical-align: middle;/*permet que bouton annuler et bouton valider soit aligne au milieu si l'un sur 2 lignes et pas l'autre*/
	white-space: normal; /*permet cesure*/
  display: inline-block; /*26/08/2021*/
}
/*bouton reduit - 15/09/2023*/
  span.bouton.reduit
, span.btnTexte.reduit
{
  line-height: 1.3em;
  padding: 1px 3px;
  font-size: 0.8rem;
}
#zone-articles .unTableau > tbody > tr.choixAutorise .blocDouble a.avecFond  /*mars2019 : pour rendre partie gauche d'un blocDouble cliquable (ex: lot RK). avr2019 : que si ligne autorise le choix du lot*/
{
	background-color:#00b9f0;
    color: #FFF!important;
    border-color:#00b9f0 /*!important*/;
    margin-right:1px; /*pour séparer de la partie droite (+ esthetique). Mais si survol et sansFond => pas top*/
    /*border-right-color : #FFFFFF!important; /*pour séparer de la partie droite (+ esthetique)*/
}
.blocDouble a.sansFond  /*mars2019 : pour rendre partie gauche d'un blocDouble cliquable (ex: lot RK)*/
{
	/*background-color:transparent;*/
    color: #00b9f0!important;
}
#zone-articles .unTableau > tbody > tr.choixAutorise .ligne_1Lot.blocChoisi .blocDouble a.avecFond { /*avr2019 : quand choisi bloc pour mettre en RK*/
    background-color: green;
    border-color: green /*!important*/;
}
#zone-articles .unTableau > tbody > tr.choixAutorise .ligne_1Lot.blocChoisi .blocLot.blocDouble span:nth-child(2) { /*idem : met aussi la Qté pour bien voir que lot choisi/sélectionné (sinon tant que souris dessus, reste couleur de survol : bleu sombre)*/
    background-color: green;
}
#zone-articles .unTableau > tbody > tr.choixInterdit .blocDouble a.avecFond:hover { /*pour ne pas réagir si survol bouton*/
    background-color: initial!important;
    border-color: #BBB!important;
    color: #BBB!important;
    cursor: default;
}

input[type="submit"] { /*les bouton de validation*/
	margin-left: 20px;
	-webkit-appearance: none;
}
input[type="button"] { /*les bouton autre (ex: annuler)*/
	-webkit-appearance: none;
}

#zoneArticleInfoContenu .boutonArticles ,
#zonePopUpContenu .boutonArticles ,
input[type="button"].btnGrand ,
a.bouton.btnGrand
, .bouton.btnGrand { /*gros bouton en pleine largeur*/
	display: inline-block; /*display: block;*/ text-align: center; font-size: 1.2em; line-height: 1.3em;/*sept2019*/ padding: 10px; margin-top: 10px;
	/*width:100%; car parfois, div ne suffit pas a occuper toute la largeur.  Mais non car pour un element de type "a" pas ok. (donc mettre 100% manuellement au type button ou submit) btn + gros*/
}
/*a.bouton.btnGrand {
	text-align: center; font-size: 1.2em; padding: 10px; margin-top: 10px;
}*/

a.bouton.largeurMax { /*bouton en pleine largeur*/
	display: block; text-align: center;
}
.largeurMax { /*juin2015 (ex:bloc remise fiche article)*/
	width:100%;
}
#colonnesODetOG a.bouton.txtReduit  /*bouton dont texte a ecrire plus petit (pour page param article)*/
{
	font-size: 0.8em;
	font-weight: normal;
}
h1 span.txtReduit { /*sous partie d'un titre h1 (ex: date du doc)*/
	font-size: 0.7em;
	font-weight: normal;
}

.pastille { /*ex: sur menu "..."*/
	position: absolute; /* width: 9%; */ /* min-width: 90px; */
	text-align: right; display: block; /* background-color: pink; */
	font-size: 0.75em; line-height: 0.75em;	margin-top: 2px; margin-left: 2px;
    z-index: 1;
}

.pastille a.bouton { /*balise a dans la pastille cliquable*/
/* position: absolute; */ /* width: 9%; */ /* min-width: 90px; */ /* text-align: right /* top: 0; */ /* left: 0; */ display:inline-block; border-radius: 0 0 4px 0; padding:4px 5px 4px 5px;
	border-radius: 20px;
	background-color: #FFF; color: #00b9f0; /*par defaut : fond blanc car plus discret*/
}
.pastille a.bouton.rouge {
	background-color: orangered; color:#FFF; /*fond rouge + visible*/
}


/*juin2016: les ...:hover ont ete mis un peu + bas*/

a { /*lien normaux texte*/
	color: #00b9f0; padding: 0px 4px;
    text-decoration: none !important; /*car sous FF, souligne parfois lors du clic puis quand la souris quitte la zone cliquable (ex: clic lot BL pour RK)*/
}
a:hover {
	background-color: #00b9f0; color: #FFF;text-decoration: none;
}
a.btnTexte { /*lien normaux texte*/
	color: #00b9f0; padding: 0px 4px; background-color: transparent;/*enleve le fond*/ background-color: rgba(255,255,255,0.75);/*met un fond blanc un peu transparent pour etre + visible si dans bloc de couleur*/
	/*display: inline-block ;*/
	padding: 2px 4px; margin-right: 1px; display: inline ;  /*oct2013: mieux adapte si besoin de newWindow et "Voir fiche client" mieux aligne avec bouton, par ex, de "recharger info" d'info client*/
	vertical-align:baseline;/*pour ne plus avoir middle de .bouton*/
	font-weight: normal;/*sans gras*/
	white-space: nowrap;/*sept2016:pas de retour auto par defaut. Sinon besoin, ajouter classe avecRetourAuto*/
}
  span.btnTexte
, div.btnTexte { /*comme lien normaux texte mais sur un div */
	color: #00b9f0;
}
a.btnTexte.btnPetit { /*jan2017:aussi comme bouton poue etre l'un sous l'autre ou a cote de l'autre (ex: accueil : btn EDI)*/
	display: inline-block;
	margin-top:5px;
}
/*oct2013 nouvelleFenetre ne sera plus utilise. remaplace par newWindow et son pictogramme*/
a.btnTexte.nouvelleFenetre {
	border : 2px solid transparent;
}
a.bouton.btnTexte.nouvelleFenetre:hover {
	border : 2px solid #025d7b;
	color: #025d7b;
	background-color:#FFF !important;
}

a.annuler
, input.annuler
, .bouton.annuler
, span.annuler /*29/05/2024*/
{
	background-color:#999;
}
a.confirmer
, input.confirmer
, .bouton.confirmer
{
	background-color:orange /*!important*/;
}
a.confirmerBis
, input.confirmerBis
, .bouton.confirmerBis
{
	background-color:orangered /*!important*/;
}

a.confirmerBis.noir
, input.confirmerBis.noir
, .bouton.confirmerBis.noir

{ /*juin2016: ex: btn detruire nvx K*/
	background-color:#000 /*!important*/;
}

a.confirmerBis.vert
, input.confirmerBis.vert
, .bouton.confirmerBis.vert
{ /*mavr2019: ex: btn valider choix lots RK*/
	background-color:green /*!important*/;
}
/*fév2020: enlevé !important sinon .bouton:hover ne se fera pas (car pas prioritaire par rapport à .confirmerBis par exemple)*/


a.btnTexte.sansFond
, .texteAlerteMax a.btnTexte /*mai2017: aussi si dans message de ce type*/
, span.btnTexte.sansFond
, div.btnTexte.sansFond
{ /*ex: pour enlever fond d'un btnTexte */
	background-color:transparent;
}

/*juin2016: mis ici plutôt que avant style de  a  (lien normaux texte)  quelques lignes + haut. Pour que ca remplace bien la couleur de base du fond :*/
input[type="submit"]:hover , input[type="submit"]:active ,		/*si survol*/
input[type="button"]:hover , input[type="button"]:active ,
a.bouton:hover , a.bouton:active ,
.bouton:hover , .bouton:active , /*fév2020*/
.articles li .boutonArticles:hover , .articles li .boutonArticles:active ,
#zoneArticleInfoContenu .boutonArticles:hover , #zoneArticleInfoContenu .boutonArticles:active ,
#zonePopUpContenu .boutonArticles:hover , #zonePopUpContenu .boutonArticles:active
, .bouton:hover {
	background-color: #025d7b !important;  /*est prioritaire si survol (meme si fond mis au niveau du style de l'element)*/
	color: #FFFFFF !important;
	border-color: #025d7b;/*ex: pour bouton d'info, d'aide avec un contour et non un fond*/
}
/*autre info, aspect des boutons mis dans fichier CSS listeArticle*/

.blocDouble a.avecFond:hover
, .blocDouble a.sansFond:hover  /*mars2019 : pour rendre partie gauche d'un blocDouble cliquable (ex: lot RK)*/
, span.btnTexte.sansFond:hover
, div.btnTexte.sansFond:hover
{
	background-color:#025d7b !important;
    color: #FFFFFF!important;
    border-color:#025d7b!important;  /*border-right-color : #FFFFFF!important;/*pour séparer de la partie droite (+ esthetique)*/
}
.blocDouble a.sansFond:hover  /*mars2019 : pour rendre partie gauche d'un blocDouble cliquable (ex: lot RK)*/
{
    border-right-width: 0px;
    margin-right:1px; /*pour séparer de la partie droite (+ esthetique). Mais si survol et sansFond => pas top*/
}


/*les switch (btn on off à la iOS)*/
input[type='checkbox'].switch { /*case à cocher qui sera non visible car simulé par le switch*/
    position: absolute;
    content: '';
    opacity: 0;
    font-weight: 400;
    display: none;/*rq: si none => ne sera pas transmis via formulaire il me semble (à voir selon besoin)*/
}
input[type='checkbox'].switch+label { /*le label qui suit le switch (ci-dessus)*/
    position: relative;
    display: inline-block;
    padding-left: 42px; /*distance du label par rapport au switch*/
    vertical-align: middle;
    font-weight: 400;
    color: #333;
    line-height: 24px; /*ajuste hauteur total du switch. Evite d'empiéter sur la partie en-dessous*/
    cursor: pointer;
}
input[type='checkbox'].switch+label:before { /*le fond du switch*/
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 40%;
    width: 35px;
    height: 21px;
    border-radius: 14px;
    margin-top: -10px;
    background: #e5e5e5;
    background: #BBB;
    border: 1px solid #BBB;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    /*test si je veux autre couleur de fond (')ex: rouge si off)
        background: red;
        border: 1px solid red;
    */
}
input[type='checkbox'].switch+label:after { /*le curseur du switch*/
    content: '';
    position: absolute;

    display: block;
    left: 0;
    top: 40%;
    width: 21px;
    height: 21px;
    margin-top: -10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #BBB;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    /*test si je veux agrandir curseur du switch :
        width: 25px;
        height: 25px;
        margin-top: -12px;
    */

    /* margin-left: 0px; */
    /* margin-left: 7px; */
}

/*2022 pour reduire en taille (ex: filtre Affichage des tarifs)*/
input[type='checkbox'].switch+label.reduit {
  margin-left: -11px ;
}
  input[type='checkbox'].switch+label.reduit:before
, input[type='checkbox'].switch+label.reduit:after
{
  transform: scale(0.75);
  transform-origin: center right;
}
input[type='checkbox'].switch+label.reduit:after {
  margin-left: 3px;
}

/*si coché coché*/
input[type='checkbox'].switch:checked+label:before { /*si case à cocher est cochée => adapte fond du switch*/
    background: #a49e22;
    border: 1px solid #a49e22;
}
input[type='checkbox'].switch:checked+label:after { /*si case à cocher est cochée => adapte curseur du switch*/
    margin-left: 14px;
    border-color : #a49e22;
}


/*FIN switch*/


.btnBlocId { /*bloc cliquable avec un id (ex: BL45,...)*/
	cursor: pointer;
	/*background-color: #00b9f0;
	padding: 2px 8px;*/ border-width: 0; margin: 0;
	/*font-size: 0.9em; text-decoration:none; color: #FFFFFF;*/
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	background-color: transparent;  /*background-color: rgba(255,255,255,0.75);*/
	padding: 2px 4px; /*margin-right: 1px;*/ display: inline ;
	/*vertical-align: middle;*//*permet que bouton annuler et bouton valider soit aligne au milieu si l'un sur 2 lignes et pas l'autre*/
	/*white-space: normal;*/ /*permet cesure*/
}
ul.liste1 li:hover .btnBlocId  /*li acceptant double click*/
, tr:hover .btnBlocId { /*ligne listing*/
	color:#00b9f0;/*met en valeur le texte cliquable*/
}
ul.liste1 li:hover .btnBlocId:hover
, tr:hover .btnBlocId:hover {
	background-color: #025d7b; color: #FFF; text-decoration: none; /*comme si un btn au survol du texte cliquable*/
}
/*#zone-documents ul.liste1 li.dblClick:hover
, #zone-documents table tr.dblClick:hover {*/
ul.liste1 li.dblClick:hover
, tr.dblClick:hover {
	background-color:rgba(0,185,240, 0.05);
}
tr.cumul.dblClick:hover { /*si cumul + dblClick => force couleur bleu + sombre*/
	background-color:rgba(2, 142, 183, 0.28) !important;/*gris bleu*/
	background-color:rgba(127, 189, 207, 0.28) !important;/*gris legerement bleu*/
}

/* + Cf partie "RNC - Remarque Commentaire Note" */

/*FIN elements avec un aspect de bouton : */

header {
	text-align: center;
}
/*fev2015: logoCVE mis dans menu.css*/


/* * * * bloc (ex: dans fiche client pour valider valeur) * * * */
.blocChpAValider {
	display: inline-block;
	vertical-align: baseline; margin: 3px 0px; /*meilleur alignement avec bloc texte cliquable sans fond (ceux dont texte bleu)*/
}

/* * * * FIN bloc de texte * * * */


/* * * * petit btn image * * * */

  /*.articleSuppr span:first-child*/
  .articleSuppr .titreArticle
, .articleSuppr .blocRefInterne
, .articleSuppr .blocTypeCK
, .articleSuppr span.blocCouleur
, .txtBarre
{ /*bloc du nom de l'article + eventuellement sa couleur*/
	text-decoration:line-through;
	color:#CCC
}
.articleSuppr span.zoneIll {
  opacity:0.2;
}


#zone-tarifs .txtBarre {
	display: block; /*mars2017 : permet au nouveau prix de passer en-dessous (evite de deborder. ex: MDD)*/
}

.articleSuppr .btnModif
, .articleSuppr .btnSuppr
{
	/*visibility:hidden;*//*laisse un espace vide a la place du btn modif*/
	display:none !important;/*mais le dernier article peut passer sous le picto Aide*/
}
.articleSuppr .titreArticle textarea /*contient le chp multi ligne du blocDesignationLibre (evite dispo alors que ligne suppr)*/
, .articleSuppr .raccourcisTextesArticle /*la zone avec les raccourcis de texte*/
{
	display: none;
}


#zone-articles .ligneTitre .sansRetourAuto
{   text-indent:0;  /*nov2019: pour bien caler bouton*/
    font-weight: normal; /*enleve gras pour bouton*/

  float:right;
}


.btnModif.pictoBtn /*btn de modification*/
, .btnSuppr.pictoBtn { /*btn de suppression*/
	/*float: right; text-indent: 0;*/ /*si mis a droite (mais dans colon PUHT => moins clair)*/
	display:inline-block; vertical-align:top; /*mis juste apres designation*/
	opacity:0.3; /*peu visible tant que pas survol ligne*/
}
#zone-articles .ligneTitre .sansRetourAuto .pictoBtn
{ opacity:1; /*btn suppr et modif pas trasnparent si dans panier,… (surtout pour client)*/
}
.btnRemettre { /*suite a clic sur btnSuppr, montre btn remettre*/
	/*float:right; text-indent:0;*/ font-weight: normal;
	display:inline-block; vertical-align:top;
}
.btnModif.pictoBtn /*btn de modification*/
, .btnSuppr.pictoBtn /*btn de suppression*/
, .btnAjout.pictoBtn
, .pictoCompteInternet /*avr2015*/
, .picto_connexion /*fev2019*/
, .pictoEtoile  /*btn ajout ligne*/
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2 .pictoBtn /*les btn avec picto intégré et un libellé (ex: btn suppr, ajout, modif)*/
{
	background-repeat: no-repeat;
	background-position: 2px 2px;
	border-width: 0px;
	padding: 12px;  /*la moitie de background-size + marge autour si je veux autoriser a pouvoir cliquer un peu a cote*/
	-webkit-background-size: 20px; -moz-background-size: 20px; -o-background-size: 20px; background-size: 20px;
	background-color: initial; /*transparent;*/
	margin: -4px 0px;

	/*image un peu + bas*/
	-webkit-background-size: 150px; -moz-background-size: 150px; -o-background-size: 150px; background-size: 150px; /* largeur 300/3 = 100 */
	background-position: -3px -3px;
}
.pictoCSS { /*picto avec fond et contour en CSS. ex: éclair (picto_connexion)*/
    background-color:gray;
    border-radius: 100px;
    border: 1px solid #FFF;
    padding: 9px;
    margin: -2px 0px;
}

.btnModif.pictoBtn
, .btnSuppr.pictoBtn
, .btnAjout.pictoBtn
, .pictoCompteInternet
, .picto_connexion
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2 .pictoBtn /*les btn avec picto ingéré et un libellé (ex: btn suppr, ajout, modif)*/
{
	background-image: url(../images/picto/picto-ajout-modif-suppr@2x.png?maj=29415);
}
/*enleve fond si nouvelle methode (permet de ne pas perturber l'ancienne methode sur les elements l'utilisant encore)*/
.btnAvecPicto_typ2 /*les btn avec picto ingéré et un libellé (ex: btn suppr, ajout, modif)*/
{
    margin-left: 3px; /*pour pas etre trop proche du btn suivant*/
}


.picto_connexion {
    display: inline-block; /*permet de pouvoir le mettre en float ou pas sans deformer*/
}
.btnModif.pictoBtn
, .btnSuppr.pictoBtn
, .btnAjout.pictoBtn
{
	cursor: pointer;
}
.pictoEtoile {
	background-image: url(../images/picto/picto-on-off@2x.png?20250414);
}
.pictoEtoile.main { /*curseur que si main (cliquable)*/
	cursor: pointer;
}


.btnAvecPicto_typ2 /*(+ général)*/
{ /*bloc avec btn ajout et son libelle*/
	display: inline-block;
	/*color: #00b9f0;*/
	font-size:0.8em;
	/*margin-top: 15px;*/
    cursor: pointer;

    /*nov2019 : si je veux mettre un fond au btn avec picto : (adaptations au survol à faire encore)*/
   background-color: #00b9f0;
    border-radius: 3px;
    padding: 3px 5px 3px 1px;
    color: #FFFFFF;
    line-height:12px;
}
.btnAvecPicto_typ2.btnAjout
{	/*color:green;*//*visible que par CVE donc laisse texte en bleu (ex: ajouter ligne, dans avoir)*/
}
.btnAvecPicto_typ2.btnModif
{	/*color:orange;*/
}
.btnAvecPicto_typ2.btnSuppr
{	/*color:orangered*/;
}
.btnAvecPicto_typ2:hover {
	/*color:#025d7b;*/
  background-color: #025d7b;
}


/*position image fond*/    /*background-position-x ou -y pas standard (pas ok sous FF) donc oblige a definir le positionnement exact pour chaque type de btn*/
.btnModif.pictoBtn
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2.btnModif .pictoBtn
{
	/*background-image: url(../images/picto/btn-modifier@2x.png);*/
	background-position: -33px -3px;
}
.btnSuppr.pictoBtn
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2.btnSuppr .pictoBtn
{
	/*background-image: url(../images/picto/btn-supprimer.png);*/
	background-position: -63px -3px;
}
.btnSuppr.pictoBtn
{	margin-right: 10px; /*pour pas etre trop proche du btn modifier*/
}

.btnAvecPicto_typ2 .pictoBtn /* nov2019 (+ général) */
{	display: inline-block;
}
.btnAjout.pictoBtn
, .pictoEtoile
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2.btnAjout .pictoBtn
{
	/*float: none;*/
	display: inline-block;
	/*margin-right: 0px;*/
	/*opacity: 1;*/
	background-position: -3px -3px;
}
.btnAjout.pictoBtn
/* nov2019 (+ général) : */
, .btnAvecPicto_typ2 .pictoBtn
{
	vertical-align: text-bottom;
}
.pictoEtoile {
	vertical-align:baseline;
}
.pictoCompteInternet {
	background-position: -3px -63px;
}
.pictoCSS.picto_connexion {
    background-position: -36px -66px; /* -3 car pictoCSS*/
}
.pictoCSS.picto_connexion.avecAchat { /*si panier plutôt qu'éclair = si connecté ET avec achat deja effectué*/
    background-position: -66px -66px;
}
.pictoCSS.picto_connexion.avecAchat.nonKInternet { /*et si compte "client internet" pas actif (que si caddie, si CVE passe CK à sa place)*/
    opacity:0.5;
}
.pictoCSS.picto_connexion.reduit { /* +petit picto (ex: listing client)*/
    background-size: 125px;
    background-position: -32px -57px;
    padding: 6px;
    /*border-width: 1px;*/
    float: none;
    overflow: hidden;
}
.pictoCSS.picto_connexion.avecAchat.reduit {
    background-position: -50px -50px;
    background-size: 110px;
}

.pictoCSS.picto_connexion.vert {
    background-color:green;
}
.pictoCSS.picto_connexion.orange {
    background-color:orange;
}
.pictoCSS.picto_connexion.rouge {
    background-color:orangered;
}


.picto-smiley {
  background-image: url("/images/picto/multi-picto-smiley.png");
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: text-bottom;
/* avec fond et contour blanc pour mieux ressortir :
  background-color: #FFF;
  border-radius: 100px;
  border: 2px solid #FFF;
*/
}
.blocEnValeur > .picto-smiley {
  vertical-align: super;  /*06/01/2023 : top mieux que text-bottom pour aligner en bas du texte "%" !! que sur le 2e "%" dans le blocEnValeur */
}

/*tailleM*/
.picto-smiley.tailleM {
  height: 25px;  width: 25px;
  background-size: 75px 25px; /*longueur = 3 hauteur pour les 3 pcitos => 1 picto : largeur = hauteur*/
}
.picto-smiley.tailleM.content {
  background-position: 0px top;
}
.picto-smiley.tailleM.neutre {
  background-position: -25px top;  /*décale vers la gauche de la largeur d'1 picto*/
}
.picto-smiley.tailleM.mecontent {
  background-position: -50px top; /*décale de 2 largeur de picto*/
}
/*tailleL*/
.picto-smiley.tailleL {
  height: 35px;  width: 35px;
  background-size: 105px 35px; /*longueur = 3 hauteur pour les 3 pcitos => 1 picto : largeur = hauteur*/
}
.picto-smiley.tailleL.content {
  background-position: 0px top;
}
.picto-smiley.tailleL.neutre {
  background-position: -35px top;  /*décale vers la gauche de la largeur d'1 picto*/
}
.picto-smiley.tailleL.mecontent {
  background-position: -70px top; /*décale de 2 largeur de picto*/
}

body.fiche .pictoCompteInternet { /*adaptations si sur fiche client*/
	display: inline-block;
	vertical-align: baseline;
}
/*pour survol ligne entiere :*/
.unTableau tr td.ligneTitre:hover .btnSuppr , .unTableau tr td.ligneTitre:hover .btnModif  /*survol ligne contenant btn modif, suppr : ravive tous les btn*/
, td:hover .btnModif  /*mars2015: pour btn dans listing K*/
, #zone_suiviK tr:hover .btnModif  /*fév2019*/
, #infoGeneral:hover .btnModif  /*fév2018*/
{
	opacity:1;
}
/*pour survol btn en lui-meme :*/
.unTableau tr td.ligneTitre .btnModif.pictoBtn:hover
, td .btnModif.pictoBtn:hover /*mars2015: pour btn dans listing K*/
, #infoGeneral .btnModif.pictoBtn:hover /*fev2018*/
/*attention a ne pas perturber picto de legende au niveau du panier (d'ou ajout de td)*/
{
	background-position: -33px -33px;
}
.unTableau tr td.ligneTitre .btnSuppr.pictoBtn:hover {
	background-position: -63px -33px;
}

.OFF_nov2019_blocAjoutLigne
{ /*bloc avec btn ajout et son libelle*/
	display: inline-block;
	color: #00b9f0;
	font-size:0.8em;
	margin-top: 15px;
}
.OFF_nov2019_blocAjoutLigne.main:hover {
	color:#025d7b;
}
.OFF_nov2019_blocAjoutLigne.main:hover .btnAjout.pictoBtn {
	background-position: -3px -33px;
}

.btnAvecPicto_typ2.btnAjout:hover .pictoBtn
{	background-position: -3px -33px;
}
.btnAvecPicto_typ2.btnModif:hover .pictoBtn
{	background-position: -33px -33px;
}
.btnAvecPicto_typ2.btnSuppr:hover .pictoBtn
{	background-position: -63px -33px;
}


.pictoEtoile.main:hover {
	background-position: -3px -33px;
}

/*picto actif : */
.pictoEtoile.pictoActif {
	background-position: -3px -63px;
}

/*picto coche ok (picto-coche-ok.png) (ex: validation form REK)*/
.coche_ok {
  /*width: 90px;*/
  margin-right: 1em;
}
.coche_ok.petit {
  width: 45px;
}
.coche_ok.floatLeft {
  float: left;
}
  .coche_ok.uneLigne
, .coche_ok.uneLigne + p
{
  vertical-align: middle;
}
.coche_ok + p {
  margin-top: 0;
}


.zone-notation /*fév2019: zone avec des étoiles pour donner unennote*/
{
    background-color:#FFF;
    display: inline-block;
    border-radius: 3px;
	line-height: 0;
    padding : 0 6px;
    margin-top: -5px;
    float: right;
}
.zone-notation .pictoEtoile
{	margin: 0px;
}
.zone-notation .pictoEtoile
{		background-position: -33px -3px;
}
.zone-notation .pictoEtoile.main:hover
{		background-position: -33px -63px;
}
.zone-notation .pictoEtoile.pictoActif
, .zone-notation .pictoEtoile.pictoActif.main:hover
{		background-position: -3px -63px;
}
/*31/07/2022 étoile couleur selon date dernier commentaire de suiviK pour commerciaux*/

/*gère picto picto_nePlusRevoir - 14/04/2025*/
.zone-notation .pictoEtoile.picto_nePlusRevoir {
  background-position: -123px -3px;
  vertical-align: top; /*aide alignement vertical de .zone-notation .pictoEtoile.picto_nePlusRevoir.pictoActif.main::after::after*/
}
.zone-notation .pictoEtoile.picto_nePlusRevoir.main:hover {
  background-position: -123px -3px;
}
  .zone-notation .pictoEtoile.picto_nePlusRevoir.pictoActif
, .zone-notation .pictoEtoile.picto_nePlusRevoir.pictoActif.main:hover
{		background-position: -123px -33px;
}
.suiviK_reduit.pictoEtoile.picto_nePlusRevoir {
  background-position: -126px -36px;
}
/*ajoute texte après (si modif possible grâce à .main)  */
.zone-notation .pictoEtoile.picto_nePlusRevoir.pictoActif.main::after {
  content: "Ne pas visiter"; /*Ne plus revoir => Ne pas visiter*/
  margin-left: 15px;
  color: orangered;
}
/*étoiles qui suivent le picto_nePlusRevoir (si modif possible grâce à .main) */
.zone-notation .pictoEtoile.picto_nePlusRevoir.pictoActif.main ~ .pictoEtoile {
  display:none;
}
/*FIN gère picto picto_sansInteret - 14/04/2025*/

/*gère picto picto_sansInteret - 14/04/2025*/
.zone-notation .pictoEtoile.picto_sansInteret {
  background-position: -93px -63px;
  vertical-align: top; /*aide alignement vertical de .zone-notation .pictoEtoile.picto_sansInteret.pictoActif.main::after::after*/
}
.zone-notation .pictoEtoile.picto_sansInteret.main:hover {
  background-position: -93px -63px;
}
  .zone-notation .pictoEtoile.picto_sansInteret.pictoActif
, .zone-notation .pictoEtoile.picto_sansInteret.pictoActif.main:hover
{		background-position: -123px -63px;
}
.suiviK_reduit.pictoEtoile.picto_sansInteret {
  background-position: -126px -66px;
}
/*ajoute texte après (si modif possible grâce à .main)  */
.zone-notation .pictoEtoile.picto_sansInteret.pictoActif.main::after {
  content: "Aucun intérêt à visiter"; /*Ne plus revoir => Ne pas visiter*/
  margin-left: 15px;
  color: orange;
}
/*étoiles qui suivent le picto_sansInteret (si modif possible grâce à .main) */
  .zone-notation:not(.modifiable) .pictoEtoile:not(.pictoActif)
, .zone-notation.modifiable .pictoEtoile.picto_sansInteret.pictoActif.main ~ .pictoEtoile
, .zone-notation.modifiable[data-jc-notation="9"] .pictoEtoile.picto_sansInteret  /*:not(.pictoActif)*/
, .zone-notation.modifiable[data-jc-notation="8"] .pictoEtoile.picto_nePlusRevoir  /*:not(.pictoActif)*/
{
  display:none;
}
/*FIN gère picto picto_sansInteret - 14/04/2025*/


.suiviK_reduit.pictoEtoile .txt {
  font-size: 10px;
  line-height: 18px;
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255,255,255, 0.99);
  font-weight: bold;
  /*background-color: yellow;*/
  height: 18px;
  width: 18px;
  text-align: center;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.99), 0px 0px 2px rgba(0, 0, 0, 0.99);
}
.suiviK_reduit.pictoEtoile {
  position: relative;
  padding: 9px;
}
.suiviK_reduit.pictoEtoile.vert {
  background-position: -66px -06px;
  /*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.99), 0px 0px 2px rgba(0, 0, 0, 0.99)*/
  /*
  font-size: 12px;
line-height: 13px;
position: absolute;
top: 7.5px;
left: 0;
color: rgba(255,255,255, 0.99);
font-weight: bold;
background-color: yellow;
height: 18px;
width: 18px;
text-align: center;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.99), 0px 0px 2px rgba(0, 0, 0, 0.99);
  */
}
.suiviK_reduit.pictoEtoile.orange {
  background-position: -66px -36px;
}
.suiviK_reduit.pictoEtoile.rouge {
  background-position: -66px -66px;
}
.suiviK_reduit.pictoEtoile.neutre {
  background-position: -6px -66px;
}


/* * * * FIN petit btn image * * * */


/* * * picto étoile (ex: pour trophee EEPO) - 25/08/2023 * */
/* source :
https://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container
https://www.sitepoint.com/css3-transform-background-image/
*/
.texteSurEtoile {
  width: 1.6rem; height: 1.6rem;
  line-height: 1.8rem; /*un chouille plus (≈+0.2) que width/height pour meilleur alignement*/
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
  font-weight: bold;
  color: #000;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1; /*!*/
}
.texteSurEtoile.taille-S {
  width: 1.6rem; height: 1.6rem;
  line-height: 1.8rem;
}
.texteSurEtoile.taille-M {
  width: 2rem; height: 2rem;
  line-height: 2.2rem;
}
.texteSurEtoile.taille-L {
  width: 2.4rem; height: 2.4rem;
  line-height: 2.7rem;
}
.texteSurEtoile.taille-XL {
  width: 3.4rem;
  height: 3.4rem;
  line-height: 3.9rem; /*(≈+0.5 car XL ici)*/
  font-size: 1.6em;
}
/*astuce etoile en fond (via :before) pouvant subir rotation (sans impacter le texte)*/
.texteSurEtoile:before {
  content: "";
  position: absolute;
  /*width: 200%;
  height: 200%;*/
  top: 0%;
  left: 0%;
  z-index: -1; /*!!!*/
  transform: rotate(10deg);
  background: url(/images/picto/picto-etoile-jaune.png) 0 0 no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
}
.zoneInfoEtStat .texteSurEtoile.sansRotation:before {
  transform: rotate(0deg);
}
/*sur bloc article :*/
.articles .article span.avecEtoile {
  display: none; /*pour ne pas voir dans autre modes que modePhoto*/
}
.modePhoto .articles .article span.avecEtoile {
  display: block;
  position: absolute;
  left: 5px;
  bottom: 5px;
  transform: rotate(-0deg) ;
}
.modePhoto .articles .article span.avecEtoile.reduitCVE {
  left: 0px;
  bottom: -4px;
  transform: rotate(-0deg) scale(0.7);
}
/*pour que ophta voit mieux les articles avec trophee/etoile*/
.modePhoto .articles li.article.avecEtoile  {
  background-color: rgba(250, 255, 136, 1)!important;
}
/* * * picto étoile (ex: pour trophee EEPO) - 25/08/2023 * */

/* * * picto trophee EEPO (basé sur pictoEtoile) - 31/07/2023 * */
/*taille-S*/
.pictoEtoile.trophee_EEPO.taille-S {
	-webkit-background-size: 180px; -moz-background-size: 180px; -o-background-size: 180px; background-size: 180px; /* largeur 300/3 = 100 */
  padding: 11px;
  vertical-align: middle;
  background-position: -115px -7px; /*contour seul*/
}
.pictoEtoile.trophee_EEPO.taille-S.pictoActif {
  background-position: -115px -43px; /*pleine*/
}
/*taille-M*/
.pictoEtoile.trophee_EEPO.taille-M {
	-webkit-background-size: 240px; -moz-background-size: 240px; -o-background-size: 240px; background-size: 240px; /* largeur 300/3 = 100 */
  padding: 14px;
  vertical-align: middle;
  background-position: -154px -10px; /*contour seul*/
}
.pictoEtoile.trophee_EEPO.taille-M.pictoActif {
  background-position: -154px -58px; /*pleine*/
}
  .CNX_CVE #contenuAffichage ul.tableau1 td .pictoEtoile.trophee_EEPO.taille-M
, .CNX_CVE #contenuAffichage ul.tableau1 td .pictoEtoile.trophee_EEPO.taille-M.pictoActif
{
  cursor: pointer ;
}

.pictoEtoile.trophee_EEPO.taille-M.force {
background-color: rgb(235, 193, 134);
border-radius: 50px;
border: 2px solid rgb(235, 193, 134);
}
.pictoEtoile.trophee_EEPO.taille-M.force.pictoActif {
  background-color: rgb(159,210,165);
  border-radius: 50px;
  border: 2px solid rgb(159,210,165);
}

/*dans stat K*/
/*#zoneInfoEtStat .trophee_EEPO {
  background-size: 480px;
  background-position: -306px -111px;
  width: 60px;
  height: 60px;
  vertical-align: middle;
  position: relative;
  margin: 0;
}
#zoneInfoEtStat .trophee_EEPO > span {
font-size: 1.4em;
position: absolute;
line-height: 60px;
width: 80px;
left: -10px;
top: 5px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #000 !important;
}*/

/* * * * FIN picto trophee EEPO * * * */

/* * * * picto renouvellement (ex: dans EEPO ophta - 20/08/2023) * * * */
.pictoRenouv.taille-S {
  display: inline-block;
  height: 19px;
  width: 19px;
  background-color: #A49E22;
  border-radius: 30px;
  vertical-align: middle;
  background-image: url("/images/picto/picto-renouveler.svg");
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
  background-size: 76%;
}
.pictoRenouv.avecModif.taille-S {  /*en orange si renouvellement avec modif (sinon, par défaut en vert = "renouvellement à l'identique"))*/
  background-color: orange;
  border-radius: 4px; /* Plus carré pour mieux marquer la différence avec "Renouvellement à l'identique"*/
}
/* * * * FIN picto renouvellement (ex: dans EEPO ophta - 20/08/2023) * * * */


/* * * * Picto mini (avec lettre) * * * */
.pictoLettre {
	width: 1.0em;  height:1.0em;
	background-color: #A1B0B6;/*gris-bleu par defaut*/
	display: inline-block;
	border-radius: 2em;/*rond*/
	margin-left: 4px;
	text-align: center;
	overflow: hidden;
	font-weight: normal;
	line-height: 1.2em;
	/* vertical-align:top; */
}
.pictoLettre.bloque { /*ex: pour bloque*/
	background-color:orangered;/*gris-bleu*/
	border-radius: 0.2em;/*+ carre comme 'stop'*/
}
.pictoLettre.archive { /*idem mais noir. ex: pour client archive*/
	background-color:#000;/*noir*/
	border-radius: 0.2em;
}
.pictoLettre.type { /*ex: pour typeClient*/
	background-color:#A1B0B6;/*gris-bleu*/
}
.pictoLettre.vert { /*ex: pour statut ouverture compte finalise ok (avec coche) (le client a confirme son mail)*/
	background-color:#A49E22;
	font-weight:bold;/*gras car coche peu visible*/
}
.pictoLettre.orange { /*ex: le client n'a pas encore confirmer son mail*/
	background-color:orange;
	border-radius: 0.2em;/*+ carre comme 'stop'*/
}
.pictoLettre.rouge { /*ex: erreur dans prelevement*/
	background-color:orangered;
	border-radius: 0.2em;/*+ carre comme 'stop'*/
}
.pictoLettre.noir { /*ex: ligne detruite (comme archive)*/
	background-color:#000;
	border-radius: 0.2em;
}
.pictoLettre.bleu { /*ex: nouvelle demande ouverture compte (client)*/
	background-color:#00b9f0;
	/*font-weight:bold;*//*gras car coche peu visible*/
}
.pictoLettre.grisClair { /*ex: ok mais pour ne pas mettre trop en valeur (pour bien voir les autres pb. Evite que toutes les ligne de prelevemetn soient en vert)*/
	background-color:#BBB;
}
.pictoLettre span { /*la lettre en elle-meme*/
	color: #FFF;
	font-size: 0.7em;
	display: block;
	position: relative;
	top:-1px;
	/* vertical-align:top; */
}

/* * * * FIN Picto mini (avec lettre) * * * */




/*bouton fiche technique :*/
.btnFicheT
, .btnAvecPicto
{
	text-align: center;
	margin-bottom: 0 !important;
	margin-bottom: 1px !important;/*sept2015*/
}
body#pageLA .btnFicheT /*si a la page de listing des articles, corrige aspect*/
, body.accueil .btnFicheT
, body#pageLA .btnAvecPicto , body.accueil .btnAvecPicto
{ /*ou accueil*/
	/*float: right; */ font-size:1em !important; font-weight:normal !important;
}
.btnFicheT a {
	display: block; /*XXXtext-align:center;*/ line-height: 1.2em;
}
.btnFicheT a.newWindow::after { /*pour centrage du picto nouvelle fenetre a droite du texte*/
	vertical-align:middle;
}
.btnFicheT a span.pictoFicheT { /*span qui englobe le picto image*/
	vertical-align:middle;
	display: inline-block;
}
.btnFicheT a img:nth-child(1) { /*1re image (la feuille blanche)*/
	width:20px; /*XXXheight:26px;*/ display:inline-block; /*XXXXborder-radius:0px;*/
}
.btnFicheT a img:nth-child(2) { /*2e image (la photo article a placer sur feuille blanche)*/
	width: 16px; margin-left:-18px; margin-bottom: 2px; position: relative;
}


.btnAvecPicto img {
	height: 30px;  width: auto; /*display:inline-block;*/
}
.btnAvecPicto img.taille05 { /*demi taille : 0,5 => 05*/
	height: 20px;
}
.btnAvecPicto img.taille2 {
	height: 40px;
}
.btnAvecPicto img.taille3 {
	height: 60px;
}

.btnFicheT span.txtBtnFicheT
, .btnAvecPicto .txtBtnAvecPicto
{ /*2e span : celui avec le texte (pour mettre a droite de l'image et centré verticalement)*/
	vertical-align: middle;
	margin-left: 7px;
}


/*adaptation pour picto placer en haut au centre (ex: btn "renouveler" en accueil)*/
.btnAvecPicto.pictoAuDessus img {
  vertical-align: initial;
  margin-top: 1em;
  margin-bottom: 0.8em;
}
.btnAvecPicto.pictoAuDessus .txtBtnAvecPicto {
  vertical-align: initial;
  margin-left: 0;
  display: block;
  margin-bottom: 1em;
}



.bouton.info { /*mini bouton pour aide (rond blanc avec contour avec "?" au centre)*/
display: inline-block;
border: 1px solid #00b9f0; background-color: white;
color: #00b9f0;
border-radius: 1em;
width: 1.6em;
height: 1.6em; /*26/08/2021*/
line-height: 1.5em;
padding: 0px;  padding-left: 1px;/*corrige micro decalage*/
text-align: center;
/*si un "i" plutot qu'un ? :
font-style: italic;
font-family: Times;
font-weight: bold;
font-size: 18px;
width: 20px;
height: 20px;
line-height: 20px; padding-left: 0px;
*/
}
.bouton.info.largeurAuto { /*pour picto Aide info avec texte dedans. Ne dois pas etre rond mais s'etendre en largeur*/
	width:auto; padding:0 8px;
}
.bouton.info .info_texte { /*le texte qui peut etre ajoute dans bouton.info */
	position: absolute;
	margin-left:0.8em;/*1/2 de width de bouton.info*/
}
a.bouton:hover.info .info_texte {
color: #025d7b; /*bleu sombre*/
}

#fondDePageSombre {
	display: none;
	background-color: #555;
	background-color: rgba(0, 35, 45, 0.75);
	top: 0;  left: 0;  width: 100%;  height: 100%;
	position: fixed;  z-index: 100;
}
#zoneLecteurVideo {
	display: none;
	z-index: 101;  /*au-dessus de fondDePageSombre*/
	position: absolute;
}

.offre_PN {
	position: relative;  /*permet au bloc de passer devant le fond sombre si on l'affiche*/
}
.offre_PN.enValeur { /*pour faire resortir la zone complète car le texte est peu lisible quand il y a le fond noir*/
	background-color: #EEE;
	border-radius: 4px;
	  z-index: 101;
}
.offre_PN .zoneBoutonsRefuserAccepter { /*boutons permettant au client de refuser ou de chosiir l'offre proposee par CVE*/
	display:none;
}
.offre_PN.enValeur .zoneBoutonsRefuserAccepter { /*boutons permettant au client de refuser ou de chosiir l'offre proposee par CVE*/
	display:block;
}
.offre_PN .pastille_zone { /*la zone affichant le prix en euro*/
	background-color: red;  color: yellow;
	display: inline-block;
	border-radius: 4px;
	font-size: 0.9em;
	padding: 0.5em; margin-bottom: 0.4em; margin-right:0.5em;
		-ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
    		transform: rotate(-7deg); /*-7 est pas joli sous FF*/
	-webkit-font-smoothing: subpixel-antialiased; /*ameliore lisibilite sous Safari*/
}
.offre_PN .pastille_prix { /*le prix en lui meme*/
	font-size: 1.5em;
	padding-top: 0.3em;
	line-height: 0.9em;
}
.offre_PN .pastille_prix .centimes { /*les centimes d'un montant en + petit*/
	font-size: 0.6em;
}
.offre_PN .pastille_prix sup { /*ex: HT*/
	font-size: 0.5em;
	vertical-align: top;
	line-height: 1em;
}
/*05/01/2022*/
.offre_PN .mentionImportantePourCVE {
  text-align: center;
  padding-bottom: 7px;
  font-weight: bold;

  background-color: rgb(221, 0, 0);
  color: yellow;
  border-radius: 4px;
  padding: 1em 0.5em;
  font-size: 1.5rem;
  line-height: 1em;
  margin-bottom: 0.1em;
}



/*avr2014:plus specifique que "li" car gene animation bootstrap (les petits points dans carroussel)*/
body.listing ul.liste1 > li span /*avr2014 : plus specifique que "span"*/  /*anim quand afiche detail ligne d'un listing*/
, .offre_PN ul.articles > li /*sept2015: article proposes par CVE, dans PN*/
, a
, .bouton
, .boutonArticles
{ /* animation sur certain element */
    /*rq mai2018 : pas de height ici, sinon perturbe element des menus au survol*/
	-webkit-transition-property: opacity, color, background-color,	box-shadow,	bottom, border-color, width, /*height,*/ padding-top, margin-top, border-width, transform, z-index ; /*, width, padding, margin;*/
	-moz-transition-property:    opacity, color, background-color,	box-shadow,	bottom, border-color, width, /*height,*/ padding-top, margin-top, border-width, transform, z-index ;
	-ms-transition-property:     opacity, color, background-color,	box-shadow,	bottom, border-color, width, /*height,*/ padding-top, margin-top, border-width, transform, z-index ;
	-o-transition-property:      opacity, color, background-color,	box-shadow,	bottom, border-color, width, /*height,*/ padding-top, margin-top, border-width, transform, z-index ;
	transition-property:         opacity, color, background-color,	box-shadow,	bottom, border-color, width, /*height,*/ padding-top, margin-top, border-width, transform, z-index ;

	-webkit-transition-duration: 0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  /*0.3s,*/    0.3s,        0.3s,       0.3s ; /*1 delai pour tous ou 1 delai pour chaque property */
	-moz-transition-duration:    0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  /*0.3s,*/    0.3s,        0.3s,       0.3s ;
	-ms-transition-duration:     0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  /*0.3s,*/    0.3s,        0.3s,       0.3s ;
	-o-transition-duration:      0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  /*0.3s,*/    0.3s,        0.3s,       0.3s ;
	transition-duration:         0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  /*0.3s,*/    0.3s,        0.3s,       0.3s , 1.0s , 0.5s ;
}
section > ul.articles > li
{ /* animation sur bloc articles */
    /*rq mai2018 : avec height ici*/
	-webkit-transition-property: opacity, color, background-color,	box-shadow,	bottom, border-color, width, height, padding-top, margin-top, border-width, transform, z-index ; /*, width, padding, margin;*/
	-moz-transition-property:    opacity, color, background-color,	box-shadow,	bottom, border-color, width, height, padding-top, margin-top, border-width, transform, z-index ;
	-ms-transition-property:     opacity, color, background-color,	box-shadow,	bottom, border-color, width, height, padding-top, margin-top, border-width, transform, z-index ;
	-o-transition-property:      opacity, color, background-color,	box-shadow,	bottom, border-color, width, height, padding-top, margin-top, border-width, transform, z-index ;
	transition-property:         opacity, color, background-color,	box-shadow,	bottom, border-color, width, height, padding-top, margin-top, border-width, transform, z-index ;

	-webkit-transition-duration: 0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  0.3s,   0.3s,        0.3s,       0.3s ; /*1 delai pour tous ou 1 delai pour chaque property */
	-moz-transition-duration:    0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  0.3s,   0.3s,        0.3s,       0.3s ;
	-ms-transition-duration:     0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  0.3s,   0.3s,        0.3s,       0.3s ;
	-o-transition-duration:      0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  0.3s,   0.3s,        0.3s,       0.3s ;
	transition-duration:         0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,  0.3s,   0.3s,        0.3s,       0.3s , 1.0s , 0.5s ;
}
input[type="submit"] { /* idem amis sans width (a cause de anim pour btn MAJ dans doc) */
	-webkit-transition-property: opacity, color, background-color,	box-shadow,	bottom, border-color, padding-top, margin-top, border-width ; /*, width, padding, margin;*/
	-moz-transition-property:    opacity, color, background-color,	box-shadow,	bottom, border-color, padding-top, margin-top, border-width ;
	-ms-transition-property:     opacity, color, background-color,	box-shadow,	bottom, border-color, padding-top, margin-top, border-width ;
	-o-transition-property:      opacity, color, background-color,	box-shadow,	bottom, border-color, padding-top, margin-top, border-width ;
	transition-property:         opacity, color, background-color,	box-shadow,	bottom, border-color, padding-top, margin-top, border-width ;

	-webkit-transition-duration: 0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,        0.3s,       0.3s ; /*1 delai pour tous ou 1 delai pour chaque property */
	-moz-transition-duration:    0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,        0.3s,       0.3s ;
	-ms-transition-duration:     0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,        0.3s,       0.3s ;
	-o-transition-duration:      0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,        0.3s,       0.3s ;
	transition-duration:         0.7s,    0.5s,  0.7s,				0.7s,		0.2s,   0.7s,         0.3s,        0.3s,       0.3s ;
}

button , button.btn:hover  /*btn pour afficher menu (ex: a gauche ligne d'un doc)*/ /*fev2014: button.btn:hover car bootstrap utilise une animation sur hover qui enlevait alors celle-ci (rq: une declaration remplace toute les precedent. Meme si ne concerne d'autres proprietes)*/
, .btn-success.fileinput-button  /*bouton pour upload fichier*/
/*, table tr td span.btnBlocId*/  /*mai2015: bloc avec id cliquable dans liste avec tr/td et non ul/li*/
, .btnBlocId /*jan2015:tous et pas que ceux dans table (ci-dessus)*/
, .animationSimple /*jan2016: + souple (pas pour un element precis) */
{
	-webkit-transition-property:	opacity,	color,	background-color,	border-color ;
	-moz-transition-property:		opacity,	color,	background-color,	border-color ;
	-ms-transition-property:		opacity,	color,	background-color,	border-color ;
	-o-transition-property:			opacity,	color,	background-color,	border-color ;
	transition-property:			opacity,	color,	background-color,	border-color ;

	-webkit-transition-duration:	0.5s,		0.5s,		0.7s,			0.7s	;
	-moz-transition-duration:		0.5s,		0.5s,		0.7s,			0.7s	;
	-ms-transition-duration:		0.5s,		0.5s,		0.7s,			0.7s	;
	-o-transition-duration:			0.5s,		0.5s,		0.7s,			0.7s	;
	transition-duration:			0.5s,		0.5s,		0.7s,			0.7s	;
}

.animationShadow /*aout2020: aussi avec contour ombré (ex: bloc pack : contour lumineux) */
{
	-webkit-transition-property:	opacity,	color,	background-color,	border-color, box-shadow ;
	-moz-transition-property:		opacity,	color,	background-color,	border-color, , box-shadow ;
	-ms-transition-property:		opacity,	color,	background-color,	border-color, , box-shadow ;
	-o-transition-property:			opacity,	color,	background-color,	border-color, , box-shadow ;
	transition-property:			opacity,	color,	background-color,	border-color, , box-shadow ;

	-webkit-transition-duration:	0.5s,		0.5s,		0.7s,			0.7s, 0.7s;
	-moz-transition-duration:		0.5s,		0.5s,		0.7s,			0.7s, 0.7s	;
	-ms-transition-duration:		0.5s,		0.5s,		0.7s,			0.7s, 0.7s	;
	-o-transition-duration:			0.5s,		0.5s,		0.7s,			0.7s, 0.7s	;
	transition-duration:			0.5s,		0.5s,		0.7s,			0.7s, 0.7s	;
}

#menuConnexion.connexion { /* animation du menu pour se connecter */
	margin-right:-62px; /*sera mis a zero a l'affichage*/
	opacity:0.0; /*sera mis a 1 a l'affichage*/

	-webkit-transition-property: top , margin-right , opacity ; /*nov2013: ajout de margin-right et opacity car menu connexion n'apparait plus depuis le haut de page*/
	-moz-transition-property:    top , margin-right , opacity ;
	-ms-transition-property:     top , margin-right , opacity ;
	-o-transition-property:      top , margin-right , opacity ;
	transition-property:         top , margin-right , opacity ;

	-webkit-transition-duration: 1.0s ;
	-moz-transition-duration:    1.0s ;
	-ms-transition-duration:     1.0s ;
	-o-transition-duration:      1.0s ;
	transition-duration:         1.0s ;
}




.blocMax { /*bloc global (mais d'autres zone peuvent prendre toute la largeur des grands ecrans)*/
	width:100%; max-width: 1200px; min-width: 320px; /*background-color:green;*/
	margin:0 auto; /*centrage du bloc horizontalement grace a auto*/
	text-align: center;
	/*display: inline-block;*/ display: block;/*evite que si fenetre trop large, la liste article (si que 1 resultat, ou 2) se retrouve a droite de en-tete ou a gauche du pied de page*/
}
.blocCentre { /*pour bloc Dans blocMax qu'il faut centrer*/
	display: inline-block;
}
.bloc-inline-block { /*bloc contenant les infos a definir (les blocs blancs)*/
	display:inline-block!important; /*pour tenir ensemble si sur plusieurs lignes*/
}


.lesBlocsInfo { /*bloc contenant plusieurs blocInfo */
	/*background-color:gray;*/ margin:0 auto; text-align: left;
	/*min-width:640px;*/ max-width:800px; /*display:inline-table; */
}

/*pour les blocs contenant des champs,... remplacer par des fieldset (voir un peu apres)*/
.blocInfo { /*bloc contenant les infos a definir (les blocs blancs)*/
	background-color:#FFF;
	padding:20px; width:100%; display:inline-table;/*inline-block depasserait a cause du padding*/
	text-align: left; font-size:1em;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
}
.titreBlocInfo { /*titre au-dessus d'un blocInfo*/
	color:#777; font-weight:bold; font-size:0.8em;
	display: block; width: 100%;
}
.blocInfo label { /*les titres des infos dans blocInfo*/
	color:#777; font-weight:normal; font-size:0.9em;
	display: block; /*background-color:red;*/
}
.blocInfo input[type="text"] ,
.blocInfo input[type="password"] { /*les champs dans blocInfo*/
	width: 100%;
}

/*nov2012: en utilisant des fieldset et legende*/
fieldset { /*zone qui contient champs, boutons,… (normalement avec un cadre et un titre a cheval sur la bordure superieure) */
	background-color: #FFF; border: 0px;
	margin: 0; margin-bottom:7px; padding: 10px 10px;
	ZZmargin-top: 1.2em; /*pour laisser space au-dessus (poru faire tenir le titre)*/
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	font-size:1em;
}
legend { /*titre d'une zone fieldset*/
	padding: 0px;margin: 0; /*ZZmargin-left: -10px;*//*= valeur padding-left de fieldset (mais en negatif)*/
	/*ZZposition: relative; ZZtop: -0.7em; ZZmargin-top:-0.9em;*//*pour FF*/  /*pour decaler le titre et le mettre au-dessus de la zone fieldset (unite: em pour que ça s'adapte selon taille police)*/
	/*ZZline-height: 0em;*//*pour pas laisser d'espace d'interligne disgracieux*/
	/*color:#777;*/ /*font-weight:bold;*/ /*font-size:0.8em;*/ /*display: block; width: 100%;*/

	text-transform: uppercase; color:#333; font-size: 0.7em;/*mai2014: + visible*/
	width:100%;/*mai2014: car bizarrement, sur listing FK : tout compresse a gauche*/
	/*test: font-variant:small-caps; font-size: 1em; */
}
legend span { /*si span dans legend : pour texte normal pas en majuscule*/
	text-transform: none;/*enleve majsucule*/
	font-size:1.1em;
}
fieldset p {
	margin: 5px 0px;
}




.zone-bloc
, body.articleParametrage #colonnesODetOG > fieldset > ul /*les ul de param article (avec signe ">" pour ne pas prendre les sous elements*/
, body.articleParametrage #colonnesODetOG > #zoneOD >fieldset > ul /*pour OD*/
, body.articleParametrage #colonnesODetOG > #zoneOG > fieldset > ul /*pour OG*/
, body.document .blocCentre fieldset > ul /*juil2015: remplace  .blocCentre > fieldset  par  .blocCentre fieldset  . Pour prendre ne compte fieldset ne suivant pas directement .blocCentre (ex: totaux panier)*/
, body.fiche section > div > fieldset > ul
, fieldset#zoneFiltre > ul
, fieldset > ul.liste1 /*liste comme listing doc*/
, fieldset > ul.tableau1 /*tableau comme listing stock, K*/
, #zoneGenerer > ul
/*, #zoneReglementClient > ul //suppr dec2015: utilise desormais zone-bloc*/
{ /*mai2014: bloc blanc avec ombre (va remplacer fieldset ul)*/
	background-color: #FFF;
	padding: 8px;
	vertical-align: top;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25); /*legere ombre pour faire ressortir ces blocs*/
}

.zone-bloc.reduit {
	font-size: 0.8em;
}
.detail_1 { /*zone de detail masquee par defaut (ex: page contact)*/
	display:none;
}


fieldset ul, fieldset li {
  margin: 0;
  padding: 0;
}
fieldset {
	background-color:transparent;
	padding:0; margin:0;
	margin-right: -2px;  padding-right: 2px;  /*si je met une ombre au bloc ul dans un fieldset (sinon peut etre coupe a cause de overflow mis si fieldset masque avec JQuery) XXpx = nb de pixel de l'ombre*/
	margin-bottom:14px;
	text-align: left;
}
fieldset:last-child { /*si dernier fieldset*/
	margin-bottom:0px;
}


body.document ul.articles { /*que page document*/
	width:auto!important;/*sinon les blocs articles qui s'affichent pour offre promotionnelle sur PN, ne sont pas centres, car j'ai mis 100% dans feuille listeArticles.css a ul.articles*/
}
body.document > fieldset { /*que page document*/
	/*margin-bottom: 14px;*//*augmente ecart audessus legend zone fieldset*//*remplace apr ci-dessus sinon ecart + grd sur FF*/
}
body.document > fieldset > ul { /*que page document*/
	margin-bottom: 14px;/*augmente ecart entre bloc*/
}
fieldset ul {
	list-style: none;
	/*background-color: #FFF;*/
	border-width: 0px; margin: 0; margin-bottom:7px; /*margin-bottom:14px; mis dans fieldset, directement*/ /*padding: 10px 10px;*/
	font-size:1em;
	/*-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25);*/ /*legere ombre pour faire ressortir ces blocs*/
}
fieldset ul:last-child { /*si derneir ul => pas d'espace en bas*/
	margin-bottom:0px;
}
.zoneConfirmation {  /*ex: zone detruire AV*/
	/*list-style: none;*/
	border-width: 0px; margin: 0; margin-bottom:7px; padding: 10px 10px;
	font-size:1em;
	/*background-color: #FFF;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
	box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25); *//*legere ombre pour faire ressortir ces blocs*/
}

.zoneConfirmation {
	font-size:0.8em;
	box-shadow:none;
	border-width:1px;
}
.zoneConfirmation.texteInfo , .zoneConfirmation.texteErreur , .zoneConfirmation.texteReussi , .zoneConfirmation.texteAlerteMax { /*reprise de texteInfo pour ne pas redefinir balise p*/
	color:#000;/*couleur basique et non en couleur*/
	background-color:#f2dede;
}

/*zone confirmation simple (couleur claire)*/
.zoneConfirmation.alerte0 { /*reprise de texteInfo pour ne pas redefinir balise p*/
	color:#000;/*couleur basique et non en couleur*/
	background-color:#FFF; /*fcf8e3:jaune clair d'info*/
}
.zoneConfirmation.alerte0 .btnConfirmer {
	/*background-color:orangered;*/
}
/*simple avec btn orange*/
.zoneConfirmation.alerte1 { /*reprise de texteInfo pour ne pas redefinir balise p*/
	color: #000;
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
}
.zoneConfirmation.alerte1 .btnConfirmer {
	background-color:orange;
}
/*zone confirmation attention (couleur rougeatre, btn rouge)*/
.zoneConfirmation.alerte2 { /*reprise de texteInfo pour ne pas redefinir balise p*/
	color:#000;
	background-color:#f2dede; /*rouge clair*/
	border: 1px solid #eed3d7;
}
.zoneConfirmation.alerte2 .btnConfirmer {
	background-color:orangered;
}
/*zone confirmation danger (couleur noire)*/
.zoneConfirmation.alerte3 { /*reprise de texteInfo pour ne pas redefinir balise p*/
	color:orangered;
	background-color:#000;
	border: 1px solid orangered;
}
.zoneConfirmation.alerte3 .btnConfirmer {
	background-color:orangered;
}


.zoneConfirmation .zoneBoutons .bouton
, .zone2boutons .bouton
, .zone2boutons.zoneTexteInfo label /*fev2017 : texte sous bouton associe (ex: creation comtpe - btn ophta)*/
, .zone2parties.zoneBlocGrand /*jan2019 : si 2 bloc info (ex: en page accueil Renouveler CK + Afficher Calculateur)*/
, .zoneMultiParties /*17/05/2022: pour réutiliser cette partie commune si 2 ou 3 parties*/
{
	width: 49%; display: inline-block;
	margin:0; padding: 10px;
	margin-right: 1%; margin-left: 1%;
	text-align: center;
  vertical-align: top;/*17/05/2022 (ex: ouverture compte pour éviter décalage vertical)*/
}
.zoneMultiParties.zone3parties.zoneBlocGrand /*17/05/2022 : si 3 parties info (ex: ouverture compte)*/
{
	width: 32.33%; display: inline-block;
}


/*nov2020 : ajuster pour aller jusqu'au bord gauche et droit*/
.zone2parties.zoneBlocGrand.zone1 { /*1ere zone */
  width: 50%;
  padding: 0;  padding-right: 1%;
  margin: 0;
}
.zone2parties.zoneBlocGrand.zone2 { /*2e = dernière zone */
  width: 50%;
  padding: 0;  padding-left: 1%;
  margin: 0;
}
/*17/05/2022 : si 3 parties  (ex: ouverture compte)*/
.zone3parties.zoneBlocGrand {
  width: 33.33%;
  padding: 0;  padding-right: 1%;
  margin: 0;
}
.zone3parties.zoneBlocGrand.zone1 { /*1ere zone */
  padding-right: 1%;
}
.zone3parties.zoneBlocGrand.zone2 { /*2e = zone milieu */
  padding-left: 1%; padding-right: 1%;
}
.zone3parties.zoneBlocGrand.zone3 { /*3e = dernière zone */
  padding-left: 1%;
}

.zone1partie.zoneBlocGrand {
    padding: 10px;
    display: inline-block;
    width: 98%;
    margin-right: 1%;  margin-left: 1%;
}
.zoneConfirmation .zoneBoutons .bouton {
	font-size: 1.2em;
}
.zoneConfirmation .zoneBoutons {
	padding-top: 15px;
}

.zoneConfirmation .zoneBoutons .bouton:first-child
, .zone2boutons .bouton:first-child { /*enleve marge de gauche si besoin*/
margin-left: 0;
}
.zoneConfirmation .zoneBoutons .bouton:last-child
, .zone2boutons .bouton:last-child
, .zone2boutons.zoneTexteInfo label:last-child /*fev2017 : texte sous bouton associe (ex: creation comtpe - btn ophta)*/
{
margin-right: 0;
}

.fenetreSimple fieldset ul {  /*si dans une fenetre popup (on enleve certains aspects pas utiles)*/
	-webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius:0px; /*pas d'arrondi*/
	box-shadow: none; /*pas d'ombre*/
	background-color: inherit; /*pas de fond en couleur*/
	padding: 0px; margin: 0; /*pas de marge en +*/
}

fieldset li
, .blocChps /*blocs qui se comoprtent comme des li (mais déjà dans ul et li) ex: PRTR_adresse*/
{
	margin: 4px 0px;
}
fieldset li span.apres { /*permet un span dans un li de se placer apres autre 1er element du li (ex: tel contact fiche K)*/
	display: inline-block;
	margin-top:-1px;/*si trop etroit va a la ligne. +1px : evite de toucher chp du dessus. -1px: fusionne ligne pour pas avoir 2 lignes en contact*/
}
li:first-child { /*ou first-of-type*/ margin-top: 0; }
li:last-child { /*ou last-of-type*/ margin-bottom: 0; }
nav ul li:last-child { /*ou last-of-type*/ margin-bottom: inherit; margin-bottom: 4px;  } /*annule marge a zero si dernier element du element du menu*/

/*champ en colonne pour prendre moins de place*/
#zone_convertisseur li {
    margin-top:4px; /*annule li:first-child*/
    max-width:109px;
    display: inline-block;
    vertical-align: top;
}
#zone_convertisseur li.zone_CBV { /*ChoixBesoinsVisuels (convertisseurLL)*/
    max-width: initial;
}
#zone_convertisseur li .valExacte /*valeur exacte saisie dans l'autre unité (mm ou Dp). S'affiche sous le champ de saisie*/
, #zoneOD-geometrie .valExacte
, #zoneOG-geometrie .valExacte
{
    font-size:0.8em;
    color:#A49E22;
}

/*pour masquer/afficher les menus/chps de puissance lunettes, lié au calculateur intégré*/
  #zoneOD-geometrie.paramLunettes_invisible .puissLunettes
, #zoneOG-geometrie.paramLunettes_invisible .puissLunettes
, #zoneOD-parametre.paramLunettes_invisible .puissLunettes
, #zoneOG-parametre.paramLunettes_invisible .puissLunettes
{
    opacity : 0.0;
    /*visibility: hidden;*/
    cursor: default;/*evite d'afficher la main au survol du menu, bien que masqué*/
}

  .bouton.calculateur_couleur
, body.prixMasques #btn_afficherMasquerPrix a.bouton /*qd prix masqués => btn marron*/
{ /*jan2019 btn marron*/
    background-color: #c09853
}

fieldset label { /*les titres des infos dans blocInfo*/
	color:#777; font-weight:normal; font-size:0.9em;
}
fieldset label.devant  /*pour label a gauche d'un champ a droite*/
, .blocChps.devant  /*ex: PRTR_adresse*/
{
	display: inline-block; vertical-align: text-top; /*text-top semble mieux que text-bottom*/
	white-space: nowrap;
}
fieldset label.devant.haut  /*pour label devant une valeur un peu longue (ex: materiau)*/
, .blocChps.devant.haut  /*ex: PRTR_adresse*/
{
	vertical-align: top; /*remplace le text-bottom par defaut d'un label. (pas text-top ici)*/
}
fieldset label.dessus { /*pour label au dessus d'un champ en-dessous*/
	display: block;
}
/*fieldset label.apres,*/
label.apres { /*pour label apres un champ. En fait, un label apres un checkbox ou bouton radio (utilise quand ceux-ci situe sur meme ligne et pas l'un sous l'autre)*/
	cursor:pointer; white-space: nowrap;/*pas de retour a la ligne*/
	font-size:1em;/*regrossi le texte car un label normal est ecrit + petit*/
	color:inherit; /*pour mettre comme le texte normal et pas comme les label classique + discret*/
	display: inline-block; /*pour que le pointeur en main ne clignote pas a l'intersection du label et de la case a cocher ou radio btn*/
	margin-right: 15px; /*pour laisser espace avant le suivant*/
}
label.apres:last-child { /*si dernier label*/
	margin-right: 0px; /*espace pas utile si dernier element*/
}
label.mini { width: 80px; }

label.apres.dessous { /*pour label mis l'un en-dessous de l'autre (1 par ligne) (ex: dans popup modif article)*/
	display: block;
}

span.nanoLabel {/*micro label place juste deavnt un chp (ex:K devant chp n° client, dans recherche)*/
	text-align: right;
	display: inline-block;
	padding-right:1px;
}
span.nanoLabel.taille1car {/*taille de 1 caractere*/
	margin-left: -1.0em;
	width: 1.0em;
}
span.nanoLabel.taille2car {/*taille de 2 caracteres*/
	margin-left: -1.5em;
	width: 1.5em;
}



fieldset input[type="text"] ,
fieldset input[type="password"] { /*les champs dans blocInfo*/
	/*width: 100%;*/
}

.suggestionCalculateur {
    text-align: right;
}
.suggestionCalculateur > a {
    display: inline-block;
}


fieldset .doubleChoix { /*parametre sur 2 colonne (ex: Ro ou Keratometrie) (1er ou 2e div contenant le label et le menu ou champ)*/
	display:inline-block; vertical-align: text-top;
}
fieldset .doubleChoix.mini { /*petite largeur*/
	width:95px;
}
fieldset .doubleChoix.petit { /*grande largeur*/
	width:155px;
}

/*style pour les champs d'un certain type (mes types perso)*/
input.numeroLot , input.numeroSuivisColi { text-align: left; }
input.quantite { text-align: center; }
input.prix , input.pourcentage , input.calcIntegre { text-align: right; }

input.chpLot /*les chp pour les lot (n° ou Q ou date)*/
, input.chp_numeroSuivisColi
{
    vertical-align: middle; margin-bottom: 1px; /*permet bon alignement + espacement en -dessous*/
}

.parametreValeurTexte  /*une valeur fixe (pas un menu ni champ... un texte simple)*/
{
    display:inline-block; vertical-align: text-top; font-size:0.9em;
}
.parametreValeurTexte.petit { width: 170px }
#zone-total .parametreValeurTexte { padding-right:4px; } /*pour que les chiffres a droite aient meme ecart avec unite que si valeur dans un champ (pour zone total)*/

/*mars2020: pour un label sur plusieurs lignes (ex: "sur-réfraction" si Kerasoft thin non essai)*/
fieldset label span.multiLignes {
    display:inline-block;
    vertical-align: text-top;
    white-space: initial; /*utile car un label est normalement à "nowrap"*/
    line-height:1.05em;
}
/*label de 80px de large mais btn radio de 19px + libelle => 61px autorisé (jusqu'à 70px possible). Utile quand mention "sur-refraction" pour Kérasoft non essai*/
.margeD.PuLuLe span.multiLignes {
    width:70px; /*mais pas forcément utile de limiter car passe sous btn radio "lentilles" et permet d'avoir "essai" su rmême ligne de "sur-réfraction sur lentille plan d'essai". Sauf si je réduit taille police. A tester en réel*/
    font-size:0.9em;
}


/*déc2019 : transporteurs */
#zone-transporteur #zone-transporteurPropose img /*image du transporteur proposé*/
{   height: 30px;
    vertical-align: middle;
    margin-bottom: 5px;
    padding: 0px 0; /*pour CVE, cette valeur sera remplacée automatiquement lors du changement de client*/
}

#zone-transporteur.plusieurs_transporteurs #listeTransporteurs {
    padding-top: 10px;
}
#zone-transporteur #listeTransporteurs {
    display: block;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
#zone-transporteur.plusieurs_transporteurs #listeTransporteurs label { /*que si plusieurs_transporteurs (sinon déco pas utile)*/
    cursor : pointer;
    padding: 7px 7px;
    border: 1px solid #CCC;
    border-radius: 4px;
    margin-bottom: 7px;
    margin-left: 6px;  margin-right: 6px;
    width: 23%;
}
#zone-transporteur #listeTransporteurs label {
    font-size:0.9em;
    white-space: nowrap;/*pour avoir btn radio aligner sur la suite*/

    /*lié à flex :*/
    width: initial;
    /*max-width: 207px;*/
    flex: 1;
}
#zone-transporteur #listeTransporteurs label input[type="radio"] {
    vertical-align: top;
    margin-top: 6px;
}
#zone-transporteur #listeTransporteurs label .info {
    display:inline-block;
    vertical-align:middle;
    margin-left:7px;
    white-space: initial;
    margin-right: 19px; /* = margin-left (6) + margin-right (6) + padding-right (7) du label*/
}
#zone-transporteur #listeTransporteurs label .info .nom {
    font-weight: bold;
    color:#000;
}
#zone-transporteur #listeTransporteurs label .info .ancien_prix {
    margin-right: 1em; /*pour écarter le nouveau_prix de l'ancien_prix*/
}
#zone-transporteur #listeTransporteurs label .info .nouveau_prix {
    font-weight: bold;
    color:#000;
    font-size:1.2em;
}
#zone-transporteur #listeTransporteurs label .info .nouveau_prix > span { /*signe € du prix*/
    font-weight: normal;
    padding-left:0.25em;
}
#zone-transporteur #listeTransporteurs label .info .detail {
    font-size:0.9em;
}

/*adaptations selon états : */
#zone-transporteur.plusieurs_transporteurs #listeTransporteurs label:hover {
    background-color: rgba( 127, 189, 207, 0.28 ) ; /*bleu atténué*/
}
#zone-transporteur.plusieurs_transporteurs #listeTransporteurs label.enValeur {
    background-color: rgba( 127, 189, 207, 0.14 ) ; /*entre le blanc et le bleu atténué*/
}
#zone-transporteur.plusieurs_transporteurs #listeTransporteurs label.enValeur { /*si btn radio est en valeur (coché ou transporteur proposé) => adapte fond du label (rq: classe check ajouté manuelleemtn car le btn radio est à l'intérieur du label => impossible de changer automatiquement l'aspect du label selon si coché ou pas)*/
    border:3px solid green;
    padding: 5px 5px;  /*reduit padding car bordure + épaisse (évite décallage)*/
    border-radius: 7px;
}  /*actif que si plusieurs_transporteurs (pas si unSeul_transporteur)*/

/*par défaut, transporteurs masqués :*/
/* pas utile, utilise classe  invisibleDisplay :
#zone-transporteur #listeTransporteurs label {
    display:none;
}*/
/*puis, les affiche en live (surtout si par CVE car pour le client, on pourrait afficher en direct les bonnes valeurs)*/
/* OFF car utilise ids_transporteursPossibles_liste transmi en ajax (utilisé que pour CVE)
#zone-transporteur #listeTransporteurs.france label.france
, #zone-transporteur #listeTransporteurs.monaco label.monaco
, #zone-transporteur #listeTransporteurs.corse label.corse
, #zone-transporteur #listeTransporteurs.departement_CP_dpd label.departement_CP_dpd
, #zone-transporteur #listeTransporteurs.domtom label.domtom
, #zone-transporteur #listeTransporteurs.cee label.cee
, #zone-transporteur #listeTransporteurs.monde label.monde
, #zone-transporteur #listeTransporteurs.ophta label.ophta
{
    display:inline-block;
}*/

/*adaptation selon visibilité des transporteurs :*/
#zone-transporteur.choixManuel_transporteur #zone-transporteurPropose  /*partie "… ce transporteur sera utilisé"*/
, #zone-transporteur.choixManuel_transporteur #zone-transporteurChoix > label  /*le titre seulement : "vous pouvez choisir"*/
, #zone-transporteur.unSeul_transporteur #zone-transporteurPropose  /*idem (aussi si unSeul_transporteur)*/
, #zone-transporteur.unSeul_transporteur #zone-transporteurChoix > label  /*idem (aussi si unSeul_transporteur)*/
{   /*opacity:0.3; FIXME_*/display:none;
}
#zone-transporteur.unSeul_transporteur #zone-transporteurChoix #listeTransporteurs input /*le btn radio (seul visible donc à masquer)*/
{   /*opacity:0;*/
    visibility:hidden;/*nov2020 : mieux car si btn radio actif, opacité ne marchait pas*/
    margin-right: -35px; margin-left: 18px;/*pour cacher le btn radio derrière le logo (peu importe si coché ou pas) car si coché (bien que non opacity à 0, le rendra viisble). Doit rester visible pour connaitre son état à la validation quoique…*/
    cursor:default;
}

/* FIN transporteurs */


select.mini { /*menu local*/ width: 80px; }
select.petit { width: 170px; }
input.petit { width: 170px; }

/* FIN pour les blocs contenant des champs,... */
/*	*	*	*	*	*	*	*	*	*	*	*	*	*	FIN ELEMENT FORMULAIRE  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/




/*	*	*	*	*	*	*	*	*	*	*	*	*	*  RNC - Remarque Commentaire Note	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/
li.zoneRCN { /*zone li contenant un RCN*/
clear: both; /*evite que bouton ajout/modif chevauchent la partie li suivante*/
}

.zoneRCN label,  /* + general (pourrait remplacer ce qui suit) */
#zone-commentaire label { /*label com du client ou com de CVE*/
	float:left;
}
.zoneRCN span /* + general (mais ne gere pas le cas particulier ci-apres (first-child) */
/*, #zone-remarque li span:first-child , #zone-commentaire li span , #zone-note li span*/ { /*texte historique (pour remarque: le 1er seulement sinon la "Mention speciale predefinie" serait aussi affectee)*/
	display: block; max-height: 141px; overflow: auto; /*pour pouvoir faire defiler le texte s'il devient trop haut*/
	font-size: 0.9em;/*nov2014: +gros: 0.8 a 0.9*/ line-height:1.5em;
}
.zoneRCN textarea /* + general (pourrait remplacer ce qui suit) */
/*, #zone-remarque li textarea , #zone-commentaire li textarea , #zone-note li textarea*/ { /*champ historique et nouveau*/
	font-size: 1em; margin-bottom: 1px;
    overflow: initial !important; /*mars2019 : car si chp en mode modif et que trop de texte, je ne pouvais pas faire defiler a cause de l'affichage via jquery qui met overflow à hidden => initial évite que overflow soit à hidden*/
}
.zoneRCN textarea.modifierHistorique /* + general (pourrait remplacer ce qui suit) */
/* , #zone-remarque li textarea.modifierHistorique , #zone-commentaire li textarea.modifierHistorique , #zone-note li textarea.modifierHistorique */ { /*champ historique seulement*/
	float: left; /*sinon pose pb a cause du label qui est left aussi (ex: sans ca, si on affiche le chp historique de commentaire CVE, puis celui pour nouveau com CVE : ce dernier n'apparait alors pas: oui c'est bizarre)*/
}
.zoneRCN a.modifierHistorique /* + general (pourrait remplacer ce qui suit) */
/* , #zone-remarque li a.modifierHistorique , #zone-commentaire li a.modifierHistorique , #zone-note li a.modifierHistorique */ { /*les boutons historique*/
	font-size: 0.8em; float: right;
}
.zoneRCN .nouveauRCN /* + general (pourrait remplacer ce qui suit) */
/* , #zone-remarque li .nouveauRCN , #zone-commentaire li .nouveauRCN , #zone-note li .nouveauRCN */ { /*les boutons nouveau*/
	font-size: 0.8em;
	/*essayer : dec2013: suppr (et mis display - mieux que espace mis dans le bloc pour eviter debordement du bouton - que sur btn nouveau): float: left;*//*display: inline-block;*/
	/*mais finalement pasok, si btn historique visible mais pas le btn nouveau, sera a cheval quand meme*/float: left;
}

.zoneRC_tous legend { /*enlgobe zone COMPLETE contenant toutes les sortes de RCN. Pour ne changer que les legend en + clair. Ainsi texte RCN en lui-meme + visible*/
	color:#777;
}
#note_historique { /*les notes CVE en valeur*/
	color:red;
}
/*	*	*	*	*	*	*	*	*	*	*	*	*	*	FIN RNC - Remarque Commentaire Note	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/



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

#zoneLoader , #zoneLoader_lot  /* 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 , #zoneLoader_lot { /* 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;
}
#zoneLoader_lot { /*pour chargement des lots*/
	width: 20px;		height: 20px;
	display: block;		position: static;
	margin-left: 0px;	margin-top: 0px;
	float: right ; /*evite l'effet visuel de bouger les elements trop brutalement*/
}
.pictoLoader {
	width: 20px;		height: 20px;
	display: inline-block;
	vertical-align:middle;  margin:0 5px 5px 5px;
}



.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; 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:1001; /*pour par-dessus btn connexion (rq mai2018: et zoom article)*/
	background-clip: padding-box; /*ajuste mieux l'arrondi sous FF*/
	font-size: 0.9em;
}
.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;
}

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

.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;
}

.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;
	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;*/
}
.caseDeFermeture.pageEntiere.margeGrande { /*ex: REK voir */
  margin: 30px;
}

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

/*	*	*	*	*	*	*	*	*	*	*	*	*	*	bouton MENU 	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/
.btnMenu { /*aspect du bouton pouvant afficher le menu d'une ligne*/
	width:30px; height:30px;
	cursor:pointer;
	/*opacity: 0.3;suppr jan2014*/
	border-radius: 30px; border: 3px solid #FFF;/*bordure blanche pour pouvoir cliquer un peu a cote et que ce soit ok (sans pour autant que le bouton fasse trop gros)*/
	/*background-image: url(../images/picto/picto-fleche-liste-choix-survol.png);suppr jan2014*//*ajout "-survol" en attendant de trouver mieux*/ background-repeat:no-repeat; background-position:center;
	background-color: transparent ;/*jan2014*/
	padding:0;/*car button a un padding par defaut*/
}
.btnMenu.mini { /*idem mais + petit*/
	height: 24px; width: 24px;
	/*border-width: 3px;*/
}
button.btnMenu.contourFondPage {/*evite contour blanc pour btn pas sur zone blanche*/
	border-color:#EEE;/*couleur de fond de page*/
}

#zone-documents .btnMenu.titre1Doc /*menu (pour 1Doc)*/
, #zone-documents .btnMenu.fondCouleur { /*ou si on veut voir le btn meme sans survol (ex: menu actions page d'une doc)*/
	display: inline-block; margin-top: -3px; vertical-align: middle;
	opacity: 1; background-color: #00b9f0; /*background-image: url(../images/picto/picto-fleche-liste-choix-survol.png);suppr jan2014*/ /*ligne idem que + bas au survol : #zone-documents li:hover .btnMenu */
}

#zone-documents .btnMenu.libelle { /*menu avec libelle (et un fond toujours visible)*/ /*Rq: si pas de libelle : alors pas de fond (voir .btnMenu) sinon adapter davantage.*/
	width: auto; background-position: 5px 2px; padding-left: 20px; font-size: 0.75em; padding-right: 8px; color: #FFF;
	background-color: #00b9f0; padding-left: 0px;/*jan2014*/
}
#zone-documents .btnMenu:hover  { /*au survol btn avec libelle*/
	background-color: #025d7b;
}
#zone-documents .btnMenu.libelle .caret {
	vertical-align: baseline;
	margin-bottom: 0.2em;
	margin-left: 5px; margin-right:3px;
}

#zone-documents li .btnMenu.norm { /*positionnement adapte selon endroit, pour le bouton pouvant afficher le menu d'une ligne (pour listing doc)*/
	display: block; float: left; margin-left: -30px; margin-top: -3px; /*pour le decaler dans la marge*/
	/*width:30px; height:30px;*/
	/*background-image:url(../images/commun/menuLigne.png);*/ /*background-repeat:no-repeat; background-position:center;*/
	/*cursor:pointer;*/
	/*opacity: 0.1; XXXbackground-color: transparent; */  /*peu visible apr defaut*/
	/*opacity: 0.3;
	border-radius: 30px; border: 3px solid #FFF;
	background-image: url(../images/picto/picto-fleche-liste-choix.png);*/
}
#zone-documents li .btnMenu.mini { /*idem si mini*/
	display: inline-block;
	vertical-align: -6px; vertical-align: 2px;/*jan2014: suite a utilisation de button au lieu de span*/
	margin-left: -27px;	margin-right: 3px;
}
body.document #zone-articles li .btnMenu.mini { /*sauf pour page d'un document*/
	margin-left: -22px; /*sinon deborde un peu du cadre*/
    vertical-align: middle;/*mars2019 : suite à modif lots, descendais trop bas*/
}
#zone-documents li table.type1 .btnMenu.mini { /*pour page avec tableau de type1 (ex: stock)*/
}
#zone-documents li table.type1 input.caseDAL { /*decale case a cocher (et btnMenu) a droite car ligne avec n° lot (pas ligne de total) (pour tableau page stock)*/
	margin-right: -44px;
}
/*Au survol : */
#zone-documents .btnMenu.titre1Doc:hover { /*deja bien visible => juste couleur changeante (menu juxtaposant le titre de la page)*/
	background-color: #025d7b;
}
body.listing #zone-documents li:hover .btnMenu  /*page de listing de doc*/ /*survol du li*/
, body.pageST #zone-documents li tr:hover .btnMenu  /*survol du tr dans li*/
, body.document #zone-documents li tr:hover .btnMenu  /*le survol de la ligne pour rendre + visible le picto menu pour la ligne*/
{
	opacity: 1; /*bien visible au survol de la zone li*/
	background-color: #00b9f0;  /*border-radius: 30px;  border: 3px solid white;*/
	/*background-image: url(../images/picto/picto-fleche-liste-choix-survol.png);suppr jan2014*/
}
body.listing #zone-documents li .btnModif.pictoBtn /*jan2020: btn pour modifier n° suivi par exemple*/
{
    transform: scale(0.8);
    /*transform-origin: center left;*/
    margin-left:-5px;
}
body.listing #zone-documents li:hover .btnModif.pictoBtn /*jan2020: btn pour modifier n° suivi par exemple (survol)*/
, body #zone-documents .blocTransporteur:hover .btnModif.pictoBtn /*fév2020: idem mais sur doc (ex: BL)*/
{
	opacity: 1; /*bien visible au survol de la zone li*/
}

{
	opacity: 1; /*bien visible au survol de la zone li*/
}
body.listing #zone-documents li:hover .btnMenu .caret
, body.pageST #zone-documents li tr:hover .btnMenu .caret
, body.document #zone-documents li tr:hover .btnMenu .caret { /*au sorvol de la ligne: met la fleche en blacn plutot que gris*/
	border-top-color: white;
}
body.listing #zone-documents li:hover .btnMenu:hover
, body.pageST #zone-documents li tr:hover .btnMenu:hover
, body.document #zone-documents li tr:hover .btnMenu:hover { /*au survol du picto du menu en lui-meme*/
	background-color: #025d7b;/*jan2014*/
}

/*	*	*	*	*	*	*	*	*	*	*	*	*	*	FIN bouton MENU	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/


/* INFO PORTEUR */
  body #zone-porteur .si_mode_creation
, body #zone-porteur .si_mode_modification
, body #zone-porteur .si_mode_ignorer
, body #zone-porteur .si_mode_sansFiche
, body #zone-porteur .si_mode_nouveau
  {
    ___display:none;
    ___opacity: 0.2;/*pour tester*/
  }


/* cache menu de remplissage autoamtiqeu de safari amis n'empêche pas le menu de s'affiche si on tape une lettre dans le champ => incomplet
input[autocomplete="off"]::-webkit-contacts-auto-fill-button
, input[autocomplete="off"]::-webkit-credentials-auto-fill-button
{
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}
*/

  body #zone-porteur.PRTR_mode_creation .si_mode_creation
, body #zone-porteur.PRTR_mode_modification .si_mode_modification
, body #zone-porteur.PRTR_mode_ignorer .si_mode_ignorer
, body #zone-porteur.PRTR_mode_sansFiche .si_mode_sansFiche
, body #zone-porteur.PRTR_mode_nouveau .si_mode_nouveau
, body #zone-porteur.PRTR_mode_livrer .si_mode_livrer
, body #zone-porteur.PRTR_mode_alertePorteurRenouv .si_mode_alertePorteurRenouv
  {
    ___display:initial;
    ___opacity: 1;/*pour tester*/
  }

body #zone-porteur.PRTR_mode_sansFiche .invisible_si_mode_sansFiche
, body #zone-porteur.PRTR_mode_ignorer .invisible_si_mode_ignorer
  {
    ___display:none;
    ___opacity: 0.2;/*pour tester*/
  }


body #zone-porteur.PRTR_mode_ignorer .si_mode_modification
, body #zone-porteur.PRTR_mode_ignorer .si_mode_modification
{
  /*masque les zones qui ne sont visibles que si_mode_modification */
  OFF_display: none;
}

body #zone-porteur.PRTR_mode_ignorer input.selon_mode
, body #zone-porteur.PRTR_mode_ignorer textarea.selon_mode
{
  padding: 3px 4px;
  cursor: default;
}
body #zone-porteur.PRTR_mode_ignorer textarea.selon_mode {
  -webkit-appearance: none; /*n'affiche pas coin de redimensionnement en bas à droite…*/
  resize: none;/*… et empêche aussi qu'il soit actif (bien que non visible)*/
}
body #zone-porteur.PRTR_mode_modification input.selon_mode
, body #zone-porteur.PRTR_mode_modification textarea.selon_mode {
  padding: 2px 3px;/*remet par défaut*/
  cursor: auto;
}
body #zone-porteur.PRTR_mode_modification textarea.selon_mode {
  -webkit-appearance: textarea; /*retabli coin de redimensionnement en bas à droite…*/
  resize: both;/*…et le rend actif à nouveau*/
  background-color: #FFF; /*…mais il faut mettre une couleur de fond*/
}
/* FIN INFO PORTEUR */


/* Info ARTICLE */
.infoParametres { /*pour l'affiche des spheres, diametre,…*/
/*rien pour l'instant*/
}
.infoParametres ul { /*si liste de parametres*/
	margin: 0;
	list-style-type: none;
	padding-left: 20px;
}
.infoParametres span { /*pour le titre des parametres*/
	font-size:0.8em; color:#999;
}


/*bandeau en bas de page (pour enregistrer ...)*/
#zoneActionVolante_vA { /* la zone en bas avec btn Enregistrer / Annuler */ /*align="right"  (version A car versiona vant que dynamiquement ça s'adapte) */
	position:fixed; opacity:1; bottom: 0; text-align: center;
	width: 100%;left: 0px; /*centrage toute la largeur*/
	padding:7px 0px;
	/*mai2013 (+ visible):*/
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
	-ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); /*pas besoin de -o- pour box shadow d'apres certains sites*/
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
	background-color: rgba(240, 240, 240, 0.92); /*gris comme le fond normal*/
	border-top: 1px solid #999; /*au cas ou ombre marche pas, un tiret*/
}

#zoneActionVolante { /*zone volante (avec bouton valider) sans rien car direct sur la page*/
	-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;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
	background-color:  transparent ;

	padding:7px 0px;
	width: 100%;
	bottom: 0;
	opacity:1;

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

#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(150, 150, 150, 0.75);
	background-color: rgba(240, 240, 240, 0.92);
	border-top: 1px solid #999;

	/*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*/
}

#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*/
	margin: 2px 30px ;  /*marge horizontale pour ecarter les boutons*/
	padding: 10px;
	font-size: 0.95em; /*grossir un peu les boutons*/
	position:relative; /*oct2015: sert au bouton valider de la page paremetrer article pour decaler avec left*/
}


/*	*	*	*	*	*	*	*	*	*	*	*	*	*  TABLEAU  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

/* DEBUT liste d'articles sous forme de TABLEAU (d'un document unique)*/
.unTableau { /*tableau basique (ex: pour liste article d'un panier)*/
	display:table;
	border-spacing: 0;
	width:100%;
}
.unTableau th { /*les cellules de la ligne titre des colonnes du tableau*/
	font-size:0.8em; font-weight: normal;
	vertical-align: bottom;
}
.unTableau th:first-child + th { /*2e colonne de la ligne titre des colonnes du tableau (Prix HT)-*/
	text-align: right;
	padding-right: 5px;
}

.unTableau tr td.ligneTitre:first-child { /*le nom de l'article*/
	background-color:#FFF;
	font-weight:bold;
	padding-bottom: 0px; /*pour reduire espace entre titre article et ses infos*/
	/*text-indent: inherit; padding-left: 3.3em;*/
}
.unTableau tr:nth-child(n+2) td.ligneTitre:first-child { /*le nom de l'article (a partir du 2e seulement)*/
	padding-top:20px; /*espacement au-dessus + grand*/
}

.unTableau tr td:first-child , /*la premiere colonne avec info sur article*/
.unTableau tr td:nth-child(2) { /*la deuxieme colonne (avec le prix)*/
	background-color:#FFF; background-image:none;
	width:auto;
	text-align:left;
}

.unTableau td , /*toutes les celules (par defaut)*/
.unTableau tr td.ligneTitre +td { /*cellule suivant le nom de l'article (car 2 1ere colonne fusionnee)*/
	display:table-cell;
	text-align: center;
	vertical-align:top;
	width:60px;
	padding:5px;
	/*fond + bordure si gradient pas ok : mais alourdi inutilement l'affichage (suppr le29nov2013)*/
	/*background-color:#EEE; border-left: 1px solid #FFF;
	background-image: -webkit-linear-gradient(left , rgb(240,240,240) 0%, rgb(255,255,255) 75%);
	background-image:    -moz-linear-gradient(left , rgb(240,240,240) 0%, rgb(255,255,255) 75%);
	background-image:     -ms-linear-gradient(left , rgb(240,240,240) 0%, rgb(255,255,255) 75%);
	background-image:      -o-linear-gradient(left , rgb(240,240,240) 0%, rgb(255,255,255) 75%);
	background-image:         linear-gradient(left , rgb(240,240,240) 0%, rgb(255,255,255) 75%);*/
}


.unTableau td:first-child {
	/*text-align:right*/
	padding-left: 3.3em;
	text-indent: -2.3em;
}
.unTableau td:first-child + td { /*colonne du prix*/
	text-align:right;
	padding-left: 15px; /*pour bien eloigner du texte des info de la ligne*/
}

/*adapte pour 1doc de type BL (avec porteur) (fait par tatonnement, car decalage bizarre) :*/
.unTableau.docBL_FK td:first-child {
	text-indent: 0em;
}
.unTableau.docBL_FK td:first-child .blocPorteurDoc_1Ligne
, .unTableau.docBL_FK td:first-child .blocNumeroBLDoc_1Ligne {
	text-indent: -2.3em;
}
.unTableau.docBL_FK td:first-child .ligneLot {
	/*YYYtext-indent: 2.3em;*/
}

#zone-articles .unTableau > tbody > tr.choixInterdit { /*poru montrer que les lots de ces lignes ne peuvent pas être choisis/sélectionné*/
    opacity: 0.3;
}


#zone-articles .unTableau > tbody .ligneTitre > .zoneIll {
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
  text-indent: -20px;
}
#zone-articles .unTableau > tbody .ligneTitre > .zoneIll > img {
  width: 40px;
  border-radius: 3px;
}

/* FIN liste d'articles sous forme de TABLEAU*/


/* pour bloc porteur (pour BL) (existe aussi dans document.css) : */
.blocPorteurDoc { /*ref porteur dans liste de document*/
	font-style:italic;  font-weight:normal;
	color:#777; font-size:0.9em;
}
.blocNumeroBLDoc { /*numero BL mis dans liste de document (FK, AV)*/
	font-weight:bold;
}
#zone-documents .blocPorteurDoc_1Ligne { /*ref porteur dans liste de document, seul sur 1 ligne*/
	display: block;
}
/*bloc de reference interne du client (dans doc BL) : */
.blocRefInterne
, .blocTypeCK {
	font-weight: normal; color: #AAA; font-size: 0.8em;
}

.blocRefInterne > span
, .blocTypeCK > span {
	color: #777;
}


.blocMateriau {
font-weight: normal; font-size: 0.8em;
}


/* DEBUT tableau pour grille de tarifs (page article) */
table.type2 { /*tableau de type2 simple et leger (ex: grille tarifs article) */
	border-collapse: collapse;/*enleve espaces entre cellule du tableau*/
	width:100%; /* + joli si occupe toute la largeur*/
}

table.type2 td , table.type2 th { /*cellule de ligne normale, cellule de ligne titre */
	padding: 3px 5px; border-top: 1px solid #999 ;
	font-weight:normal;
	text-align:center;/*texte au centre par defaut poru les celulles*/
	white-space: nowrap; /*pas de retour a la ligne*/
}
table.type2 tr:first-child td , table.type2 th { /*cellule de la 1ere ligne normale, cellule de ligne titre */
	border-top: 0px solid #999 ;  /*pas de ligne pour ligne titre ni pour 1ere ligne*/
}
table.type2 th { /*cellule de ligne titre */
	padding: 2px 5px;
	/* juil2013: pour masquer une ligne de titre des tarifs. Mais mettre une classe du genre "celluleMasquee" au cellules concernees (toutes sauf la premiere serie de prix ou bien que si une seule ligne dans prix precedent)
	line-height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: rgba(0, 0, 0 , 0.0) !important;
	*/
}

table.type2 th:nth-child(2) , table.type2 th:nth-child(3) , /* 2e et 3 cellule de la ligne de titre */
table.type2 td:nth-child(2) , table.type2 td:nth-child(3) { /* 2e et 3e cellules : prix */
	text-align:right;
}
table.type2 td:nth-child(3) , table.type2 th:nth-child(3) { /* 3e cellules ligne normale et poru ligne titre : prix public */
	color:#999;
}

table.type2 thead tr { /*ligne titre de tableau*/
	font-size: 0.8em;
}
/* FIN tableau pour grille de tarifs */
/*	*	*	*	*	*	*	*	*	*	*	*	*	*  FIN TABLEAU  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/


/* DEBUT zone de proposition (page article) */
  .zone_proposerAutresArticles
, .zone_articleDeRemplacement {
 text-align : center;
}
.zone_proposerAutresArticles {
  margin-top:1rem;
  background-color: rgba(255, 255, 255, 0.8);
}
.zone_articleDeRemplacement {
  margin-top:2rem;
  background-color:#d4f5ff;
}
/*pictoAttention*/
  .zone_proposerAutresArticles .pictoAttention
, .zone_articleDeRemplacement .pictoAttention {
  font-size: 2rem;
  line-height: 2rem;
  /*vertical-align: baseline;*/
}
/*titreAccroche*/
  .zone_proposerAutresArticles .titreAccroche
, .zone_articleDeRemplacement .titreAccroche {
  padding-top: 0.3em;
  display: block;
  margin-bottom: 0.3em;
}
/*bouton*/
  .zone_proposerAutresArticles a.bouton
, .zone_articleDeRemplacement a.bouton {
  font-size:0.95em;
  margin-top:0px;
  text-align: left;
  padding: 7px;
  display: inline-block;
  margin: 3px 0 3px 0;
  display: flex;  flex-direction: row;  justify-content: space-around;
  /*
  OFF_flex-wrap: wrap;
  OFF_line-height: 0em;
  background-color: #AAA; */
  width: 100%;
}
.zone_proposerAutresArticles a.bouton {
  background-color: #FFF;
}
.zone_articleDeRemplacement a.bouton {
}
/*visuel*/
  .zone_proposerAutresArticles .visuel
, .zone_articleDeRemplacement .visuel {
  flex: auto;  display: flex;  flex-direction: column;  justify-content: center;  max-width: 40px;
  margin-right: 5px;
}
/*designation*/
  .zone_proposerAutresArticles .designation
, .zone_articleDeRemplacement .designation {
  flex: auto;  display: flex;  flex-direction: column;  justify-content: center;  flex-wrap: wrap;
}
/*illustration*/
  .zone_proposerAutresArticles .illustration
, .zone_articleDeRemplacement .illustration {
  float: left;
  width: 40px;  height: 40px;
  margin: 0 5px 0px 0;
  display: inline-block;
  border-radius:4px;
}

/* FIN zone de proposition (page article) */



/* visuel 2022 de choix OD OG (page article) */
/* rq: .choixOeilPossible par opposition à verrouillerChoixOeil (lié à source_choixProposerAutreArticle) : adapte selon qu'il est possible ou non choisir l'œil */
 #zoneOD .visuelFond
, #zoneOG .visuelFond {
  background-repeat: no-repeat;
  /*background-size: contain;*/
  background-position: center;
}
#zoneOD .visuelFond {
  background-size: 286px;/*fixe pour cadre au survol sans perturbation du visuel*/
  border-radius: 4px 0 0 4px;
}
#zoneOG .visuelFond {
  background-size: 276px;/*fixe pour cadre au survol sans perturbation du visuel*/
  border-radius: 0 4px 4px 0;
}
#zoneOD.oeilOuvert .visuelFond {
  background-image: url("../../images/bloc/OD-ouvert.jpg");
}
#zoneOD.oeilFerme .visuelFond {
  background-image: url("../../images/bloc/OD-ferme.jpg");
}
#zoneOG.oeilOuvert .visuelFond {
  background-image: url("../../images/bloc/OG-ouvert.jpg");
}
#zoneOG.oeilFerme .visuelFond {
  background-image: url("../../images/bloc/OG-ferme.jpg");
}
  #zoneOD .visuelFond
, #zoneOG .visuelFond {
  height: 137px !important;
    margin-bottom: 15px; /* margin-bottom de #zoneOD-choixOeil idem que  margin-bottom de #zoneOD .visuelFond */
}
  #zoneOD.choixOeilPossible .visuelFond
, #zoneOG.choixOeilPossible .visuelFond {
  cursor: pointer;
}
  #zoneOD.choixOeilPossible.oeilFerme .visuelFond:hover
, #zoneOG.choixOeilPossible.oeilFerme .visuelFond:hover {
  /*background: radial-gradient(ellipse, rgba(255,255,255,0.2) 35%, rgba(255,255,255,0) 60%);*/
  /*border: 3px solid green;
  border-radius: 5px;*/
}
  #zoneOD.choixOeilPossible.oeilOuvert .visuelFond:hover
, #zoneOG.choixOeilPossible.oeilOuvert .visuelFond:hover {
  /*background: radial-gradient(ellipse, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0) 60%);*/
  /*border: 3px solid gray;
  border-radius: 5px;*/
}

#sousZone_yeux1 {
  display: table-cell;
  vertical-align: top;
  position: relative;
}
  #zoneOD .labelOD
, #zoneOG .div_labelOG {
  display:none !important;
}
#zoneOD #zoneODGetOI {
  /*margin-left: 137px  !important;*/
  /*margin-left: 70px !important;*/
  white-space: nowrap;
  left: 230px;/*si parent .sousZone_yeux1 en position: relative*/
}

  #zoneOD-choixOeil
, #zoneOG-choixOeil {
  height: 3.5em;
  /*width: 100%;
  padding-left: 90px;*/
  display: table;
  padding-top: 4px;
  text-align: left;
/*pour être par-dessus nouveau visuel*/
  margin-top: -65px;/*prendre en compte margin-bottom de #zoneOD .visuelFond */
    margin-bottom: 15px; /* margin-bottom de #zoneOD-choixOeil idem que  margin-bottom de #zoneOD .visuelFond */

}
/*si ODG ou OI activé => masque visuel oeil …*/
  #colonnesODetOG.oeilODGouOI_actif #zoneOD .visuelFond
, #colonnesODetOG.oeilODGouOI_actif #zoneOG .visuelFond {
  display: none;
}
/*… et ne décal plus la zoneOD-choixOeil*/
  #colonnesODetOG.oeilODGouOI_actif #zoneOD-choixOeil
, #colonnesODetOG.oeilODGouOI_actif #zoneOG-choixOeil {
  margin-top: 0;
}
/*… masque accroche*/
#colonnesODetOG.oeilODGouOI_actif #accrocheChoisirOeil {
  display: none;
}
/* FIN visuel 2022 de choix OD OG (page article) */




/*	*	*	*	*	*	*	*	*	*	*	*	*	*  BLOC TEXTE EN VALEUR  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

ul li:hover .txtBloc.main /*ex: motif franchise AV*/
, ul li:hover .blocQ.main /*les blocs cliquables (type blocQ) sont mis en valeur au survol de la zone les contenant*/
, ul li:hover .blocDouble.main span:nth-child(2)  { /*partie droite des blocs double*/
	background-color:#00b9f0;
}

ul li:hover .blocDesignationLibre.main { /*affiche un texte bleu cliquable au survol de zone uniquement*/
	color: #00b9f0;
}

ul li:hover .blocDouble.main span:first-child  { /*partie gauche des bloc double*/
	border-color:#00b9f0; color:#00b9f0;
}


/* DEBUT petits blocs pour mettre en valeur elements importants (quantite, lot, oeil ...) */
.txtBloc { /* les textes dans un petit bloc de couleur */
	font-size: 0.8em; color: #FFF;
	padding: 1px 3px;
	background-color:#BBB;
	display: inline-block;
	margin: 2px 1px 0px 0px;
	line-height: 1.2em;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	text-indent: 0; /*pour eviter affichage partiel, a cause du decalage des infos. (ex: pour dans panier)*/
}
.txtBloc.tailleTxtNormale { /* pour remettre taille texte normale */
	font-size: inherit;
}
.txtBloc_sansFond { /* idem mais san sfond (pour etre aligne avec le reste) (ex: dates dans listing FK) */
padding: 1px 3px;
display: inline-block;
margin: 2px 1px 0px 0px;
line-height: 1.2em;
text-indent: 0;
    background-color: initial;
}

.blocX1 , .blocQ , .blocPort , .blocLot span:first-child , .blocLot a:first-child , .blocLot span:nth-child(2) , .blocOeil span:first-child , .blocOeil span:nth-child(2) , .blocBLouCF span:first-child , .blocBLouCF span:nth-child(2)
, .blocSimple , .blocDocQte span:first-child, .blocDocQte a:first-child , .blocDocQte span:nth-child(2)
{ /*les blocs de Q, lot,...*/
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; /*arrondi tout autour - a supprimer si besoin pour les blocs non concernes par certains angles arrondi (ex: lot)*/
}
.blocX1 { /*bloc du libelle (si que la partie de gauche, seulement — fond blanc avec contour)*/
	border: 1px solid gray; color:gray; padding: 0px 4px;
}
.blocQ , .blocPort
, .blocSimple
{ /*bloc unique au fond de couleur (ex: quantite, port seul) (si que la partie de droite, seulement — fond de couleur)*/
	/*background-color: gray;*/background-color: #BBB;/*sept2014: suite a blocQ de stock non en couleur (temporaire)*/
	color:#FFF; padding: 1px 8px;
}
.blocQ.QOeil { /*bloc oeil simple dans page doc AV*/
	background-color: gray; /*+ sombre*/
}
.blocPort
, .blocFFP , .blocEscompte
{
	background-color: #BBB; /*+ clair car valeur toujours identique*/
}
.blocPort.different
, .blocFFP.different , .blocEscompte.different
, .txtBloc.different
, .blocSimple.different
{ /*pour mettre legerement en valeur le port si different de la valeur par defaut*/
	background-color: gray; /*+ sombre*/
}

.blocNouveau  /*mention nouveau sur nouvel article*/
, .blocRemise /*mention remise sur article*/
, .blocRemisePrix /*mention prix avec remise sur article*/
{
	background-color:rgb(234, 234, 48); /*Or*/
	color: orangered;
	font-weight: bold;
}
#zoneMenu1 .blocNouveau { /*fev2020 : bloc "nouveau" dans les menus*/
    float: none; margin:0;
    margin-bottom: 5px; /*EK veut écarter un peu du texte*/
}
#portionPort.blocNouveau { /* prix frais de port doc : + esthétique*/
padding: 2px 8px;
margin: -2px -8px;
}
#articlesNouveautes .blocNouveau { /*bloc nouveau dans partie nouveaute : inutile d'afficher le bloc nouveau*/
	display:none;
}
.picto_prixEnBaisse { /*bloc prix en baisse*/
    margin-top: -4px;
    margin-left: -4px;
    position: absolute;
    width: 90px;
    height: 90px;
    background-image: url(../images/pictos_basiques/multi-pictos-1@2x.png);/*image mutli-pictos*/
    /*background-color: rebeccapurple;*/
    background-size: 180px 90px; /*demi taille*/
   /* background-size: 270px;*//*3 quart taille*/
    background-repeat: no-repeat;
}

.offre .blocNouveau { /*bloc nouveau situe dans bloc offre*/
	-ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg); /*-7 est pas joli sous FF*/

	font-size: 1.0em;
	float: left;
	margin-right: 10px
}
.blocFluo { /*bloc nouveau situe dans bloc article propose par CVE dans PN*/
	background-color:rgb(234, 234, 48); /*Or*/
	color: #000;  /*txt noir plutot que rouge*/
	font-weight: bold;
	font-size: 1.0em;
}
.offre_PN .blocFluo { /*bloc nouveau situe dans bloc article propose par CVE dans PN*/
	/*-ms-transform: rotate(-0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(-0deg);*/
	margin-right: 0px;
	padding: 2px 6px;
}

.blocMAJ { /*pour un bloc qui vient d'être mis à jour (en live) (ex: picto ensemble PN)*/
    background-color: rgba(205, 230, 184, 0.7);
    color: green;
}


.blocRemise { /*juin2015: mention remise sur article*/
	position: absolute; float: left; /*rq: le  overflow: hidden  sur le parent <li> ne permet pas de faire depasser le bloc de remise*/
	/*position: relative; float: right;*//*si je veux positionner a droite (ajsuter margin dans ce cas)*/

	-ms-transform: rotate(-9deg); /* IE 9 */
    -webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
    transform: rotate(-9deg); /*-7 est pas joli sous FF*/

	font-size: 0.8em;
	line-height: 1em;
	padding: 2px 3px 3px 3px;

	margin-left:-2px;  margin-top: 1px;  /*ajuste position par rapport a image*/
}
.blocRemisePrix { /*juin2015: mention prix avec remise sur article*/
	/*font-size: 0.8em;	line-height: 1em;*/
	/*padding: 2px 3px 3px 3px;*/
	padding: 0px 1px 0px 1px;
	margin-left: 1px;/*pour ne pas toucher le prix barre*/
	display: inline-block;
}

.blocCouleur { /*bloc nom couleur article*/
	font-style:italic;  font-weight: normal;
}
.blocOeil { /*que pour l'oeil (mis a part car utile que pour le bloc oeil qui contient STOCK en libelle - bien que ce soit mis pour tous les bloc oeil)*/
	display: inline-block; /*10oct2013 : ajout pour alignement ok si STOCK ecrit + petit (Cf .blocOeil span:first-child em ci apres)*/
}
.blocQ , .blocPort , .blocLot , .blocOeil , .blocBLouCF , .blocCouleur
, .blocSimple , .blocDocQte/*bloc avec n° doc + Qte*/
{ /*bloc de quantite, lot, oeil, ... couleur article*/
	white-space: nowrap; margin: 0px 2px;
	text-indent: 0; /*evite decalage (ex: dans panier)*/
}
.blocCouleur {
	margin-left: 0px; /*sept2015: car j'ajoute desormais une espace entre designation et nom de couleur*/
}
.blocLot span:first-child , .blocLot a:first-child , .blocOeil span:first-child , .blocBLouCF span:first-child
, .blocDocQte span:first-child , .blocDocQte a:first-child
{ /*le libelle dans la partie droite du bloc (lot, oeil)*/ /*_E pour Est*/
	border: 1px solid gray; color:gray; padding: 0px 4px;
	/* enlever coins de droite : */
	-webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; -ms-border-top-right-radius: 0; -o-border-top-right-radius: 0; border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; -ms-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
}
.blocDouble span:first-child , .blocDouble a:first-child /*partie gauche*/
, .blocDouble span:nth-child(2) /*partie droite*/
{ /*le libelle dans la partie droite du bloc (lot, oeil)*/ /*_E pour Est*/
    line-height: 1.3em;
    height: 1.3em;
    display: inline-block;
}

.blocOeil span:first-child em { /*si bloc œil pour STOCK (dans CF) je met une balise em (pas div, car pas ok a l'interieur d'un <p>) autour du mot 'stock' pour l'ecrire + petit*/
	font-size: 0.7em;
	display: inline-block;
	/*vertical-align: top; fai ttrop haut dans FF*/ vertical-align: 7%;/*meilleur equilibre entre FF et Safari*/
	font-style: normal;/*enleve l'italique*/
}
.blocLot span:nth-child(2) , .blocOeil span:nth-child(2) , .blocBLouCF span:nth-child(2)
, .blocDocQte span:nth-child(2)
{ /*la quantite dans la partie droite du bloc (lot, oeil)*/ /*_O pour Ouest*/
	background-color: gray; color:#FFF; padding: 1px 3px;
	/* enlever coins de gauche : */
	-webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; -ms-border-top-left-radius: 0; -o-border-top-left-radius: 0; border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; -ms-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0; border-bottom-left-radius: 0;
}
 /*attenue visibilite du bloc lot pour mettre en valeur la quantite du bloc oeil :*/
.blocX1.blocLot
, .blocLot span:first-child , .blocLot a:first-child
, .blocDocQte span:first-child , .blocDocQte a:first-child
{ /*le libelle dans la partie droite du bloc (lot, oeil)*/
	border-color:#BBB; color:#BBB;
}
.blocLot span:nth-child(2)
, .blocDocQte span:nth-child(2)
{ /*le libelle dans la partie droite du bloc (lot, oeil)*/
	background-color:#BBB;
}


li.detail .blocOeil.blocDouble { /*si bloc oeil affiche en mode detail, on fait un bon alignement (en imposant une largeur commune)*/
	width: 5.6em;/*avant mai2014:6.4em; avant aout2014:5em; 5.6 : accepte Qte a 2 chiffres. Si 3: un peu coupé mais rare docn evite d'etre trop large (sinon mettre 6.1) pour vraiment eviter pb de chevauchement avec bloc suivant*/
	/*display: inline-block;*//*mis dans blocOeil*/
    margin-left: -3px;/*pour se rapprocher du menu d'actions car bcp de vide a cause de largeur grande*/
	text-align: right;
    line-height: 1.2em;
}
li .blocOeil { /*si bloc oeil affiche en mode detail, on fait un bon alignement (en imposant une largeur commune)*/
    line-height: 1.2em;
}
#zone-articles .blocOeil { /*si bloc oeil affiche dans document (ex: panier)*/
	width: 5em;
	text-align: right;
}
#zone-articles input[type="number"].decaler
, #zone-articles input[type="text"].decaler { /*les chps dans tableau des articles d'un doc (blocs avant transformation en champ)*/
	margin-top: -4px; padding: 2px 0px;
}

/*mars2019 : si besoin de montrer que le lot est cliquable - sans usage de classe bouton ou balise <a> (ex: doc RK) : */
.blocLot.cliquable span:first-child  {
	border-color:#00b9f0; color:#00b9f0; /*texte et contour en couleur Bleu (celui pour bouton cliquable)*/
}
.blocLot.cliquable span:nth-child(2) {
    background-color:#00b9f0;/*fond en couleur Bleu (celui pour bouton cliquable)*/
}
/*rq: moins de classe que ci-dessous car à priori utilisé que pour bloc des lots dans RK (mais si besoin je pourrais ajouter)*/

.zoneBloc_multiLignes {  /*ex: bloc lot de BL avec RK ou AV existant (ou RK dont bloc lot en chp) */
    display: inline-block;
    line-height: 1.4em;
    vertical-align: text-top;
}
/*div.coteACote*/
.ligneLot div.ligne_1Lot /*par défaut comme si un span => inline ... (on en précise même pas coteACote car dans AV, pas le div zoneBloc_multiLignes)*/
{  /*si plusieurs lots l'un sous l'autre pour une même ligne, les écarte (RK ou BL concerné par RK) */
    display: inline;
}
/*div.ligneALigne*/
.ligneLot div.zoneBloc_multiLignes.ligneALigne .ligne_1Lot /*... sinon block si besoin */
{  /*si plusieurs lots l'un sous l'autre pour une même ligne, les écarte (RK ou BL concerné par RK) */
    display: block;
    padding-bottom: 5px;
}
.zoneBloc_multiLignes .blocEnChp_multiLignes { /*ex: bloc lot en chp de RK */
    display: inline-block;
    margin-top: 3px; margin-bottom: 3px
}


.blocLot.different span:first-child {
	border-color:gray; color:gray;
}
.blocLot.different span:nth-child(2) {
	background-color:gray;
}

.alerte1Texte , .blocLot.alerte1 span:first-child , .blocOeil.alerte1 span:first-child , .blocBLouCF.alerte1 span:first-child , .blocX1.alerte1  { /*si sans num lot => texte et contour en couleur ORANGE pour attirer l'attention (ajout de alerte1Texte pour texte en couleur)*/
	border-color:orange; color:orange;
}
.alerte1Fond , .blocLot.alerte1 span:nth-child(2) , .blocOeil.alerte1 span:nth-child(2) , .blocBLouCF.alerte1 span:nth-child(2) , .blocQ.alerte1 , .blocPort.alerte1
, input.alerte1Fond
, .blocSimple.alerte1
{ /*si sans num lot => fond en couleur pour attirer l'attention (ajout de alerte1Fond pour fond en couleur)*/
	background-color:orange;
}
.alerte2Texte , .blocLot.alerte2 span:first-child , .blocOeil.alerte2 span:first-child , .blocBLouCF.alerte2 span:first-child , .blocX1.alerte2  { /*si sans num lot => texte et contour en couleur ROUGE pour attirer l'attention*/
	border-color:orangered; color:orangered;
}
.alerte2Fond , a.alerte2Fond, .blocLot.alerte2 span:nth-child(2) , .blocOeil.alerte2 span:nth-child(2) , .blocBLouCF.alerte2 span:nth-child(2) , .blocQ.alerte2 , .blocPort.alerte2
, input.alerte2Fond
, .blocSimple.alerte2
{ /*si sans num lot => fond en couleur pour attirer l'attention*/
	background-color:orangered;
}
.alerteOKTexte , .blocLot.alerteOK span:first-child , .blocOeil.alerteOK span:first-child , .blocBLouCF.alerteOK span:first-child , .blocX1.alerteOK  { /*bloc vert (OK)*/
	border-color:green; color:green;
}
.blocBLouCF.alerteOK span:first-child { /*que si bloc BL ou CF ok (le fond est plein pour le differencier clairement du BL pret (sinon difference de couleur peu visible)*/
	background-color: green; color: #FFF; border-right: 1px dotted #FFF;
}
.alerteOKFond , .blocLot.alerteOK span:nth-child(2) , .blocOeil.alerteOK span:nth-child(2) , .blocBLouCF.alerteOK span:nth-child(2) , .blocQ.alerteOK , .blocPort.alerteOK
, .blocSimple.alerteOK
{ /*bloc vert*/
	background-color:green;
}

.blocBLouCF.blocX1.alerteOK , .blocLot.blocX1.alerteOK { /*style des blocs individuels qui sont en BL ok ou CF ok (vert)*/
	/*background-image: url('../images/bloc/coinSEvert.png'); background-repeat: no-repeat; background-position: right bottom;*//*si triangle en angle pour attirer l'attention*/
	/* si style bordure + epaisse des 2 cotes : border-right-width: 3px; padding-right: 2px; border-left-width: 3px; padding-left: 2px;*/
	/* simple bordure a droite + epaisse : border-right-width: 3px; padding-right: 2px; */
	/* txt gras et bordure + epaisse a droite (ajustement marge de gauche) : font-weight: bold ; border-right-width: 3px; padding-right: 3px; font-weight: bold; padding-left: 3px;*/
	color: #FFF; background-color: green; border-right-width: 0px; /*si fond plein pour + de visibilite*/
}

.blocDesignationLibre {
	font-weight: normal;
	display: inline-block;
	text-indent: 0em; /*evite decalage si en pls lignes*/
}

.blocBLouCF.main:hover span:first-child , /*si bloc cliquable (partie de gauche) (ex: pretBL)*/
.blocOeil.main:hover span:first-child {  /*(bloc oeil dans CF validees)*/
	/*border-color:#00b9f0; color:#00b9f0;*/border-color:#025d7b  !important; color:#025d7b  !important;
}
.txtBloc.main:hover
, .blocBLouCF.main:hover span:nth-child(2) /*si bloc cliquable (partie de droite) (ex: pretBL)*/
, .blocOeil.main:hover span:nth-child(2) /*(bloc oeil dans CF validees)*/
, .blocQ.main:hover
, .blocPort.main:hover
, .blocSimple.main:hover
{ /*si bloc en 1 seule partie cliquable (celle de droite) (Q ou port)*/
	/*background-color:#00b9f0;*/background-color:#025d7b !important;/*suite a mise en valeur au survol du ul, je peux desormais mettre en bleu + sombre si survol du bloc*/
	/*background-clip: padding-box;*/ /* Evite (bizarre: au 1er survol seulement) le debordement du fond via l'arrondi au survol (vu pb que sur bloc en 1 seule partie avec la quantite - partie droite)
	si arrondi impair : pb => 4px au lieu de 3px: ok. Si pas d'effet progressif pour coloration: ok aussi semble-t-il.*/
}
.blocDesignationLibre.main:hover {
	color:#025d7b !important;
}

.txtBloc.main
, .blocDouble.main span:nth-child(1)  /*si bloc double cliquable (partie de gauche)*/
, .blocDouble.main span:nth-child(2)  /*(partie de droite)*/
, .blocBLouCF.main:hover span
, .blocOeil.main:hover span
/*, .blocQ.main:hover span*/
, .blocQ.main
, .blocDesignationLibre.main
, .blocPort.main:hover span
, .blocSimple.main:hover span
{  /*reduit la duree pour montrer rapidement qu'on peut cliquer sur le bloc*/
	-webkit-transition-duration:0.5s ;
	-moz-transition-duration:	0.5s ;
	-ms-transition-duration:	0.5s ;
	-o-transition-duration:		0.5s ;
	transition-duration:		0.5s ;/*valait 0.15 pour rapidement voir que c'est cliquable (mais depuis que devient deja bleu quand dans zone globale, moins utile car on voit deja ou on peut cliquer)*/
}

.bloc_bloque { /*bloc de type "client bloque" (classe normale)*/
	margin: 0px 2px; font-size: 0.7em; background-color: orangered;
}
#bloc_bloque
, #ZRRK_bloc_bloque
{ /*que si id => un seul bloc mis en haut a droite (ex: panier, article)*/
	float: right; background-color: orangered;
}
.bloc_archive { /*idem pour client archive*/
	margin: 0px 2px; font-size: 0.7em; background-color: #000;
}
#bloc_archive { /*idem (suite)*/
	float: right; background-color: #000;
}

.blocBLouCF.ajusteDessous { /*dans affichage PN, CK,... si pretBL + OKBL affiche => blocs se chevauchent => ajuste le 1er pour eviter cela*/
	margin-bottom: 4px; display: inline-block;
}


#zone-documents .dateDocInfo { /*ex: date reglement FK*/
	color: #777;
}

.quiDoc , .quiDocBL , .quiDocCK , .quiDocFK , .dateDocInfo { /*bloc contenant les initiales (se sert aussi de txtBloc)*/
	float: right; font-size: 0.7em !important;

    /*fév2020: suite picto .quiK +rond :*/
    line-height: 1.3em;
    padding: 0.05em 3px;
}
.infoDetailsPage .quiDocBL {
	font-size: 0.9em;
}
/*.quiDocBL , .quiDocCK , .quiDocFK*//*ajustement si pour BL, CK*/
.pictoDoc {  /*fev2014: regroupe picto d'un doc de liste*/
	/*clear: both; margin-top: -4px;*//*suppr car mis ce qui suit*/
	position: absolute; right: 0; bottom: -1.1em; /*10oct2013: ajuste par rapport au bloc prixDoc qui est en position relative*/
	top:1.1em; float: right;
}
.quiDocFK {
	clear: both; margin-top: -8px ;
}
.quiMoi { /*pour mettre en valeur le bloc (si = utilisateur actuellement connecte qui) */
	background-color:gray;
}
.quiMulti { /*pour mettre en valeur le bloc (si multi utilisateurs) */
	background-color:orange;
}
.quiK { /*pour mettre en valeur le bloc (si utilisateur = client-lui-meme) */
	background-color:gray;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; /*un rond pour distinguer davantage*/

    /*fév2020: +rond :*/
    height: 1.4em; width: 1.4em;/* line-height=1.3em + padding=0.5em x2 */  /*basé sur classes  .quiDoc , .quiDocBL , .quiDocCK , .quiDocFK , .dateDocInfo  */
    text-align: center;
}
.quiK.different { /*si a mettre en valeur (ex: si CK pas modifie par cve => considéré comme pas vu (que CK saisie par client que CVE n'a pas a valider) )*/
	background-color: orangered; color:#FFF;
}

.pictoDoc span.cadenas {/*fev2014*/
	clear:right; /*pour aller en-dessous du picto des initiales*/
}


body.documents .docSolde
, #zone-documents .docSolde { /*couleur prix total*/
	color : green;
}
body.documents .docSoldePlus
, #zone-documents .docSoldePlus { /*couleur prix total.*/
	color : orangeRed;
	/*margin-left:2px; si je veux utiliser txtBloc alerte2Fond pour mieux visualiser, en bloc*/
}
body.documents .docSoldeMoins
, #zone-documents .docSoldeMoins { /*couleur prix total*/
	color : orange;
}
body.documents .docSoldeInverse
, #zone-documents .docSoldeInverse { /*sept2016: si erreur de saisie (reglement negatif pour FK, ou positif si AV)*/
	color : rgb(160, 30, 230);  /*violet*/
}


/*transporteur*/
#zone-documents .blocTransporteur
{
	font-size:0.8em; /*margin-right: 0px;*/
    line-height:1.5em;
    /*font-style:italic;*/
    vertical-align: text-bottom;
}
#zone-documents .blocTransporteur img
{   height: 18px;
}
#zone-documents .blocTransporteur img
, #zone-documents .blocTransporteur a
, #zone-documents .blocTransporteur .btnModif
{
    vertical-align: middle;
}
#zone-documents .blocTransporteur a
{
    margin: 0px 2px;
    padding: 1px 2px 1px 1px ;
}
/*FIN transporteur*/




/*DEBUT pictos cadenas, impression, facturation electronique : */
.cadenas
, .imprime , .impressionInterditeLot
, .FKElec , .BLElec , .RKElec , .docElec
{
	/*background-image: url(../images/picto/picto-doc@2x.png);
	-webkit-background-size: 150px; -moz-background-size: 150px; -o-background-size: 150px; background-size: 150px;
	background-position: -10px -8px;*/
	background-image: url(../images/picto/picto-doc@4x.png);  /*@4x*/
	background-repeat:no-repeat;
	border-width: 0px;
	display:inline-block;
}
/*taille : */
.cadenas.tailleS
, .imprime.tailleS , .impressionInterditeLot.tailleS
, .FKElec.tailleS  ,  .BLElec.tailleS ,  .RKElec.tailleS ,  .docElec.tailleS  /*meme base, mais differences + bas*/
{ /*fev2014: dans liste des doc*/
	width:10px; height:14px;
	-webkit-background-size: 75px; -moz-background-size: 75px; -o-background-size: 75px; background-size: 75px; /* largeur 300/3 = 100 */
	background-position: -2px -0px;
	margin: 1px 2px 0 0;
}
/*adaptations tailleS :*/
.cadenas.tailleS {
	margin-right:3px;  /*ajuste pour que le texte qui suit ait un bon alignement quelque soit le picto*/
}
.imprime.tailleS {
	background-position: -16px -0px;
	width: 12px;
	margin-right:1px;
}
.impressionInterditeLot.tailleS {
	background-position: -16px -15px;
	width: 12px;
	margin-right:1px;
}
.FKElec.tailleS  ,  .BLElec.tailleS  ,  .RKElec.tailleS  ,  .docElec.tailleS {
	width: 15px;  height: 15px;
	background-position: -30px 0px;
	margin-right:-1px;  margin-left: -1px;
	/* background-color: red; */
}
/*adaptations tailleM :*/
.cadenas.tailleM {/*fev2014: dans 1 doc precis*/
	width: 13px;  height: 17px;
	-webkit-background-size: 100px; -moz-background-size: 100px; -o-background-size: 100px; background-size: 100px; /* largeur 300/3 = 100 */
	background-position: -3px -1px;
	margin:5px 2px 0 0;
}
/*position :*/
.pageDoc.cadenas {/*fev2014: dans 1 doc precis*/
	/*float: right;*/
}
.pageListeDoc.cadenas {/*fev2014: dans liste des doc*/
	float: right;
}
/*survol : */
#zone-documents ul.liste1 li:hover .pictoDoc span.cadenas.tailleS {/*fev2014*/
	/*background-position: -10px -38px;*//*-30- - valeur background-position de .cadenas*/
	background-position: -2px -15px;/*-15 (pas -30 car @x4) - valeur background-position de .cadenas*/
}
/*FIN cadenas*/

/* FIN petits blocs pour mettre en valeur elements importants (quantite, lot ...) */



/* DEBUT des types d'alerte*/

table td b { /*enleve le gras aux balises b dans tableau (car je l'utilise pour mettre l'element b en forme pour alertes). Utiliser strong si je veux vraiment mettre en gras*/
	font-weight:normal;
}

table td.alerteOrange b , table td.alerteRouge b , table td.alerteVerte b {
	-webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; /*arrondi tout autour - a supprimer si besoin pour les blocs non concernes par certains angles arrondi (ex: lot)*/
	padding: 1px 8px;
	white-space: nowrap;
}

table td.alerteOrange b { /*alerte niveau moyen pour colorier cellule (ex: date du stock)*/
	background-color: orange; color:#FFF;
	/*pas utile finalement car je met la couelur dans balise b (donc le fond pas sur cellule). background-image: none;*/ /*enleve le fond s'il y en a un car masquerait la couleur de fond*/
}
table td.alerteRouge b { /*niveau eleve*/
	background-color: orangered; color:#FFF;
	/*background-image: none;*/ /*enleve le fond s'il y en a un car masquerait la couleur de fond*/
}
table td.alerteVerte b { /*alerte niveau faible (peut-etre pour mettre en avant une info ok)*/
	background-color: green; color:#FFF;
	/*background-image: none;*/ /*enleve le fond s'il y en a un car masquerait la couleur de fond*/
}

/* FIN des types alerte*/


.texteInfo ul li { /*li dans une zone d'aide*/
    margin: 4px 0px;
}
.texteInfo ul li span.enValeur { /*texte normal mais a mettre en valeur*/
	font-weight: bold;
	color: darkred;
}
.offre_PN .enValeur { /*mots dans la zone*/
	font-weight: bold;
	font-size: 1.2em ;
}
.offre_PN .enValeur.vert {
	color : green;
}


.fondVert {
	background-color:#A49E22 !important;
	color: #FFF;
}
.fondOrange {
	background-color:orange !important;
	color: #FFF;
}
.fondRouge {
	background-color:orangered !important;
	color: #FFF;
}
.fondNoir {
	background-color:#000 !important;
	color: #FFF;
}


.texteVert {
	color:#A49E22 !important;
}
.texteOrange {
	color:orange !important;
}
.texteRouge {
	color:orangered !important;
}
.texteNoir {
	color:#000 !important;
}
/*	*	*	*	*	*	*	*	*	*	*	*	*	*  FIN BLOC TEXTE EN VALEUR  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/



/*	*	*	*	*	*	*	*	*	*	*	*	*	*  BOOTSTRAP - CORRECTION  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/
.dropdown-menu > li > a { /*enleve effet changement couleur fluide lors survol menu */
	-webkit-transition-property:color,	background-color ;
	-moz-transition-property:	color,	background-color;
	-ms-transition-property:	color,	background-color;
	-o-transition-property:		color,	background-color;
	transition-property:		color,	background-color;

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

	cursor:pointer; /*car si j'enleve le href, le cursor reste en fleche*/
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { /*change couleur fond si selectionne*/
/*jan2014: assombri couleur (avant: degrade de 00b9f0 vers 0077b3)).*/
	background-color: #025d7b;  /*au cas ou degrade ci-apres pas ok*/
	background-image: -moz-linear-gradient(top, #0077b3, #025d7b);  /*en fait la couleur de fond se defini via ce degrade */
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0077b3), to(#025d7b));
	background-image: -webkit-linear-gradient(top, #0077b3, #025d7b);
	background-image: -o-linear-gradient(top, #0077b3, #025d7b);
	background-image: linear-gradient(to bottom, #0077b3, #025d7b);
	/*augmente marge de selection en haut et en bas (permet aussi de + facilemetn passer a un sous-menu car hauteur + haute donc on sort moins facilement de la zone)*/
	padding-top: 5px; padding-bottom: 5px;
	margin-top: -2px; margin-bottom: -2px;
}

.btn-primary {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #00b9f0, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b9f0), to(#0044cc));
background-image: -webkit-linear-gradient(top, #00b9f0, #025d7b);
background-image: -o-linear-gradient(top, #00b9f0, #0044cc);
background-image: linear-gradient(to bottom, #00b9f0, #0044cc);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { /*au survol*/
background-color: #025d7b;
}

.btn-group.open .btn-primary.dropdown-toggle { /*btn enfonce (ex: pour liste de choix)*/
background-color: #025d7b;
}

.dropdown-menu .divider {  /*ligne de separation entre menu*/
	height: 2px; /*2 au lieu de 1 a cause de box-sizing: border-box qui calcul hauteur avec bordure incluse */
}

.dropdown-menu {
	min-width: 90px; /*largeur mini du menu (pas les sous menu) (avant : trop large)*/
}

.dropdown-submenu > .dropdown-menu { /*sous-menu*/
	border-radius: 6px; /*arrondi partout plutot que sauf le coin superieur gauche*/
	margin-left: -5px; /*chevauche + le menu principal*/
	margin-top: -1px; /*pour decaler le sous-menu ver le bas plutot que vers le haut*/
}

.btn-group > .btn + .btn {
	margin-left: -3px; /*rapproche la partie droite si bouton en 2 parties*/
}

/*.btn-group > .btn.menuAvecSousMenu { *//*ex: menu lentille*/
.btn-group.menuAvecSousMenu { /*ex: menu lentille*/
	font-size: 1em;
}
.btn-group.menuAvecSousMenu > .btn { /*ex: menu lentille*/
/*voir aussi dans menu.css (pour hover aussi)*/
	background-image: none;
	box-shadow: none;  border: 0px;  border-radius: 0px;
	text-shadow: none;
	/*height: 62px;background-color: #00b9f0;*/
}
.btn-group.menuAvecSousMenu > .btn.dropdown-toggle { /*la partie droite du menu (avec fleche vers le bas)*/
	border-left: 1px solid #48C9EF;/*separation subtile entre menu normal et partie droite*/
	-webkit-transition-property:	opacity,	background-color;
	-moz-transition-property:		opacity,	background-color;
	-ms-transition-property:		opacity,	background-color;
	-o-transition-property:			opacity,	background-color;
	transition-property:			opacity,	background-color;

	-webkit-transition-duration:	0.5s,		0.7s;
	-moz-transition-duration:		0.5s,		0.7s;
	-ms-transition-duration:		0.5s,		0.7s;
	-o-transition-duration:			0.5s,		0.7s;
	transition-duration:			0.5s,		0.7s;
}
.btn-group.menuAvecSousMenu > .btn:first-child { /*la partie droite du menu (avec fleche vers le bas)*/
	margin-right: -3px;/*rapproche partie de droite*/
}

.btn-group > .dropdown-menu { /*sous-menu deroulant d'un menu*/
	text-align: left;
	-webkit-font-smoothing: antialiased;/*evite mini bug de changement de graisse, selon survol du menu (dans Safari)*/
}

.caret { /*petite fleche vers le bas dans menu ou sous-menu*/
	border-top: 5px solid #EEE;/*5 au lieu de 4px*//*pour changement au survol: voir #zone-documents li:hover .btnMenu .caret*/
	border-right: 5px solid transparent;/*(=border-top)*/
	border-left: 5px solid transparent;/*(=border-top)*/
	margin-top: 5px;/*position verticale correcte (=border-top)*/
}

.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
.w-100 {
  width: 100% !important;
}
.w-initial {  /*inventé par JC - 11/04/2025*/
  width: initial !important;
}


/*	*	*	*	*	*	*	*	*	*	*	*	*	*   FIN BOOTSTRAP - CORRECTION  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

/*	*	*	*	*	*	*	*	*	*	*	*	*	*  Pris sur BOOTSTRAP - mais pas fichier CSS importe (ex: si nouveautes, ou juste un element interressant)  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/
.badge {
	display: inline-block;
	min-width: 10px;  padding: 3px 7px;  line-height: 1;  background-color: #777;  border-radius: 10px;
	font-size: 12px;  font-weight: 700;  color: #fff;
	vertical-align: baseline;  white-space: nowrap;  text-align: center;
	/*mes adaptations :*/
	font-size:0.9em;
	background-color: #999;
}
.badge.rouge { /*comme pastille*/
	background-color: orangered; color:#FFF;
}
/*	*	*	*	*	*	*	*	*	*	*	*	*	*   FIN Pris sur BOOTSTRAP  *	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/


#blocMaxArticle div#colonneGauche {
	min-width: 130px; float: left;font-size: 0.85em; text-align:left; padding:10px 10px 10px 10px;/*avr2014:pas besoin la gauche*//*mai2014: ajout marge gauche suite a bloc avec zone-bloc*/
	width:220px;/*fev2014: il faut une largeur definie pour pouvoir animer la largeur*//*max-width moins padding horizontal*/
	max-width: 220px;

	-webkit-transition-property:opacity, width, padding, min-width;
	-moz-transition-property:	opacity, width, padding, min-width;
	-ms-transition-property:	opacity, width, padding, min-width;
	-o-transition-property:		opacity, width, padding, min-width;
	transition-property:		opacity, width, padding, min-width;

	-webkit-transition-duration:0.35s;
	-moz-transition-duration:	0.35s;
	-ms-transition-duration:	0.35s;
	-o-transition-duration:		0.35s;
	transition-duration:		0.35s;

}

/* * * lien avec picto newWindow , telecharger (nouvelle fenetre) * * * */
  a.newWindow
, .bouton.newWindow
, a.telecharger { /*si picto, je considere qu'il ne faut pas de retour a la ligne*/
	white-space: nowrap;
}

  a.newWindow:after
, .bouton.newWindow:after
{ /*place a la fin du lien le picto indiquant que ca va s'ouvrir dans une nouvelle fenetre*/
	content: url(../images/picto/picto-nouvelle-fenetre-1A.png);  /*picto bleu clair*/
	width:10px;  height:10px;
	padding: 0 0 0 6px;
	/* ou une image de fond
	background: url(../images/picto/picto-nouvelle-fenetre-1A.png) center right no-repeat;
	width: 18px; height: 13px; display: inline-block;
	content: url(../images/spacer.gif);  //pour que ca s'affiche sinon un caractere mais accepte pas l'esapce simple ni inseccable
	vertical-align: -1px;
	*/
}
  a.newWindow.pictoMasque:after
, .bouton.newWindow.pictoMasque:after
, a.telecharger.pictoMasque:after
{ /*picto non visible par defaut, apaprait au survol seulement (ex: RLV_EDI) */
	content: url(../images/spacer.gif);
	padding: 0 9px 0 6px; /*decale pour garder place du picto non visible*/
}

  a:hover.newWindow:after
, a:hover.newWindow.pictoMasque:after
, .bouton:hover.newWindow.pictoMasque:after
{ /*au survol, il devient blanc*/
	content: url(../images/picto/picto-nouvelle-fenetre-1H.png);
	width:10px;  height:10px;
	padding: 0 0 0 6px; /*si on decide de masquer le picto par defaut et de l'afficher que au survol (ex: RLV_EDI) */
}
a.telecharger:after { /*meme principe que newWindow*/
	content: url(../images/picto/picto-telecharger-1A.png);
	width:10px;  height:10px;
	padding: 0 0 0 6px;
}
a:hover.telecharger:after {
	content: url(../images/picto/picto-telecharger-1H.png);
	width:10px;  height:10px;
	padding: 0 0 0 6px;
}

  a.newWindow.pictoBlanc:after
, .bouton.newWindow.pictoBlanc:after
{ /*si btn avec fond, + joli si on voit le picto (sinon invisble car meme couleur que fond du btn)*/
	content: url(../images/picto/picto-nouvelle-fenetre-1H.png);  /*picto blanc*/
}
a.telecharger.pictoBlanc:after { /*idem pour picto telecharger*/
	content: url(../images/picto/picto-telecharger-1H.png);  /*picto blanc*/
}


/* * * FIN lien avec picto newWindow, telecharger (nouvelle fenetre) * * * */

/* * * PS - Parametres Speciaux (jan2014) * * * */
#blocMaxArticle .conteneurImagePS {
	position: absolute;
}
.conteneurImagePS img { /*l'image en elle-meme*/
	border: 1px solid #AAA;
	position: relative;  z-index: 20; /*passe devant tout le reste*/
	/*width: auto;*//*prend dimensions reelles de l'image*/ /*max-width: 100%;*//*pour pas deborder de la page*/ width: 100%;/*remplace auto qui est pas ok sous FF. et max n'est alors plus utile.*/
	box-shadow: 3px 3px 15px rgba(150, 150, 150, 1.00);
}




/* * * FIN PS - Parametres Speciaux * * * */


/* * * TEST 2013 - mini btn pas utilise mais pourrait servir * * * */
input.miniBtnOK {  /*mini btn qui peuvent s'afficher juste a cote d'un chp pour valider la valeur d'un chp (ex: chp client pour lancer recherche dessus). Mais pour l'instant, je renonce a les afficher, les utiliser.*/
	margin-left: -1px;
	/*z-index: 1;*/
	padding: 2px 6px 2px 5px;
	font-size: 1.01em;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	/*border : 1px solid #00b9f0;*/
	height: 1.8em;
	vertical-align: top;
	/*line-height: 2.5em;*/
	margin-left:-24px; /*pour placer le bouton par-dessus le champ en bout (pas apres pour pas se retrouver a la ligne si trop grand)*/ /*largeur approximative : a adapter quand ce sera une iamge plutot qu'un texte changeant selon la taille de police*/
	border-radius:0; /*pas arrondi car champ sans coin arrondi*/
}

input[type="text"]  /* les champs text classique (un jour ajouter sans doute d'autres type,...)*/
, input[type="date"]
, input[type="number"]
, input[type="email"]
, input[type="tel"] {
	height: 1.8em; /*pour qu'ils aient la meme hauteur que miniBtnOK */
  line-height: 1.8em;
}

input[type="number"] {
	font-size: 1.02em; /*1.01 pour que safari mettent des boutons incrementeur + gros si de type number*//*aout2018: 1.02 sinon pas ok pour modif ensemble (restait plus petit) !!*/
}
/* * * FIN TEST 2013 - mini btn pas utilise mais pourrait servir * * * */



.sansTransition { /*pour annuler une eventuelle transition/animation appliquer sur un objet (ex: bnt MAJ du doc)*/
	transition: none !important; /*sans tous les derives selon le navigateur car pas important*/
}
.sansTransition_width { /*pour annuler animation de la largeur et conserver le reste des effets*/
	/*transition: width 0s linear !important; sans tous les derives selon le navigateur car pas important*/
}


.margin0 { /*force marge a zero. ex: pour btn avec espace par defaut au-dessous/dessous*/
	margin:0 !important;
}



/*affichage un peu différent des blocs escompte et FFP dans listing client (page divers) :*/
.listing_K .blocEscompte
, .listing_K .blocFFP
{
	padding:0px 3px 0px 3px;
	float:right;
	color:#FFF!important; /*sinon la classe detailON va mettre le texte en gris*/
}



/*** lien video ***/ /*jan2016*/
#zoneLecteurVideo {
	width: 100%;  left:0;
}
.blocVideo {
	display: block;
	background-color:#000;
	text-align: center;
	margin-bottom: 10px;/*mai2016*/
}
.blocVideo a {
	width: 240px;
	height:80px;
	display: inline-block;
	background-color: #00b9f0;
	padding: 0;
}
body.articleParametrage .blocVideo a {
	width: 180px;
}
.blocVideo a .titre {
	width: 100%;
	color:#FFF;
	display: inline-block;
	float: left;
	height: 1.3em;

	/*pour couper le titre avec ...*/
	overflow: hidden;
	text-overflow: ellipsis;  /*ne fonctionne que si sur une seule ligne (pas sur plusieurs lignes) */
	white-space: nowrap; /*obligatoire si on veut ... a la fin*/
}
.blocVideo a .play { /*fleche de lecture*/
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-left: 40px solid #FFF;
	border-bottom: 20px solid transparent;
	display: inline-block;
	margin-left: 10px;
	margin-top: 10px;
}
/*au survol : (fleche bleu, fond noir)*/
.blocVideo a:hover {
	background-color: #000;
}
.blocVideo a:hover .play {
	border-left-color:#00b9f0;
}
/*** FIN lien video ***/


.blocAppSoleko { /*juin2017*/
    text-align: right;
    padding: 4px 0;
    display: block !important;
    margin: 2px 0 !important;
}
.blocAppSoleko span:nth-child(1) {
    display: inline-block;
    text-align: right;
    /*font-size: 0.85em;*/
    line-height: 1.1em;
    vertical-align: middle;
    padding-right: 5px;
    font-style: italic;
}
.blocAppSoleko span:nth-child(2) {
    display: inline-block;
    background-image: url("/images/picto/picto-app-Soleko@2x.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: center;
    width: 40px;  height: 40px;
    vertical-align: middle;
}


/* bloc suiviK */
#zone_suiviK {
    position: relative; /*pour que ça passe par-dessus toutes les zones de la fiche (ex: les champs de la fiche)*/
}
#zone_suiviK.reduite {
    font-size: 0.85em;  line-height: 1.0em;  /*texte plus petit*/
}
#zone_suiviK.reduite #zone_champsAjout {
   margin-top: 25px;
}



#zone_suiviK > div {
    background-color: #8dc5cd;
    clear: both;
    /* XXXmax-height: 250px; */
    width: 30%;
    float: right;
    display: inline-block;
    margin-bottom: -100%;
    border: 10px solid #8dc5cd;
    border-radius: 4px;

    transition: width 0.2s; /*animation du redimensionnement de la zone*/
}

#zone_suiviK .zoneTitre {
    position: relative;
    display: block;
    /* XXbackground-color: red; */
    /* XXwidth: 100%; */
    padding-bottom: 20px;
    background-image: linear-gradient( 180deg , rgba(141, 197, 205, 1) 60% , rgba(141, 197, 205, 0) 100%);
    margin-bottom: -25px;
}
#zone_suiviK .zoneContenu {
    text-align: left;
    font-size: 0.8em;
    /*overflow: auto; max-height: 300px;*/ /*hauteur max (ne doit pas passer par-dessus zones importantes de la fiche K)*/
    /* XXXheight: 200px; */

    transition:  max-height 1s; /*animation du redimensionnement de la zone*/
}
/*ligne pour suiviK_prive - 16/08/2024*/
  #zone_suiviK .liste tr.suiviK_prive
, #tableau_suiviK.liste tr.suiviK_prive
{
  color: darkslategray;
  font-style: italic;
}
/*bloc privé pour suiviK_prive - 16/08/2024*/
  #zone_suiviK .liste tr.suiviK_prive td.description:before
, #tableau_suiviK.liste tr.suiviK_prive td.description:before
{
  content: "PRIVÉ";
  float: left;
  font-size: 0.7rem;
  color: #ffffff;
  padding: 0em 0.35rem;
  background-color: #888;
  font-style: initial;
  border-radius: 24px;
  margin-right: 0.3em;
}

#zone_suiviK .liste td
, #tableau_suiviK.liste td /*liste sur page divers*/
{
    vertical-align: top;
}
#zone_suiviK .liste td
{
    padding-top: 4px; padding-bottom: 4px; /*petite marge entre chaque ligne du tableau de suiviK*/
}
#zone_suiviK .liste td.date
, #tableau_suiviK.liste td.date /*liste sur page divers*/
{
    padding-right: 10px;
    width:7em;
    text-align: right;
}
#tableau_suiviK.liste td .pictoDoc .date /*liste sur page divers (date de modif, pas date du message)*/
{
    font-size: 0.6em;
    clear: both;
    display: block;
}
#tableau_suiviK.liste td .pictoDoc .date.modif /*liste sur page divers (si date de modif, pltuôt que de création)*/
{
    color: orange;
}


#tableau_suiviK.liste td.nom /*liste sur page divers (nom client)*/
, #tableau_suiviK.liste td.ville /*liste sur page divers (ville client)*/
{
    text-align: left;
    font-size: 0.75em; line-height: 1.2em;
    max-width:230px;
}
#zone_suiviK .liste td.description
, #tableau_suiviK.liste td.description /*liste sur page divers*/
{
    /*position: relative;*//*pour pouvoir positionner correctement le pictoDoc (initiales auteur). Pas utile si je mets  position: initial;  ci-après*/
    text-align: left;
}
#zone_suiviK .liste td.description .pictoDoc
, #tableau_suiviK.liste td.description .pictoDoc /*liste sur page divers*/
{
    position: initial;  top:initial;    bottom:initial;    right:2px;
}

#tableau_suiviK.liste td .btnBlocId.idK /*liste sur page divers (nom client)*/
{
    font-size: 0.8em;
}

#zone_suiviK a.btnTexte.sansFond {
    color:#FFF; /*pour que les boutons de raccourcis soit lisibles sur le fond bleu-vert (ex: proposition date, heure)*/
}

#zone_suiviK #infoGeneral {
    text-align: left;
    padding-top: 20px;
}
#zone_suiviK #infoGeneral > div { /*le texte de infoGeneral*/
    margin-top: 5px; padding-left: 20px;
    max-height: 250px; overflow: auto; /*limiter hauteur*/
    display: block!important; /*si peu de texte, n'irait pas en-dessous de "info générales :" suite affichage/masquage*/
}

/*si zone reduite pour utilisateur avec droits base :*/
#zone_suiviK.reduite .discret {
    width: auto;
}
#zone_suiviK.reduite .discret .zoneTitre
{
    position: initial;
    padding-bottom: 0px;
    background-image: none;
    margin-bottom: 0px;
}
#zone_suiviK.reduite .discret .zoneTitre .titre
, #zone_suiviK.reduite .discret .zoneFormulaire
{ /*plus léger pour utilisateur droit base*/
    display:none;
}

/*si zone totalement deployee :*/
#zone_suiviK.deployee > div {
    width: 100%;
   /* float: none;*//*pas compatible avec animation*/
    margin-bottom: 20px;
    margin-top: 10px;
}

#zone_suiviK.deployee .zoneTitre {
    background-image : none;
    overflow: auto;
    margin-bottom: 0;
}
#zone_suiviK.deployee .zoneContenu {
    max-height: none;
    overflow: visible; /*evite bug qui masque parfois le 1er champ (date)*/
}
#zone_suiviK.deployee .liste  /*le tableau avec le contenu de la liste en elle-meme*/
, #zone_suiviK.deployee #infoGeneral > div /*le texte de infoGeneral*/
{
    display: inline-block; overflow: visible !important; /*aucun défilement quand deployé*/
}
#zone_suiviK.deployee td.actions { /*td.actions = colonne avec btn d'actions (ex: modifier)*/
    padding: 3px 0px; /*evite que tous les boutons se collent*/
}
#zone_suiviK.reduite td.actions  /*td.actions = colonne avec btn d'actions (ex: modifier)*/
/*, #zone_suiviK.reduite #infoGeneral .btnModif*/
{
    display:none;/*masque la zone si taille reduite*/
}

/*si zone réduite (élements en +) :*/
#zone_suiviK.reduite .liste { /*le tableau avec le contenu de la liste en elle-meme*/
    width: 100%;
    display: inline-block; overflow: auto !important; /*pour faire defiler la liste mais sans défiler infos générales*/
    max-height: 255px;/*hauteur que j'estime utile. Mais si trop d'infos générales, posera peut-être problème*/
    padding-top:15px; /*pour pouvoir bien voir la 1re ligne, sinon dans le flou du titre*/
    padding-right:5px; /*evite que la barre de defilement a droite, chevauche le texte*/
}

/* fin bloc suiviK */


/* * * ANIMATION * * */

body.document .offre_PN ul.articles li:first-child
, .vibration /*pour tous types d'objets voulant vibrer de la meme facon*/
{ /*vibration rapide du 1er article de la liste des articles proposes*/
-webkit-animation: vibration 8s infinite ;  /*ajouter  infinite  pour animer en boucle*/
   -moz-animation: vibration 8s infinite ;
    -ms-animation: vibration 8s infinite ;
     -o-animation: vibration 8s infinite ;
        animation: vibration 8s infinite ;
}
/*une version + rapide existe + bas : vibrationRapide*/

@-webkit-keyframes vibration { /*pourcentage tres proche pour faire rapidement entre 15 et 20 %. Reste du temps : pause. Le tout durant 8s (defini avant)*/
	15% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	15.5%, 16% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	16.5%, 17.5%, 18.5%, 19.5% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	17%, 18%, 19% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	15.5% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes vibration { /*idem sans prefixe*/
	15% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	15.5%, 16% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	16.5%, 17.5%, 18.5%, 19.5% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	17%, 18%, 19% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	15.5% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}



/*jan2016: version  rapide, avec pause + courte*/
.vibrationRapide /*idem mais plus rapide*/
{
/*2s au lieu de 8s*/
-webkit-animation: vibrationRapide 2s infinite ;
   -moz-animation: vibrationRapide 2s infinite ;
    -ms-animation: vibrationRapide 2s infinite ;
     -o-animation: vibrationRapide 2s infinite ;
        animation: vibrationRapide 2s infinite ;
}

@-webkit-keyframes vibrationRapide { /*pourcentage tres proche pour faire rapidement entre 15 et 20 %. Reste du temps : pause. Le tout durant 8s (defini avant)*/
	/*debut ne change pas*/
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	/*valeur x2*/
	62%, 64% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	66%, 70%, 74%, 78% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	68%, 72%, 76% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	62% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	80% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes vibrationRapide { /*idem sans prefixe*/
	/*debut ne change pas*/
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	/*valeur x2*/
	62%, 64% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	66%, 70%, 74%, 78% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	68%, 72%, 76% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	62% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	80% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}


/* * * FIN ANIMATION * * */

/* zone image en fond de menu cliquable (ex: si demon dans menu, ou même offre speciale (ex: SEED)*/
.visuelDansMenu {
    position: absolute;
    top: 0px; right: 85px;
    height: 100%;  width: 100%;
    z-index: 4;
    overflow: hidden;
    border-bottom: 1px solid transparent;/*sinon, dans FF, l'image va par-dessus bordure => decale de 1px (mais dans autre navigateur : espace de 1px)*/
}
#zoneMenu1.menuNonConnecte .visuelDansMenu {
    right: 98px; /*ajuste écart par rapport au menu de droite connexion/deconnexion*/
}
.visuelDansMenu .sous_visuelDansMenu {
    position: absolute;
    right: -214px;
    bottom: 0px;/*inverse de right ci-dessous (img)*/
    height: 168px; width: 550px;/*possibilité de ajuster si redimensionner*/
    cursor: pointer; /*car on peut cliquer dessus pour accès direct au lentilles*/
}
body.style2 nav#zoneMenu1 .visuelDansMenu .sous_visuelDansMenu img  /*mis sur nav car pas possible via body sur autre pages*/
{
    right: 214px;/*inverse de right ci-dessus (sous_visuelDansMenu)*/  top: 93px;  position: absolute;
}
/*si menu avec image speciale => pas l'image œil habituelle*/
body.style2 nav#zoneMenu1.specialDemon  /*mis sur nav car pas possible via body sur autre pages*/
, body.style2 nav#zoneMenu1.specialSEED
{
    background-image: none !important;
}
/*pour l'accueil, fond blanc pour ne pas perturber le visuel du Démon, SEED,…*/
body.accueil.style2 nav#zoneMenu1.specialDemon  /*mis sur nav car pas possible via body sur autre pages*/
, body.accueil.style2 nav#zoneMenu1.specialSEED
{
  background-color: #FFF;
}

/* * * image du demon dans menu, quand evenement special (ex: Halloween) * * */
/* pas de body.specialDemon devant  modeleDansMenu  car zone  modeleDansMenu  ne sera pas affichee de toute façon si pas PERIODE_SPECIAL_DEMON (et difficiel de mettre)*/

.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele {
    width: 400px;/*ajuste si demon*/
}
.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele {
    background-position: 0px -550px ;/*pas toucher ici, si possible. Ajuster reidmensionnement dans .zonePourModele (au-dessus)*/
    transform: scale(0.25); /*possibilité de redimensionner*/
    background-image: url(/images/modele/TEST1-portionOD.png?20210818b);
}
/* positionne une lentille par defaut +pupille +reflet +paupiere (evite de voir trop longtemps l'oeil vide de l'image):*/
/*20sept2019 : Nightmare */
.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele .lentille {
    width: 84px;
    height: 84px;
    margin-left: -42px;
    margin-top: -42px;
    background-image: url("/images/lentille-demoniac-party-nightmare-c52_2.jpg");
    left: 510px;
    top: 560px;
}
.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele .pupille {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    left: 510px;
    top: 560px;
}
.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele .reflet {
    left: 510px;
    top: 560px;
}
.visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele .paupiere {
    left: 510px;
    top: 560px;
}

/*2021 adaptations si en page accueil (suite modif iamge accueil, ça impacte le démon, qui fait bizarre si fond blanc)*/
body.accueil .visuelDansMenu.modeleDansMenu {
  width: 222px;
  right: 0 !important; /*peu importe si menuNonConnecte*/
  height: 187px;
  border-bottom: none;
  transform: scale(1.82);
  transform-origin: bottom right;
  bottom: 0px;
  top: initial;
}
body.accueil .visuelDansMenu .sous_visuelDansMenu {
  right: -186px;
  height: 187px;
}
body.accueil .visuelDansMenu.modeleDansMenu .sous_visuelDansMenu.zonePourModele .modele {
  background-position: 0px -450px ;/*pas toucher ici, si possible. Ajuster reidmensionnement dans .zonePourModele (au-dessus)*/
}

/* FIN image du demon dans menu */

/* * * fond special quand evenement special (ex: Hallowween) * * */
/* rq:
si specialDemon : pour page  pageArticlesLCR (lentilles de couleur)
si specialSEED : pour page  pageArticlesLCT (lentilles de contact (général))
*/
/*Fond de page*/
    body.specialDemon#pageLA.style2.pageArticlesLCR { /*Demoniac*/
        background-color: rgb(152, 30, 19);
        background-image: url('../images/commun/fond-demoniac-201909.jpg');
        background-position: center bottom;
    }
    body.specialSEED#pageLA.style2.pageArticlesLCT { /*SEED*/
        background-color: #0c8ca6;/*vert turquoise*/
        background-image: url('../images/commun/fond-SEED-201910.jpg');
        background-position: right top;
    }
/*avec un fond special, il faut adapter certains éléments devenu peu lisibles ou inadaptés :*/
/*Menu et sa bordure basse*/
    body.specialDemon#pageLA.style2.pageArticlesLCR nav#zoneMenu1
    , body.specialSEED#pageLA.style2.pageArticlesLCT nav#zoneMenu1
    { /*menu*/
        /*background-color: #EEE;*/
        /*border-bottom: none;*/border-bottom-color:#000;/*si image du demon => laisser la bordure mais changer couleur*/
        background-image: none;  background-color: initial;  /*sans image ni fond*/
    }
/*Filtres - Fond*/
    body.specialDemon#pageLA.style2.pageArticlesLCR #zoneFiltre
    {   background-color: #000;
    }
    body.specialSEED#pageLA.style2.pageArticlesLCT #zoneFiltre
    {   background-color: rgba(0, 132, 34, 0.70);/*vert légèrement transparent*/
    }
/*Filtres - titre filtre*/
          body.specialDemon#pageLA.style2.pageArticlesLCR nav#zoneFiltre div.blocFiltre > div.titreGroupeFiltre
        , body.specialDemon#pageLA.style2.pageArticlesLCR nav#zoneFiltre div.blocFiltreTOUS > div.titreGroupeFiltre  /*20/10/2022 : ex: Affichage des tarifs*/
        {
            color: rgb(215, 57, 45);/*rouge-orange*/
        }
          body.specialSEED#pageLA.style2.pageArticlesLCT nav#zoneFiltre div.blocFiltre > div.titreGroupeFiltre
        , body.specialSEED#pageLA.style2.pageArticlesLCT nav#zoneFiltre div.blocFiltreTOUS > div.titreGroupeFiltre  /*20/10/2022 : ex: Affichage des tarifs*/
        {
            color: rgb(0,0,0);/*vert*/
        }
/*Filtres - fond bouton filtre*/
          body.specialDemon#pageLA.style2.pageArticlesLCR .blocFiltre button
        , body.specialDemon#pageLA.style2.pageArticlesLCR .blocFiltreTOUS label  /*20/10/2022 : ex: Affichage des tarifs*/
        , body.specialSEED#pageLA.style2.pageArticlesLCT .blocFiltre button
        , body.specialSEED#pageLA.style2.pageArticlesLCT .blocFiltreTOUS label  /*20/10/2022 : ex: Affichage des tarifs*/
        {   background-color: transparent; /*pour voir l'arrière plan noir facilement*/
            color: #FFF;
        }
/*Filtres - fond bouton filtre actif + gros boutons spéciaux (visibles que par ophta)*/
        body.specialDemon#pageLA.style2.pageArticlesLCR .blocFiltre button.critereActif
        , body.specialDemon#pageLA.style2.pageArticlesLCR.mode_OPHTA .articles li .ophta_btn_enteteListeA.OPHTA_cde_oui.critereActif
        , body.specialDemon#pageLA.style2.pageArticlesLCR.mode_OPHTA .articles li .ophta_btn_enteteListeA.OPHTA_cde_non.critereActif
        {   background-color: rgb(215, 57, 45) !important;/*rouge-orange*/
        }
        body.specialSEED#pageLA.style2.pageArticlesLCT .blocFiltre button.critereActif
        , body.specialSEED#pageLA.style2.pageArticlesLCT.mode_OPHTA .articles li .ophta_btn_enteteListeA.OPHTA_cde_oui.critereActif
        , body.specialSEED#pageLA.style2.pageArticlesLCT.mode_OPHTA .articles li .ophta_btn_enteteListeA.OPHTA_cde_non.critereActif
        {   background-color: rgba(0, 5, 1, 0.39) !important;/*vert sombre légèrement transparent*/
        }
/*Filtres - contour sous-filtre*/
        body.specialDemon#pageLA.style2.pageArticlesLCR nav#zoneFiltre div.blocFiltre .groupeFiltre > button.critereActif:not(.filtreInvisible) + .sousGroupeFiltre /*cadre sous-selection dans zone filtres*/
        {   border-color: rgb(215, 57, 45);/*rouge-orange*/
        }
        body.specialSEED#pageLA.style2.pageArticlesLCT nav#zoneFiltre div.blocFiltre .groupeFiltre > button.critereActif:not(.filtreInvisible) + .sousGroupeFiltre
        {   border-color: rgb(0,132,34);/*vert*/
        }
/*divers : textes sur fond page*/
    body.specialDemon#pageLA.style2.pageArticlesLCR h1
    , body.specialDemon#pageLA.style2.pageArticlesLCR #blocMentions /*info prix, couleur (tout en bas liste lentilles)*/
    , body.specialDemon#pageLA.style2.pageArticlesLCR footer
    , body.specialDemon#pageLA.style2.pageArticlesLCR .bandeSeparateurArticles .slogan /*ligne titre entre chaque type de lentille*/
    , body.specialSEED#pageLA.style2.pageArticlesLCT h1
    , body.specialSEED#pageLA.style2.pageArticlesLCT #blocMentions
    , body.specialSEED#pageLA.style2.pageArticlesLCT footer
    , body.specialSEED#pageLA.style2.pageArticlesLCT .bandeSeparateurArticles .slogan
    {   color:#FFF;
    }
/*divers - ligne titre entre chaque type de lentille*/
        body.specialDemon#pageLA.style2.pageArticlesLCR .bandeSeparateurArticles .txt /*fond de couleur*/
        {   background-color: #000;
            background-image: linear-gradient(to left, #000 25%, rgba(153, 153, 153, 0) 75%); /*en fait, utilise un dégradé special (à cause des Queen's)*/
        }
        body.specialSEED#pageLA.style2.pageArticlesLCT .bandeSeparateurArticles .txt
        {   background-color: rgb(0,132,34);/*vert*/;
            background-image: none;
        }
/*page couleur : les gros bloc de sous-choix verticaux*/
    body.specialDemon#pageLA.style2.pageArticlesLCR .articles .selecteurLentillesLCR .SS /*gros bloc de sous-selection de choix des lentilles couleurs*/
    {    border: 3px solid #FFF;
    }
/*page couleur : bloc pour figurer en tant que revendeur sur site D ou bloc offre Demoniac*/
    body.specialDemon#pageLA.style2.pageArticlesLCR .offre.typeRevendeur a.zoneClic
    , body.specialDemon#pageLA.style2.pageArticlesLCR #offre_D1
    {   border-radius: 4px;
        box-shadow: 0px 0px 8px 2px rgba(255, 204, 0, 1);
    }
/*bloc article : fond bloc articles*/
    body.specialSEED#pageLA.style2.pageArticlesLCT .articles li.article
    {    background-color: rgb(255,255,255 , 0.87);/*fond légerement transparent pour voir le fond au traver*/
    }

@media (max-width: 849px) {

/*Menu : fond image*/
    body.specialDemon#pageLA.style2.pageArticlesLCR
    , body.specialSEED#pageLA.style2.pageArticlesLCT
    {
        background-image: none;
    }
/*bloc article : fond bloc articles*/
    body.specialSEED#pageLA.style2.pageArticlesLCT .articles li.article
    {    background-color: #FFF;/*remet fond sans légère transparence*/
    }

}
/* * * FIN fond special quand evenement special * * */


/* * * tableau kit de com revendeur/RVD sur fiche K * * */

/*bouton pour télécharger kit*/
#zone-revendeur .btnKit {
  background-repeat: no-repeat;
  height: 75px;  line-height: 75px;
  width: 185px; /*force largeur aussi pour que tous les boutons aient même largeur peu importe le texte*/
  font-size: 0.9rem;
  color: #FFFFFF;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.99), 0px 0px 8px rgba(0, 0, 0, 0.99) ; /*double ombre pour être plus prononcée*/
  border-radius: 4px;
  padding: 0px 10px;
}
#zone-revendeur .btnKit.dispo {
  font-weight: bold;
}
#zone-revendeur .btnKit.kitVisuels {
    background-size: 120%;
}
#zone-revendeur .btnKit.kitVideos {
    background-size: 100%;
}
/*aussi bien pour background que transform (pour avoir même property et duration)*/
  #zone-revendeur .btnKit
, #zone-revendeur .btnKit span {
  transition-property: transform , background-size ;
  transition-duration: 1.0s , 1.0s ;
  display: inline-block;
  transform-origin: center;
  background-position: center;
}
#zone-revendeur .btnKit.annuler.K span {
  line-height: 1em;
  vertical-align: bottom;
  margin-bottom: 5px;
}
/*si kit indispo (utilise class annuler qui met un fond en gris), image de fond en noir et blanc*/
#zone-revendeur .btnKit.annuler {
  background-blend-mode: luminosity;
}
/*l'image en fond*/
  #zone-revendeur .btnKit.dispo.kitVisuels:hover
/*, #zone-revendeur .btnKit.annuler:not(.K).kitVisuels:hover*/ /*si annuler (pas si K)*/
{
  background-size: 100%; /*recule pour les image*/
}
  #zone-revendeur .btnKit.dispo.kitVideos:hover
/*, #zone-revendeur .btnKit.annuler:not(.K).kitVideos:hover*/ /*si annuler (pas si K)*/
{
  background-size: 120%; /*zoome pour les vidéos*/
}
/*libellé et picto télécharger*/
  #zone-revendeur .btnKit.dispo:hover span
/*, #zone-revendeur .btnKit.annuler:not(.K):hover span*/ /*si annuler (pas si K)*/
{
  transform: scale(0.9);
}
/*picto télécharger*/
  #zone-revendeur .btnKit.dispo span:after /*si dispo pour tous*/
, #zone-revendeur .btnKit.annuler:not(.K) span:after /*si annuler (pas si K)*/
{
  margin-left: 3px;
  width: 13px;  height: 16px;
  display: inline-block;
  /*background-color: blue;*/
  background: url(../images/picto/picto-telecharger-1H.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  vertical-align: middle;
}
/* * * spécificités selon type de bouton/RVD * * */
/*Demoniac*/
#zone-revendeur .btnKit.kitVisuels.RVD-D {
  background-image: url("/images/kit-de-com/btn-kit-D-visuels@2x.jpg");
  /*background-position: center top;*/
}
#zone-revendeur .btnKit.kitVideos.RVD-D {
  background-image: url("/images/kit-de-com/btn-kit-D-videos@2x.jpg");
  background-position: center bottom;
}
/*Desio*/
#zone-revendeur .btnKit.kitVisuels.RVD-Ds {
  background-image: url("/images/kit-de-com/btn-kit-Ds-visuels@2x.jpg");
}
#zone-revendeur .btnKit.kitVideos.RVD-Ds {
  background-image: url("/images/kit-de-com/btn-kit-Ds-videos@2x.jpg");
  background-position: center bottom;
}
/*Funny Eyes*/
#zone-revendeur .btnKit.kitVisuels.RVD-FE {
  background-image: url("/images/kit-de-com/btn-kit-FE-visuels@2x.jpg");
}
#zone-revendeur .btnKit.kitVideos.RVD-FE {
  background-image: url("/images/kit-de-com/btn-kit-FE-videos@2x.jpg");
}
/*Ozia*/
#zone-revendeur .btnKit.kitVisuels.RVD-Oz {
  background-image: url("/images/kit-de-com/btn-kit-Oz-visuels@2x.jpg");
}
#zone-revendeur .btnKit.kitVideos.RVD-Oz {
  background-image: url("/images/kit-de-com/btn-kit-Oz-videos@2x.jpg");
  background-position: right center;
}
/*Queens*/
#zone-revendeur .btnKit.kitVisuels.RVD-Q {
  background-image: url("/images/kit-de-com/btn-kit-Q-visuels@2x.jpg");
}
#zone-revendeur .btnKit.kitVideos.RVD-Q { /*video inexistante pour Q - 28/05/2024*/
  background-image: url("/images/kit-de-com/btn-kit-Q-videos@2x.jpg");
}

/* * * FIN tableau kit de com revendeur sur fiche K * * */


/* * * info stat : #zoneRechercheRapideK (mis ici 21/09/2022)  + styleZRRK (21/08/2023 pour avoir même style sur d'autre zone. ex: EEPO)* * */
  .zone_flex {
    display: -webkit-flex; /*active flex pour le contenu*/
    -webkit-flex-direction: row;/*en ligne*/
    -webkit-justify-content: center;/*centrage, sans marge aux extremites*/
    -webkit-flex-wrap: wrap; /*permet aux element du contenu d'aller a la ligne*/

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  #zoneRechercheRapideK {
    text-align: right;
    margin-bottom: 7px;
    margin-top: -17px;
  }
  #zoneRechercheRapideK #ZRRK_zone-client {
    /*clear:right;*/
    display: inline-block;
    max-width: 500px;
    max-width: none;
  }

  #zoneRechercheRapideK .zoneInfoEtStat
, .styleZRRK .zoneInfoEtStat
{
    background-color: #4099b3; /*#00b9f0;*/
    border-radius: 4px;
  }
/*rq : .aspect02 pour style un peu different pour K*/
  #zoneRechercheRapideK.aspect02 .zoneInfoEtStat
, .styleZRRK.aspect02 .zoneInfoEtStat
{
    background-color: rgba(255, 255, 255, 0.5);
  }


/*ligne titre*/
  #zoneRechercheRapideK .zoneStatK table.type3 thead tr {
    background-color: rgba(67, 67, 67, 0.1);  /* = #999 avec transparence pour prendre teinte du fond*/
    color: #CCC;
  }
  #zoneRechercheRapideK.aspect02 .zoneStatK table.type3 thead tr {
    color: #777;
  }
/*cellules des lignes de titre et de corps du tableau*/
  #zoneRechercheRapideK .zoneStatK table.type3 thead tr th
, #zoneRechercheRapideK .zoneStatK table.type3 tbody tr td
  {
    padding: 5px 6px;
  }

/*tableau des stat du K*/
  #zoneRechercheRapideK .zoneStatK table.type3 {
    width: inherit;
  }


  #zoneRechercheRapideK .zone-bloc
, .styleZRRK .zone-bloc
{
    background-color: transparent;
    border-radius: 0;
    padding: 4px;
    box-shadow: none;
  }

  #zoneRechercheRapideK .zoneInfoK
, #zoneRechercheRapideK .zoneStatK
, .styleZRRK .zoneInfoK /*info generale pas dans sous-bloc*/
, .styleZRRK .zoneStatK /*dans sous-bloc*/
  {
    flex:auto; order: 2;
    max-width: 500px;
    flex:1; order: 1; /* #statCoteACote */
  }
  .styleZRRK .zoneInfoK
, .styleZRRK .zoneStatK
  {
    max-width: none; /*pas de limite que pour .styleZRRK*/
  }
  #zoneRechercheRapideK .zoneInfoK
, .styleZRRK .zoneInfoK /*(pas dans sous-bloc)*/
{
    margin-bottom: 0;
    min-width: 200px; /* #statCoteACote */
  }
  #zoneRechercheRapideK .zoneStatK
, .styleZRRK .zoneStatK
{
    font-size: 0.9em; line-height: 1.1em;
    color:#FFF;
    padding: 0; /*sans marge ainsi quand vide, pas visible*/
    order: 1; flex: 2; max-width: none; /* #statCoteACote */
  }
  #zoneRechercheRapideK.aspect02 .zoneStatK
, .styleZRRK.aspect02 .zoneStatK
{
    color: #000;
  }

  #zoneRechercheRapideK .zoneStatK.sansContenu {
    flex: 0;  /*en prendra ainsi pas de place si aucune stat*/ /* #statCoteACote */
  }

  #zoneRechercheRapideK .zoneStatK .contenant
, .styleZRRK .zoneStatK .contenant
{
    padding: 5px 10px; /*marge. Ainsi, visible que si rempli*/

    /* #statCoteACote */
    padding: 2px 6px;
    order: 1;
    flex: 2;
    min-width: 170px;
    background-color: rgba(255, 255, 255, 0.06);
    margin: 3px;
    border-radius: 5px;
  }
  #zoneRechercheRapideK.aspect02.blocFondPlusVisible .zoneStatK .contenant
, .styleZRRK.aspect02.blocFondPlusVisible .zoneStatK .contenant
{
    background-color: rgba(255, 255, 255, 0.4);
  }

  #zoneRechercheRapideK .zoneStatK label
, .styleZRRK .zoneStatK label
{
    margin-top : 1em;
    margin-bottom: 2px;
    margin-top : 0em; /* #statCoteACote */
  }

  #zoneRechercheRapideK .zoneStatK .contenant .blocEnValeur {
    text-align: center;
    padding: 0.5rem;
    background-color: initial;
    border: 0;
    font-size: 1.5rem;
  }
  #zoneRechercheRapideK .zoneStatK .contenant .nbEnValeur {
    font-size: 2.5rem; /*nb encore plus grand*/
    font-weight: bold;
  }

/*zone notation (nb etoile) suiviK*/
  #zoneRechercheRapideK .zoneStatK .zone-notation {
    background-color: rgba(67, 67, 67, 0.43); /*pour voir que non modifiable ici*/
    margin-top: 0.3em;
  }
  #zoneRechercheRapideK.aspect02 .zoneStatK .zone-notation {
    background-color: rgba(255,255,255, 0.95); /*pour voir que non modifiable ici*/
  }

  #zoneRechercheRapideK label
, .styleZRRK label
{
    color: #DCDCDC;
  }
  #zoneRechercheRapideK.aspect02 label
, .styleZRRK.aspect02 label
{
    color: #777;
  }
/* 1er li */
  #zoneRechercheRapideK .zone-bloc > li {
    margin: 0;
  }
/*le label "K" */
  #zoneRechercheRapideK .zone_saisie_chpIdK label {
    margin-left: 0.25em;
    color: #FFF;
    vertical-align: middle;
  }
  #zoneRechercheRapideK.aspect02 .zone_saisie_chpIdK label {
    color: initial;
  }
/*le input "K" */
  #zoneRechercheRapideK .zone_saisie_chpIdK input.chpIdK {
    color: #4099b3; /*#00b9f0;*/
    font-weight: bold;
    border-radius: 1em;
    border: none;
    text-align: center;
    vertical-align: middle;
    width: 100px;
  }
  /*input si modifié via clic sur un triplet N° K (sinon texte bleu sur fond vert un peu dur à lire)*/
  #zoneRechercheRapideK .zone-bloc input.chpIdK.zoneModifiee {
    color: #39889f ; /*#0085ad;*/
  }
  /*input si chpRempli*/
  #zoneRechercheRapideK .zone-bloc .zoneChpEtBtnEffacer.chpRempli input.chpIdK {
    padding-right: 1.1em;
    /*texte centré donc apparait décalé si padding droit pas ajusté*/
  }
/*zone n° K récent (via cookies)*/
  #zoneRechercheRapideK .zone-bloc .zoneAutoTxtDansChp_listeIdK {
    vertical-align: middle;
  }
/*zone du tél ou de listing K ou autre info "inexistant", "aucune saisie",…*/
  #zoneRechercheRapideK #ZRRK_zone_info_rechercheClient {
    width: 100%;
    display: block!important;
    /*margin-top: 7px;*/
  }
  #zoneRechercheRapideK .pays_pasAdresse_K /*pays placé devant le tel (pour adresse dont pays pas affiché en fin d'addresse (ex: Guadeloupe)*/
, #zoneRechercheRapideK .K_telephone
  {
    color: #FFF;
    margin-right:10px;
    margin-top: 7px;
  }
#zoneRechercheRapideK.aspect02 .K_telephone {
    color: initial;
  }
/* le bouton info/aide "?"*/
  #zoneRechercheRapideK .bouton.info {
    margin-right: 7px;
  }
/*picto d'info en haut à droite*/
  #zoneRechercheRapideK #ZRRK_bloc_picto_connexion .pictoCSS/*.picto_connexion.avecAchat*/ {
    vertical-align: middle;
  }
/*zone adresse K*/
  #zoneRechercheRapideK #ZRRK_zone-adresses_L_F {
    color: #FFF;
  }
  #zoneRechercheRapideK.aspect02 #ZRRK_zone-adresses_L_F {
    color: initial;
  }
  #ZRRK_zone-adresses_L_F > li {
    width: 100%;
    display: block!important;
    margin-top: 7px;
    /*place adresse l'une sous l'autre*/
  }
  #ZRRK_zone-adresses_L_F .zoneBtn_K {
    text-align: center;
  }
  #ZRRK_zone-adresses_L_F .zoneBtn_K a.bouton {
    text-align: center;
    margin: 0; vertical-align: middle;
    /*display: block;  /*place boutons "voir fiche", "Recharger infos" l'un sous l'autre*/
    display: inline-block; width: 50%;    /*ou l'un à côté de l'autre*/
    min-width: 140px;
  }
  /*que le 1er bouton "voir fiche"*/
  #ZRRK_zone-adresses_L_F .zoneBtn_K a.bouton/*:first-child*/ {
    padding: 10px;
    /*plus gros*/
  }
/*zone texte d'info remise,… K*/
  #zoneRechercheRapideK .texteInfo {
    margin-bottom: 0;
    padding: 4px 7px 4px 7px;
  }
  #zoneRechercheRapideK .texteErreur.reduit {
    margin-bottom: 0;
  }
  #zoneRechercheRapideK .texteInfo ul {
    padding: 0px 5px 0px 30px;
  }
  #zoneRechercheRapideK .texteInfo ul li {
    margin: 0px 0px;
  }
/*zone info aide recherche*/
  #zoneRechercheRapideK #ZRRK_infoRecherche_K {
    font-size: 0.8em;
  }
/* * * FIN info stat : #zoneRechercheRapideK (mis ici 21/09/2022) * * */


/* * * adapte selon taille support * * */

@media	only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (min--moz-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx)  { /*si ecran retina (ou meme genre) => afficher image plus grande*/ /*existe aussi (min-resolution: 192dpi) */
        /*#home-news a {background-image:url(images/icon-news@2x.png);}*/
		/*.btnSuppr {background-size:20px;} */  /*a voir si utile de decliner les versions de background-size car certainement que les navigateurs ne le reconnaissant pas ne reconnaissent pas non plus @media ou ne sont pas retina*/
		/*avant 40px mais pas ok chez Eleonore. A tester +. Ca doit pas fonctionner comme ca poru mettre en x2. En fait, je dois surement simplement indiquer l'image en + HD ici*/
}

@media (max-width: 1023px) { /* (< iPad horizontal) */

	body {
		padding: 0px;
	}
	#zoneActionVolante.elementFixe {
		margin-left: 0px;/*si body avec padding = 5 => la zone volante est decalee => corrige*/
	}

	body.modeE_actif h1, body.modeE_actif h2, body.modeE_actif h3
	, fieldset > legend {
		padding-left: 7px; /*pour ne pas coller les titre au bord gauche*/
	}

	body.modeE_actif .E_2.E_E { /*pour les elements positionne plutot a l'Est a droite (si trop etroit)*/
		-webkit-border-top-right-radius: 0px !important;  -moz-border-radius-topright: 0px !important;  border-top-right-radius: 0px !important;
		-webkit-border-bottom-right-radius: 0px !important;  -moz-border-radius-bottomright: 0px !important;  border-bottom-right-radius: 0px !important;
	}
	body.modeE_actif .E_2.E_O { /*idem pour element a l'Ouest*/
		-webkit-border-top-left-radius: 0px !important;  -moz-border-radius-topleft: 0px !important;  border-top-left-radius: 0px !important;
		-webkit-border-bottom-left-radius: 0px !important;  -moz-border-radius-bottomleft: 0px !important;  border-bottom-left-radius: 0px !important;
	}


	/*fev2014: affichage PS selon le cas (en dessous)*/
	#blocMaxArticle.imagePS_OD .conteneurImagePS
	, #blocMaxArticle.imagePS_OG .conteneurImagePS { /*permet d'afficher image debordante dans bloc aide (utilise dans bloc info prothese, page article)*/
		/*en absolu : mis + tot dans #blocMaxArticle .conteneurImagePS*/
		width:100%; left: 0px; text-align: center; /*le bloc va pouvoir 'sortir' du bloc d'aide. ca prendra toute la largeur de la fenetre.*/
		margin-top: 7em; /*permet de tomber en-dessous du menu packaging car l'image d'aide peut dependre de ce menu*/
	}
	/*FIN affichage PS */



}

@media (max-width: 800px) { /*jan2016: si trop etroit */
	#zoneLecteurVideo iframe {
		width: 100%;
	}

  .articles li.selecteurLentillesLCR {
      font-size: 0.7em !important;
  }

  /*nov2020 : ajuster pour aller jusqu'au bord gauche et droit*/
  .zone2parties.zoneBlocGrand.zone1
, .zone2parties.zoneBlocGrand.zone2
, .zone3parties.zoneBlocGrand.zone1  /*17/05/2022*/
, .zone3parties.zoneBlocGrand.zone2  /*17/05/2022*/
, .zone3parties.zoneBlocGrand.zone3  /*17/05/2022*/
  {
    padding: inherit;
  }

    .zone1partie.zoneBlocGrand
  , .zone2parties.zoneBlocGrand /*que pour zoneBlocGrand car prend bcp + de place que 2 boutons normaux (ex: via .zoneConfirmation ou .zone2boutons)*/
  , .zone3parties.zoneBlocGrand  /*17/05/2022*/
  {   width: 100% !important;
      padding: 0px 5px !important;
  }



}

@media (max-width: 600px) { /* si trop etroit */

	label.titreGroupeFiltre { /*les label de recherche se mettent au-dessus et non a gauche*/
		display: block;
		width:auto!important;
		padding-bottom:0px;
		line-height: 1.3em;
	}

/*fenetre popup : toute largeur :*/
	.fenetreSimple {
		width: 100%;
		-webkit-border-radius: 0px !important;  -moz-border-radius: 0px !important;  border-radius: 0px !important;
		border-width: 0px;
		box-shadow: rgb(0, 0, 0) 40px 0px 350px;/*ombre geante pour mieux visualiser superposition*/
		left: 0px !important;/*car le centrage impose un left*/
	}
	.caseDeFermeture { /*bouton fermeture de la fenetreSimple*/
		right: 25px;/*pour le voir entier*/
	}

}


@media (min-width: 850px) { /* (un peu + etroit que ipad horizontal) (juste pour lisibilite correcte image PS) */

	/*fev2014: affichage PS (a droite)*/
	#blocMaxArticle { /*blocMax de la page article*/
		width:100%;/*pleine largeur (ne change rien visuellement, mais utile poru position le texte a gauche, centre, droite : pour afficher image PS correctement)*/
	}
	#blocMaxArticle.imagePS_OD {/*mode pour afficher image des parametre speciaux de OD*/
		text-align: left;
	}
	#blocMaxArticle.imagePS_OD .conteneurImagePS { /*le conteneur s'adapte selon la position ou afficher l'image*/
		text-align: left;
		width: auto;
		left: auto;
		margin-left: 260px;
		margin-top: -46em;/*valeur approximative pour commencer un peu plus haut*/
	}
	/*meme principe pour OG :*/
	#blocMaxArticle.imagePS_OG {/*mode pour afficher image des parametre speciaux de OD*/
		text-align: right;
	}
	#blocMaxArticle.imagePS_OG .conteneurImagePS { /*le conteneur s'adapte selon la position ou afficher l'image*/
		width: auto; /*left: auto; margin-right: 260px;*/ margin-top: -46em;

		text-align: right;
		/*margin-right: 290px; left: 0;*//*placera sur la gauche*//*solution 1, pb: reste completement sur la gauche (donc loin des infos a saisir)*/
		right:290px;/*solution 2: pas ok si fenetre trop large: donc ajout info si media > 1200px (+ bas) */
	}

	#blocMaxArticle.imagePS_OD div#colonneGauche
	, #blocMaxArticle.imagePS_OG div#colonneGauche {/*dans ces 2 modes, on masque colonne gauche*/
		/*display:none;*/
		width: 0px; min-width: 0px; overflow: hidden; padding: 0; opacity:0;
	}
	/*FIN affichage PS */


	/*fond design pages*/
	body.style2 { /*si trop etroit : pas d'image de fond*/
		background-image: url('../images/commun/fond-design-2.jpg');
		background-repeat: no-repeat; background-position: center top;/*si ne gere pas cover*/
		background-attachment: fixed;
		background-size: cover;
	}

}


@media (min-width: 1024px) { /* (> ou = iPad horizontal) */

}

@media (min-width: 1200px) { /* (> ou = iPad horizontal) */
	#blocMaxArticle.imagePS_OG .conteneurImagePS { /*le conteneur s'adapte selon la position ou afficher l'image*/
		right: 50%;
	}
	#blocMaxArticle.imagePS_OG {/*mode pour afficher image des parametre speciaux de OD*/
		text-align: center;
	}
}

/* Legende (avr2014) :
body.modeE_actif = pour ne l'activer que si moi : pour test

E_ = Si en mode Etroit
E_1 = si mode un peu + étroit (env 1400: pas de marge a droite et a gauche, sauf celle imposee via body
E_2 = largeur ipad
E_3 = etroit
E_4 = tres etroit (le mini possible)

E_E => E = Est (element situe a l'est de la page)  //le 1er E_ indiquant que cet usage est plutôt réservé au mode etroit.
E_O => O = Ouest (element situe a l'Ouest de la page)
on pourrait eventuelement ajouter E_NO ou E_SO,… par exemple

E_max = l'element doit occuper toute la largeur  //devrait etre utiliser en combinaison avec E_1,… car on peut vouloir occuper toute la largeur selon largeur.
*/



/* * * FIN adapte selon taille support * * */