/*
Theme Name: twentytwentyone-child
Description: Theme enfant de Twentytwentyone
Author: Steph
Template: twentytwentyone
Version: 1.0
*/
/* https://kinsta.com/fr/blog/theme-twenty-twenty-one/

/*couleur de texte par défaut*/
body{
  color: black;
}

/* =Links

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

a {

	color: #9ab312; /*c'est le vert du site - en RVB 153 204 0 - en CMJN 52 0 96 0 - */

	font-weight: 400;

	text-decoration: none;

}

a:hover,

a:focus,

a:active {

	outline: 0;

	color: #336633;

	text-decoration: none;
	
}
/* texte à remplir des formulaires (passés en gris clair -> invisible en août 2017) */
.contact_right select, input[type="text"], input[type="password"], input[type="email"]
{
  color: #889e10;
}

/* anciens codes, à garder car ils servent à certains endroits*/
			/* =Surligner
			-------------------------------------------------------------- */
			mark {
			  background-color: yellow;
			}
			mark2 {
			  background-color: #dfefb0;
			}
			/* =exemples franco esp
			-------------------------------------------------------------- */
			ej {
			  color: #4bacc6;
			}

			ex {
			  color: #999999;
			  font-style: italic;
			}
			.mark2 {
				background-color: #dfefb0;
			}
			.ej {
				color: #4bacc6;
			}

			.ex {
			  color: #999999;
			  font-style: italic;
			}

/* =Headings

-------------------------------------------------------------- */
h4,

h5,

h6 {
	color: #AAC514;
	margin-top: 50px;
}
h6 {
	padding-left: 5em;
}

/* =div vert kaki clair 

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

#kaki{
  color: #cccc66
}

/* =div vert rose clair 

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

#roseClair{
  color: #F5A9F2
}




/*----------------------------------------------------------------------
								TABLEAUX
testeur ici : https://www.w3schools.com/css/tryit.asp?filename=trycss_table_width
----------------------------------------------------------------------*/
/* une page d'explications très claire : 
https://developer.mozilla.org/fr/docs/Web/HTML/Element/tbody*/


/* pour tous les tableaux du site  */

table th, td, caption{
	padding: 0em;
}

table th {
	background-color: lightgrey;
}

table caption{
	background-color: lightgrey;
	margin-bottom: 0.5em;
}

/* tableaux connecteurs (en html = <table class="connecteurs">)
condensés, 2 colonnes,   
dans le texte, indiquer <table class="connecteurs">
-------------------------------------------------------------- */
table.connecteurs,

table.connecteurs th,

table.connecteurs td {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0em 0.5em 0em 0.5em;
	margin: 0em;
	border: 1px solid #ddd;
	width: 42em;
	

}
table.connecteurs th{
	text-align: left;
	padding-left: 0.5em;
	background-color: #ddd;
	border: 1px solid black;	
}


/* tableaux bordure none (en html = <table class="connecteurs2">)
condensés, 2 colonnes,   
-------------------------------------------------------------- */
table.connecteurs2,

table.connecteurs2 th,

table.connecteurs2 td {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0em 0.5em 0em 0.5em;
	margin: 0em;
	border: none; /*sans bordure*/
	width: 42em;
	

}

/* tableaux (en html = <table class="connecteurs3">)
condensés, 2 colonnes,   
-------------------------------------------------------------- */
table.connecteurs3,

table.connecteurs3 th,

table.connecteurs3 td {
	font-size: 80%;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0em 0.5em 0em 0.5em;
	margin: 0em;
	border: 1px solid grey;
}

/* tableaux simples (en html = <table class="simple">)
condensés,   
dans le texte, indiquer <table class="simple">
-------------------------------------------------------------- */

table.simple,

table.simple th,

table.simple td {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0em 0.5em 0em 0.5em;
	margin: 0em;
	border: 1px solid #ddd;
	width: 42em;
	vertical-align: middle;
	

}
table.simple thead{
	text-align: left;
	padding-left: 0.5em;
	background-color: #DCDCDC;
	/*border: 2px solid black;	*/
}
table.simple th{
	border: 1px solid white;
}
/* images avec légende
.wp-caption {
	max-width: 96%;
	padding: 13px 10px 10px 10px;
	border: 0 none;
	background: transparent;
	text-align: center;
}*/
	
/*citations*/
blockquote p{
	font-size: 100%;
}

/* =formulaires de contact MAJUSCULES
-------------------------------------------------------------- */
.wpcf7-form .majuscules {
        text-transform: uppercase;
}

/* = signes + et - pour le plugin collapse-o-matic (cacher des éléments)
-------------------------------------------------------------- */
.collapseomatic {
    background-image: url(collapse-o-matic-moins.png) !important;
}
.colomat-close {
    background-image: url(collapse-o-matic-plus.png) !important;
}




	/* Fichier perso pour pour personnaliser tinyMCE 
	= double du fichier custom-editor-style.css 
	-> ACTUALISER LES DEUX + le 2. dans FUNCTIONS.PHP !!!
*http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/
***************************************************************************************************/

