@charset "UTF-8";

/*
couleur principale (fond de page, ...) : #e5e5e5	= gris clair un peu jauni
blanc surbrillance oeuvre : #FFFFFE  				= quasi blanc  //avec un E a la fin : evite confusion avec blanc lambda
couleur texte principal  : #5d575d					= gris sombre
couleur texte principal gras : #3f3b3f				= gris sombre + noir
couleur fond menu : #232323							= gris quasi noir
couleur texte, texte de menu sombre : #d7d7d7					= blanc un peu gris  //si fond sombre, ok, pas impression d'être non cliquable
couleur texte menu moins sombre : #e3e3e3			= blanc très légérement gris  //poru menu violet (sinon on croit que pas cliquable)
couleur texte reussi : #55AA00						= vert un peu sombre
couleur legende, auteur sous oeuvre : #9a9a9a		= gris moyen
couleur fond champs, input,… : #f2f2f2				= gris clair
couleur contour champs, input,… : #b1b1b1			= gris moyen
couleur connexion, btn admin : #9716ca				= violet
idem mais si SURVOL : #650f87						= violet + sombre
couleur bouton si SURVOL : rgb(213, 239, 73)		= jaune vert flashy
couleur bouton NOIR si SURVOL : #a49e22				= jaune/vert sombre
couelur btn modifier : #ff5000						= orange sombre

//ancien :
jaune orange : #FFCC00;  //abandon : trop or
*/

* {
    /*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*/
    font-family: "Source Sans Pro", Helvetica, Arial, Verdana, sans-serif;
    /*ici, sinon ne s'applique pas aux input*/
}
code, code em {
  font-family: monospace!important;
}
.smooth {
    /*jan2016*/
    -webkit-font-smoothing: subpixel-antialiased;
    /*ameliore lisibilite sous Safari*/
}

.visible_none {
    display: none;
}

body {
    color: #5d575d;
    /*gris sombre de base*/
    background-color: #232323;
    font-size: 1.1em;
    /*car police Source Sans Pro est plus petite */
}

body.certificat {
    font-size: 1em;
    text-align: center;
    background-color: #FFF;
}


/*
body.accueil #tableauEnsemble
, body.articles #tableauEnsemble
, body.actu #tableauEnsemble
, body.publications #tableauEnsemble
, body.contact #tableauEnsemble
, body.oeuvre #tableauEnsemble
*/

body #tableauEnsemble {
    max-width: 1280px;
}

body.oeuvres #tableauEnsemble {
    /*max-width: 2304px;*/
    /*largeur totale au max (idem : tableauEnsemble)*/
    /*pas activation car meiux vaut idem que listing des oeuvres car on fait des aller/retour poru voir d'autre ouvres d'autre, risuqe de gene ce changement constant d'affichage*/
}

#tableauEnsemble {
    /*toutes les pages sont pleine largeur...*/
    width: 100%;
    max-width: 2304px;
    /*largeur totale au max*/
    transition: max-width 0.6s ease-in 0.1s;
    /*mini animation si changement largeur fenetre*/
}


/*...sauf quelques pages*/

body.certificat #tableauEnsemble {
    width: 650px;
}

div#listingEvenement {
    /*max-width: 800px;*/
    margin: 0 auto;
}

#listingEvenement table {
    font-size: 1em;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p:first-child {
    margin-top: 0em;
}

p:last-child {
    margin-bottom: 0em;
}

sup {
    font-size: 0.6em;
}

a {
    color: #232323;
    text-decoration: underline;
}

kbd {
    /*a saisir au clavier (ex: exemples de recherche)*/
    font-family: courier, monospace;
}

label,
.main,
input[type="submit"],
input[type="button"] {
    /*pour ne pas pouvoir selectionner ces elements*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    /*empeche selection du texte de l'element (ex: libelle case a cocher)*/
    margin: 0px;
    cursor: pointer;
}

input[type="submit"],
input[type="button"] {
    -webkit-appearance: none;
    border-width: 0;
    cursor: pointer;
    white-space: normal;
    /*par defaut : input rejette retours a la ligne => les accepte*/
    margin: 15px;
    /*comme .bouton*/
}

input[type="submit"] {
    /*les bouton de validation*/
}

input[type="button"] {
    /*les bouton autre (ex: annuler)*/
}

input[type="text"],
input[type="password"],
input[type="email"] {
    /*les champs*/
    -webkit-appearance: none;
    border: 1px solid #b1b1b1;
    /*contour sera + fort lors du focus*/
    /*border-radius:2px;*/
    background-color: #f2f2f2;
    /*force couleur fond sinon FF le colori en gris*/
    color: #000;
    /*height:1.5em;
	font-size: 1.3em;*/
    /*sinon ne prend pas en compte la taille par défaut du body ou html*/
    margin: 0px;
    padding: 5px 7px;
    /*texte moins contre bords du champ*/
    height: auto;
    /*permet au padding vertical d'être pris en compte*/
    /*height: 36px;*/
    /*permet au padding vertical d'être pris en compte*/
    /*pas auto car MDP utilise autre police => hauteur serait differente (ex: page connexion) ... sauf si utilise line-height*/
    line-height: 1.3em;
    /*height: auto est ok si line-heigth defini (meme en em au lieu de px)*/
    font-size: 1.1em;
    /*sinon ne prend pas en compte la taille par défaut du body ou html*/
    /*grande police*/
    width: 100%;
    /*a voir*/
}

input[type="password"] {
    font-family: monaco;
    letter-spacing: 0.2em;
}

input[type="text"]:focus
/*au focus : contour + joli (sous FF,...)*/


/*source: getbootstrap.com/css/#forms-control-focus*/

,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="submit"]:focus
/*ex: bouton OK de validation (aussi sous Safari, ici)*/

,
a.btn:focus {
    border-color: #0095dc!important;
    /*outline: 0;*/
    /*si je veux enlever le contour de focus de safari (mais ne gene pas)*/
    /*box-shadow: 0 1px 4px rgba(24, 148, 220, 1);*/
    box-shadow: 0 0 2px 2px rgba(24, 148, 220, 1);
    /*+net +visible (un peu comme safari)*/
}

input[type="text"].champPasOK
/*si chap erroné + focus dessus  => double ombre*/

,
input[type="password"].champPasOK,
input[type="email"].champPasOK,
input[type="submit"].champPasOK {
    box-shadow: inset 0 0 6px 2px rgba(220, 31, 39, 1);
    /*ombre intérieure rouge pour mieux visualiser erreur*/
    border-color: rgba(220, 31, 39, 0.20);
    /*avec contour :meme couleur mais + clair sinon on voit coin angle blanc pas tres esthetique*/
    color: rgba(220, 31, 39, 1);
    /*le texte est aussi rouge*/
}

input[type="text"]:focus.champPasOK
/*si chap erroné + focus dessus  => double ombre*/

,
input[type="password"]:focus.champPasOK,
input[type="email"]:focus.champPasOK,
input[type="submit"]:focus.champPasOK {
    box-shadow: 0 0 2px 2px rgba(24, 148, 220, 1)/*ombre qui indique focus le champ : comme + haut*/
    , inset 0 0 6px 2px rgba(220, 31, 39, 1);
    /*ombre intérieure qui indique erreur : comme + haut*/
}


/*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: #5d575d;
}


/*semble pas ok sous FF*/

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #5d575d;
}


/**/

input.placeholder,
textarea.placeholder {
    color: #5d575d;
}


/*aussi pour opera*/


/*devient tres clair au focus*/

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder,
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: #EEE;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: #EEE;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: #EEE;
}


.animBase_zoom
{
	-webkit-transition-property:	background-color, border-color, opacity, -webkit-transform ;
	-moz-transition-property:		background-color, border-color, opacity, -moz-transform ;
	-ms-transition-property:		background-color, border-color, opacity, -ms-transform ;
	-o-transition-property:			background-color, border-color, opacity, -o-transform ;
	transition-property:			background-color, border-color, opacity, transform ;

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

.fs-01 {
  font-size: 1.1em;
  line-height: 1.3em;
}
.fs-02 {
  font-size: 1.2em;
  line-height: 1.4em;
}
.fs-03 {
  font-size: 1.3em;
  line-height: 1.5em;
}
.fs-04 {
  font-size: 1.4em;
  line-height: 1.7em;
}

#bordureGauche {
    display: none;
}

#bordureDroite {
    display: none;
}

.tdGauche {
    text-align: left;
}

.centrer {
    text-align: center !important;
}

.alignerAGauche {
    text-align: left !important;
}


/*force alignement a gauche*/

.alignerADroite {
    text-align: right !important;
}


/*force alignement a droite*/

.texteJustifie {
    text-align: justify;
}

.colonnesX2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    /*https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html*/
}

.block {
    display: block;
}

.sansFond {
    background-color: transparent !important;
}

.sansContour {
    border: 0px solid red !important;
}

input.champLargeurGrand {
    /*donne un largeur aux champs modifier (ds article actuellement)*/
    width: 100%;
}

input.champLargeurMoyen {
    width: 410px;
}

input.champLargeurPetit {
    width: 275px;
}

input.champLargeurMini {
    width: 120px;
}

section.fondCouleurAlternance_impaire:nth-of-type(odd) {
    background-color: #FFF;
}

section.fondCouleurAlternance_paire:nth-of-type(even) {
    background-color: #FFF;
}

section.padding {
    padding: 20px 15px;
}

section.paddingSaufPhoto h1,
section.paddingSaufPhoto h2,
section.paddingSaufPhoto h3,
section.paddingSaufPhoto p {
    /*que horizontalement (pour élément précis. Permet ainsi d'avoir les images qui vont jusqu'aux bords, amis pas les textes)*/
    padding-left: 30px;
    padding-right: 30px;
}

section h2 {
    padding-bottom: 15px;
    font-weight: normal;
}

.petitFormulaire {
    max-width: 570px;
    margin: 0 auto;
    text-align: left;
}

.petitFormulaire label,
.grandFormulaire label {
    display: block;
    padding-top: 0.5em;
}

.petitFormulaire input[type="text"],
.grandFormulaire input[type="text"] {
    display: block;
    width: 100%;
}

.petitFormulaire input[type="radio"],
.petitFormulaire input[type="checkbox"],
.grandFormulaire input[type="radio"],
.grandFormulaire input[type="checkbox"] {
    display: inline;
    width: auto;
}


/*definition des largeur de bloc standard (1 bloc = 190px)*/


/*Bloc de 3 "zones" de large*/

.bloc1,
.bloc2,
.bloc3 {
    display: inline-block;
    width: 100%;
}

.bloc1 {
    max-width: 190px;
}

.bloc2 {
    max-width: 380px;
    /*380=190*2*/
}

.bloc3 {
    max-width: 570px;
    /*570=190*3*/
}

.w_1tiers {
    /*largeur = 1 tiers*/
    width: 33% !important;
    margin-right: 0.5% !important;
}

