/* Icones decoratives du slide (soleil, etoiles, ampoule, crayon) reprises
   telles quelles de l'ancien theme (webroot/css/front/style.css, jamais
   charge par le layout v2) - chemins en absolu pour rester valides quel que
   soit l'emplacement de ce fichier. Chargees uniquement sur la page accueil
   (carrousel reactive), jamais sur le reste du site v2.
   .icon-xxx est pose sur un <span> (slides.ctp) - "inline" par defaut, donc
   width/height sans effet sans display:block/inline-block : jamais visible
   sans cette regle, meme avec le bon fichier CSS charge. */
.icon-sun-2,
.icon-star-4,
.icon-idea,
.icon-pencil,
.icon-star{
	display: block;
	background-repeat: no-repeat;
	background-position: center;
}

.icon-sun-2{
	height: 91px;
	width: 91px;
	background-image: url(/css/images/icons/icon-sun-2.png);
}

.icon-star-4{
	height: 33px;
	width: 33px;
	background-image: url(/css/images/icons/icon-star-4.png);
}

.icon-idea{
	height: 105px;
	width: 105px;
	background-image: url(/css/images/icons/icon-idea.png);
}

.icon-pencil{
	height: 119px;
	width: 261px;
	background-image: url(/css/images/icons/icon-pencil.png);
}

.icon-star{
	height: 77px;
	width: 39px;
	background-image: url(/css/images/icons/stick-star.png);
}

/* Fleches precedent/suivant du carrousel : le rendu reel ne correspondait
   ni au skin "metis" configure (bouton carre blanc) ni au style par defaut
   du plugin (bouton carre noir) - cascade CSS pas fiable entre les fichiers
   du plugin. Style force explicitement ici, independant du skin applique
   par le JS, pour un rendu garanti. */
.tparrows{
	background: rgba(255,255,255,.85) !important;
	border-radius: 50% !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.tparrows:hover{
	background: #fff !important;
}
/* Glyphe positionne en absolu, pile aux dimensions du bouton : le centrage
   par line-height seul ne suffit pas, le padding/box-sizing herite du
   plugin le decale selon les pages/skins. */
.tparrows:before{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: revicons !important;
	display: block !important;
	line-height: 48px !important;
	text-align: center !important;
	color: var(--sd-teal-strong, #137E90) !important;
	font-size: 18px !important;
}
.tparrows.tp-leftarrow:before{ content: '\e824' !important; }
.tparrows.tp-rightarrow:before{ content: '\e825' !important; }

/* Texte du slide (webroot/css/front/style.css, regle .main-slider.style-two
   - jamais chargee par le layout v2, donc jamais appliquee). Premiere
   version de ce correctif incomplete (couleur/police seules copiees) -
   reprise ici de TOUTES les proprietes de la regle d'origine, pas juste la
   couleur, sinon le texte reste minuscule/mal espace. Police "Schoolbell"
   chargee separement (voir Pages/index.ctp). */
.main-slider.style-two .title{
	position: relative !important;
	display: inline-block !important;
	font-size: 30px !important;
	color: #f6bb17 !important;
	padding: 0 !important;
	line-height: 1.2em !important;
	font-weight: 400 !important;
	font-family: "Schoolbell", cursive !important;
}
.main-slider.style-two h2{
	position: relative !important;
	display: block !important;
	font-size: 45px !important;
	color: #3bc1d3 !important;
	font-weight: 400 !important;
	line-height: 80px !important;
}

/* Bouton "Voir plus" (slides.ctp : <a class="theme-btn btn-style-one">
   dans un <div class="link-box">) - aucune de ces classes n'a de regle
   chargee par le layout v2, donc le lien s'affichait en texte brut. Reprises
   depuis webroot/css/front/style.css (.theme-btn, .btn-style-one,
   .main-slider.style-two .link-box a). */
.theme-btn{
	display: inline-block !important;
	transition: all .3s ease !important;
	font-family: "Rubik", cursive !important;
}
.btn-style-one{
	position: relative !important;
	display: inline-block !important;
	font-size: 16px !important;
	line-height: 30px !important;
	color: #fff !important;
	padding: 15px 50px !important;
	font-weight: 400 !important;
	overflow: hidden !important;
	border-radius: 50px !important;
	background-color: #f6bb17 !important;
}
.btn-style-one:hover{
	color: #fff !important;
}
.main-slider.style-two .link-box a{
	position: relative !important;
	background-color: #f6bb17 !important;
}