/* CSS Document */
/* derniers articles, articles en rss */

/* modele <priere|texte=letexte >*/
.textTopic .spip_documents_left ,.textTopic .spip_documents_right{max-width: 100%!important}
.priere 
{
	border:4px solid #B2B2FF;
	text-align:center;
	font-family: Garamond, Georgia, Times, serif;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
	font-weight: bold;
	font-size:16px;
	background-color: #FFFFD9;
	width: auto;
	margin-left:auto;
	margin-right:auto;
	padding: 20px;
	padding-top:10px;
	margin-top:10px;
	margin-bottom:10px;
}
.priere p,.priere p.spip
 {
	font-size:120%;
	font-family: Garamond, Georgia, Times, serif;
	vertical-align: middle;
 }

.priere p:first-letter, .priere p.spip:first-letter
   {color:red;font-size:24px;font-weight: bold;
   }
   

/* modele message */
.fond{background-color:#FFFF00;}

.message{
	color: #003399;
	padding-right:10px;
	padding-bottom:5px;
	padding-top:5px;vertical-align: middle;
	text-align:left;
	/*min-height: 30px;*/
	font-weight: bold;
	display: block;
}
/* Corrections pour IE6Win\*/
/* * html .message{ 	height: 40px; 		}*/
.messagetexte /* texte dans le modele message */
{
	font-size: 130%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	font-weight: bold;
}

.messagecom, .messagecomfixe,.messagecomhaut ,.messagecombas,.messagecominf {/* commentaire fixe comfixe xte dans le modele message */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;	font-style: oblique;
}
.messagecom /* commentaire dans le modele message */
{	text-align:center;}

.messagecombas,.messagecominf{/* commentaire fixe comfixe xte dans le modele message */
	text-align:right;}
	
	


.site {text-align:center;margin-left:auto;margin-right:auto;}
.site .spip_logos{float:none}


/*  modele bulle */
.conteneurbulle{max-width:100%;flex-wrap:wrap;display:flex;flex-direction:column;padding:20px;overflow:hidden;min-width:250px;box-sizing: border-box; 
font: 1.2em/1.3 bold Century Gothic, Verdana, sans-serif;color:#999999;
  }
 .aside .bulle{margin-left:0!important}
.textebulle{box-sizing: border-box;padding:1%}

@media (max-width:576px)  {
	.taillephone{width:100%!important;}
	.conteneurbulle .spip_document{max-width:70%;}
	.padphone{padding:0!important;}
	.bulle {margin-left:0!important}
}


.ovale-bulle:before,.ovale-droite:before,.miovale-bulle:before,.miovale-droite:before{
	background: none repeat scroll 0 0;
	background-color:inherit;
	border: 5px solid;
	border-color:inherit;
	border-radius: 50% 50% 50% 50%;
	bottom: -20px;
	content: "";
	display: block;
	height: 50px;
	
	position: absolute;
	width: 50px;
	z-index: 10;	
}
.ovale-bulle,.ovale-droite,.miovale-bulle,.miovale-droite {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 5px solid grey;
	border-radius: 50% 50% 50% 50%;
	color: #333333;
	position: relative;
	text-align: center;
	 margin: 1em auto 3em auto;
	padding:5%;
		
}

.ovale-droite:before,.miovale-droite:before {right:40px;bottom: -20px;} 
.ovale-bulle:before,.miovale-bulle :before{left:40px;bottom: -20px;} 

.miovale-bulle {
  -webkit-border-radius:240px 140px;
   border-radius:240px / 140px;
}


.ovale-bulle:after,.ovale-droite:after,.miovale-bulle:after,.miovale-bulle-droite:after  {
    background: none repeat scroll 0 0;
	background-color:inherit;
    border: 5px solid ;
	border-color:inherit;
    border-radius: 50% 50% 50% 50%;
    content: "";
    display: block;
    height: 30px;
    position: absolute;
    width: 30px;	
	z-index: 10;
}

.ovale-droite:after,.miovale-droite:after { right :20px;  bottom: -40px;}
.ovale-bulle:after,.miovale-bulle:after   { left:20px;  bottom: -40px;} 
div.rectangle-bulle:first-letter {
	float:left;
	font-size:100px;
	line-height:80px;
	padding-top:1px;
	padding-right:5px;
	font-family: times;
	color:red;
	text-indent:0px;
	display:block;
}

.rectangle-bulle {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid  grey;
	border-radius: 3%;
    color: #333333;
    margin: 1em auto 3em auto;
    padding: 5%;
    position: relative;
    text-align: center;
}

.rectangle-bulle:before {
    background: none repeat scroll 0 0 transparent!important;
    border-bottom-right-radius: 80px 50px;
    border-color:inherit;
    border-style: solid;
    border-width: 0 5px 5px 0;
    bottom: -35px;
    content: "";
    display: block;
    height: 30px;
    right: 50px;
    position: absolute;
    width: 50px;
    z-index: 10;
	
}

.rectangle-bulle:after {
    background: none repeat scroll 0 0 transparent!important;
	border-bottom-right-radius: 40px 50px;
    border-color:inherit;
    border-style: solid;
    border-width: 0 5px 5px 0;
    bottom: -35px;
    content: "";
    display: block;
    height: 30px;
    right: 80px;
    position: absolute;
    width: 20px;
    z-index: 10;	
}


/*triangle */


.triangle-bulle {
	position: relative;
	padding: 5%;
	margin: 1em auto 3em auto;
	color:#030;
	border-radius: 10px;
	border:1px solid #d9d8d8!important;
}
.triangle-bulle:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 15%;
  width: 0;
  border-width: 15px 15px 0;
  border-style: inset;
  border-color: #a6a698 transparent !important;
  background:transparent!important;
}


