@charset "UTF-8";
/*
Diverses adaptations pour ce site uniquement

rq :
  - vh : quand l'unité vh est utilisée, je mets aussi en px juste avant (qui sera alors utilisé si unité vh non reconnue)
*/
/** Couleurs via variables
*  mainColor = couleur principale : or sombre (btn, texte cliquable au survol)
*  mainColor_clair = or clair (fond cliquable au survol)
*  mainColor_sombre = or plus sombre (quand sur fond déjà  coloré)
*  rq: dans le code, j'utilise tout de même les couleurs sans variable pour les anciens navigateurs
*  Source variable CSS : https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties
*/
:root {
  --mainColor: #ADCF05;
  --mainColor_clair: #d2dd0b;
  --mainColor_sombre: #86a005;
  --mainFont: Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
  --titleFont: AkayaKanadaka, "Times New Roman", serif ;

  --bs-body-font-family: Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
  --bs-body-font-size: 1.2rem;
}


/* AkayaKanadaka-Regular - latin */
/*outil de convertion de police : https://convertio.co ou https://anyconv.com */
@font-face {
  font-family: 'AkayaKanadaka';
  font-style: normal;
  font-weight: 400;
  /*src: url('../fonts/oranienbaum-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('AkayaKanadaka'), local('AkayaKanadaka-Regular')
       /*, url('../fonts/oranienbaum-v9-latin-regular.eot?#iefix') format('embedded-opentype') /* IE6-IE8 */
       /*, url('../fonts/oranienbaum-v9-latin-regular.woff2') format('woff2') /* Super Modern Browsers */
       , url('../fonts/AkayaKanadaka-Regular.woff') format('woff') /* Modern Browsers */
       , url('../fonts/AkayaKanadaka-Regular.ttf') format('truetype') /* Safari, Android, iOS */
       /*, url('../fonts/oranienbaum-v9-latin-regular.svg#Oranienbaum') format('svg') /* Legacy iOS */
       ;
}

/* oswald-200 - latin */
/*source : https://google-webfonts-helper.herokuapp.com/fonts/oswald?subsets=latin */
@font-face {
  font-family: 'OFF_Oswald';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/oswald-v35-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v35-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v35-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v35-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v35-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v35-latin-200.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-300 - latin */
@font-face {
  font-family: 'OFF_Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/oswald-v35-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v35-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v35-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v35-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v35-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v35-latin-300.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'OFF_Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v35-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v35-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v35-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v35-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v35-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* oswald-500 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  /*src: url('../fonts/oswald-v35-latin-500.eot'); /* IE9 Compat Modes */
  src: local('')
       /*, url('../fonts/oswald-v35-latin-500.eot?#iefix') format('embedded-opentype') /* IE6-IE8 */
       /*, url('../fonts/oswald-v35-latin-500.woff2') format('woff2') /* Super Modern Browsers */
       , url('../fonts/Nunito-Light.woff') format('woff') /* Modern Browsers */
       , url('../fonts/Nunito-Light.ttf') format('truetype') /* Safari, Android, iOS */
       /*, url('../fonts/oswald-v35-latin-500.svg#Oswald') format('svg') /* Legacy iOS */
       ;
}
/* oswald-500 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: bold;
  font-weight: 700;
  /*src: url('../fonts/oswald-v35-latin-500.eot'); /* IE9 Compat Modes */
  src: local('')
       /*, url('../fonts/oswald-v35-latin-500.eot?#iefix') format('embedded-opentype') /* IE6-IE8 */
       /*, url('../fonts/oswald-v35-latin-500.woff2') format('woff2') /* Super Modern Browsers */
       , url('../fonts/Nunito-Bold.woff') format('woff') /* Modern Browsers */
       , url('../fonts/Nunito-Bold.ttf') format('truetype') /* Safari, Android, iOS */
       /*, url('../fonts/oswald-v35-latin-500.svg#Oswald') format('svg') /* Legacy iOS */
       ;
}


/* corrections BOOTSTRAP */

/* épaisseur police selon police utilisée (regroupé ici, pour modif + facile)*/
body
, .small, small
, .card .card-title
{
  OFF_font-weight: 200;
}
.btn {
  font-weight: 300;
}

body.testStyle2 ,
body.testStyle2 .small, small ,
body.testStyle2 .card .card-title
{
  font-weight: 300;
}
body.testStyle2 .btn {
  font-weight: 400;
}


