/*	============================================================================
	Empécher de sélectionner certains textes pour le copier
	https://fr.w3docs.com/snippets/css/comment-desactiver-la-selection-de-texte-copier-couper-coller-et-clic-droit-sur-une-page-web.html
	============================================================================
*/ 
.unselectableData {
   -webkit-user-select: none;		/* Chrome, Opera (older versions), IOS Safari */
   -webkit-touch-callout: none;		/* Safari */
   -moz-user-select: none;			/* Mozilla */
   -ms-user-select: none;			/* Internet Explorer, Edge */
   -khtml-user-select				/* Navigateurs KHTML(Konqueror) */
   user-select: none;				/* Chrome à partir de la version 54.0 et Opera à partir de la version 41.0 prennent en charge user-select sans le préfixe -webkit- */
 }

/*	============================================================================
	Redéfinition de certains paramètres mis en place par d'autre CSS
	dont bootstrap.css
	============================================================================
*/
body {
  line-height: initial;
}

/*	============================================================================
	Définition du cellpadding dans les tableaux, non pris en compte en HTML5
	============================================================================
*/
table tr td {
 	padding: 5px;
}

/*	============================================================================
	Paramétrage des usemap (voir également les script jQuery)
	============================================================================
*/
img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

/*	============================================================================
	Redéfinition de l'identation pour les IcoMoon lorsqu'on les utilise
	par exemple dans un paragraphe avec une indentation
	(l'IcoMoon chevauche les premiers caractères du texte)
	============================================================================
*/

[class^="icon-"],
[class*=" icon-"] {
	text-indent: 0;
}

/*	============================================================================
	Ajout d'icones de la font IcoMoon
	Bootstrap intègre la font IcoMoon, mais pas tous les caractères
	============================================================================
*/
.icon-phone:before {
	content: "\e260";
}
.icon-phone-2:before {
	content: "\e261";
}


/*	============================================================================
	Spécial impression: ne pas imprimer certains éléments
	============================================================================
*/
@media print {
    /* Les tooltip ne sont pas imprimés, mais laisse un grand espace vide lors de l'impression */
    span.tooltipgc_tooltip {
        display: none;
    }
}

/* ========================================================================
   Affichage d'une image en haut à droite, dans le fond de page
   voir le code correspondant (exemple: un gif animé)
   ========================================================================
*/

#gif_anime_wrapperD {
	position : fixed;
    right	 : 10px;
    top 	 : 10px;
}

/* ========================================================================
   Affichage d'une image en haut à gauche, dans le fond de page
   voir le code correspondant (exemple: un gif animé)
   ========================================================================
*/

#gif_anime_wrapperG {
	position : fixed;
    left	 : 10px;
    top 	 : 10px;
}

/*	============================================================================
	Bouton scrollToTop dans les articles (voir la fonction associée)
	Le bouton s'affiche en bas, dès que l'on descend dans l'article
	============================================================================
*/

.top_link {
	position				: fixed;
    right					: 5px;
    bottom					: 50px;
    display					: none;
    padding					: 10px;
    background				: #ddd;
    -moz-border-radius		: 40px;
    -webkit-border-radius	: 40px;
    border-radius			: 40px;
    opacity					: 0.9;
    z-index					: 2000;
}

/*	============================================================================
	Redéfinition des ascenseurs
	============================================================================
::-webkit-scrollbar applique des styles sur l'ensemble de la barre.
::-webkit-scrollbar-button concerne les flèches de défilement du haut et du bas.
::-webkit-scrollbar-thumb désigne la "poignée" de la barre, c'est à dire la partie qui se déplace.
::-webkit-scrollbar-track représente la "gouttière" de la barre de défilement
::-webkit-scrollbar-track-piece désigne la partie de la gouttière qui n'est pas couverte par les flèches de défilement.
::-webkit-scrollbar-corner désigne le coin où les barres horizontales et verticales se rencontrent.
::-webkit-resizer représente le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.
*/

/* scrollbar styling non-standard version */
/*
html::-webkit-scrollbar {
  width: 2rem;
  background-color: blue; 
}

html::-webkit-scrollbar-thumb {
    background: yellow; 
}

html::-webkit-scrollbar-button {
	background: green;
}
*/

/* scrollbar styling standard version (fonctionne uniquement sous Firefox) */
html {
  scrollbar-color: yellow #555555;
  scrollbar-width: auto;
}