/* -- pointe-bulle */

.pointe-bulle:after {
    border-color: transparent #FFFFFF;
    border-style: solid;
    border-width: 0 0 30px 20px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 110px;
    width: 0;
}
.pointe-bulle {
    background: #efefef;   
    position: relative;
    padding:5
	min-width:240px;
	margin: 1em auto 3em auto;
	color:#666666;
	border-radius: 25px 25px 25px 25px / 50px 50px 50px 50px;
  	border:1px solid #d9d8d8!important;
}
.pointe-bulle:before {
    border-color: transparent grey;
	border-style: solid;
    border-width: 0 0 30px 50px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 80px;
    width: 0;
}


/***   speech-bulle   **/
.speech-bulle {
  position: relative;
  margin:2em auto 4em auto;
  padding: 20px;
  border-radius: .25em;
  transform: rotate(-3deg) rotateY(15deg);
  background: #629bdd;
  text-align: center;color:#666666!important;
  min-width:240px;min-height:200px;
 }
.speech-bulle:before, .speech-bulle:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.speech-bulle:after {
  top: 0; right: 6px; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.60em, -.15em) scale(1.02);
  background: #f4fbfe!important;
  border:3px solid #b5b4b4!important;
}
.speech-bulle:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #e4ecf0!important;
  border-bottom: solid .25em ;
  border-bottom:color:inherit!important;
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
  
}
.speech-bulle .textebulle { transform: rotate(2deg) translate(.60em, -.15em) scale(1.02); }
/**
.speech-bulle:after {
  top: 0; right: 6px; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.60em, -.15em) scale(1.02);
  background: #f4fbfe!important;
  border:3px solid #b5b4b4!important;
}
.speech-bulle:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe!important;
  border-bottom: solid .25em ;
  border-color:inherit;
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
}*
/***************************/
.apostrophe-bulle {
  font-family: Georgia, serif;
  background: #efefef;
  padding: 5% 5% 5% 12%;
  position: relative;
  border: 1px solid #d2d2d9;
  border-radius: 10px;
  font-style: italic;
  height:auto;color:#999999;
  flex-wrap:wrap;display:flex;overflow:hidden;box-sizing: border-box; 
   width: 100%;
  height: auto;
  margin-top:1em;
  position: relative;
 
}