.sansMargeH,
.sansMargeHV {
    /*marges horizontales à 0*/
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.sansMargeD {
    /*pas de marge Droite*/
    margin-right: 0 !important;
}

.sansMargeV,
.sansMargeHV {
    /*marges verticales à 0*/
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.sansRetourAuto {
    white-space: normal;
}

.sansRetourAuto {
    white-space: nowrap;
}

.texteDiscret {
    font-size: 0.9em !important;
    color: #b1b1b1 !important;
}

label.apres {
    white-space: nowrap;
    /*pas de retour a la ligne*/
    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*/
}

#blocCentral {
    background-color: #e5e5e5;
    background-image: none;
    /*fond gris légèrement jaune*/
}

#blocCentralAccueil {
    background-color: #e5e5e5;
    background-blend-mode: soft-light;
    /*un peu gris car fusion avec le fond*/
    /*source:https://developer.mozilla.org/fr/docs/Web/CSS/background-blend-mode*/
    background-image: none;
}

#zoneAccueil {
    max-width: 1400px;
    display: inline-block;
    text-align: left;
    /*margin-top:-39px;*/
}

#zoneFormulaire {
    max-width: 887px;
    /*860px;*/
    display: inline-block;
    text-align: left;
    font-size: 0.9em;
}

#zoneInfo {
    max-width: 610px;
    display: inline-block;
    text-align: left;
}

body.consulterOeuvre #zoneInfo
, body.consulterAuteur #zoneInfo
{
    width: 100%;
    padding-left: 0px;
    margin-left: initial;
    max-width: none;
    text-align: center
}

body.consulterOeuvre #zoneInfo h1 {
    margin-bottom: 5px !important;
}

body.consulterOeuvre #zoneInfo h1 strong {
    letter-spacing: normal;
    color: #FFF;
    font-weight: normal;
}

body.consulterOeuvre #zoneInfo .infoDateAuteur
, body.consulterAuteur #zoneInfo .infoDateAuteur
, body.consulterOeuvre #zoneInfo .infoOeuvre
, body.consulterOeuvre #zoneInfo .description
{
    font-size: 1em;
}

body.consulterOeuvre #zoneInfo h2 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    font-size: 1.2em;
    font-weight: normal;
    letter-spacing: normal;
    color: #FFF;
}

body.consulterOeuvre #zoneInfo #zoneInfoPhotoEtTechnique {
    padding: 30px;
    display: inline-block;
    width: 100%;
    background-image: -webkit-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%);
    background-image: -moz-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%);
    background-image: -o-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%);
    background-image: linear-gradient( 180deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%);
    /*si background-color => linear-gradient sera en +*/
    /*ici: 180 et non -90*/
    background-image: -webkit-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%), -webkit-linear-gradient( 190deg, rgba(35, 34, 34, 0.3) 20%, rgba(0, 0, 0, 0.99) 95%);
    background-image: -moz-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%), -moz-linear-gradient( 190deg, rgba(35, 34, 34, 0.3) 20%, rgba(0, 0, 0, 0.99) 95%);
    background-image: -o-linear-gradient( -90deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%), -o-linear-gradient( 190deg, rgba(35, 34, 34, 0.3) 20%, rgba(0, 0, 0, 0.99) 95%);
    background-image: linear-gradient( 180deg, rgba(35, 35, 35, 0.4) 0%, rgba(35, 35, 35, 1) 90%), linear-gradient( 260deg, rgba(35, 34, 34, 0.3) 20%, rgba(0, 0, 0, 0.99) 95%);
    /*margin-bottom: 100px;*/
    /*pour compenser le fait que la photo deborder de la zone sombre, en bas*/
    /*100 = margin-bottom de zoneInfoPhoto -30px du padding d'ici*/
}

body.consulterOeuvre #zoneInfo #zoneInfoPhoto,
body.consulterOeuvre #zoneInfo #zoneMiniature,
body.consulterOeuvre #zoneInfo #zoneInfoEnPlus,
body.consulterAuteur #zoneMiniature {
    float: none;
    clear: none;
    margin: 0;
}

body.consulterAuteur #zoneMiniature {
    margin-top: 2em;
    max-width: none;
}

body.consulterOeuvre #zoneInfo #zoneInfoPhoto {
    /*width: 50%;*/
    display: inline-block;
    margin: 0;
    text-align: center;
    line-height: 0;
    float: left;
    display: inline-block;
    /*margin-bottom: -130px;*/
    /*pour faire deborder la photo de la zone sombre, en bas*/
    /*background-color: red;*/
}

body.consulterOeuvre #zoneInfo #zoneInfoTechnique {
    /*width: 50%;*/
    float: right;
    display: inline-block;
    margin: 0;
    padding: 15px;
    padding-left: 30px;
    text-align: left;
    color: #d7d7d7;
    /*background-color: green;*/
}

body.consulterOeuvre #zoneInfo .infoOeuvre {
    display: block;
    /*poru pouvoir mettre en 2 columns si trop etroit*/
}

body.consulterOeuvre #zoneInfo .infoSource {
    display: inline-block;
}


/*ajustement selon si horizontale ou verticale :*/

body.consulterOeuvre #zoneInfo.horizontale #zoneInfoPhoto {
    width: 60%;
}

body.consulterOeuvre #zoneInfo.horizontale #zoneInfoTechnique {
    width: 40%;
}

body.consulterOeuvre #zoneInfo.verticale #zoneInfoPhoto {
    width: 50%;
    padding-left: 10%;
    /*pour pas quelle soit trop grosse par rapport aux photos horizontales et caller vers zoneInfoTechnique*/
}

body.consulterOeuvre #zoneInfo.verticale #zoneInfoTechnique {
    width: 50%;
}

/*reduit largeur zone photo si achat en cours (et agrandi zone technique contenant la zone d'achat)*/
body.consulterOeuvre #zoneInfo/*.verticale*/.achatEnCours #zoneInfoPhoto {
  width: 20%;
  padding-left: 0%;
}
body.consulterOeuvre #zoneInfo/*.verticale*/.achatEnCours #zoneInfoTechnique {
  width: 80%;
}
/*limiteur hauteur photo quand fenêtre étroite*/
body.consulterOeuvre #zoneInfo/*.verticale*/.achatEnCours #laPhoto img.photoPrincipaleOeuvre {
  max-height: 200px;
}
/*FIN reduit largeur zone photo si achat en cours*/


/*bouton avec image pour voir bio*/
body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio {
    padding: 0.75em 0;
}
body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio a {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin-left: 25px !important;
}
body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio a:hover .photoAuteurSurBouton.animBase_zoom
/*pas focus sinon après clic sur btn reste zoomé car focus encore dessus*/{
    transform: scale(1.25);
}
OFFbody.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio a img {
    background-color: #232323;
    border-radius: 100px;
    border: 2px solid #FFF;
    /* display: inline-block; */
    width: 50px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
    /* position: absolute; */
    /* margin-top: -0.7em; */
    margin-left: -25px;
}

body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio span.photoAuteurSurBouton { /*photo auteur bio dans bouton :  Voir bio*/
    display: inline-block;
    height: 50px;
    width: 50px;
    overflow: hidden;
    margin-left: -25px;
    margin-right: 10px;
    background-color: #FFF;
    border-radius: 100px;
    border: 2px solid #FFF;
    vertical-align: middle;
}
body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio span.photoAuteurSurBouton img {
    width: 100%;
    height: auto;
}
body.consulterOeuvre #zoneInfo #zoneInfoTechnique div.zoneVoirBio span.photoAuteurSurBouton.seule { /*photo auteur bio sans bouton :  Voir bio*/
    margin-left: 0px;
    margin-right: 0px;
}


/*FIN ajustement selon si horizontale ou verticale*/

body.consulterOeuvre #zoneInfo #zoneMiniature {
    max-width: none;
    clear: both;
    padding: 10px;
    padding-bottom: 0px;
}

body.consulterOeuvre #zoneInfo #zoneMiniature img {
    height: 90px;
    /*la miniature originale peut aller jsuque 150px*/
}

body.consulterAuteur #zoneMiniature img {
    height: 150px;
    /*la miniature originale peut aller jusque 1500px*/
}

body.consulterOeuvre #zoneInfo #laPhoto {
    text-align: center;
    display: inline-block;
}

body.consulterOeuvre #zoneInfo.horizontale #laPhoto {
    /*que si photo horizontale*/
    width: 100%;
}

body.consulterOeuvre #zoneInfo #laPhoto img.photoPrincipaleOeuvre {
    width: 100%;
    max-width: 100%;
    border: none;
}

body.consulterOeuvre #zoneInfo #laPhoto:hover img.photoPrincipaleOeuvre {
    outline: 1px solid #FFF;
}

body.consulterOeuvre #zoneInfo.verticale #laPhoto img.photoPrincipaleOeuvre {
    max-width: 100%;
    max-height: 750px;
    /*equivaut a la taille de niveau 4 d'une photo*/
    width: auto;
    height: auto;
}

body.consulterOeuvre #zoneInfo #zoneInfoEnPlus {
    font-size: 0.8em;
    text-align: center;
    color: #b1b1b1;
    margin-top: 2em;
}

body.consulterOeuvre #zoneInfoAutre {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: left;
}

body.consulterOeuvre #zoneInfo .description {
    padding: 0 10px;
    padding-top: 1em;
}

body.consulterOeuvre #zoneInfo #zoneInfoAutre .infoSource+.description {
    /*si infoSource existe => on met un separateur sur la description */
    /*filet de séparation :*/
    border-top: 1px dotted #9a9a9a;
}

#zoneInfo h1,
#zoneInfo .infoDateAuteur,
#zoneInfo h2,
#zoneInfo .infoOeuvre,
#zoneInfo .description,
#zoneFormulaire,
#zoneFormulaire td {
    color: inherit;
}


/* * * bloc d'information d'avertissement, d'erreur, de reussite :*/

.zoneMessage_JS {
    /*pour message a afficher en direct et qui contiendra un div avec blocInfo*/
    top: 0;
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.49);
    display: none;
    /*non visible par defaut*/
}

.blocInfo p {
    line-height: 1.2em;
    /*reduit interligne des paragraphes*/
    margin-top: 0.75em;
    margin-bottom: 0em;
}

.blocInfo p:first-child {
    /*ou first-of-type*/
    margin-top: 0;
}

.blocInfo.texteInfo p:last-child {
    /*ou last-of-type*/
    margin-bottom: 0;
}

.blocInfo {
    border: 1px solid #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 14px 8px 14px;
    margin: 35px auto;
    /*marge haute et basse avec centrage si width reduit*/
    /*font-size:16px;*/
    /*pas en em, pour partir sur une valeur fixe*/
    text-align: center;
    clear: both;
    /*pour passer a la ligne tout seul( ex: pour info sur lots dans param article, car hauteur colonnes OD, OG peuvent differer)*/
    max-width: 570px;
}

.blocInfo.neutre {
    /*si besoin pour autre aspect + neutre*/
}

.blocInfo.info {
    color: #c09853;
    background-color: #fcf8e3;
    border-color: #fbeed5;
}

.blocInfo.erreur {
    color: red;
    /*color: #b94a48;*/
    background-color: #f2dede;
    border-color: #eed3d7;
}

