/***************************************/
/* SURCHAGE Noisette  SPIP */
/***************************************/

/* Cadre bloc texte **/
/*Chgt couleur de fond*/
/*Ajout espacement padding */

.spip_cadre.spip_cadre_block {
background-color: #0d6efd;
padding:0.75em;
margin:0.75em;
max-width:90%;}


/* Correction formulaire recherche de SPIP largeur zone de saisie */
.formulaire_recherche input.text {
  width: 300px;}

/* Suppression marge Bottom sur #LOGO_ARTICLE de HEADERBANDEAU.html */
.logo_special {
    margin-bottom: 0 !important;
}

/* Carrousel alignement vertical icone next-prev */
.carousel-control-next, .carousel-control-prev {
top:90px !Important 

}


/***************************************/
/* CSS BOOTSTRAP Surchage */ 
/***************************************/

.card-big-shadow {
    max-width: 320px;
    position: relative;
}

.coloured-cards .card {
    margin-top: 30px;
}

.card[data-radius="none"] {
    border-radius: 0px;
}
.card {
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    background-color: #FFFFFF;
    color: #252422;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}


.card[data-background="image"] .title, .card[data-background="image"] .stats, .card[data-background="image"] .category, .card[data-background="image"] .description, .card[data-background="image"] .content, .card[data-background="image"] .card-footer, .card[data-background="image"] small, .card[data-background="image"] .content a, .card[data-background="color"] .title, .card[data-background="color"] .stats, .card[data-background="color"] .category, .card[data-background="color"] .description, .card[data-background="color"] .content, .card[data-background="color"] .card-footer, .card[data-background="color"] small, .card[data-background="color"] .content a {
    color: #FFFFFF;
}
.card.card-just-text .content {
    padding: 50px 65px;
    text-align: center;
}
.card .content {
    padding: 20px 20px 10px 20px;
}
.card[data-color="blue"] .category {
    color: #7a9e9f;
}

.card .category, .card .label {
    font-size: 14px;
    margin-bottom: 0px;
}
.card-big-shadow:before {
    background-image: url("http://static.tumblr.com/i21wc39/coTmrkw40/shadow.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: -12%;
    content: "";
    display: block;
    left: -12%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
h4, .h4 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2em;
}
h6, .h6 {
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
}
.card .description {
    font-size: 16px;
    color: #66615b;
}
.content-card{
    margin-top:30px;    
}
a:hover, a:focus {
    text-decoration: none;
}

/*======== COLORS ===========*/
.card[data-color="blue"] {
    background: #b8d8d8;
}
.card[data-color="blue"] .description {
    color: #506568;
}

.card[data-color="green"] {
    background: #d5e5a3;
}
.card[data-color="green"] .description {
    color: #60773d;
}
.card[data-color="green"] .category {
    color: #92ac56;
}

.card[data-color="yellow"] {
    background: #ffe28c;
}
.card[data-color="yellow"] .description {
    color: #b25825;
}
.card[data-color="yellow"] .category {
    color: #d88715;
}

.card[data-color="brown"] {
    background: #d6c1ab;
}
.card[data-color="brown"] .description {
    color: #75442e;
}
.card[data-color="brown"] .category {
    color: #a47e65;
}

.card[data-color="purple"] {
    background: #baa9ba;
}
.card[data-color="purple"] .description {
    color: #3a283d;
}
.card[data-color="purple"] .category {
    color: #5a283d;
}

.card[data-color="orange"] {
    background: #ff8f5e;
}
.card[data-color="orange"] .description {
    color: #772510;
}
.card[data-color="orange"] .category {
    color: #e95e37;
}


/***************************************/
/* CODE CSS SITE - ANIMATIONS*/  
/***************************************/


/* anime */

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
.anime {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* anime2 */

p:hover,
p:focus {
  color: #333;
  background-color: #fff;
}



/***************************************/
/* CODE CSS PROPRE SITE */
/***************************************/

/* BLOC texte */
.cadre2{
background-color: #A81F13;
padding:0.75em;
margin:0.75em;
max-width:90%;
border-radius:10px;
color:white}

/* Couleur MOTS CLEFS Btn */

.bouton-0 { background-color: #0d6efd; }  /* Bootstrap primary */
.bouton-1 { background-color: #198754; }  /* Bootstrap success */
.bouton-2 { background-color: #dc3545; }  /* Bootstrap danger */
.bouton-3 { background-color: #fd7e14; }  /* Bootstrap orange */
.bouton-4 { background-color: #6f42c1; }  /* Bootstrap purple */
.bouton-5 { background-color: #20c997; }  /* Bootstrap teal */


/**VOLET OUVRANT MENU PUB*****/
/* https://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html*/

		#volet {
			width: 250px;
			padding: 10px;
			background: #6B9A49; 	
			color: #fff;
			border-radius: 0% 5% 5% 0%;
			min-height: 300px;	
		}
		
		#volet a.ouvrir,
		#volet a.fermer {
			padding: 10px 25px;
			background: #555;
			color: #fff;
			text-decoration: none;
		}

		#volet {
			position: absolute;
			left: -270px;  /* test fixed + scroll, on retire la position top */
			-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in;
		}
		#volet a.ouvrir,
		#volet a.fermer {
			position: absolute;
			right: -88px;
			top: 150px;
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
			-moz-radius: 0 0 8px 8px;
			border-radius: 0 0 8px 8px;
		}
		#volet a.fermer {
			display: none;
		}
		#volet:target {
			left: 10px;
		}

		/* code pour la fermeture */

		#volet:target a.fermer {
			display: block;
		}
		#volet:target a.ouvrir {
			display: none;
		}
		#volet_clos:target #volet {
			left: -270px;
		}
		
		 /* test fixed + scroll */
		#volet_clos {
			position: fixed; 
			top: 135px; 
			left: 0;
		z-index: 1000;
		}


