/* Thème enfant de couleurs modifiant le Template CASSIOPEIA (versions de Joomla > v4.1) */
/* Basé sur le générateur de styles user.css pour Cassiopeia > https://colours.joomla.com/ */
/* Début modification template Cassiopeia */

/* NOTE : Le chargement local de la police secondaire "Lora" est dans la configuration du template (Roboto + Lora)
- Le choix pour la config est déclaré dans le fichier templateDetails.xml qui appelle le fichier CSS mignifié fonts-local_roboto+lora.min.css
  qui se trouve dans le dossier suivant > media/templates/site/cassiopeia_maison_simon/css/global/fonts-local_roboto+lora.min.css
  NOTE : cette config est stockée en BDD (table 'jnew_template_styles') dans les options du template enfant 'cassiopeia_maison_simon' 
- Le dossier contenant la police Lora se trouve ici > media/templates/site/cassiopeia_maison_simon/fonts/Lora 
- Le préchargement des polices Roboto + Lora est déclaré dans le fichier index.php du template Cassiopeia (le preload est facultatif!)
  qui se trouve dans le dossier suivant > templates/cassiopeia_maison_simon/index.php
  
ATTENTION, LES VARIABLES DES POLICES DES TEXTES SONT DECLARÉS DANS fonts-local_roboto+lora.css [ou *.min.css] du template actif :
	- soit dans le template parent media/templates/site/cassiopeia/css/global
	- soit son template enfant > media/templates/site/cassiopeia_maison_simon/css/global  */

/* REDÉFINITION DES VARIABLES DE COULEURS POUR LE TEMPLATE CASSIOPEIA */
:root {
	--dark-color: #000000;
	--light-color:#400080;
	--main-background: #FFFFFF;
	--primary-background: #E6E6E6;
	--primary-textColor: #000040;
	--secondary-background: #E7CA01;
	--secondary-textColor: #400040;
	--accent-background: #808040;
	--accent-textColor: #FFFFFF;
	--primary-gradient: linear-gradient(180deg, #5E5E00, #191919);
	--secondary-gradient: linear-gradient(180deg, #400080, #191919);
	--cassiopeia-font-weight-headings: 200;
	--cassiopeia-font-weight-normal: 50;
	--body-font-weight: 50;
	--body-font-size: 12pt;
}

/* Surcharge pour l'image d'intro des articles dans la vue Blog */
.float-center.item-image {
  text-align: center;
}
/* REDÉFINITION DES MARGES GAUCHE ET DROITE */

/* CODE ORIGINAL POUR L'OPTION FLUIDE (cf config du template) :
body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end]
} à remplacer par : */
  
/* On change la largeur des colones (left (20%) | middle (30%+30%) | right (20%) */
body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end]
}

/* CODE ORIGINAL POUR L'OPTION STATIC (cf config du template) :

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]
    }
  }
} à remplacer par : */

/* On change la largeur des colones (left (20%) | middle (30%+30%) | right (20%) */
@supports (display: grid) {
  .site-grid {
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,16.175rem) minmax(0,23.575rem) minmax(0,23.575rem) minmax(0,16.175rem) [main-end] minmax(0,1fr) [full-end];
  }
}

/* MODIFICATION DU BACKGROUND DE CASSIOPEIA */

body {
	background: url(/media/templates/site/cassiopeia_maison_simon/images/bg-master-gris-souris.jpg) var(--main-background);
	/* color: var(--main-color); */		/* color of your website */
	font-size:var(--body-font-size);
}

a {
	/* color: var(--secondary-background); color of your links */
	color: var(--light-color); /* color of your links */
}

.container-banner {
  margin: 0;
}

.container-header {
	background-color: var(--primary-background); /* Solid background of your header */
	background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
}

/* Rétablissement de la graisse 400 pour les polices système comme Roboto (--body-font-weight: 50) */
.container-header .mod-menu, ul.mod-menu.mod-list.nav, a[class~="link-button"], ol.mod-breadcrumbs.breadcrumb, nav.navbar.navbar-expand-lg, footer.container-footer.footer.full-width {
	font-weight : 400;
}

.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
	background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
	color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
	border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
	background-color: var(--accent-background); /* background of your primary buttons */
	border-color: var(--accent-background); /* border color of your primary buttons */
	color: var(--dark-color); /* text color of your primary buttons */
}

.bg-info {
	color: var(--accent-textColor);
	background-color: var(--accent-background) !important;
}