/*	============================================================================
	Bouton "Lire la suite"
	============================================================================
*/
.btnlirelasuite {
  	margin: 0 auto;
	min-width: 140px;
  	margin-top: 15px;
  margin-bottom: 15px;
  	padding-top: 3px;
  	padding-bottom: 3px;
  	font-family: georgia, palatino;
  	text-align: center;
    font-weight: bold;
  	background-color: #b22222;
  	color: white;
  	outline: none;
  	text-decoration: none;

  	-moz-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
  
  	box-shadow: #555555 3px 3px 3px 0px;
    -moz-box-shadow: #555555 3px 3px 3px 0px;
    -webkit-box-shadow: #555555 3px 3px 3px 0px;
}

.btnlirelasuite:hover {
  	background-color: #0080ff;
}

.btnlirelasuite:active, .btnlirelasuite:focus {
	background-color: #b22222; 
}


/*	============================================================================
	Boutons d'accès aux autres pages de l'histoire des Écoles
	============================================================================
*/

[class*="btnHistoEcole"] {
  	margin: 0 auto;
	min-width: 140px;
  	/*margin-top: 15px;
 	margin-bottom: 15px;*/
  	margin: 15px 5px;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	font-family: georgia, palatino;
  	text-align: center;
    font-weight: bold;
  	background-color: #ff9900;
  	color: black;
  	outline: none;
  	text-decoration: none;

  	-moz-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
  
  	box-shadow: #555555 3px 3px 3px 0px;
    -moz-box-shadow: #555555 3px 3px 3px 0px;
    -webkit-box-shadow: #555555 3px 3px 3px 0px;
} 

.btnHistoEcole {
	background-color: #ff9900;
}

.btnHistoEcole_Selected {
	background-color: #13B93E;
}

.btnHistoEcole:hover {
  color: white;	
  background-color: #0080ff;
  outline: none;
  text-decoration: none;
}

.btnHistoEcole:active, .btnHistoEcole:focus {
  	color: white;
	background-color: #ff9900;
  	outline: none;
  	text-decoration: none;
}


/*	============================================================================
	Boutons d'accès aux listes des musées et Office de tourisme
	en Deux-Sèvres et Vienne
	============================================================================
*/

[class*="btnListeMusee"] {
  	margin: 0 auto;
	min-width: 140px;
  	/*margin-top: 15px;
 	margin-bottom: 15px;*/
  	margin: 15px 5px;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	font-family: georgia, palatino;
  	text-align: center;
    font-weight: bold;
  	background-color: #ff9900;
  	color: black;
  	outline: none;
  	text-decoration: none;

  	-moz-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
  
  	box-shadow: #555555 3px 3px 3px 0px;
    -moz-box-shadow: #555555 3px 3px 3px 0px;
    -webkit-box-shadow: #555555 3px 3px 3px 0px;
}

.btnListeMusee_79 {
	background-color: #6bb474;
}

.btnListeMusee_86 {
	background-color: yellow;
}
.btnListeMusee_Partenaire {
	background-color: cyan;
}

.btnListeMusee_Selected {
	background-color: #13B93E;
}

.btnListeMusee:hover {
  color: white;	
  background-color: #0080ff;
  outline: none;
  text-decoration: none;
}

.btnListeMusee:active, .btnListeMusee:focus {
  	color: white;
	background-color: #ff9900;
  	outline: none;
  	text-decoration: none;
}

/*	============================================================================
	Redéfinition de la couleur des liens dans les btn
	============================================================================
*/

.btn a:hover, btn a:focus, btn a:active {
	color: white; 
}

/*	============================================================================
	Affichage du bandeau vertical d'icônes à droite de la page
	============================================================================
*/
#menu_ancre_droite {
  	display: block;
  	right:0;
    position: fixed;
    top: 30%;
    width: 45px;
	padding-left:8px;
    /* background-color: #555555; */
  	/*background-color: #770D69; *//* Magenta */
  	background-color: #4169E1; /* Bleu roi */
    color: white;
  	list-style:none;
}

#menu_ancre_droite li {
  	line-height: 3;
}