.policePrimaire {
  font-family: var(--mainFont);
}
.policeSecondaire {
  font-family: var(--titleFont);
}

.navbar-dark .navbar-nav .nav-link {
  color:rgba(255,255,255,0.8);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
, .navbar .menuLangueInitiales .nav-link.sigleLangue:hover
{
  color:rgba(255,255,255,1)!important;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link
, .navbar .menuLangueInitiales .nav-link.sigleLangue.active
{
  color:#E2B833;
 /* border-bottom:2px solid #E2B833;*/
}

.blockquote {
  font-style: italic;
  /*font-size: 1.5rem;*/
}

.tooltip-inner {
  max-width:250px;
}

.dropdown-item:focus, .dropdown-item:hover {
  background-color: #E2B833;
}

.text-muted {
  color:#AAA!important;
  color:#999!important;
}

/*.modal-footer {
    justify-content: center ;
}*/

.btn-primary {
  color: #fff;
  background-color: #A48B57;
  background-color: var(--mainColor);
  border-color: #A48B57;
  border-color: var(--mainColor);
}
.btn-primary:hover, .btn-primary:focus {
  color: #76643f;
  color: var(--mainColor_sombre);
  background-color: #E6D059;
  background-color: var(--mainColor_clair);
  border-color: #E6D059;
  border-color: var(--mainColor_clair);
}
.nav-pills .nav-link:focus, .nav-pills .nav-link:hover {
  background-color: #e6d059;
  background-color: var(--mainColor_clair);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #76643f;
  background-color: var(--mainColor_sombre);
  color:#FFF!important;
}


a.btnIcon { /*evite soulignement si utilise picto dans balise a*/
  /*text-decoration: none;*/
}
.btnIcon { /*picto un peu comme un bouton (avec rond autour pour mieux montrer cliquable)*/
  /*text-align: center;
  border-radius: 30px;
  width: 1.5em;  height: 1.5em;  line-height: 1.5em;
  display: inline-block;
  cursor: pointer;
  margin: 0 2px;*/
  font-family: "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.table tbody tr .btnIcon {
 /* color:#DDD;*//*plus discret (car se répète chaque ligne d'un tableau)*/
}
.table tbody tr:hover .btnIcon {
  /*color:#007bff*/
}
.btnIcon:hover { /*picto avec rond autour pour mieux montrer cliquable*/
  /*background-color: #007bff!important;
  color: #FFF!important;*/
}



/*diaporama*/

/*carousel/diapo très en longueur*/
.diaporamaEnLongueur .carousel-inner {
  --bs-aspect-ratio: 55%; /*davantage en longueur si largeur appareil + grand (cf @media)*/
  min-height:200px; /*pour navigateur ne prennant pas en compte valeur/variable ci-dessus*/
}
.diaporamaEnHauteur .carousel-inner {
  --bs-aspect-ratio: 133%; /*davantage en longueur si largeur appareil + grand (cf @media)*/
  min-width:300px; /*pour navigateur ne prennant pas en compte valeur/variable ci-dessus*/
}

.carousel-indicators {
  margin-bottom: 5px; /*par-dessus image en bas*/
  /*margin-bottom: -15px; /*en-dessous image en bas*/
}
.carousel-indicators [data-bs-target] {
  width: 15px;
  height: 12px;
  border-top: 1px solid transparent; /*laisé à 1 px pour éviter mini-bug : lors du changement de diapo, si 0px, le pixel du bas de l'indicateur disparait*/
  border-bottom:1px solid transparent; /*idem*/
  border-radius: 3px;
  background-color: var(--mainColor);
}

.carousel-item {
  transition: transform 1.5s ease-out,-webkit-transform 1.5s ease-out;  /*linear ou ease-in-out ou ease… différent du opacity pour ne pas être arrêté exactement en même temps*/
  /* valeur originale :   transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
     Ne marche pas si durée allongée (clignotement désagréable) :  transition: transform 2.2s ease, opacity 3.5s ease-out;
        Si ! il faut aussi changer la classe ci-après (pas précisé par bootstrap)
  */
}
.carousel-fade .carousel-item {
  transition-property: transform,-webkit-transform, opacity;
}
  .carousel-item
, .carousel-fade .carousel-item {
  transform: scale(1.10) rotate(2deg); /*les diapo sont dé-zoomées…*/
}
  .carousel-item:nth-of-type(odd)
, .carousel-fade .carousel-item:nth-of-type(odd) {
  transform: scale(1.00) rotate(2deg);  /*… sauf les diapo impaires qui sont zoomées*/
}

.carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active {
  transform: scale(1.05) rotate(0deg); /*taille normale (un peu zoomées pour pouvoir effectuer un dé-zoom*/
}
.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
  transition: opacity 0s 1.5s ease-in; /*linear ou ease-in-out ou ease… différent du transform (zoom) pour ne pas être arrêté exactement en même temps*/
  /*transform: scale(1.0);*/
}

.carousel-item img.nonVisible { /*pour charger image de fond (car image de fond non chargée au départ) */
  width: 5px; height: 5px;
  margin-top: -50px;
}

.carousel-item
{
  background-repeat:none;
  background-position:center;
  background-size:cover;
  height:100%;
}
/*FIN diaporama*/

/* FIN corrections BOOTSTRAP */


.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*/; } /* ! ! ! privilégier la classe collapse de bootstrap*/