/* On donne la police Roboto aux boutons "Lire la suite" [readmore] */
div.item-content p.readmore {
	color: var(--primary-textColor);
	font-family: Roboto;
	font-size: 1em;
}

/* On change l'habillage des cadres (card) des modules/menus  */

.card {
	border: 1px solid var(--primary-background); /* border color des cards */
	border-radius: 0; /* border radius des cards */
	background-color: var(--primary-background); /* background color des cards */
}

.card-header {
	background-color: var(--primary-background); /* background color de l'entête des cards */
	border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
	color: var(--primary-textColor); /* text color of your card headers */
}

.card-body {
	padding-top: 0; /* Annulation de la marge intérieure haute des modules de menus à gauche et droite */
	padding-bottom: .3em; /* marge intérieure basse des modules de menus à gauche et droite */
	background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
	border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
	color: var(--primary-textColor); /* text color of your card bodies */
}

.card-body a {
	color: var(--primary-textColor); /* text color of your card body links */
}

.card.secondary {
	border: 1px solid var(--secondary-background); /* border color of your secondary cards */
	border-radius: 0; /* border radius of your secondary cards */
	background-color: var(--secondary-background); /* background color of your secondary cards */
}

.card-header.secondary {
	background-color: var(--secondary-background); /* background color of your secondary card headers */
	border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
	color: var(--secondary-textColor); /* text color of your card headers */
}

.card-body.secondary {
	background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
	border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
	color: var(--secondary-textColor); /* text color of your secondary card bodies */
}

.card-body.secondary a {
	color: var(--secondary-textColor); /* text color of your secondary card body links */
}

.plg_system_webauthn_login_button svg {
	fill: var(--primary-color); /* color of your webauthn login button icon */
}

/* Couleur des icones des infos flash [sidebar-right] */
/* Titre */
.icon-fa-orange { 
  	font-family: "Lora", serif;
	font-style: italic;
    font-size: 1.1em;
	font-weight: 400;
}

/* Icone livre Font Awesome appelée avec la classe fa-book */
.icon-fa-orange:before { 
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold; /* Ne pas mettre de nombre !! */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  color: #f56e23;
  padding-right: .3em;
  padding-bottom: .3em;
}