.blocInfo.reussi {
    color: #66AC00;
    /*remplace #66CC00 car trop clair*/
    /*color: #468847;*/
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.blocInfo.alerteMax {
    /*info alerte importante*/
    color: orangered;
    background-color: #000;
    border-color: orangered;
    /*font-size: 1em;*/
    /*agrandi texte sinon un peu plus dur a lire sur fond noir*/
}

.blocInfo ul {
    /*pour reinitialiser les valeurs ul des bloc de texte (en cas d'utilisation de liste dans un bloc d'info)*/
    list-style: disc;
    background: initial;
    margin: initial;
    padding: 5px 5px 5px 30px;
    box-shadow: none;
}

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

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


/* * * FIN bloc d'information*/


/* TITRE */

h1,
h2,
h3,
h4 {
    margin-top: 0em !important;
    margin-bottom: 0em !important;
}

h1 {
    font-size: 2.5em !important;
    margin-bottom: 20px !important;
    font-weight: 300 !important;
    XXXtext-align: left !important;
    line-height: 1em !important;
}

.zoneTitreAvecLigne h1 {
    margin-bottom: 0px !important;
}

#zoneAccueil h2 {
    font-weight: normal;
    /*margin-top:0.5em;
	margin-bottom:0.5em;*/
    line-height: 1em;
}

#zoneAccueil h3 {
    /*sous-titre œuvre, actu, publi, article*/
    font-size: 1.1em;
    font-weight: normal;
    line-height: 1em;
    margin-top: -0.5em !important;
}

h1.margeTop
/*+ general*/

,
#listing>h1,
#listingEvenement>h1,
#listing.listingDesGenres,
#zoneContact,
#zoneFormulaire,
body.connexion h1 {
    margin-top: 40px !important;
}

h2.margeTop
/*+ general*/

{
    margin-top: 30px !important;
}

body.certificat h1 {
    font-size: 2em !important;
}

#listingEvenement h1,
#listing h1 {
    font-size: 1.6em;
    margin-bottom: 40px;
    border-bottom: none;
}

#listingEvenement h2 {
    color: inherit;
}


/* FIN TITRE */


/*listing des articles*/

#listingEvenement table {
    border: none;
    width: 100%;
}

.article_1:nth-of-type(odd) {
    background-color: #d5d5d5;
}

.article_1 .visuel {
    width: 238px;
    padding: 20px 0px 20px 20px;
    position: relative;
    line-height: 0px;
}

.article_1 .visuel .zone_img {
    width: 238px;
    /*evite que si image verticale, le contenu soit decale a gauche apr rapport aux autre article avec image + large*/
    max-width: 238px;
    /*taille reelle de l'image*/
    max-height: 238px;
}

.article_1 .visuel img {
    max-width: 238px;
    /*taille reelle de l'image*/
    max-height: 238px;
    /*margin-bottom:-50px;/*pour superposer le picto "non publique"*/
}

.article_1 .contenu {
    padding: 20px 20px 20px 20px;
}

.article_1 .contenu .bouton {
    /*float:right;*/
    margin-top: 15px !important;
}

.article_1 .visuel .nonPublic {
    display: inline-block;
    position: absolute;
    margin: 0;
    left: 6px;
    top: 40px;
    line-height: 1.2em;
}


/*page d'un article*/

.zoneTitreAvecLigne {
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 10px;
    position: relative;
    text-align: left;
}

.zoneTitreAvecLigne .titrePartie
, .zoneTitreAvecLigne.textesAdmin .h1
, .zoneTitreAvecLigne.textesAdmin .h2
{
    display: inline-block;
    margin-bottom: 0 !important;
    padding-left: 0.4em;
}
  .zoneTitreAvecLigne.textesAdmin
, .zoneTitreAvecLigne.textesAdmin
{
  padding: 0 1rem;
}

.zoneTitreAvecLigne>div {
    display: inline-block;
    width: 1400px;
    position: absolute;
    bottom: 7px;
    border-bottom: 1px dotted #9a9a9a;
    margin-left: 10px;
}

#zoneInfo .description .gras,
#zoneArticle #contenuArticle .gras,
#zoneAuteur #contenuArticle .gras {
    color: #3f3b3f;
    /*gris sombre de base + noir (ex: texte gras)*/
}

#zoneInfo .description .italique,
#zoneArticle #contenuArticle .italique,
#zoneAuteur #contenuArticle .italique,
section.classique strong
/*ex: a propos*/

{
    color: #3f3b3f;
    /*gris sombre de base + noir (ex: texte italique)*/
}

div#zoneInfoContenu.zoneInfo {
    /*zone d'aide, d'explications de champs*/
    background-color: #a6abbb;
}

.lienTexte:link,
.lienTexte:visited,
.lienTexte:hover {
    margin-left: 0;
    color: #3f3b3f;
    text-decoration: underline;
}

.lienTexte:hover {
    text-decoration: none;
}

.zoneBtnModif {
    /*display:block; float:right;*/
    text-align: right;
    width: 830px;
    margin: 0px 25px 15px 0px;
    padding-bottom: 7px;
    /*border-bottom:1px solid #CCC;*/
    max-width: 830px;
    display: inline-block;
    /*float: none;*/
    float: right;
    width: auto;
    margin: 0px 15px 15px 0px;
    color: #d7d7d7;
}

.zoneBtnArchive.auDebut {
    float: right;
}

.zoneBtnArchive.aLaFin {
    padding: 0 40px;
}

#texteIntro {
    /*ex: aucun oeuvre dans cette section*/
    width: 100%;
}

#piedDePage {
    border: none;
}

#piedDePage td {
    text-align: center;
}

.arobase {
    width: 11px;
    height: 12px;
    margin: 0 2px;
    vertical-align: middle;
}

.btnModifier,
.btnModifier:link,
.btnModifier:visited,
.btnModifier:hover {
    height: auto;
}

.zoneBtnPicto {
    padding: 5px;
    display: inline-block;
    /*background-color: red;*/
    line-height: 0;
    float: right;
}
.zoneBtnPicto .picto {
    cursor: pointer;
    border: none;
    -webkit-font-smoothing: subpixel-antialiased;/*ameliore lisibilite sous Safari si fond sombre*/
    text-decoration: none;
    background-color: #222;
    /*color: #EEE;*//*quasi blanc*/
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url(/images/commun/pictos_divers.svg);
    background-size: 175px;
    width: 35px;
    height: 35px;
    border-radius: 70px;
    border: 2px solid #FFF;
    background-position: -2px -2px;
    transition: background-color 0.3s ease-out, color 0.3s ease-out, width 0.3s ease-out, transform 0.3s ease-out;
}
.zoneBtnPicto:hover .picto
, zoneBtnPicto:focus .picto
{
    background-color: #a49e22;
    transform: scale(1.15);
}

/* ENTETE page */

#zone_entete_image {
    margin: 0;
    padding: 0px;
    background-image: url("/images/commun/entete-fond-01.jpg");
    background-size: cover;
    background-position: center;
    height: 200px;
    position: relative;
    /*pour pouvoir bien position élemnt sur image (ex: zone de recherche)*/
}

#zone_entete_logo {
    height: 100%;
    width: 100%;
    display: inline-block;
    text-align: left;
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 68%); autre possibilité*/
    background-image: -webkit-linear-gradient( 0deg, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 68%);
    background-image: -moz-linear-gradient( 0deg, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 68%);
    background-image: -o-linear-gradient( 0deg, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 68%);
    background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 68%);
    /*si background-color => linear-gradient sera en +*/
    /*axe de rotation en degré différent des versions avec suffixe => 90deg et non 0deg*/
    %);
}

#zone_entete_logo #logo {
    display: inline-block;
    background-image: url("/images/commun/logo-Neustadt-Galerie.png?20170621");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 45%;
    max-width: 580px;
    top: 0;
    left: 0;
    background-position: 0px center;
    height: 100%;
    margin-left: 3%;
}

#zone_entete_image.fond02 {
    /*2e image de fond entete (change chaque semaine)*/
    background-image: url("/images/commun/entete-fond-02.jpg");
}

.zone_entete_btn {
    position: absolute;
    color: #5d575d;
    text-align: center;
    /*height: 50px;*/
    line-height: 1.2em;
    width: 30%;
    max-width: 260px;
    /*on limite largeur mais une fois dans le champs, on pourrait agrandir automatiquement*/
    padding-right: 20px;
    /*permet de mettre à 100% de large et d'avoir toujours une marge gauche et droite*/
    padding-right: 2%;
    padding-left: 2%;
}

#zone_entete_rechercher {
    bottom: 0;
    right: 0;
    margin: 0 0px 20px 0;
    /*background-color: #FFF;
		border: none;  font-size: 1em;

		background-image: url("/images/pictos/picto-rechercher.svg");
		background-size: 30px;
		background-position: 5% center;
		background-repeat:no-repeat;
		*/
    /*padding-left: 40px;/*pour que la saisie n'aille pas sur la loupe*/
    transition: width 0.15s ease-out;
    /*width doit avoir la meme vitesse que btn OK et chp rechercher*/
}

#zone_entete_connexion {
    top: 0;
    right: 0;
    margin-top: 20px;
    transition: width 0.15s ease-out;
    /*width doit avoir la meme vitesse que btn OK et chp rechercher*/
}

#zone_entete_rechercher #zone_entete_chpRechercher,
#zone_entete_connexion #zone_entete_btnConnexion {
    width: 100%;
    display: inline-block;
    height: 40px;
    transition: background-color 0.3s ease-out, color 0.3s ease-out, width 0.15s ease-out;
    /*width doit avoir la meme vitesse que btn OK*/
}

#zone_entete_rechercher .bouton {
    /*redefini effet du btn pour etre + rapide */
    transition: background-color 0.7s ease-out, color 0.7s ease-out, width 0.15s ease-out
    /*ease-in = depart lent*/
    /*ease-out = depart rapide*/
    ;
}

#zone_entete_rechercher #zone_entete_chpRechercher {
    background-color: #FFF;
    border: none;
    font-size: 1em;
    background-image: url("/images/pictos/picto-rechercher.svg");
    background-size: 23px;
    background-position: 6px center;
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-right: 20px;
    text-align: center;
}

#zone_entete_connexion #zone_entete_btnConnexion {
    background-color: #e5e5e5;
    line-height: 40px;
    text-decoration: none;
    cursor: pointer;
}

#zone_entete_rechercher .bouton {
    /*btn OK pour valider recherche*/
    float: right;
    margin: 0;
    width: 0%;
    /*ne doit etre visible que si chp rechercher rempli*/
    overflow: hidden;
    padding-top: 10px;
    font-size: 1em;
    padding: 0;
    /* height: 40px; */
    line-height: 40px;
}

#zone_entete_rechercher .btnEffacer {
    /*btn effacer champ recherche*/
    background-image: url("/images/pictos/picto-effacer-champ.svg");
    background-size: 19px;
    /*taille du picto*/
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    /*right: 18%;/*= largeur btn OK + le padding-right de zone_entete_btn */
    /*background-color: rgba(255, 0, 0, 0.1);*/
    height: 40px;
    width: 24px;
    /*taille de la zone cliquable*/
    margin-left: -24px;
    /*decale pour pas etre sur btn OK*/
    padding: 0;
    margin-top: 0px;
    opacity: 0.5;
    cursor: pointer;
    display: none;
}


/*les affiche si champ rempli*/

#zone_entete_rechercher.chpRempli #zone_entete_chpRechercher {
    width: 84%;
    /*100 - largeur btn OK quand btn OK visible*/
}

#zone_entete_rechercher.chpRempli .bouton {
    width: 16%;
}

#zone_entete_rechercher.chpRempli .btnEffacer {
    display: inline-block;
}

#zone_entete_rechercher.chpRempli {
    width: 50%;
    max-width: none;
}

#zone_entete_rechercher #zone_entete_chpRechercher:hover {
    XXbackground-color: #9716ca;
    /*violet*/
    background-color: #8991a5;
    /*bleuatre*/
    XXcolor: #FFF;
    background-color: rgb(213, 239, 73);
    Xbackground-color: #c6975a;
    /*jaunatre*/
}