/** les guillemets **/
.apostrophe-bulle:before,
.apostrophe-bulle:after {
  font-family: Georgia, serif;
  position: absolute;
  font-size: 80px;
  line-height: 1;
  color: #a5b0cc;
  font-style: normal;
}
.apostrophe-bulle:before { top: 0;left:1%; content: "\201C";}
.apostrophe-bulle:after {  content: "\201D";  right: 1%; bottom: -3%;}
 .queue{
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #aaaab3;
  margin: 0 0 3em 150px;
  
}
/***********barre ******************/
.barre{
  display: block;
  position: relative; 
  text-shadow: 2px 2px 15px #ccc;
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
  background-color: #FFF;
  font-family: 'Abril Fatface', sans-serif;
  text-align: justify;color: #666;
  font-style: normal;  font-size: 100%; 
  padding:30px;  margin: 2em 0 2em 0;
  overflow: auto;
  border-right: 2px solid #666;  border-left: 15px solid #666;	 
}

.picto-barre
{ float:left;font-size: 6em ;font-weight: bold;color: #333;margin: 20px;}
  
/*****************************************/
 .nuage {
  text-align: center;
  box-sizing: border-box;
  width     : 300px;
  height    : 300px;
  padding   : 80px 1em 0 1em;

  /* On fait de la place pour les « oreilles »
     du nuage */
  margin    : 0 200px;

  position: relative;

  background-color: #A4C9CF;

  /* Enfin, le cercle n'est pas tout à fait complet
     car on veut que la base soit plate.
     Vous pouvez adapter ici comme bon vous semble
     si vous souhaitez que la base ne soit pas
     linéaire */
  border-radius: 100% 100% 0 0;
}


/****************/
.nuage {
  text-align: center;
  box-sizing: border-box;
  width     : 80%;
  height    : auto;
  padding   : 20%;

  /* On fait de la place pour les « oreilles »
     du nuage */
  margin    : 20px 200px;
  position: relative;

  background-color: #A4C9CF;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  
  /* Enfin, le cercle n'est pas tout à fait complet
     car on veut que la base soit plate.
     Vous pouvez adapter ici comme bon vous semble
     si vous souhaitez que la base ne soit pas
     linéaire */
  border-radius: 100%;/*100% 100% 0 0;*/
}

/* Voici les styles qu'on appliquera aux deux
   pseudo-éléments ::before et ::after. */
.nuage::before,
.nuage::after {
  content: '';
  position: absolute;
  bottom  :0;
  z-index : -1;
  background-color: #A4C9CF;
  border-radius: 100%;
}

.nuage::before {
  width  :90%;
  height : 90%;
  left    : -20%;
  border-bottom-right-radius: 0;
}

.nuage::after {
  width  : 70%;
  height : 70%;
  right   : -20%;
  border-bottom-left-radius: 0;
}


/*********** accordeon **************/

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
}
.collapsible .active, .collapsible:hover {
  background-color: #555;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.collapsible.active:after {
  content: "\2212";
}

.contentcollapsible  {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  color:#333333;
}
.contentcollapsible  .texte,.contentcollapsible  .texte p{
text-align:left;
}
/**************fin accordeon ************************/
@media (max-width: 640px) {

.hmesse table  {width:100%}
.relief
{	margin-top:10px;margin-bottom:10px;margin-left:auto;text-align:center;
	margin-right:auto;
	width:auto;
	
}

}
/************colonnes egale modele tableaucol**********************/
/* Equal height columns */

.d-flex-stretch {
    display: -webkit-box;
    display: flex;
    margin: 3em auto;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    align-items: stretch; /* items aligner verticalement sur le container */

}
.d-flex-stretch > div {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1 0 #GET{n,33}%;
     -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
	 flex-direction: column;
    padding: 2em;
    border: 5px #F2F2F2 solid;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}

@media (min-width: 768px) {
.d-flex-stretch > div {
  flex: 1 0 50%;

}
}

@media (max-width: 576px) {
.d-flex-stretch > div {
    flex: 1 0 100%;
}
}
/****************************************/
.newspaper {column-gap: 1em; column-rule: 4px double lightblue;column-fill:balance;text-align: left;columns:3}	


@media only screen  and (min-width: 481px) and (max-width: 576px) {
  .newspaper {
    column-count: 2!important;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .newspaper {    column-count: 1!important;  width: 100%;
  }
}