/* Dégradé jaune du fond du Card (cartouche) */
.fd-card-deg-jaune {
  background-image: linear-gradient(0deg, #F6F5CE 0%, #FEFEF6 39%);
  background-repeat: repeat-x;
  /* background-attachment: scroll; */
  background-position: left bottom;
  padding: .8em;
  box-shadow: 0 0 5px 0 #dadada;
  border: solid 1px #d3d3d3;
  border-radius: 5px;
}

/* On donne la police Lora 12pt aux textes des cartouches (card) des modules News Flash (sidebar-right) */
li.newsflash-item > p {
	font-family: "Lora", serif;
	font-size:12pt;
}

/* Surcharges du module JT Content Slider (défilement des réalisations) */

/* On change la couleur de fond des icônes du module JT Content Slider  */
.jt-module-titre {
  text-align: center;
}

/* On change la couleur de fond des icônes du module JT Content Slider  */
.jt-cs .hover-icons a {
	background-color: rgba(255, 255, 255, 0.7) !important; /* surcharge le fichier styles.css du module JT Content Slider */
}

i.fas.fa-calendar::before {
	color:rgb(128, 128, 64) !important; /* surcharge le fichier styles.css du module JT Content Slider */
}

.jt-introtext {
	font-family: "Lora", serif;
	font-size:11.5pt;
	font-style:italic;
	margin-bottom:0px !important;
	font-weight:100;
}

.jtcs_more_cat {
	padding-top: .4em !important;
	text-align: center;
	background-image: linear-gradient(0deg, #F6F5CE 0%, #FEFEF6 39%); /* dégradé jaune */
	box-shadow: 0 0 5px 0 #dadada;
	border: solid 1px #d3d3d3;
	border-radius: 5px;
}

div.jt-imagecover {
  border-radius: 3px;
  box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
}

button.owl-prev, button.owl-next {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
  line-height: 25px
}

button.owl-prev {
  left: -30px !important;
}

button.owl-next {
  right: -30px !important;
}

i.fas.fa-angle-left, i.fas.fa-angle-right {
  font-size: 25px;
  line-height: 25px;
  height:25px;
  display: block;
  color: var(--accent-background);
  text-align: center;
}

div.pg-category-box-title a {
	font-size:12pt;
	font-weight: 400;
}

/* Classes d'entête/titre des Modules de menus à gauche */

/* Titre */
.icon-fa-star-jaune { 
  color: #ffffd1;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1.05em;
  font-weight: 400;
  background-color: var(--accent-background);
}

/* Icone étoile Font Awesome appelée avec la classe fa-star */
.icon-fa-star-jaune:before { 
  color: #fccf2a;
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  padding-right: .3em;
  padding-bottom: .3em;
}

.footer {
	background-color: var(--secondary-background); /* background color of your footer */
	background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
	color: var(--secondary-color); /* text color of your footer */
}

::selection {
	background-color: var(--accent-background); /* background color of your text selection */
	color: var(--dark-color); /* text color of your text selection */
}

.metismenu.mod-menu .metismenu-item > ul {
	background-color: var(--secondary-background); /* background color of your dropdown menu */
	border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	color: var(--secondary-color); /* text color of your dropdown menu */
}

.metismenu.mod-menu .metismenu-item > ul a {
	color: var(--secondary-color); /* text color of your dropdown menu links */
}

.main-top.card.colorpicker-module {
	background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	border: none;
}

.colorpicker-module .card-header, .colorpicker-module .card-body  {
	background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
}

.article-info {
	background-color: var(--main-background); /* background color of your article info */
	padding: 10px 10px; /* padding of your article info */
}

.article-info dd {
	color: var(--main-color); /* text color of your article info */
}

/* Modif du composant avec formulaire [Contact] */
.form-control {
	/* background-color: var(--main-background); background color of your form controls */
	/* border: 1px solid var(--main-color); border color of your form controls */
	/* color: var(--primary-color); text color of your form controls */
	background: #f9f9f9;
	border: 1px solid #d3d3d3;
	-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
	box-shadow: 0 0 4px 1px rgba(0,0,0,.08);	
	color: #000;
	border-radius: 3px; /* border radius of your form controls (0 par défaut) */
}

label {
	font-weight: bold; /* font weight of your labels */
}

/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
h1, .h1 {
	font-size: clamp(18px, 5vw, 28px);
}

/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
h2, .h2 {
	font-size: clamp(16px, 5vw, 26px);
}

/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
h3, .h3 {
	font-size: clamp(14px, 5vw, 24px);
}

/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
h4, .h4 {
	font-size: clamp(12px, 5vw, 22px);
}

/* Fin modification template Cassiopeia > https://colours.joomla.com/ */
 
/* Styles des anciens boutons du template JSN EPIC 2 Pro (Joomla 3.x) */ 
/* Importation section CSS 'LINK STYLES' du fichier _typography.scss depuis du template JSN EPIC 2 Pro */

.link-button {
  border: 1px solid #333;
  border-radius: 5px;
  padding: 0 .2em;
  display: inline-block;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px; 
  }
  
.link-button span.fa {
  font-family: Arial,Helvetica,sans-serif;
  padding-left: 22px; 
  }
  
.link-button span.fa:before {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  font-family: FontAwesome; 
  }
  
.link-button .fa {
  padding-right: 5px; 
  }

.link-button:hover > span {
  opacity: 0.7; 
  }

.link-button, .link-button a {
  color: #FFF;
  text-decoration: none;
  transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -webkit-transition: 0.3s ease-out; 
  }

.link-action {
  transition: color 0.3s linear, background 0.3s ease-out;
  -moz-transition: color 0.3s linear, background 0.3s ease-out;
  -webkit-transition: color 0.3s linear, background 0.3s ease-out; 
  }

.link-highlight {
  transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -webkit-transition: 0.3s ease-out; 
  }

.link-highlight:hover {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 2px #999;
  -moz-box-shadow: 0 0 2px #999;
  -webkit-box-shadow: 0 0 2px #999; 
  }
  
.link-button.button-red {
  color: rgba(255,255,255,0.8);
  background-image: linear-gradient(-90deg, #8c2323 0%, #601919 100%);
  background-image: -o-linear-gradient(-90deg, #8c2323 0%, #601919 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #8c2323 0%, #601919 100%);
  background-image: -ms-linear-gradient(-90deg, #8c2323 0%, #601919 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #8c2323), color-stop(1, #601919));
  background-image: -webkit-linear-gradient(-90deg, #8c2323 0%, #601919 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8c2323,endColorstr=#ff601919,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8c2323,endColorstr=#ff601919,GradientType=0); 
  background-color:#8c2323;
  }
  
.link-button.button-red:hover { 
  color: #FFF;
  background-image: linear-gradient(-90deg, #bb2f2f 0%, #8c2323 100%);
  background-image: -o-linear-gradient(-90deg, #bb2f2f 0%, #8c2323 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #bb2f2f 0%, #8c2323 100%);
  background-image: -ms-linear-gradient(-90deg, #bb2f2f 0%, #8c2323 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #bb2f2f), color-stop(1, #8c2323));
  background-image: -webkit-linear-gradient(-90deg, #bb2f2f 0%, #8c2323 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffbb2f2f,endColorstr=#ff8c2323,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffbb2f2f,endColorstr=#ff8c2323,GradientType=0);
  /* background-color: rgba(0,0,0,0.5); ne fonctionne pas */
  /* filter: brightness(150%); fonctionne mais pb de blur sur les textes */ 
  background-color:#8c2323;
  }
  
.link-button.button-blue {
  color: rgba(255,255,255,0.8);
  background-image: linear-gradient(-90deg, #366da0 0%, #2c5983 100%);
  background-image: -o-linear-gradient(-90deg, #366da0 0%, #2c5983 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #366da0 0%, #2c5983 100%);
  background-image: -ms-linear-gradient(-90deg, #366da0 0%, #2c5983 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #366da0), color-stop(1, #2c5983));
  background-image: -webkit-linear-gradient(-90deg, #366da0 0%, #2c5983 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff366da0,endColorstr=#ff2c5983,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff366da0,endColorstr=#ff2c5983,GradientType=0); 
  }
  
.link-button.button-blue:hover { 
  color: #FFF;
  background-image: linear-gradient(-90deg, #4081bd 0%, #366da0 100%);
  background-image: -o-linear-gradient(-90deg, #4081bd 0%, #366da0 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #4081bd 0%, #366da0 100%);
  background-image: -ms-linear-gradient(-90deg, #4081bd 0%, #366da0 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #4081bd), color-stop(1, #366da0));
  background-image: -webkit-linear-gradient(-90deg, #4081bd 0%, #366da0 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4081bd,endColorstr=#ff366da0,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4081bd,endColorstr=#ff366da0,GradientType=0); 
  }

.link-button.button-orange {
  color: rgba(255,255,255,0.8);
  background-image: linear-gradient(-90deg, #c4701c 0%, #a05b17 100%);
  background-image: -o-linear-gradient(-90deg, #c4701c 0%, #a05b17 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #c4701c 0%, #a05b17 100%);
  background-image: -ms-linear-gradient(-90deg, #c4701c 0%, #a05b17 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #c4701c), color-stop(1, #a05b17));
  background-image: -webkit-linear-gradient(-90deg, #c4701c 0%, #a05b17 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc4701c,endColorstr=#ffa05b17,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc4701c,endColorstr=#ffa05b17,GradientType=0); 
  }
  
.link-button.button-orange:hover { 
  color: #FFF;
  background-image: linear-gradient(-90deg, #e08427 0%, #c4701c 100%);
  background-image: -o-linear-gradient(-90deg, #e08427 0%, #c4701c 100%);
  background-image: -moz-linear-gradient(50% 0% -90deg, #e08427 0%, #c4701c 100%);
  background-image: -ms-linear-gradient(-90deg, #e08427 0%, #c4701c 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #e08427), color-stop(1, #c4701c));
  background-image: -webkit-linear-gradient(-90deg, #e08427 0%, #c4701c 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe08427,endColorstr=#ffc4701c,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe08427,endColorstr=#ffc4701c,GradientType=0); 
  }

.link-button.button-green { 
  color: rgba(255,255,255,0.8); 
  background-image: linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  background-image: -o-linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  background-image: -moz-linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  background-image: -ms-linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #5c8621), color-stop(1, #48691b));
  background-image: -webkit-linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  background-image: -webkit-linear-gradient(-90deg, #5c8621 0%, #48691b 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5c8621,endColorstr=#ff48691b,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5c8621,endColorstr=#ff48691b,GradientType=0); 
  }
  
.link-button.button-green:hover {
  color: #FFF;
  background-image: linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  background-image: -o-linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  background-image: -moz-linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  background-image: -ms-linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #6aab10), color-stop(1, #5c8621));
  background-image: -webkit-linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  background-image: -webkit-linear-gradient(-90deg, #6aab10 0%, #5c8621 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6aab10,endColorstr=#ff5c8621,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6aab10,endColorstr=#ff5c8621,GradientType=0); 
  }
  
.link-button.button-dark {
  color: rgba(255, 255, 255, 0.8);
  background-image: linear-gradient(-90deg, #4f4f4f 0%, #333333 100%);
  background-image: -o-linear-gradient(-90deg, #4f4f4f 0%, #333333 100%);
  background-image: -moz-linear-gradient(-90deg, #4f4f4f 0%, #333333 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #4f4f4f), color-stop(1, #333333));
  background-image: -webkit-linear-gradient(-90deg, #4f4f4f 0%, #333333 100%);
  background-image: -ms-linear-gradient(-90deg, #4f4f4f 0%, #333333 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4f4f4f,endColorstr=#ff333333,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4f4f4f,endColorstr=#ff333333,GradientType=0); 
  }
  
.link-button.button-dark:hover {
  color: #FFF;
  background-image: linear-gradient(-90deg, #6c6c6c 0%, #4f4f4f 100%);
  background-image: -o-linear-gradient(-90deg, #6c6c6c 0%, #4f4f4f 100%);
  background-image: -moz-linear-gradient(-90deg, #6c6c6c 0%, #4f4f4f 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #6c6c6c), color-stop(1, #4f4f4f));
  background-image: -webkit-linear-gradient(-90deg, #6c6c6c 0%, #4f4f4f 100%);
  background-image: -ms-linear-gradient(-90deg, #6c6c6c 0%, #4f4f4f 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6c6c6c,endColorstr=#ff4f4f4f,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6c6c6c,endColorstr=#ff4f4f4f,GradientType=0); 
  }
  
.link-button.button-light {
  color: rgba(0, 0, 0, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #cecece 0%, #bababa 100%);
  background-image: -o-linear-gradient(-90deg, #cecece 0%, #bababa 100%);
  background-image: -moz-linear-gradient(-90deg, #cecece 0%, #bababa 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #cecece), color-stop(1, #bababa));
  background-image: -webkit-linear-gradient(-90deg, #cecece 0%, #bababa 100%);
  background-image: -ms-linear-gradient(-90deg, #cecece 0%, #bababa 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece,endColorstr=#ffbababa,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece,endColorstr=#ffbababa,GradientType=0); 
  }

.link-button.button-light:hover {
  color: #000;
  border-color: #838383;
  background-image: linear-gradient(-90deg, white 0%, #cecece 100%);
  background-image: -o-linear-gradient(-90deg, white 0%, #cecece 100%);
  background-image: -moz-linear-gradient(-90deg, white 0%, #cecece 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, white), color-stop(1, #cecece));
  background-image: -webkit-linear-gradient(-90deg, white 0%, #cecece 100%);
  background-image: -ms-linear-gradient(-90deg, white 0%, #cecece 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffcecece,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffcecece,GradientType=0); 
  }
  
.link-button.button-yellow {
  color: rgba(0, 0, 0, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #e7ca01 0%, #bfa801 100%);
  background-image: -o-linear-gradient(-90deg, #e7ca01 0%, #bfa801 100%);
  background-image: -moz-linear-gradient(-90deg, #e7ca01 0%, #bfa801 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #e7ca01), color-stop(1, #bfa801));
  background-image: -webkit-linear-gradient(-90deg, #e7ca01 0%, #bfa801 100%);
  background-image: -ms-linear-gradient(-90deg, #e7ca01 0%, #bfa801 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe7ca01,endColorstr=#ffbfa801,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe7ca01,endColorstr=#ffbfa801,GradientType=0); 
  }

.link-button.button-yellow:hover {
  color: #000;
  border-color: #838383;
  background-image: linear-gradient(-90deg, #feeb5f 0%, #e7ca01 100%);
  background-image: -o-linear-gradient(-90deg, #feeb5f 0%, #e7ca01 100%);
  background-image: -moz-linear-gradient(-90deg, #feeb5f 0%, #e7ca01 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #feeb5f), color-stop(1, #e7ca01));
  background-image: -webkit-linear-gradient(-90deg, #feeb5f 0%, #e7ca01 100%);
  background-image: -ms-linear-gradient(-90deg, #feeb5f 0%, #e7ca01 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffeeb5f,endColorstr=#ffe7ca01,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffeeb5f,endColorstr=#ffe7ca01,GradientType=0); 
  }
  
.link-button.button-violet {
  color: rgba(255, 255, 255, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #400080 0%, #191919 100%);
  background-image: -o-linear-gradient(-90deg, #400080 0%, #191919 100%);
  background-image: -moz-linear-gradient(-90deg, #400080 0%, #191919 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #400080), color-stop(1, #191919));
  background-image: -webkit-linear-gradient(-90deg, #400080 0%, #191919 100%);
  background-image: -ms-linear-gradient(-90deg, #400080 0%, #191919 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff400080,endColorstr=#ff191919,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff400080,endColorstr=#ff191919,GradientType=0); 
  }

.link-button.button-violet:hover {
  color: #fff;
  border-color: #838383;
  background-image: linear-gradient(-90deg, #7a00f6 0%, #400080 100%);
  background-image: -o-linear-gradient(-90deg, #7a00f6 0%, #400080 100%);
  background-image: -moz-linear-gradient(-90deg, #7a00f6 0%, #400080 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #7a00f6), color-stop(1, #400080));
  background-image: -webkit-linear-gradient(-90deg, #7a00f6 0%, #400080 100%);
  background-image: -ms-linear-gradient(-90deg, #7a00f6 0%, #400080 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7a00f6,endColorstr=#ff400080,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7a00f6,endColorstr=#ff400080,GradientType=0); 
  }
  
.link-button.button-pourpre {
  color: rgba(255, 255, 255, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #5a005a 0%, #400040 100%);
  background-image: -o-linear-gradient(-90deg, #5a005a 0%, #400040 100%);
  background-image: -moz-linear-gradient(-90deg, #5a005a 0%, #400040 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #5a005a), color-stop(1, #400040));
  background-image: -webkit-linear-gradient(-90deg, #5a005a 0%, #400040 100%);
  background-image: -ms-linear-gradient(-90deg, #5a005a 0%, #400040 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5a005a,endColorstr=#ff400040,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5a005a,endColorstr=#ff400040,GradientType=0); 
  }

.link-button.button-pourpre:hover {
  color: #fff;
  border-color: #838383;
  background-image: linear-gradient(-90deg, #8d008d 0%, #5a005a 100%);
  background-image: -o-linear-gradient(-90deg, #8d008d 0%, #5a005a 100%);
  background-image: -moz-linear-gradient(-90deg, #8d008d 0%, #5a005a 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #8d008d), color-stop(1, #5a005a));
  background-image: -webkit-linear-gradient(-90deg, #8d008d 0%, #5a005a 100%);
  background-image: -ms-linear-gradient(-90deg, #8d008d 0%, #5a005a 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8d008d,endColorstr=#ff5a005a,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8d008d,endColorstr=#ff5a005a,GradientType=0); 
  }
  
.link-button.button-indigo {
  color: rgba(255, 255, 255, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #00007b 0%, #000040 100%);
  background-image: -o-linear-gradient(-90deg, #00007b 0%, #000040 100%);
  background-image: -moz-linear-gradient(-90deg, #00007b 0%, #000040 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #00007b), color-stop(1, #000040));
  background-image: -webkit-linear-gradient(-90deg, #00007b 0%, #000040 100%);
  background-image: -ms-linear-gradient(-90deg, #00007b 0%, #000040 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00007b,endColorstr=#ff000040,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00007b,endColorstr=#ff000040,GradientType=0); 
  }

.link-button.button-indigo:hover {
  color: #fff;
  border-color: #838383;
  background-image: linear-gradient(-90deg, #0000b6 0%, #00007b 100%);
  background-image: -o-linear-gradient(-90deg, #0000b6 0%, #00007b 100%);
  background-image: -moz-linear-gradient(-90deg, #0000b6 0%, #00007b 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #0000b6), color-stop(1, #00007b));
  background-image: -webkit-linear-gradient(-90deg, #0000b6 0%, #00007b 100%);
  background-image: -ms-linear-gradient(-90deg, #0000b6 0%, #00007b 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000b6,endColorstr=#ff00007b,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000b6,endColorstr=#ff00007b,GradientType=0); 
  }
  
.link-button.button-dore {
  color: rgba(255, 255, 255, 0.8);
  border-color: #aaa;
  background-image: linear-gradient(-90deg, #5e5e00 0%, #191919 100%);
  background-image: -o-linear-gradient(-90deg, #5e5e00 0%, #191919 100%);
  background-image: -moz-linear-gradient(-90deg, #5e5e00 0%, #191919 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #5e5e00), color-stop(1, #191919));
  background-image: -webkit-linear-gradient(-90deg, #5e5e00 0%, #191919 100%);
  background-image: -ms-linear-gradient(-90deg, #5e5e00 0%, #191919 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5e5e00,endColorstr=#ff191919,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff5e5e00,endColorstr=#ff191919,GradientType=0); 
  }

.link-button.button-dore:hover {
  color: #fff;
  border-color: #838383;
  background-image: linear-gradient(-90deg, #abab00 0%, #2c2c2c 100%);
  background-image: -o-linear-gradient(-90deg, #abab00 0%, #2c2c2c 100%);
  background-image: -moz-linear-gradient(-90deg, #abab00 0%, #2c2c2c 100%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #abab00), color-stop(1, #2c2c2c));
  background-image: -webkit-linear-gradient(-90deg, #abab00 0%, #2c2c2c 100%);
  background-image: -ms-linear-gradient(-90deg, #abab00 0%, #2c2c2c 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabab00,endColorstr=#ff2c2c2c,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabab00,endColorstr=#ff2c2c2c,GradientType=0); 
  }

/* Fin importation section CSS 'LINK STYLES' */

/* MODIFICATIONS MENUS & RESEAUX SOCIAUX */

/* Modif de la marge intérieure des items de menu */
.metismenu.mod-menu .metismenu-item {
  padding: .5em .8em;
  line-height: 1.2rem;
}

/* SOCIAL ICONS */

#social-icons { float: right; }
#social-icons ul { float: right; margin: 0; }
#social-icons ul li {
    float: left;
    list-style: none;
    margin-left: 10px;
}
#social-icons ul li a {
    display: block;
    text-indent: -999em;
    background-image: url(/media/templates/site/cassiopeia_maison_simon/images/icons-social.png);
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    opacity: 0.7;
}
#social-icons ul li:hover a { opacity: 1; }
a#facebook { background-position: 0 0; }
a#twitter { background-position: 0 -24px; }
a#googleplus {	background-position: 0 -48px; }
a#viadeo { background-position: 0 -312px; }
a#rss { background-position: 0 -264px; }

/* modification z-index pour que le menu dépliable passe au-dessus du module du slider ARI */
.ari-image-slider-wrapper {
  z-index: 0;
}

/* Modification de la taille de la police du fil d'Ariane [breadcrumb] */
nav.mod-breadcrumbs__wrapper {
	font-size:10pt;
}

/* reset de la marge bottom des détails de l'article */
ol, ul, dl {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0;
}

/* ajout d'une marge pour les paragraphes de textes du composant Articles */
.com-content-article__body > p {
  margin: 0.7rem 0;
}

/* ajout d'une marge pour les paragraphes de textes du composant Articles */
.com-content-article__body > ol > li, .com-content-article__body > ul > li, .com-content-article__body > dl > li {
  margin: 0.2rem 0;
}

/* suppression des bordures blanches des diapos du thème Simple de Phocagallery  */
.pg-item-box, .pg-category-box {
  border: 0;
}

/* Ajout d'une bordure autour des photos dans les articles */
.image-border {
	padding: 5px;
	border: 1px solid #ccc;
	background-color: white;
}

/* On donne la police "Lora" à tous les titres, les <p> et les listes ul, ol du texte courant des articles */
div.page-header, 
div.com-content-article__body > p, 
div.com-content-article__body > ul, 
div.com-content-article__body > ol, 
div.com-content-article__body > table, 
div.item-content > p, 
div.item-content > ul, 
div.item-content > ol, 
div.item-content > table { 
  font-family: "Lora", serif;
}
 
/* On donne la police Roboto aux sommaires des articles qui ont plusieurs pages */
div.article-index > div.card-body, div.article-index > div.card-body > h3 {
  font-family: Roboto;
  font-size: 11pt;
  font-style: normal;
  font-weight: 400; 
}

/* On change la graisse et la taille du titre h3 des sommaires */
div.article-index > div.card-body > h3 {
  font-weight: 600;
  font-size: 16pt;
  margin-top:.3em; 
}

/* On donne la police Roboto-400 au texte des boutons */
a.link-button {
  font-family: Roboto;
  font-weight: 400;
  font-size: 13pt;
} 

/* On change la graisse de la police Roboto du sélecteur de pages de l'article (en bas) et du compteur de pages (sous le titre de l'article) */
a.page-link, div.pagenavcounter {
  font-weight: 400;
}

/* On change la couleur du texte du compteur de pages (sous le titre de l'article) */
div.pagenavcounter {
  color: #656577; /* équivalent à 'dimgray' */
} 

/* CLASSES POUR LE COMPOSANT WEBLINK DE JOOMLA */

/* on donne la graisse 400 à la police Roboto des liens <a> */
div.com-content-categories__item > div > a {
	font-weight: 400;
}

/* on donne la graisse 300 à la police Roboto au texte <p> de description des liens */
div.list-title.list-group-item > div > p {
	font-weight: 300;
}

/* on donne la graisse 400 à la police Roboto des catégories de liens */
div.list-title.list-group-item a.category {
	font-weight: 400;
}

/* on donne la police "Lora" avec une graisse 150 à la description des liens */
div.list-title.list-group-item > div > p, .site.com_weblinks div.item-page > div > div > p {
	font-size:11pt;
	font-family: "Lora", serif;
	font-weight: 150;
	font-style: italic;
	text-align: justify;
	line-height:18pt;
}

div.list-title.list-group-item a.link-button.button-light, .site.com_weblinks div.item-page a.link-button.button-light {
	font-size:11pt;
	font-style: normal;
}

.weblink-align-img-gauche {
	float:left;
	margin-right:1em;}
.weblink-align-img-droite {
	float:right;
	margin-left: 1em;
	}

@media (width <= 1199.98px) {
.weblink-align-img-gauche {float:none;margin:0 auto;display: block;}
.weblink-align-img-droite {float:none;margin:0 auto;display: block;}
}

@media (width <= 990px) {
.weblink-align-img-gauche {float:left;margin-right: 1em;}
.weblink-align-img-droite {float:right;margin-left: 1em;}
}

@media (width <= 620px) {
.weblink-align-img-gauche {float:none;margin:0 auto;display: block;}
.weblink-align-img-droite {float:none;margin:0 auto;display: block;}
}


/* CLASSES POUR LE COMPOSANT CONTACT DE JOOMLA */

/* on donne la graisse 300 à la police Roboto du texte du composant Contact */
main div.com-contact.contact div.com-contact__container {
	font-weight: 450;
}

/* SECTION DES CLASSES POUR LES MODULES */

.container-header .container-nav {
  padding-bottom: .5em;
}

.container-header nav {
  margin-top: 0;
}

/* Container des icones des réseaux sociaux (là où se trouvait le module search de Cassiopeia) */
.container-header .container-search {
  margin: auto 0.5em;
}

/* suppression du fond de couleur blanc dans les détails d'un article (date de publication) */
.article-info, .article-info dd {
  background-color: transparent;
}

/* Modif pour plugin Sigplus : ajout d'une ombre sous les vignettes des photos des galeries */

a.sigplus-image > img {
  border-radius: 3px;
  box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
}

.slideplus-content > div img, noscript.slideplus > ul > li img {
  max-width: 99%;
}

.slideplus-content {
  padding: 12px;
}

.sigplus-gallery > ul > li {
  padding: 0.68em !important;
}

/* Modifs pour aligner et habiller le Module "Random Image" natif */

div.mod-randomimage.random-image { 
  text-align: center !important;
}

.mod-randomimage.random-image > img, .mod-randomimage.random-image > a > img { 
  border-radius: 4px;
  box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
  /* border: 4px solid #ffffff; */
  margin: 0 auto;
}

/* modif pour le cartouche de texte (adresse) de la carte OSMAP (carte de géolocalisation) */
div.leaflet-popup-content {
	font-family: Roboto;
	font-weight: 500;
}

/* On donne la police "Lora" aux textes du module custom [HTML] intégrant la carte OSMAP avec le plugin [UP] */
div.mod-custom.custom > p, div.mod-custom.custom > ul {
	font-family: var(--cassiopeia-font-family-headings);
}

.mod-custom.custom div small {
  display: block;
  margin: 0 auto 10px;
  width: 50%;
}

/* Importation de classes du fichier custom.css du template JSN Epic 2 Pro */

/* Cartouche jaune pour texte important */
.text-highlight {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: .2em .5em;
    background: #ffffaa;
	margin: 1.2em 0 .5em !important;
	color: #000;
	font-family: "Lora", serif;
	font-style: italic;
    font-size: 1.1em;
	line-height: 1.5em;
}
/* Cartouche bleu pour texte informationnel */
.text-info {
    padding: .8em .8em .8em 5em;
    /* min-height: 50%; */
    border-top: 2px solid #b7d2f2;
    border-bottom: 2px solid #b7d2f2;
    background: #dbe7f8 url(../../cassiopeia_maison_simon/images/icon-text-info.png) no-repeat;
  	background-position: 3% 50%;
	margin: 10px 0;
	font-family: "Lora", serif;
	font-style: italic;
    font-size: 1.1em;
  	line-height: 1.5;
}

/* fin importation classes CSS du fichier custom.css du template JSN Epic 2 Pro */

.page-link, .page-link:hover {
  color:var(--link-color);
}