#zone_entete_rechercher .btnEffacer:hover {
    opacity: 1;
}

#zone_entete_connexion #zone_entete_btnConnexion:hover {
    background-color: #9716ca;
    /*violet*/
    color: #FFF;
    Xbackground-color: #8991a5;
    /*bleautre*/
    Xbackground-color: #c6975a;
    /*jaunatre*/
}

#zone_entete_rechercher #zone_entete_chpRechercher:focus {
    background-color: #FFF;
    box-shadow: inset 0 0 6px 4px rgba(213, 239, 73, 1);
    /*ombre intérieure vert falshy pour mieux visualiser qu'on est dans le champ*/
    outline: 0;
}

#zone_entete_rechercher #zone_entete_chpRechercher:focus,
#zone_entete_rechercher.chpRempli #zone_entete_chpRechercher {
    text-align: left;
}


/* FIN ENTETE page */


/* MENU :      */

#zone_menu {
    width: 100%;
    padding: 0px 0 0 px 0;
    background-color: #232323;
    /*gris legerement jaune*/
    /*margin-bottom:40px;*/
    /*height: 63px;*/
    line-height: 0;
    /*evite ajout espace en bas du menu*/
}

#menu2 {
    width: 100% !important;
    margin: 0;
    /*height: 57px;/*60px : 1px de trop sous FF*/
    /*display: inline-block !important;*/
}

#menu2>ul>li {
    /*avec ul et signe > pour ne pas agir sur sous menu*/
    /*width:12.5%;*/
    /* 100/7ou8 menus = 12.5*/
    text-align: center;
    /*height: 63px;*/
    overflow: hidden;
    /*si debordre: ne se voit pas sous autre menu*/
}

body.CNX_1 #menu2>ul>li {
    /*avec ul et signe > pour ne pas agir sur sous menu*/
    /*width:12.5%;*/
    /* 100/8 menus = 12.5*/
    width: 14.285714286%;
    /* 100/7 menus = 14.285714286*/
}

body.CNX_0 #menu2 li {
    /*width:14.285714286%;*/
    /* 100/7 menus = 14.285714286*/
    width: 16.666666667%;
    /* 100/6 menus = 16,666666667*/
}

#menu2 li a {
    margin-bottom: 0px;
    height: 63px;
    line-height: 48px;
    font-size: 1em;
    /*si besoin de redimensionner menu en hauteur*/
    background-image: none;
    background-color: #232323;
    color: #d7d7d7;
    font-weight: 300;
    border: none;
    XXXborder-left: 1px solid #CCC;
    border-top: 1px solid #232323;
    XXXborder-bottom: 1px solid transparent;
    /*fond degrade - astuce pour animation fond avec degrade - source: http://iamvdo.me/blog/astuce-utiliser-les-transitions-css-sur-les-degrades */
    background-color: #232323;
    background-image: linear-gradient( #232323, rgba(255, 255, 255, 0));
    /*background-image: radial-gradient( closest-corner at center, rgba(255,255,255,0) , #232323 75% ); /*cercle depuis le centre*/
    /*		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#232323 20%,#232323 50%,#232323 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*		background: linear-gradient(to bottom, #232323 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 60%,#232323 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*		background: linear-gradient(to bottom, rgba(255,255,255,0) 20%,#232323 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, #232323 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*source : http://css3.bradshawenterprises.com/transitions/ */
    transition: background-color 1s ease-out, color 1s ease-out, border-bottom 1s ease-out/*depart rapide*/
    , border-top 0.2s ease-in/*depart lent*/
    , line-height 0.2s ease-in;
}

#menu2 a.actif {
    border: 0px;
    XXXborder-left: 1px solid #CCC;
    background-color: #e5e5e5;
    color: #333 !important;
    /*brodure en haut pour mieux montrer l'onglet du menu actif :*/
    border-top: 1px solid #232323;
    /*line-height: 46px;*/
    /*line-height = idem valeur line-height de  #menu2 li a  moins border-top * 2 => 48 - 1*2 = 44*/
}


/*SOUS-MENU (ex: menu conenxion)*/

#menu2 .sousMenu {
    margin-top: 0px;
    right: 0px;
    /*margin-right: 10px;*/
    /*ajustement mieux par rapport au bord droit*/
    border: none;
    width: 0em;
    /*largeur 0 (sera)*/
    background-color: #9716ca;
    /*pour animation en largeur du sous menu :*/
    transition: width 0.3s ease-out 0.2s;
    /*attends 0.2s avant de commencer a s'afficher*/
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: subpixel-antialiased;
    /*ameliore lisibilite sous Safari*/
}

#menu2 li.menuAvecSousMenu {
    overflow: visible;
    position: relative;
}

#menu2 .sousMenu>li a {
    /*background-color: #232323;*/
    background-color: #9716ca;
    height: auto;
    line-height: 1.5em;
    border-color: #650f87;
    color: #e3e3e3;
}


/*FIN SOUS-MENU (ex: menu conenxion)*/


/*menu admin, si connexion*/

#menu2 a.admin,
#menu2 a.admin:hover {
    font-weight: normal;
    background-color: #9716ca;
    border: none;
    /*color:#d7d7d7;*/
    color: #FFF;
    /*+visible si notre menu de connexion*/
}


/*SURVOL MENU */

#menu2 li a:hover {
    background-color: #e5e5e5;
    color: #FFF;
    XXXborder-bottom: 1px solid #CCC;
    XXXborder-bottom: 1px solid transparent;
    border: none;
    border-top: 1px solid #232323;
}

#menu2 li a.actif:hover {
    /*poru montrer qu'on peut recliquer dessus (si besoin)*/
    border-top: 1px solid #232323;
    line-height: 51px;
}


/*a la place de classe sfhover :*/

#menu2 ul li:hover ul.sousMenu {
    /* bloc de sous-menu (si survol du menu) */
    display: block;
    width: 18em;
}

#XXXXXmenu2 li:hover ul li {
    /* un sous-menu (si survol du bloc d'un menu) */
    XXXXfloat: none;
}

#menu2 li ul li {
    /* un sous-menu (si survol du bloc d'un menu) */
    float: none;
}

#menu2 .sousMenu>li a:hover {
    /*background-color: #777;*/
    background-color: #650f87;
    color: #FFF;
    border-color: #650f87;
    border-top: 0px;
}


/*FIN SURVOL MENU */


/* FIN MENU :      */


/* LISTING :      */


/*zone visuel + auteur :   */

#listing div.vignette {
    width: 250px;
    /*height: 297px;*/
    /*visuel + grand*/
    height: 320px;
    /*pour faire tenir lignes de l'auteur*/
    /*+70px que height se #listing .haut */
    margin: 10px 3px 0px 3px;
    /*+ serre entre chaque oeuvre*/

/*lié au btn modif rapide (pour aider à son positionnement)*/
  position: relative;
  overflow: initial;
}


/*Adaptation si livres :*/

  #listing.livres div.vignette
, #listing.affiches div.vignette {
    width: 210px;
    height: 410px;
    /*+100px que height se #listing.livres .haut */
    margin: 10px 23px 0px 23px;
}

  #listing .bas .titreLivre
, #listing .bas .titreAffiche {
    font-style: italic;
    font-weight: normal;
}

  /*poru néfficher titre que sur une suel ligne (sinon trop de ligne et le tarifs pourraient ne pas s'afficher*/
  #listing .vignette.avecPrix .bas .titreLivre
, #listing .vignette.avecPrix .bas .titreAffiche {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*FIN Adaptation si livres :*/


/*visuel oeuvre :   */

#listing .haut {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    /*visuel + grand*/
    transition: box-shadow 0.5s linear 0.2s;
    /*attend 0,2s avant de se declencher sur une duree de 0,5s*/
}


/*Adaptation si livres :*/

  #listing.livres .haut
, #listing.affiches .haut {
    height: 310px;
}


/*FIN Adaptation si livres :*/


/*pour listingDesGenres :*/

#listing.listingDesGenres {
    padding: 0 20px;
    /*pour mettre une marge gauche-droite + large*/
}

#listing.listingDesGenres div.vignette {
    margin: 10px 0px 50px 0px;
    /*+ serre entre chaque oeuvre*/
    /*width: 33.333333%;si 3 genres en largeur*/
    width: 25%;
    /*si 4 genres en largeur*/
    height: 250px;
    padding: 0px 30px 0px 30px;
    /*+ serre entre chaque oeuvre*/
}

#listing.listingDesGenres div.vignette a {
    position: relative;
    /*pour pouvoir positionner vignette .titre_type_oeuvre*/
}


/*Pour ajuster la position de l'image du fond de facon + hamonieuse :*/

#listing.listingDesGenres div.vignette a.fond_N {
    background-position: center top;
}

#listing.listingDesGenres div.vignette a.fond_NE {
    background-position: right top;
}

#listing.listingDesGenres div.vignette a.fond_E {
    background-position: right center;
}

#listing.listingDesGenres div.vignette a.fond_SE {
    background-position: right bottom;
}

#listing.listingDesGenres div.vignette a.fond_S {
    background-position: center bottom;
}

#listing.listingDesGenres div.vignette a.fond_SO {
    background-position: left bottom;
}

#listing.listingDesGenres div.vignette a.fond_O {
    background-position: left center;
}

#listing.listingDesGenres div.vignette a.fond_NO {
    background-position: left top;
}


/*par defaut : centrage defini via  #listing.listingDesGenres .haut  du ficheir basse.css*/


/*titre par-dessus visuel type œuvre*/

#listing.listingDesGenres div.vignette .titre_type_oeuvre {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 10px 5px;
    font-size: 1.3em;
    /*background-color:#ff5f05;
/*background-color:rgba(35, 35, 35, 0.5); /*pour les navigateurs ne connaissant pas linear-gradient*/
    background-image: -webkit-linear-gradient( rgba(35, 35, 35, 0) 0%, rgba(35, 35, 35, 0.7) 60%);
    /*si background-color => linear-gradient sera en +*/
    background-image: -moz-linear-gradient( rgba(35, 35, 35, 0) 0%, rgba(35, 35, 35, 0.7) 60%);
    /*si background-color => linear-gradient sera en +*/
    background-image: -o-linear-gradient( rgba(35, 35, 35, 0) 0%, rgba(35, 35, 35, 0.7) 60%);
    /*si background-color => linear-gradient sera en +*/
    background-image: linear-gradient( rgba(35, 35, 35, 0) 0%, rgba(35, 35, 35, 0.7) 60%);
    /*si background-color => linear-gradient sera en +*/
    color: #EEE;
    transition: padding 0.3s linear 0.1s, color 0.3s linear 0.1s;
}


/*zone auteur sous oeuvre :     */

#listing div.bas {
    width: 100%;
    /*visuel + grand*/
    font-size: 0.9em;
    /*nom + grand*/
    height: 70px;
    /*pour faire tenir lignes de l'auteur*/
}


/*Adaptation si livres :*/

  #listing.livres div.bas
, #listing.affiches div.bas {
    height: 100px;
}


/*FIN Adaptation si livres :*/


/*auteur :   */

#listing div.vignette a {
    font-weight: 300;
}