.zone-overflow {
  overflow: hidden;
}

.starter-template.masquerLegendeOeuvre .card-body {
  display:none;
}
.starter-template.fond-card-oeuvre-blanc .card {
  background-color: #FFF!important;
}
.starter-template .oeuvre01
, .starter-template .oeuvre01x2
, .starter-template .oeuvre02
, .starter-template .oeuvre03
{
  display:none;
}

.starter-template.style-oeuvre01 .oeuvre01
, .starter-template.style-oeuvre01x2 .oeuvre01x2
, .starter-template.style-oeuvre02 .oeuvre02
, .starter-template.style-oeuvre03 .oeuvre03
{
  display:initial;
}

/* Si supérieur à la largeur sm */
@media (min-width: 576px) {

  .card-columns.colonnes2 {  /*pour changer nb de colonnes de ce style d'affichage (oeuvres décalées)*/
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1; /*orpheline*/
    widows: 1; /*veuve*/
  }

/*carousel/diapo très en longueur*/
  .diaporamaEnLongueur_OFF .carousel-inner {
    --bs-aspect-ratio: 35.84229% !important; /*très en longueur 1116 x 400 px */
  }

}

/* Si supérieur à la largeur md */
@media (min-width: 768px) {

}

body {
  /*padding-top: 5rem; /*peut etre utile si menu fixe en haut*/

/*evite style site base (EV) (ex : fond bleu)*/
  background-image: none;
  padding-top: initial;

  /*font-family : Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;*/
  /*font-size:1.3rem;*/
  /*line-height: 1.2;*/
}


.starter-template {
  /*padding: 3rem 1.5rem;*/
  padding-top: 3rem;
  /*padding-bottom: 3rem;*/
  text-align: center;
}

.starter-template p {
  text-align: left;
}

p {
  /*margin-bottom: 0.5rem;*/
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

  a
, .nav-link {
  color:#999;
}
a.cliquableAspectNeutre {
  color:initial;
}
a.cliquableAspectNeutre:hover {
  text-decoration:none;
}
 /*pour ajouter petit chevron (ou autre) à la fin d'un texte pour montrer qu'il est cliquable :*/
.picto_suite:after {
  content:" ›";
  vertical-align: baseline;
  text-decoration:none;
}
a:hover, a:focus
, .picto_suite:hover, .picto_suite:focus
{
  color:#A48B57!important;
  color: var(--mainColor_sombre)!important;
}
a.dropdown-item:hover, a.dropdown-item:focus  /*dans menu déroulant (avec déjà un fond de couleur)*/
{
  color:#76643f!important;
  color: var(--mainColor_sombre)!important;
}


.navbar .nav-link.sigleLangue {
  font-size: 1.4rem;
  /* font-weight: 400; */
  padding: 0px 4px !important;
  line-height: 1.4em;
  height: 1.4em;
  margin-left: 2px;
  display: inline-block;
  font-family: inherit;
}
.navbar .nav-link.sigleLangue.active {
  font-weight: 300;
}
.navbar .nav-link.sigleLangue:hover {
  background-color: #E2B833;
}


h1 {
  font-size: calc(2.2rem + 1.6vw); /*s'adapte un peu selon largeur view*/
  /*font-size: 4rem;*/
  /*text-transform: uppercase;*/
  margin-bottom: 3rem;

  /*FIXME : cesure sur titre (à défaut de réduire si écran trop étroit)*/
  overflow-wrap: break-word; word-break: break-word; text-overflow: ellipsis;
}
h2 {
  font-size: calc(1.8rem + 1.3vw); /*s'adapte un peu selon largeur view*/
  /*font-size: 2.8rem;*/
  font-weight: 300;
}
h3 {
  font-weight: 300;
}

.fs-4 {
  font-size: calc(0.9rem + 0.9vw)!important; /*s'adapte un peu selon largeur view*/
}

.flex-centre {
  justify-content: center;
}



.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*/
  -moz-osx-font-smoothing: grayscale;/*sous FF*/
}