.categorieBox { /*paragraphes encadrés rose comme pour les catégories*/
	color: black; /*texte*/
	font-size: 100%;
	line-height: 2;
	margin-top: 22px;
	margin-top: 1.571428571rem;
	border-width: 2px; 
    border-style: solid;
    border-color: #ff0080;
	background-color: #F8F8F8;
    padding: 20px;
	/*arrondir les coins*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*ombrer la box*/
	box-shadow: 10px 10px 10px gray;
	-moz-box-shadow: 10px 10px 10px gray;
	-webkit-box-shadow: 10px 10px 10px gray;
}

.encadre-petitstraits { /*paragraphes encadrés petits traits noirs*/
	border: 1px dashed black;
	padding: 10px;
}

.trait-vertical-a-gauche { /*paragraphes avec deux traits sur le bord gauche*/
	border-left: 5px double #ff0080;
	padding: 10px;
}

.fondImportant { /*paragraphes fond rose pâle*/
	color: black; /*texte*/
	font-size: 100%;
	margin-top: 5px;
	margin-top: 1.3rem;
	background-color: #ffe1f0;
	padding: 5px;
}
.chapeau { /*paragraphes avec un fond gris en chapeau d'un article*/
	color: black; 
	font-size: 100%;
	line-height: 2;
	margin-top: 15px;
	margin-top: 1.571428571rem;
	margin-bottom: 15px;
	margin-bottom: 1.571428571rem;
	background-color: #E0E0E0;
    padding: 15px;
	/*arrondir les coins*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*ombrer la box*/
	box-shadow: 10px 10px 10px gray;
	-moz-box-shadow: 10px 10px 10px gray;
	-webkit-box-shadow: 10px 10px 10px gray;
}

.exergue { /*paragraphes avec un fond vert-bleu clair*/
	color: black; 
	font-size: 100%;
	line-height: 2;
	margin-top: 15px;
	margin-top: 1.571428571rem;
	background-color: #e3ecee;
    padding: 15px;
	/*arrondir les coins*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.texteCode {
	color: #666;
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
}
.texteImportant {
 	color: #ff0080;
}


/* =Surligner (mark=jaune, mark2=vert clair, mark3=gris clair)
-------------------------------------------------------------- */
.mark {
  background-color: yellow;
}

.surlign-perso {
  background-color: #dfefb0;
}


.surlign-gris {
  background-color: #EFEFEF;
}

.surlign-or {
  background-color: #ffc000;
}

.surlign-bleu {
  background-color: #90d6f0;
}

.surlign-violet {
  background-color: #c48aff;
}

.surlign-vieuxRose {
  background-color: #ffb8bc;
}

.surlign-orange {
  background-color: #ffc299;
}

/* =Souligné ondulé rose
-------------------------------------------------------------- */
.souligne-rose {    
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: dotted;
  -moz-text-decoration-color: Fuchsia;    
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
  -webkit-text-decoration-color: Fuchsia;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: Fuchsia;
}

/* =exemples franco esp
-------------------------------------------------------------- */
.ejemplo {
  color: #4bacc6;
}

.exemple {
  color: #999999;
  font-style: italic;
}


.monBouton {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: none;
z-index: auto;
width: 48%;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 8px 8px 8px 2px;
padding: 10px 20px;
overflow: visible;
border: 1px solid #336633;
-webkit-border-radius: 14px;
border-radius: 14px;
color: #336633;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
word-spacing: 1px;
background: -webkit-linear-gradient(90deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background: -moz-linear-gradient(0deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background: linear-gradient(0deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 3px 3px 2px 1px rgba(0,0,0,0.2) ;
box-shadow: 3px 3px 2px 1px rgba(0,0,0,0.2) ;
text-shadow: 0 0 0 rgba(15,73,168,0.66) ;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.monBouton:hover {
background: #dfefb0; 
}

.monPetitBouton {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: none;
z-index: auto;
width: 30%;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 8px 8px 8px 2px;
padding: 10px 20px;
overflow: visible;
border: 1px solid #336633;
-webkit-border-radius: 14px;
border-radius: 14px;
color: #336633;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
word-spacing: 1px;
background: -webkit-linear-gradient(90deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background: -moz-linear-gradient(0deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background: linear-gradient(0deg, #AAC514 0, #AAC514 72%, #dfefb0 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 3px 3px 2px 1px rgba(0,0,0,0.2) ;
box-shadow: 3px 3px 2px 1px rgba(0,0,0,0.2) ;
text-shadow: 0 0 0 rgba(15,73,168,0.66) ;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.monPetitBouton:hover {
background: #dfefb0; 
}


.infobulle {
  border-bottom: 1px gray dotted; /* On souligne le texte. */
}

.a-recopier {
  border-bottom: 5px double #ff0080; /* On souligne le texte. n'apparaît pas le 20/09/20*/
}