#listing div.bas a {
  display: inline-block ;/*05*2022 pour compatibilité avec #listing .vignette.avecPrix .bas .titreLivre / … .titreAffiche*/
    width: 100%;
    /*visuel + grand*/
    padding: 5px 2px 0px 2px;
    height: 100%;
    /*plutot que de repeter hauteur de  div.bas */
    /*color: #8e8b70; gris jaune*/
    color: #9a9a9a;
    line-height: 1.2em;
    /*nom + grand*/
    background-position: -100px bottom;
    /*fleche vers la droite : non visible pour apparaitre soudainement depuis la gauche*/
    transition: background-color 0.3s linear 0.1s, color 0.3s linear 0.1s, background-position 0.2s ease-in 0.3s/*animation pour fleche vers la droite*/
    ;
}


.reserveMini {
    /* mini logo reserve sur listing oeuvre */
    position: absolute;
    width: 53px;
    height: 53px;
    background-image: url(/images/commun/pictoReserveMini.png);
}

.venduMini,
.reserveMini {
    margin-top: -253px !important;
    margin-left: -4px !important;
}

  #listing.livres .venduMini
, #listing.livres .reserveMini
, #listing.affiches .venduMini
, #listing.affiches .reserveMini
{
    /*les visuels des livres sont + verticaux => repositionnement du picto*/
    margin-top: -313px !important;
}


/*SURVOL LISTING*/


/*survol visuel :  */

#listing div.vignette:hover .haut {
    box-shadow: inset 0px 0px 10px 5px rgb(254, 255, 212);
    /*ombre intérieure : jaune clair pastel*/
    box-shadow: inset 0px 0px 10px 5px #FFFFFE;
    box-shadow: inset 0px 0px 8px 8px #FFFFFE;
}


/*pour listingDesGenres :*/

#listing.listingDesGenres div.vignette:hover .titre_type_oeuvre {
    padding: 60px 5px;
    color: #FFF;
}


/*survol auteur :  */

#listing div.bas:hover a {
    background-color: rgb(254, 255, 212);
    /*fond : jaune clair pastel*/
    background-color: #FFFFFE;
    /*fond : + orange*/
    color: #666666;
    /*background-position: 203px center;*/
    /*fleche vers la droite : glisse vers la droite*/
    /* right center suffit (mais ajouté marge à droite de l'iamge poru aps coller au bord*/
}

#listing div.bas a:hover {
    background-position: right bottom;
    /*alignement fleche au survol*/
    background-image: url(/images/commun/flechePlusInfo3.png);
    background-size: 50px;
    /*fleche HD et + sombre*/
    /*50px + net que 42px (original : 84px de haut)*/
}


/*FIN SURVOL LISTING*/


/*picto*/

.nonPublic {
    background-color: #CC0000;
    border: 2px solid #CC0000;
    color: #FFF;
}


/* FIN LISTING */


/*page consulter article:*/

body.consulterOeuvre #zoneInfo .infoSource {
    padding: 0 10px;
    width: 100%;
}

body.consulterOeuvre #zoneInfo .infoSource.siDoubleZone {
    width: 48%;
}

body.consulterOeuvre #zoneInfo .infoSource.exposition.siDoubleZone {
    float: right;
}

#zoneInfo .infoSource {
    color: inherit;
    margin-top: 1em;
    display: block;
}

#zoneInfo .infoSource li {
    list-style-image: none;
    list-style-type: disc;
    list-style-position: outside;
}

body.consulterOeuvre #zoneInfo .infoOeuvre p {
    margin-bottom: 0.2em;
}


/*FIN page consulter article:*/


/*page modifInfo*/

#zoneFormulaire.pageInfo {
    padding: 0px 0px 0px 30px;
    max-width: 790px;
}

.pageInfo .titreZone {
    width: 500px;
    margin: 20 0 0 0;
    color: #5d575d;
}

.pageInfo .titreZone h2 {
    margin-left: -30px;
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: 0px;
    margin-bottom: 0.5em!important;
    margin-top: 1.5em!important;
}

.pageInfo .titreZone hr {
    /*ligne separation*/
    text-align: left;
    width: 250px;
    color: inherit;
    margin-left: -30px;
    border: 0;
    color: #5d575d;
    background-color: #5d575d;
    height: 1px;
    /*source: http://www.sovavsiti.cz/css/hr.html */
}

.pageInfo textarea {
  width: 100% ;
}

/*FIN page modifInfo*/


/*page modifArticle*/

.zoneImageDetails strong {
    /*le numero de l'image d'un article pour son utilisation dans le texte (ex: i1)*/
    color: #55AA00;
}


/*FIN page modifArticle*/


/*bouton ne pas enregistrer, enregistrer*/

#zoneActionVolante {
    /*zone avec les bouton*/
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    top: initial;
    /*background: rgba(204, 203, 203, 0.91);*/
    background-color: rgba(180, 180, 180, 0.95);
    text-align: center;
    padding: 7px 3px;
    z-index: 1 ;
}

#zoneActionVolante input.btnFormOK,
.btnFormAnnuler {
    margin: 0px 10px;
    font-size: 1.1em;
    padding: 8px 20px;
    border: none !important;
}

.petitFormulaire #zoneActionVolante input,
.grandFormulaire #zoneActionVolante input {
    /*pour remettre un etat normal au bouton si dans zoneActionVolante*/
    width: auto;
    display: inline-block;
}

.zoneInfo_btnModifier {
    /*zone en haut d'un article par ex. (celle contenant le btn modifier)*/
    /*float:right; width:830px; margin:0px 25px 15px 0; */
    text-align: right;
    padding-top: 7px;
    padding-bottom: 7px;
    /*border-bottom:1px solid #CCC;*/
    width: 100%;
    /*margin: 0 0 15px 0;*/
    max-width: 762px;
    display: inline-block;
    /*float: initial;*/
}

#zoneArticle,
#zoneAuteur {
    max-width: 762px;
    margin: 0px 10px;
}
#zoneAuteur {
    display: inline-block;
    /*min-width: 760px*/
}

body.consulterAuteur #zoneInfo {
    /*degrade pour habiller un peu:*/
    background-image: -webkit-linear-gradient( -90deg , rgba(160, 140, 150, 0.99) 0px , rgba(160, 140, 150, 0) 19em ) ;
    background-image: -moz-linear-gradient( -90deg , rgba(160, 140, 150, 0.99) 0px , rgba(160, 140, 150, 0) 19em ) ;
    background-image: -o-linear-gradient( -90deg , rgba(160, 140, 150, 0.99) 0px , rgba(160, 140, 150, 0) 19em ) ;
    background-image: linear-gradient( 180deg , rgba(160, 140, 150, 0.99) 0px , rgba(160, 140, 150, 0) 19em ) ;/*ici: 180 et non -90*/

}

#zoneArticle h1,
#zoneAuteur h1 {
    font-size: 2.4em;
    color: #5d575d;
}
#zoneArticle h1 {
  text-align: left;
}

#zoneAuteur h1 strong
/*nom auteur sur bio*/

{
    font-weight: normal;
}

h1 .surTitre {
    display: block;
    font-size: 0.75em;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    color:#fff;
}

#zoneArticle h2,
#zoneAuteur h2 {
    font-size: 1.2em;
    color: #9a9a9a;
}
#zoneArticle h2 {
  text-align: left;
  margin-bottom: 1em!important;
}


#zoneArticle #contenuArticle,
#zoneAuteur #contenuAuteur {
    font-size: 1.0em;
    text-align: justify;
    line-height: 1.5em;
    clear: both;
}

#zoneAuteur #contenuAuteur {
    margin-top: 1.5em;
}

#zoneArticle h3,
#zoneAuteur h3 {
    margin-top: 1.5em !important;
    margin-bottom: 0.3em !important;
    /*titre dans article ou bio*/
    display: inline-block;
}

#zoneAuteur p {
    display: inline;
    /*pour eviter saut de ligne et ne pas gener les retours a la ligne souhaites*/
}

.nomAuteur,
.connuSousNomAuteur {
    font-size: 1.1em;
    font-variant: small-caps;
    font-weight: normal;
    /*fait comme gras avec nouvelle police*/
}
.connuSousNomAuteur.etablissement {
    font-variant: normal;
    text-transform: uppercase;
}

.connuSousNomAuteur {
    font-weight: bold;
    /*fait comme gras avec nouvelle police*/
}

#listing .nomAuteur { /* nom de l'auteur en majuscule */
font-size:1.2em; font-variant: small-caps; font-weight:normal; /*letter-spacing: 0.1em;*/
line-height: 0.90em; /*092012*/
}

.photoAuteur a {
    /*photo principale de l'artiste*/
    width: 200px;
    height: 200px;
    display: inline-block;
}

.photoAuteur img {
    /*photo principale de l'artiste*/
    border-radius: 10000px;
    border: 7px solid #FFF;
    display: inline-block;
    width: 100%;
    height: 100%;
    /*background-image: url("/images/auteurs/_tailleNormale/defaut-homme...");*/
    background-repeat: no-repeat;
    /*background-position: 50% 50%;*/background-position: 50% top; /*si image verticale => visage generalement en haut*/
    background-size: cover;
}
.photoAuteur a:hover .animBase_zoom
, .photoAuteur a:focus .animBase_zoom
{
    transform: scale(1.15);
}


.photoAuteur p {
    /*legende sous photo principale de l'auteur*/
    margin: 0;
    margin-top: 10px;
}

.photoAGauche a:link,
.photoAGauche a:visited,
.photoAuCentre a:link,
.photoAuCentre a:visited,
.photoADroite a:link,
.photoADroite a:visited {
    /*legende photo dans article*/
    color: #9a9a9a;
}

.photoAGauche a:hover,
.photoAGauche a:active,
.photoAuCentre a:hover,
.photoAuCentre a:active,
.photoADroite a:hover,
.photoADroite a:active {
    /*survol*/
    color: #5d575d;
}

.photoAGauche a:hover img,
.photoAuCentre a:hover img,
.photoADroite a:hover img {
    /*contour photo avec outline*/
    outline: 3px solid rgb(213, 239, 73);
    /*peu importe epaisseur de border*/
}

.photoAuteur a:hover img,
.photoAuteur a:hover img,
.photoAuteur a:hover img {
    /*contour photo avec border*/
    border: 7px solid rgb(213, 239, 73) !important;
    /*vorder car outline fait un contour rectangulaire (donc pas ok si photo ronde)*/
    outline: none;
}

.texteReussi {
    color: #55AA00;
    /*vert reussi*/
}

#zoneFormulaire .zoneImageLegendes input {
    width: 445px;
    display: block;
    /*pour FF sinon va en-dessous*/
}

input,
textarea,
select,
input.btnChoisirFichier {
    background-color: #f2f2f2;
    border-color: #b1b1b1;
    padding: 5px 7px;
    margin-left: 0;
}

input.btnChoisirFichier {
    /*btn de selection de fichier*/
    padding: 15px 3px;
    border: 1px dashed #b1b1b1;
    text-align: center;
    /*width: 280px;*/
    border-radius: 5px;
    width: 226px;
    font-size: 0.9em;
}

.zone-bloc {
    background-color: #FFF;
    /*padding: 8px;*/
    vertical-align: top;
    text-align: left;
    /*
	border-radius: 4px;
	box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25);
	*/
}


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


/*page accueil*/

section.multiBlocs {
    display: inline-block;
    width: 100%;
    XXXmax-width: 842px;
    text-align: center;
}