/* nouvelles marges + grandes n°6 :
à la base on a :
  4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  5 - (by default) for classes that set the margin or padding to $spacer * 3
Donc 6 : encore x2
*/
.mt-6, .my-6 {
  margin-top: 6rem!important;
}
.mb-6, .my-6 {
  margin-bottom: 6rem!important;
}




/* ANIMATIONS */

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

/* FIN ANIMATIONS */



header {
  /*z-index: 2; /*si menu déroulant, évite qu'il passe sous les objets de la page (ex: diaporama/carousel)*/
  z-index: 20;  /*plus que carousel-indicators (qui est à 15) */
}
header #zone-logo { /*zone du logo au-dessus du menu*/
  text-align:center;
  padding-top: 7px; padding-bottom: 7px;
  padding-top: 2vh; padding-bottom: 2vh;
}
header #zone-logo > img { /*l'image du logo*/
  height: 110px;
  height: 15vh;
  width: auto;
  min-height: 80px;
  max-height: 130px;
}


  OFF_header .nav-link
, h1, h2, h3
, .titreSurVisuel .card .card-title
{
  font-family: AkayaKanadaka, "Times New Roman", serif ;
}
.titreSurVisuel .card .card-title {
  line-height: 1.0;
}

header .navbar {
  font-size: 1.6rem;
  /*font-variant: small-caps;*/
  /*text-transform: uppercase;*/
}
header #zone-menu .navbar a.navbar-brand { /*logo dans barre de menu*/
  opacity: 0; /*visible que si barre de menu fixed*/
}
header #zone-menu .navbar a.navbar-brand img { /*logo dans barre de menu*/
  /*height: 100%;  width: auto;*/
  height: 44px; width: auto;
  margin-bottom: -8px;
  margin-top: -10px;
  max-height: 47px;
}
header .navbar .dropdown-toggle::after { /*le chevron d'un menu indiquant un sous-menu*/
  font-size: initial;
}
header .navbar .dropdown-menu {
  /*font-size: 1.2rem;*/
  /*remet police normal suite à changement de la police dans header .navbar*/
  /*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
  /*pour légèrement détaché le sous-menu du contenu de la page :*/
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.dropdown-item {
  font-weight: 300;
}


/*Si menu avec image en fond :*/
  header #zone-menu.menuAvecVisuel /*si zone du menu avec l'image en fond*/
, header .visuelAuDessusMenu /*si image au-dessus du menu (pas superposé)*/
{
  height: 100%;
  background-image: url('/images/diapo/IMG_4013.jpg');  /*dossier_diapo*/
  background-repeat: none;
  background-position: center;
  background-size: cover;
  height: 220px;
  height: 25vh;
  min-height: 90px;
  max-height: 300px;
  position: relative;
}
header #zone-menu.menuAvecVisuel .navbar {
  bottom: 0;
  position: absolute;
  width: 100%;
/*fond menu transparent pour voir au travers l'image*/
  background-color: rgba(0,0,0 , 0.5)!important;
}
/*si barre de menus fixe*/
header #zone-menu .navbar.menusFixed {
  position: fixed!important;
  bottom: initial;  top: 0;
  background-color: rgba(0,0,0 , 0.85)!important;  /* + opaque pour ne pas être gêné par le contenu de la page passant sous le menu*/
}
header #zone-menu .navbar a.navbar-brand.logoVisible { /*logo dans barre de menu (si fixed)*/
  opacity:1;
}
header #zone-menu .navbar {
  transition: background-color 1s ease;
}



@media (max-width: 767.98px) { /* taille "md"  -  avec …,98 pour exlure la valeur 768 (fait ainsi chez bootstrap)*/

  /*enleve */
  header #zone-menu.menuAvecVisuel .navbar.menuDerouleVisible {
    /*bottom: initial;*/
    position: initial;/*permet de refaire partir le menu du haut et donc de dépasser en bas, sur le contenu de la apge, plutôt que en haut et donc sortir du cadre (en partie invisible)*/
    /*width: initial;*/
  }

  h1 { /*pour éviter de couper les longs mots sur petite largeur d'appareil*/
    /*font-size: 3.5rem;*/
  }
  h2 {
    /*font-size: 1.9rem;*/
  }


}