/*	============================================================================
	Repositionnement des icônes "Imprimer" et "Mail à un ami", normalement en
	haut à droite de l'article, sur le bord droit de la page du site
	============================================================================
*/
.tck-article-tools-right {
	/* float: right;*/
	display: block;
  	right:0;
    position: fixed;
    top: 25%;
  	width: 40px;
}

/*	============================================================================
	Modification du formulaire de contact natif de Joomla
	============================================================================
*/

/* Modification de la couleur de fond du formulaire de contact */
.well {
	/*background-color: #888888;*/
	background-color: inherit; /* Couleur de fond du parent */
}

/* Agrandissement de la largeur des champs de saisie (206px de base) */
input, textarea, .uneditable-input {
    width: 95%;
}


/*	============================================================================
	Modification de l'icône du fil d'Ariane par une petite maison (home)
	Origine bootstrap.css du template
	Font IcoMoon qui se trouve dans \media\jui\fonts

	ou modification du fichier modules\mod_breadcrumbs\tmpl\default.php
	ligne 20 remplacer : <span class="divider icon-location"></span>
	par <span class="divider icon-home" style="color: #ff8400;"></span>
	============================================================================
*/
.icon-location:before {
	/*content: "\21";
  	color: #ff8400;*/
}

/*	============================================================================
	Modification des marges du fil d'Ariane et de la couleur du dernier champ
	============================================================================
*/

#blockariane > .inner {
	margin-top: 0;
	color: #aaa; 
}

.breadcrumb {
	padding: 0 15px;
	margin: 0px;	
}

.breadcrumb > .active {
	color: #aaa;  
}

/*	============================================================================
	Personnalisation des titres des articles
	============================================================================
*/

.titre_page {
 	width : 100%;
  	text-align: left;
    /*padding-left: 20px;*/
  	margin-bottom: 20px;
    font-family: andale mono, times;
  	font-size: 36pt;
    font-weight: bold;
  	/*font-style: italic;*/
  	text-shadow: 2px 2px 0 #aaa; 
  
  	border-top:    2px solid #eee;
    border-bottom: 2px solid #eee;
}


[class*="titre_article"] {

    text-align: left;
    padding: 5px 0px 5px 20px;
  	margin-bottom: 20px;
    font-family: georgia, palatino;
    font-weight: bold;
  	text-shadow: 3px 3px 0 #777777;
  
    -moz-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;

}