/*section.multiBlocs*/

div.tr {
    /*div comme une ligne de tableau*/
    display: table-row;
}


/*section*/

div.td {
    /*div comme une cellule de tableau*/
    display: table-cell;
    vertical-align: top;
    text-align: left;
}

body.accueil #blocCentralAccueil_gauche {
    display: inline-block;
    /*sinon pas de marge droite possible*/
    margin-right: 40px;
    /*met un espace entre bloc*/
    text-align: center;
    background-color: initial;
    /*pour ne pas avoir de fond*/
}

XXXXsection .blocADroite {
    display: inline-block;
    height: 407px;
    height: 100%;
    /*margin-left: 15px;*/
    width: 200px;
    font-size: 0.8em;
    text-align: left;
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    -ms-box-sizing: initial;
    box-sizing: initial;
    /*sinon espace en bas de cellule (bizarre)*/
}

body.accueil #blocContact {
    /*display: table-cell ;*/
    height: 407px;
    height: 100%;
    /*margin-left: 15px;*/
    width: 300px;
    font-size: 0.85em;
    /*text-align: center;*/
}

body.accueil #blocContact .illustration,
body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_illustration .illustration {
    width: 100%;
}

body.accueil #blocContact .txt_contact {
    /*ajustement si trop etroit + loin*/
    margin: 0px 15px;
    padding-top: 5px;
    display: inline-block;
    line-height: 1.4em;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 {
    text-align: center;
    display: inline-block;
    width: 100%;
    clear: both;
}