@media (max-width: 575.98px) { /*taille "sm"  -  avec …,98 pour exlure la valeur 768 (fait ainsi chez bootstrap)*/

  h1 { /*pour éviter de couper les longs mots sur petite largeur d'appareil*/
    /*font-size: 2.7rem;*/
  }
  h2 {
    /*font-size: 1.6rem;*/
  }

}

/*
Pour limiter largeur d'un élément
J'utilise les mêmes valeurs limite de Bootstrap : https://getbootstrap.com/docs/5.0/layout/containers/#how-they-work
*/
.max-sm { max-width: 540px; }
.max-md { max-width: 720px; }
.max-lg { max-width: 960px; }
.max-xl { max-width: 1140px; }
.max-xxl { max-width: 1320px; }
/* même principe mais avec nom plus générique */
.container-texte { /*bloc contenant du texte (pour éviter que les § soient trop large et difficile à lire*/
  max-width: 768px;  /*768 environ (je me suis basé sur valeur Medium utilisé par bootstrap*/
}

.card {
  background-color: #EEE;
  border: none;
  border-radius: initial;
}
.card-img, .card-img-top {
  border-radius: initial;
}
.titreSurVisuel .card .zone-visuel {
  position: relative; /*permettra de placer card-title en absolute */
}
.titreSurVisuel .card .card-title {
  background-color: rgba(0,0,0 , 0.5);
  XXline-height: 2.5em;
  margin-top: -2.5em;
  margin-bottom: 0; /*evite espace en-dessous si pas de texte dessous*/
  font-size:1.6rem;
  color: #FFF;
  text-align: left;

  padding: 1.25rem 0.25rem 1.25rem 1.25rem;
  vertical-align: bottom;
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.zoneServices .card .card-title {
  font-family : Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
  font-weight: 700;
  font-size: 1.2rem;
}

.oeuvreListe .card .card-title {
  font-size: 1.0rem;
  margin-bottom: 0;
}
.oeuvreListe .card-body {
  padding:0.75rem;
}
.grilleDeCartes.smallTitre .card-title {
  font-size: 1.4rem;
}
.biggerParagraphe {
  font-size: 1.7rem;
}
a.card .card-text {
  color: initial!important; /*pour ne pas faire changer la couleur du texte au survol*/
}
.card-footer {
  text-align: right;
  background-color:initial;
  border: none;
}
a.card:hover, a.card:focus
, .cliquable:hover, .cliquable:focus
{
  background-color:#E6D059;
  background-color: var(--mainColor_clair);
}
a:hover .text-muted, a:focus .text-muted  /*sur balise a*/
, a:hover .plusSombre, a:focus .plusSombre /*sur enfants de la balise a*/
{
  color: #76643f!important;
  color: var(--mainColor_sombre)!important;
}

.grilleDeCartes.zoomAuSurvol a.card .zone-overflow img  /*prepare zoom image au survol*/
, .zoomAuSurvol.zone-overflow a.imageEnFond /*ex: carte/plan page Contact*/
{
  transition: transform 0.25s ease-out;
}
.grilleDeCartes.zoomAuSurvol a.card:hover .zone-overflow img, .grilleDeCartes.zoomAuSurvol a.card:focus .zone-overflow img  /*zoom image au survol*/
, .zoomAuSurvol.zone-overflow a.imageEnFond:hover, .zoomAuSurvol.zone-overflow a.imageEnFond:focus
{
  transform: scale(1.05) rotate(-2deg);
}

/*
pour permettre centrage image si trop haute
pb si image n'occupe pas toute la hauteur => mieux vaut image en background ou toute à la même proportion
.card .zone-visuel {
  overflow: hidden;
  height: 196px;
  display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;
}
.card .zone-visuel > img {
  flex-shrink:1;
}
*/

/* images */
.imageEnFond
{
  background-repeat:none;
  background-position:center;
  background-size:cover;
  /*height:100%;*/
}
/* FIN images */

/* pied de page */

main > .container {
  padding: 60px 15px 0;
}

.footer {
  /*background-color: #FFF;*/
  color: #BBB;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
/* FIN pied de page */