.titre_article_bordeaux {
    background: #6d071a;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_vert_de_chrome {
    background: #18391e;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_bleu_cadet {
    background: #5F9EA0;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_indigo {
    background: #4B0082;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_dimgrey {
    background: #696969;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_orange {
    background: #CC5500;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_violet {
    background: #673ab7;
  	color: #ffffff;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}

.titre_article_moutarde {
    background: #dcb233;
  	color: #000000;
  
    box-shadow: #ffd700 3px 3px 3px 0px;
    -moz-box-shadow: #ffd700 3px 3px 3px 0px;
    -webkit-box-shadow: #ffd700 3px 3px 3px 0px; 
}


/*	============================================================================
	Indentation et justification du texte des paragraphes
	============================================================================
*/

.paragraphe {
  	margin-bottom: 0;
    text-indent: 1.5em;
  	text-align: justify;
    font-size: 12pt;
    line-height: 1.5;
}

.paragraphe + paragraphe {
  	/*margin-top: 0;*/
}

/*	============================================================================
	Prise en charge de fontes de caratères pour les lettrines principalement
	Les fontes sont installées dans le répertoire images/fonts
	============================================================================
*/

/* https://fonts.google.com/specimen/Molle */
	@font-face {font-family: "Molle-Italique"; src: url('../../../images/fonts/Molle-Italic.ttf');}

/* https://fonts.google.com/specimen/Lily+Script+One */
	@font-face {font-family: "Lily-Script-One"; src: url('../../../images/fonts/LilyScriptOne-Regular.ttf');}

/* https://fonts.google.com/specimen/Ewert */
	@font-face {font-family: "Ewert-Regular"; src: url('../../../images/fonts/Ewert-Regular.ttf');}

/* https://fonts.google.com/specimen/Berkshire+Swash */
	@font-face {font-family: "BerkshireSwash-Regular"; src: url('../../../images/fonts/BerkshireSwash-Regular.ttf');}

/*	============================================================================
	Lettrine sur la première lettre d'un paragraphe
	Pour insérer plusieurs lettrines dans la même page, il faut le paragraphe 
	dans une div
	Nota: la suppression de l'indentation ne fonctionne pas, il faut l'ajouter
	dans un style dans le code HTML:
	<div><p class="paragraphe lettrine_xxxx" style="text-indent: 0;">texte</div>
	============================================================================
*/

/*  font-family: ....;
	Mole-Italique
	Lily-Script-One
	Ewert-Regular
	BerkshireSwash-Regular
*/

/* Commun à toutes les classes de lettrine */
[class*="lettrine"]:first-of-type:first-letter {
	float: left;
    color: black;
    text-shadow:3px 3px 3px #555555;  
    font-size: 4em;  
    line-height: 80%; 
    margin: -.1em 0px;
    padding-right: .2em;
    text-indent: 0; 
}

/* Différentes lettrines */
.lettrine-molle:first-of-type:first-letter {
  	font-family: Molle-Italique;
}

.lettrine-lily:first-of-type:first-letter {
  	font-family: Lily-Script-One;
}

.lettrine-ewert:first-of-type:first-letter {
  	font-family: Ewert-Regular;
}

.lettrine-berkshireSwash:first-of-type:first-letter {
  	font-family: BerkshireSwash-Regular;
}

/* Couleurs de lettrine */
.lettrine-noire:first-of-type:first-letter {
  	color: black;
}

.lettrine-rouge:first-of-type:first-letter {
  	color: red;
}

.lettrine-bleue:first-of-type:first-letter {
  	color: blue;
}

.lettrine-verte:first-of-type:first-letter {
  	color: green;
}

/* -----------------------------------------------------------------

Redéfinition des caractéristiques d'un tableau
Template Creator permet de donner un style aux tableaux,
mais tous les tableaux prennent ces mêmes caractéristiques.

Aucun style n'est à définir dans Template Creator, et appliquer
la classe suivante uniquement aux tableaux qui doivent prendre
les paramètres definis ci-dessous:
	Style du tableau: Encadré
	Options du tableau: Alterné et couleur de survol
	Style de bordure: #ffffff 1px solid
	Coins arrondis: 6	
	Couleur alternée: #cccccc
	Couleur de survol: #d4d00f
-------------------------------------------------------------------- */

/* Position du titre des tableaux en haut ou en bas du tableau (en bas par défaut) */
.captiontop {
  caption-side : top; 
}

.captionbottom {
  caption-side : bottom; 
}

/* Couleur de fond des zones de saisie des filtres des tableaux */
.zoneSaisieFiltreTableau {
	background-color: #ffff00;
}

/* Définition globale du tableau (classe à appliquer)*/
.MyTable {
	background-color: #DDD;
    border-width: 1px 1px 1px 0px;
    border-style: solid solid solid none;
    border-color: #FFF #FFF #FFF -moz-use-text-color;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-collapse: separate;
    border-radius: 6px;
    margin-bottom: 20px;
    max-width: 100%;
    border-spacing: 0px;
}

/* Ligne de titre du tableau */
.MyTable thead tr {
	height: 40px;
	background-color: #88c3e7;
}

/* Cellule de titre du tableau */
.MyTable thead tr th, .MyTable thead tr td {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

/* Couleur alternée */
.MyTable tbody > tr:nth-child(2n+1) > td, .MyTable tbody > tr:nth-child(2n+1) > th {
    background-color: #CCC;
}

/* Couleur de survol des lignes du tableau */
.MyTable tbody tr:hover > td, .MyTable tbody tr:hover > th {
    background-color: #D4D00F;
}

/* Cellules du tableau */

.MyTable caption + thead tr:first-child th,
 .MyTable caption + thead tr:first-child td,
 .MyTable colgroup + thead tr:first-child th,
 .MyTable colgroup + thead tr:first-child td,
 .MyTable thead:first-child tr:first-child th,
 .MyTable thead:first-child tr:first-child td {
    border-top: 0px none;
}

/* Cellules du tableau */
.MyTable th, .MyTable td {
	border-left: 1px solid #FFF;
    padding: 5px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #FFF;
}

/*	============================================================================
	Ombrage sur une image
	La première valeur indique le décalage horizontal vers la droite
    La deuxième correspond au décalage vertical vers le bas
    La troisième indique la force du dégradé
    La quatrième indique la couleur
	============================================================================
*/

.ombrage-image {
  box-shadow: 8px 8px 3px #aaa;
  
  /* pour ancienne version de navigateur */
  -moz-box-shadow: 8px 8px 3px #aaa;
  -webkit-box-shadow: 8px 8px 3px #aaa;
}

/*	============================================================================
	15 effets CSS3 pour vos images
	https://www.web-eau.net/blog/15-effets-css3-pour-vos-images
	Les images doivent être dans une div
	exemple:
	<div class="zoom">
      <img src="images/articles/test/Image1.jpg" />   
      <img src="images/articles/test/Image2.jpg" />   
      <img src="images/articles/test/Image3.jpg" />
	</div>
	============================================================================
*/

/* Effet ZOOM */
.effetzoom img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.effetzoom img:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}


/* DÉZOOM */
.effetzoom-out img {
	-webkit-transform: scale(1);
	transform: scale(1);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetzoom-out img:hover {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* ROTATION */
.effetrotate img {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.effetrotate img:hover {
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}


/* ROTATION ET ZOOM */
.effetrotate-zoom img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetrotate-zoom img:hover {
	-webkit-transform: rotate(10deg) scale(1.25);
	transform: rotate(10deg) scale(1.25);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* ROTATION ET DÉZOOM */
.effetrotate-zoom-out img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetrotate-zoom-out img:hover {
	-webkit-transform: rotate(10deg) scale(0.8);
	transform: rotate(10deg) scale(0.8);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* SLIDE */
.effetslide img {
	margin-left: 0px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.effetslide img:hover {
	margin-left: -30px;
}


/* IMAGE RONDE */
.effetrounded img {
  width: 200px; /* largeur de l'image */
  height: auto; /* hauteur de l'image */
  -webkit-transition: .5s ease-in-out !important; 
  transition: .5s ease-in-out !important; 
}
.effetrounded img:hover {
  width: 150px; /* on affiche l'image au carré */
  height: 150px;
  border-radius: 50%;
  -webkit-transition: .3s ease-in-out !important; 
  transition: .3s ease-in-out !important; 
}


/* FLOU */
.effetblur img:hover {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.effetblur img {
	-webkit-filter: blur(0);
	filter: blur(0);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* NOIR ET BLANC (vers couleur) */
.effetgrayscaletocolor img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetgrayscaletocolor img:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* NOIR ET BLANC (couleur vers) */
.effetcolortograyscale img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetcolortograyscale img:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* SÉPIA (vers couleur) */
.effetsepiatocolor img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetsepiatocolor img:hover {
	-webkit-filter: sepia(0);
	filter: sepia(0);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* SÉPIA (couleur vers) */
.effetcolortosepia img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
  	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.effetcolortosepia img:hover {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* MORPH */
.effetmorph img {
  width: 200px;
  height: 150px;
  -webkit-filter: grayscale(0) blur(0px);
  filter: grayscale(0) blur(0px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.effetmorph img:hover {
  width: 150px; /* on affiche l'image au carré */
  height: 150px;
  border-radius: 50%;  /* on arrondit l'image */
  -webkit-transform: rotate(360deg); /* rotation de l'image */
  transform: rotate(360deg);
}


/* OPACITÉ */
.effetopacity1 img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.effetopacity1 img:hover {
	opacity: .5;
}


/* OPACITÉ COLORÉE */
.effetopacity-color {
	background: #184a7d;
}*/
.opacity-color img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.effetopacity-color img:hover {
	opacity: .5;
}


/* FLASH */
.effetflash img:hover {
	opacity: 1;
	-webkit-animation: effetflash 1.5s;
	animation: effetflash 1.5s;
}
@-webkit-keyframes effetflash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes effetflash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}


/* REFLET */
.effetshine div {
	position: relative;
}
.effetshine div::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.effetshine div:hover::before {
	-webkit-animation: effetshine .75s;
	animation: effetshine .75s;
}
@-webkit-keyframes effetshine {
	100% {
		left: 125%;
	}
}
@keyframes effetshine {
	100% {
		left: 125%;
	}
}


/* HALO LUMINEUX */
.effetlight div {
	position: relative;
}
.effetlight div::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.effetlight div:hover::before {
	-webkit-animation: effetcircle .75s;
	animation: effetcircle .75s;
}
@-webkit-keyframes effetcircle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes effetcircle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}