/*pour afficher un fond blanc degrade au survol image oeuvre/article du mois :*/

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_contenu {
    display: inline-block;
    /* background-color: #e5e5e5; */
    /*background-image: linear-gradient( left , rgba(229,229,229,0) 50% , #e5e5e5 90%);*/
    /*de gauche a droite*/
    background-image: -webkit-linear-gradient( 285deg, rgba(229, 229, 229, 0) 30%, #e5e5e5 70%);
    /*si background-color => linear-gradient sera en +*/
    /*+120° par rapport à si ssan sprefixe sprciaux*/
    background-image: -moz-linear-gradient( 285deg, rgba(229, 229, 229, 0) 30%, #e5e5e5 70%);
    background-image: -o-linear-gradient( 285deg, rgba(229, 229, 229, 0) 30%, #e5e5e5 70%);
    background-image: linear-gradient( 165deg, rgba(229, 229, 229, 0) 30%, #e5e5e5 70%);
    /*inclinaison, pour eviter debord en bas image si trop petit, implique + visible sur bord droit*/
    transition: background-color 1s ease-in;
    /*outline: 1px solid #e5e5e5;  outline-offset : -1px;*/
    /*corrige bug safari : on verrait un filet blanc sur la droite, sleon certaines largeurs fenêtre : mais genant car met une bordure a gauche de l'image => suppr*/
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_contenu:hover {
    background-color: #FFF;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_illustration,
body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_info {
    /*1er bloc de la zone (avec la photo)*/
    display: inline-block;
    float: left;
    width: 50%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_illustration,
body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_illustration {
    line-height: 0em;
    /*evite mini marge basse qui apparait sans raison*/
    text-align: left;
    overflow: hidden;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_info {
    padding: 5px 15px 15px 15px;
    text-align: left;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1 .zone_info .nomAuteur {
    font-variant: small-caps;
    font-size: 1.2em;
}


/*ajuste selon contexte largeur illustration et info :*/


/* modeH = mode horizontal si photo plutot horizontale  --  modeV = Vertical */

body.accueil #blocCentralAccueil_gauche .zone_encart1.modeH .zone_illustration {
    width: 60%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1.modeH .zone_info {
    width: 40%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1.modeV .zone_illustration {
    width: 45%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart1.modeV .zone_info {
    width: 55%;
}


/*zone_encart2*/

body.accueil #blocCentralAccueil_gauche .zone_encart2 {
    text-align: center;
    padding-bottom: 20px;
    display: inline-block;
    vertical-align: top;
    width: 33.333333%;
    /*par defaut : 1/3*/
    padding-right: 5px;
    padding-left: 0px;
    XXXX_background-color: #33CC66;
    height: 450px;
    /*overflow: hidden;*/
    /*forcer hauteur + esthetique*/
    position: relative;
    /*permet placement du bouton "+ d'info" dans la zone*/
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.x1 {
    /*largeur = 1 tiers*/
    width: 100%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.x2 {
    /*largeur = 1 tiers*/
    width: 50%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2>div {
    background-color: #FFF;
    height: 100%;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2>a {
    /*englobe toute la zone de l'encart*/
    display: inline-block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #FFF;
}
/*09/02/2022 : autre aspect qui permet d'avoir le visuelEntier*/
body.accueil #blocCentralAccueil_gauche .zone_encart2.visuelEntier>a {
  background-color: transparent;
/*dégradé car image affichée complètement donc transition plus douce*/
  background-image: -webkit-linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0));
  background-image: linear-gradient(to top, #ffffff 40%, rgba(255, 255, 255, 0));
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_btn {
    /*image en fond ici*/
    position: absolute;
    bottom: 0;
    width: 100%;
    /*padding-right: 5px;*/
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .btnRetirer {
    /*le btn pour retirer element de la page accueil*/
    position: absolute;
    z-index: 5;
    /*sinon passe sous l'image qui suit*/
    right: 5px;
    /*= padding-right de .zone_encart2 */
    opacity: 0.15;
    /*sera + visible au survol du parent*/
    /*margin-top: -18px;*/
    background-image: url("/images/pictos/picto-effacer-champ.svg");
    background-size: 34px;
    background-position: center center;
    background-repeat: no-repeat;
    width: 34px;
    height: 34px;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2:hover .btnRetirer {
    /*au survol du parent*/
    opacity: 0.5;
    /*et sera encore + visible au survol du btn*/
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.suppr .btnRetirer {
    /*si on suppr l'element => btn devient un + pour le remettre*/
    -ms-transform: rotate(-45deg);
    /* IE9 */
    -moz-transform: rotate(-45deg);
    /* FF3.5/3.6 */
    -o-transform: rotate(-45deg);
    /* Opera 10.5 */
    -webkit-transform: rotate(-45deg);
    /* Saf3.1+ */
    transform: rotate(-45deg);
    /* Newer browsers */
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.suppr {
    /*si on suppr l'element => coloration zone*/
    background-image: linear-gradient( 15deg, rgba(255, 0, 0, 0) 20%, rgba(255, 0, 0, 0.2) 70%);
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.suppr .btnRetirer::before {
    /*si on suppr l'element => btn change pour le remettre*/
    content: "Remettre";
    padding-right: 40px;
    float: right;
    font-size: 1.3em;
    font-weight: bold;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .btnRetirer:hover {
    /*survol*/
    opacity: 1;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2:last-child
/*, body.accueil #blocCentralAccueil_gauche .zone_encart2:last-child  .zone_btn*/
{
    padding-right: 0px;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2:last-child .btnRetirer {
    right: 0px;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_btn .bouton {
    margin-bottom: 0px;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_illustration {
    /*image en fond ici*/
    height: 240px;
    background-color: #e5e5e5;
    background-size: cover;
    background-position: center top;
}
/*09/02/2022 : autre aspect qui permet d'avoir le visuelEntier*/
body.accueil #blocCentralAccueil_gauche .zone_encart2.visuelEntier .zone_illustration {
    background-color: transparent;
    background-size: contain;
    background-position: center bottom;

    background-repeat: no-repeat;
    max-width: 500px;
    margin: 0 auto;
    /*si pleine largeur, evitera d'etre trop large*/
}
/*avec en plus un fond flou (necessite image en plus, le .double placé avant) #fondFlou+Double - 14/03/2023*/
body.accueil #blocCentralAccueil_gauche .zone_encart2.visuelEntier.fondFlou .zone_illustration.double {
  position: absolute;
  background-position: center top;
  width: 100%;
  background-size: cover;
  filter: blur(30px) brightness(130%);
}
/*ajuste illustration habituelle (si .fondFlou et pas le .double) #fondFlou+Double*/
body.accueil #blocCentralAccueil_gauche .zone_encart2.visuelEntier.fondFlou .zone_illustration:not(.double) {
  position: relative;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_info {
    text-align: left;
    width: 100%;
    padding: 15px 15px 15px 15px;
/*09/02/2022 : taille texte légèrement réduite*/
    font-size: 1rem;
}
body.accueil #blocCentralAccueil_gauche .zone_encart2 .zone_info h2 {
/*09/02/2022 : taille texte légèrement réduite*/
    font-size: 1.4rem;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2.suppr>a {
    /*si on suppr l'element de l'accueil => on masque le contenu*/
    display: none;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 h1 {
    font-size: 1.1em;
    font-weight: 700;
}

body.accueil #blocCentralAccueil_gauche .zone_encart2 p {
    font-size: 0.9em;
}


/*FIN zone_encart2*/

section.multiBlocs div.tr {
    /*background-color: green;*/
    display: table-row;
}

  .bouton
, button
{
    font-size: 1em;
    display: inline-block;
    background-color: red;
    text-align: center;
    padding: 15px;
    margin: 15px;
    text-shadow: none;
    font-weight: normal;
    cursor: pointer;
    background-color: #232323;
    color: #d7d7d7;
    border: none;
    -webkit-font-smoothing: subpixel-antialiased;
    /*ameliore lisibilite sous Safari si fond sombre*/
    text-decoration: none;
    transition: background-color 0.3s ease-out, color 0.3s ease-out, width 0.3s ease-out
    /*ease-in = depart lent*/
    /*ease-out = depart rapide*/
    ;
}

button { /*bouton de base (utilisé dans bootstrap)*/
  margin : 0 ; /*sans marge ici car elles se font plutôt via bs-gutter*/
}


.bouton.reduit {
    /*ex: btn archives du debut*/
    padding: 5px 15px;
}

.bouton.boutonAjouter
, .bouton.boutonModifier
{
    /*ex: btn archives du debut*/
    background-color: orange;
    color: #EEE;    /*quasi blanc*/
    min-height: 32px;
}
.bouton.boutonAjouter {
    background-color: green;
    color: #EEE;
}
.bouton.boutonModifier {
    background-color: orange;
}

.bouton.pictoSeul.boutonAjouter
, .bouton.pictoSeul.boutonModifier
{
    padding: 0px 0px;
    width: 22px; height: 22px;
    min-height: initial !important;
    background-color: initial !important;
}

.bouton.boutonAjouter:before
, .bouton.boutonModifier:before
{
    content: "";
    background-repeat: no-repeat;
    /*background-image: url(/images/commun/btnModifier.png);
	background-position: 0px 0px;
	width: 22px;
	height: 22px;
	*/
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.2em;
    /*ajustement par rapport au libelle*/
    background-image: url(/images/commun/pictos_btn.png);
    /*espace entre 2 btn = 60px , marges : 10px*/
    background-size: 150px;
    /*reel : 300px => 50% => 150px*/
    width: 20px;
    height: 20px;
    /*Reste à adapter selon bouton (en-dessous + bas) :
    background-position: -35px -5px;      60+10 à 50% => 30+5 (2e btn) 5 (btn en 1re ligne) */

}
.bouton.boutonAjouter:before {
    background-position: -5px -5px;
}
.bouton.boutonModifier:before {
    background-position: -35px -5px;  /*60+10 à 50% => 30+5 (2e btn) 5 (btn en 1re ligne)*/
}

/*lié au btn modif rapide*/
.bouton.boutonModifier.modifRapide:before {
  background-image: url(/images/commun/pictos_btn_alternative.png);
    /*même position que pictos_btn.png (éclair est une alternative au crayon : tout 2 pour modifier (pas besoin de changer background-position)*/
}
.vignette .zoneActionsrapides {
  position: absolute;
  top: 0;
  right: 0;
}
.vignette .zoneActionsrapides .bouton.pictoSeul.boutonModifier {
  padding: 7px!important;
  width: 34px;
  height: 34px;
}
vignette .zoneActionsrapides .bouton.pictoSeul.boutonModifier:before {
  margin-right: initial;
  margin-top: initial;
}
.vignette .zoneActionsrapides .bouton.pictoSeul.boutonModifier:hover:before {
  transform: scale(1.15);
}

.bouton.boutonAjouter:hover:before {
    background-position: -5px -35px; /*(btn en 2e ligne)*/
}
.bouton.boutonModifier:hover:before {
    /*background-position: 0px -44px;*/
    background-position: -35px -35px; /*(btn en 2e ligne)*/
}

.bouton.boutonAjouter:hover
, .bouton.boutonModifier:hover {
    background-color: #ff5000;
    /*orange sombre*/
    color: #FFF;
}
.bouton.boutonAjouter:hover {
    background-color: rgb(42, 98, 24); /*vert sombre*/
}
.bouton.boutonModifier:hover {
    background-color: #ff5000;/  *orange sombre*/
}

.btnTexte {
    /*lien normaux texte*/
    color: #232323;
    /*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;
    /*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;
    /*pas de retour auto par defaut. Sinon besoin, ajouter classe avecRetourAuto*/
}

.btnTexte:hover {
  /*color: #a49e22;*/
  color: rgb(213, 239, 73) !important; /*02/2022*/
}

.btnTexte.attribuerValeur {
    /*ex: botuon sous menu Auteur pour changer valeur rapidement*/
    display: inline-block;
    margin-top: 2px;
    padding-bottom: 2px;
}

.btnTexte.attribuerValeur:first-child {
    margin-top: 5px;
}

.highslide-caption .bouton {
    color: #5d575d;
    background-color: #e5e5e5;
    outline: 3px solid rgba(0, 0, 0, 0.6);
    /*permet de voir le botuon avant meme que le fond noir apparraisse*/
    margin-top: 4px!important;
}

.highslide-caption .bouton:hover {
    color: #5d575d;
    background-color: rgb(213, 239, 73);
}

.bouton_styleCNX {
    background-color: #9716ca;
    color: #e3e3e3;
  -webkit-user-select: none;  user-select: none;
}


/*.bouton.largeurMax,*/

.largeurMax {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

  .bouton:hover
, button:hover
{
    background-color: #5d575d;
    background-color: #a49e22;
    color: #FFF;
}

.bouton.estompe { /*ex: choix adresse fiche K*/
  border: 5px solid transparent;
  border-radius: 0px;
  transition: all 0.6s ease-in;
  margin: 10px 5px;
  background-color: rgba(116, 17, 156, 0.50);
}
.bouton.estompe.selection { /*elementsélectionné, mis en valeur (normalement estompé mais pas dans ce cas)*/
  margin: 0.25em 0;
  border: 5px solid rgb(213, 239, 73);
  border-radius: 50px;
  background-color: #9716ca;
  color: #e3e3e3;
}

  .bouton_styleCNX:hover
, .bouton.estompe:hover
{
    background-color: #650f87!important;
}


/*FIN page accueil*/



/* zones FLEX */
.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;

    list-style-type:none ;/*pas de puce*/
}

.elementAuCentre {
	padding: 0 20px;
	-webkit-flex:1; flex:1;
}

#zone_objetFlex {
	/* -webkit-flex: 2; */
	flex: 2;
	/* -webkit-order: 1; */
	order: 1;
	background-color: yellow;
	background-color: #FFF;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: 100%; /*pourrait etre reduit si 2 zones cote a cote (ex: 60% et l'autre serait à 40%)*/
	/*au cas ou utilise float (et non flex suite a incompatibilite)*/
}


/*zone modele objetFlex :*/
/*rq : signe > pour enfants directs (pas sous-enfants)*/
.bloc_objetFlexClassique {
	/*background-color:#FFF;
	color:#000;*/
    background-color:#5d2634;
	color:#FFF;

	padding-bottom:20px!important;
	padding: 0px 18px;
	/*-webkit-flex: 3;*//**/ /*-webkit-flex:1; flex:1;*//*zone lentille fluo occupe alors autant d'espace quand images petites (fenetre etroite)*//*pas OK sous IE (fluo chevauche non fluo!)*/
}

.liste_objetFlex {
	/*utilise flex via .zone_flex*/
	-webkit-justify-content: space-around;
	justify-content: space-around;
	line-height: 0em;
	/*sinon marge en bas de bloc (changer alors interligne pour zone info)*/
	font-size: 1em;
    padding: 0px;
}
.liste_objetFlex li {  /*zone personne*/
	text-align:center;  padding: 15px 4px;  /*border-radius:3px;*/
	/*transition-property: background-color ;  transition-duration: 0.7s ;*/
	float:left;/*utile si flex pas reconnu*/
	line-height:1.2em;
	margin: 0 4px; /*ecarte objetFlex entre elles*/
    /*max-width: 320px;*/
    /*width: 250px;*/ /*largeur fixe pour avoir meme largeur partout (même si mélange de legendes courte et longue)*/
}
.liste_objetFlex li a {  /*zone personne*/
    /*background-color: #FFF;*/
    display: block;
    padding: 15px 5px 7px 5px;
    border-radius: 2px;
    cursor:pointer;
    color:#000;
    overflow: hidden;
    position: relative; /*pour positionner correctement le pictoPlay*/
}
.liste_objetFlex li a:hover {  /*zone personne*/
    color:#23527c;
}

.liste_objetFlex li.pressArticle img.VIP {
	/*width:100%; /*on peut réduire facilement la largeur de la photo du logo (% = pb si legende plsu large que photo (decalage vers le bas))*/
	/*a mettre en px si besoin de mettre + d'elements par ligne*/
	/*width:110px;*/
    /*max-height: 40px;*/ /*hauteur max car si tres etroit, ca deformerait*/
    height: 390px;/*dimensions photos*/
    /*border-radius: 500px;*/
    padding: 3px; /*0 pour enlever espace entre bodure et photo*/
    border: 3px solid #FFF;
    transition: padding 0.5s ease-in;
    transition-delay: 0.0s;
}
.liste_objetFlex li.pressArticle a:hover img.VIP {
    padding: 0px;
}

.liste_objetFlex li .photo {
	display: inline-block; /*permet centrage si info trop large*/
	line-height: 0em; /*sinon mini marge en bas de la photo => div pas tout a fait rond en realite*/
	overflow: hidden; /*evite que photo sorte de la zone si zone en rond alors que photo (sans que le photo soit aussi ronde)*/
	border-radius:50px;
	transition-property: background-color, border-radius ;
	transition-duration : 0.3s ;
}
.liste_objetFlex li .legende {
    margin-top: 0.3em;
}
.liste_objetFlex li .legende > div { /*pour limiter largeur legende si trop longue (et rester centré sur image)*/
    max-width:570px;
    display: inline-block;
}
/*adapte zone personne selon la taille*/
.YYYliste_objetFlex.moyen.infoComplete li {
	 /*relatif a infoComplete : adapte info largeur / survol*/
	 /*max-width: 160px;*/ /*au minimum : 110 = 100+10 = largeur photo+padding du li*/
	 width: 142px; /*max-width ne marche pas sous FF, au survo. Les infos se mettant en absolute, la largeur est recalcule (ok sous Safari, mais FF n'a pas forcement tord) : solutions : forcer la largeur a une valeur fixe (max-width n'etant alors plus utile)*/ /*142px = 4 perso en largeur*/ /*il serait aussi possible de mettre en %. ex: 25% si je veux 4 en largeur ou 33.3333% si que 3 etc... (et d'adapter selon largeur fenetre via CSS responsive)*/

	 /*si dernier perso seul sur une ligne => au survol, les info sont en absolute => remonte la suite de la page => pas joli/ Pour limiter effet, hauteur minimale (mais si plice + grande => le pb apparaitra mais + discret quand-meme) :*/
	 /*min-height: 174px; si 4 lignes d'info*/
	 min-height: 161px; /*si 3 lignes d'info*/

}


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

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

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


/*survol*/
.XXXXXliste_objetFlex li:hover {  /*survol de la personne complète*/
	cursor:pointer;
	background-color: #E6F1F8;
}
.XXXliste_objetFlex li:hover .info > span {  /*mise en valeur des infos*/
	color:#0172b5;
}
.XXXliste_objetFlex li:hover .photo {  /*mise en valeur des infos*/
	border-radius:3px;
	background-color: #E6F1F8; /*bleu tres clair*/
	background-color: #FFFFFF; /*hesitation sur couleur (que si sans Photo)*/
}

/*FIN zones FLEX*/



/*TABLEAU*/

table.listeElements {
    border-collapse: collapse;
    /*enleve espaces entre cellule du tableau*/
    width: 100%;
}

table.listeElements thead tr {
    background-color: #5d575d;
    color: #f2f2f2;
    font-size: 0.9em;
    vertical-align: bottom;
    text-align: left;
    line-height: 1.2em;
    vertical-align: middle;
}

table.listeElements tbody tr:nth-child(even) {
    background-color: #EEE;
}

table.listeElements th,
table.listeElements td {
    padding: 6px 10px;
    font-weight: normal;
    vertical-align: middle;
}

/* OFF 23/05/2023 car préférable d'ajouter la class .curseurMain si besoin (ex: car pas utile pour liste achats)
table.listeElements tbody tr {
    cursor: pointer;
}
*/

/*si ligne non cliquable (sans .curseurMain) mais tout de même mise en valeur de ligne survolée - 23/05/2023*/
table.listeElements tbody tr:hover {
    background-color: rgba(213, 239, 73, 0.4);
}
/*si ligne cliquable (avec .curseurMain) - 23/05/2023*/
table.listeElements tbody.curseurMain tr:hover {
    background-color: rgb(213, 239, 73);
}
/*cellule cliquable (avec .curseurMain) (ex: visuel œuvre, n° œuvre, client)*/
table.listeElements tbody tr td.curseurMain:hover {
  background-color: rgba(164, 158, 34, 0.75);
  cursor: pointer;
}

/*specificites selon colonne :*/

table.listeElements td.civ
/*civilite*/

{
    text-align: right;
    padding-right: 0px;
}

table.listeElements td.mail.pb
/*mail avec probleme (ex:pas valide par le client)*/

{
    color: #b1b1b1;
}

  table.listeElements td.ins /*date isncription*/
, table.listeElements td.con /*date connexion*/
, table.listeElements td.colReduit /*plus générique (ex: liste achats)*/
{
    font-size: 0.8em;
}


/*etatCompte et legende*/

table.legende {
    border-collapse: collapse;
    /*enleve espaces entre cellule du tableau*/
    margin: 15px;
    margin-top: 3em;
}

table.legende caption {
    /*titre du tableau*/
    text-align: left;
    font-weight: bold;
}

table.legende td {
    padding-left: 5px;
    padding-top: 4px; padding-bottom: 4px;
    vertical-align: middle;
}

table.listeElements td.etatCompte,
table.legende td.etatCompte {
    font-size: 2em;
    /*pour grossir bullet point*/
    line-height: 0.7em;
}

table.listeElements td.etatCompte.type_0,
table.legende td.etatCompte {
    color: #b1b1b1;
}

table.listeElements td.etatCompte.type_0
/*non defini => avec les btn emojis*/

,
table.legende td.etatCompte.type_0 {
    font-size: 1.4em;
    line-height: 1em;
}

table.listeElements td.etatCompte.type_1
/*type_1 = accepte*/

,
table.legende td.etatCompte.type_1 {
    color: #55AA00;
}

table.listeElements td.etatCompte.type_5
/*type_5 = suspendu*/

,
table.legende td.etatCompte.type_5 {
    color: orange;
}

table.listeElements td.etatCompte.type_6
/*type_6 = archive*/

,
table.legende td.etatCompte.type_6 {
    color: #000;
}

table.listeElements td.etatCompte.type_7
/*type_7 = rejete*/

,
table.legende td.etatCompte.type_7 {
    color: red;
}

table.listeElements td.etatCompte .bouton {
    /*ex: btn accepter / rejeter compte*/
    background-color: transparent;
    margin: 0;
    padding: 6px 3px 1px 3px;
    border-radius: 50px;
}

table.listeElements td.etatCompte .bouton.non {
    /*padding-bottom:1px;*/
}

table.listeElements td.etatCompte .bouton.oui:hover {
    background-color: #55AA00;
}

table.listeElements td.etatCompte .bouton.non:hover {
    background-color: red;
}

table.listeElements td.etatCompte {}

table.listeElements td.etatCompte .oui
/*etatCompte accepter*/

,
table.listeElements td.etatCompte .non
/*etatCompte rejeter*/

{}

table.listeElements td.etatCompte .oui
/*etatCompte accepter*/

{
    color: #55AA00;
}

table.listeElements td.etatCompte .non
/*etatCompte rejeter*/

{
    color: red;
}


/*FIN etatCompte*/


/*FIN TABLEAU*/

.highslide-caption {
    padding-top: 10px;
}

.galerieArticles .highslide-controls {
    width: auto !important;
}

.highslide-controls li {
    margin: 0px 10px;
    /*ecarte btn fleche et zoom (+ facile pour ecran tactile)*/
}


/*hisghslide :*/

div.highslide-container>table>tbody>tr {
    display: none;
    /*pour masquer le cadre blanc en fond (si je ne met pas de fond noir pour legende) et d'enlever ombre qui est faite via une image (par Highslide)*/
}

.highslide-wrapper,
.highslide-outline {
    background-color: transparent;
}

.highslide-image {
    border: none;
}

.highslide-caption {
    color: #FFF;
    /*text-shadow: 0px 0px 5px #000000 ; si fond noir*/
    /*avec contour texte et ombre en + et texte gras*/
    text-shadow: 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 10px #000, 0px 0px 10px #000;
    font-weight: bold;
    font-size: 1.3em !important;
    background-color: transparent;
    background: transparent;
    border: none;
}

.highslide-caption .JCinfo {
    /*legende dans listing oeuvres*/
    font-size: 1.0em !important;
}

.zoneModifiee {
    /*pour mettre en valeur une zone modifiee*/
    background-color: rgba(102, 205, 26, 1);
    border-color: green;
    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;
}

@media (max-width: 810px) {
    body.consulterOeuvre #zoneInfo #zoneInfoPhotoEtTechnique,
    body.consulterOeuvre #zoneInfo #zoneInfoPhoto {
        margin-bottom: 0px;
        /*pour compenser le fait que la photo deborder de la zone sombre, en bas*/
        /*100 = margin-bottom de zoneInfoPhoto -30px du padding d'ici*/
        padding-bottom: 0px;
    }
    body.consulterOeuvre #zoneInfo #zoneInfoPhotoEtTechnique {
        padding-left: 0;
        padding-right: 0;
    }
    body.consulterOeuvre #zoneInfo #zoneInfoPhoto,
    body.consulterOeuvre #zoneInfo #zoneInfoTechnique {
        width: 100% !important;
    }
    body.consulterOeuvre #zoneInfo #zoneInfoTechnique {
        padding-left: 15px;
    }
    body.consulterOeuvre #zoneInfo.horizontale #laPhoto {
        max-width: 750px;
    }
    body.consulterOeuvre #zoneInfo .infoOeuvre {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
        /*https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html*/
    }
    /*body.consulterOeuvre #zoneInfo .infoSource {
		width: 48%;
	}
	body.consulterOeuvre #zoneInfo .infoSource.exposition.siDoubleZone {
		float: right;
	}*/
    body.consulterOeuvre #zoneInfo.verticale #zoneInfoPhoto {
        padding-left: 0;
    }
    body.consulterOeuvre #zoneInfo.verticale #laPhoto img.photoPrincipaleOeuvre {
        max-height: 550px;
    }
    body.consulterOeuvre #zoneInfo #zoneMiniature img {
        height: 60px;
    }
    body.consulterAuteur #zoneMiniature img {
        height: 100px;
    }
}

@media (max-width: 600px) {
    .article_1 .visuel {
        width: 31%;
        padding-left: 0px;
    }
    .article_1 .visuel .zone_img,
    .article_1 .visuel img {
        width: 100%;
    }
    .colonnesX2 {
        -webkit-columns: initial;
        -moz-columns: initial;
        columns: initial;
        /*https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html*/
    }
}


/*pour pas laisser de marge a droite de la liste des œuvres*/


/* A VOIR : si je veux adapter images en % => utiliser % sur  #listing div.vignette  (le height de  #listing .haut  fait 250px et y reste ou alors il faut le reduire manuellement selon largeur page)
	/*width:16.666666667%;/*pour 6 images en largeur*/


/*width:20%; */


/*pour 5*/


/*margin: 10px 0px 0px 0px;/*pas de margin sinon width en % pas ok*/


/*padding: 0 3px;/*padding a la place du margin*/

@media (min-width: 2047px) {
    /*min ici*/
    body.listeOeuvres #tableauEnsemble {
        max-width: 2048px;
    }
    /*2096-280=1816*/
    /*des pages impose une largeur (ex: accueil, articels, actu => pas ici pas d'influence. ex: body.accueil #tableauEnsemble )*/
}

@media (max-width: 2047px) {
    /*= max-width au-dessus moins 1*/
    body.listeOeuvres #tableauEnsemble {
        max-width: 1792px;
    }
    /*2096-280=1816*/
}

@media (max-width: 1791px) {
    body.listeOeuvres #tableauEnsemble {
        max-width: 1536px;
    }
    /*-280*/
}

@media (max-width: 1535px) {
    body.listeOeuvres #tableauEnsemble {
        max-width: 1280px;
    }
    /*-280*/
}

@media (max-width: 1279px) {
    body.listeOeuvres #tableauEnsemble {
        max-width: 1024px;
    }
    /*-280*/
}

@media (max-width: 1023px) {
    body.listeOeuvres #tableauEnsemble {
        max-width: 768px;
    }
    /*-256 !!*/
}

@media (max-width: 767px) {
    body.listeOeuvres #tableauEnsemble {
        max-width: 512px;
    }
}

@media (max-width: 1023px) {
    #menu2 li a {
        /*reduit menu si pas assez large*/
        height: 43px;
        line-height: 31px;
        font-size: 0.8em;
        /*si besoin de redimensionner menu en hauteur*/
    }
    #listing.listingDesGenres div.vignette {
        margin-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 767px) {
    #listing .haut {
        height: 150px;/*moins haut car mis l'un sous l'autre*/
    }
    #listing div.vignette {
        height: 220px;/*moins haut car mis l'un sous l'autre*/
    }
    #listing.listingDesGenres div.vignette {
        width: 50%;
        /*pour que 2 par ligne (au lieu de 4)*/
        height: 150px;
        /*moins haut car mis l'un sous l'autre*/
    }
    #listing.listingDesGenres div.vignette .titre_type_oeuvre {
        font-size: 1.15em;
        line-height: 1.0em;
    }

    /*jan2020: picto vendu,... aussi + bas (car height: 150px; ci-dessus)*/
    .venduMini,
    .reserveMini {
        margin-top: -153px !important;  /*au lieu de 253px initialement*/
    }

    #menu2 li a {
        /*si besoin de redimensionner menu en hauteur*/
        font-size: 0.7em;
        padding-left: 0px;
        padding-right: 0px;
    }

}