/**CSS Bloc dépliant pour Agenda MOIS + ANNEE *****/
.accordion-toggle {
  width: 100%;
  text-align: left;
  background-color: #f1f1f1;
  border: none;
  outline: none;
  padding: 10px 15px;
  font-size: 1.2rem;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  transition: background-color 0.2s ease;
}

.accordion-toggle:hover {
  background-color: #ddd;
}

.accordion-content {
  display: none;
  padding: 15px;
  background-color: #fff;
  border-left: 2px solid #c00;
  border-right: 2px solid #c00;
  border-bottom: 2px solid #c00;
  animation: fadeIn 0.3s ease-in-out;
}

.accordion-section.active .accordion-content {
  display: block;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/**********************************************/

/**********************************************/
/***CARROUSEL VERTICAL************************/
/***Page des offres emplois à afficher sur écran demo**/
.carousel-container{
width:100%;
max-width:900px;
height:600px;
overflow:hidden;
border:1px solid #ccc;
position:relative;
margin:auto;
}

.carousel-track{
display:flex;
flex-direction:column;
}

.slide-carousel{
height:calc(600px / 3);
padding:8px;
box-sizing:border-box;
background-color:#54927;
}

.slide-carousel:nth-child(1){background:#ff6b6b;}
.slide-carousel:nth-child(2){background:#4ecdc4;}
.slide-carousel:nth-child(3){background:#1a535c;}
.slide-carousel:nth-child(4){background:#ffa600;}
.slide-carousel:nth-child(5){background:#6a4c93;}
.slide:nth-ch-carouselild(6){background:#ffce00;}
.controls{
    margin-top:10px;
}

/* responsive */

@media(max-width:768px){

.carousel-container{
height:450px;
}

.slide-carousel{-carousel
height:calc(450px / 3);
}

}



/**ANIMATIONS Intro text animations****/

/**********************************************/

.mytext1{
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: #002f5f;
  position: relative;
  animation: text 3s 1;

}
.mytext2{
  font-size: 24px;
    color:#000000 ;
    font-weight: bold;
    font-family: cursive;
}
@keyframes text {
  0%{
    color: black;
    margin-bottom: -40px;

  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;

  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;

  }
}


/*****
#E91E63

*****************************************/
.anim{

  font-family: "arial";
  font-size: 3em;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: animtext 4s steps(80, end); 
   transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
@keyframes animtext { 
  from {
      width: 0;
     transition: all 2s ease-in-out;
  } 
}