@media (max-width: 730px) {
    /*reduit hauteur en-tete*/
    #zone_entete_image {
        height: 120px;
    }
    #menu2 li a {
        /*reduit menu si pas assez large*/
        font-size: 0.6em;
        /*si besoin de redimensionner menu en hauteur*/
        padding-left: 9px;
        padding-right: 9px;
    }
    #zone_menu>tbody>tr>td {
        /*permet de centrer menu*/
        display: inline-block;
    }
    #menu2>ul>li {
        /*menu occupe moins de place car selon contenu texte*/
        width: auto !important;
    }
    #menu2 ul li:hover ul.sousMenu {
        /*reduit aussi sous menu*/
        width: 14em;
    }
}

@media (max-width: 500px) {
    body.consulterOeuvre #zoneInfo .infoOeuvre {
        -webkit-columns: initial;
        -moz-columns: initial;
        columns: initial;
        /*https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html*/
    }
    body.consulterOeuvre #zoneInfo 2.infoSource,
    body.consulterOeuvre #zoneInfo .infoSource.exposition.siDoubleZone {
        width: 100%;
        float: none;
    }
    #listing.listingDesGenres {
        padding: 0 5px;
        /*pour + coller bord de page*/
    }
    #listing.listingDesGenres div.vignette {
        margin-bottom: 0px;
        padding-left: 2px;
        padding-right: 2px;
    }
}

@media (max-width: 600px) {
    .E_4.E_max {
      /*pour élargir au max si trop etroit (E_)*/
      display: block;
      width: 100% !important;
      margin:0 0 30px 0 !important;
    }
}

@media (max-width: 800px) {
    /*reduit accroche*/
    body.accueil #blocCentralAccueil_gauche {
        margin-right: 0;
    }
    #blocContact {
        /*de la page accueil*/
        margin-top: 50px;
    }
    .E_3.E_max {
        /*pour élargir au max si trop etroit (E_) (de niveau 3 : pas le + etroit ni element touchant bord a env 1024 ou 1400px)*/
        display: block;
        width: 100% !important;
        /*-webkit-border-radius: 0px !important;  -moz-border-radius: 0px !important;  border-radius: 0px !important;
		box-shadow: none !important;
		-webkit-box-sizing: inherit !important;	-moz-box-sizing: inherit !important; -ms-box-sizing: inherit !important; box-sizing: inherit !important; */
        /*cas particulier. Pour remettre comme autre objet. (ex: section .blocADroite) */
    }
    section.multiBlocs,
    section.multiBlocs div.tr,
    section div.td {
        /*enleve style tableau*/
        /*display: inline;*/
        display: inline-block;
        /*sinon perdrait couleur de fond si on met inline (ex: blocCentralAccueil_gauche)*/
    }
    body.accueil #blocContact .illustration {
        float: left;
        width: 30%;
    }
}