/* Taille de texte globale */
html {font-size: 100%;}
body {font-size: 1em;
      line-height: 1.35;}

.fondPage       {background: #FFFFFF;}  /* couleur de fond de la page (vraiment le fond) */
.fond           {background: #E6E6E6;}  /* couleur de fond de la page (le fond du tableau principal) */
.fondTableau    {background: #EFEFEF;}  /* couleur de fond du tableau principal */
.tableauCouleur {background: #103f41;}  /* couleur des lignes de séparation */

.texte        { font-family: "Trebuchet MS"; color: #000000; padding: 0px; }
.texteCouleur { font-family: "Trebuchet MS"; color: #249398; padding: 0px; }
.texteClair    {font-family: "Trebuchet MS"; color: #19696c; padding: 0px; }
.texteSemiclair{font-family: "Trebuchet MS"; color: #103f41; padding: 0px; }
.titre2       { font-size: 1.6em; font-family: "Trebuchet MS"; color: #103f41; padding: 0px; font-weight: bold;}
.titreGauche  { font-size: 1.6em; font-family: "Trebuchet MS"; color: #19696c; padding: 0px; font-weight: bold; } 
.titreDroite  { font-size: 1.6em; font-family: "Trebuchet MS"; color: #103f41; padding: 0px; font-weight: bold; } 
.vousetesici { color: #3366cc;}


.boite {background-color: #FFFFFF;
        width: 80%;
}

/* Est redéfini si écran smartphone à width: 100%*/
.boite2 {width: 70%; text-align:justify; vertical-align:top;}

/* Est redéfini si écran smartphone à width: 80%*/
/* A utiliser pour les éléments dans la colonne de droite, avec display:inline-block pour lui et son homologue de gauche (qui est un class=boite2) afin de faire passer cet élément en dessous sur smartphone. */
.boite3 {width:29%; text-align:justify; vertical-align:top;}



/* Sont redéfinis si écran smartphone à width: 100% pour 2bis et 3bis, et 0% pour 4bis*/
.boite2bis {width: 38%; text-align:justify; vertical-align:top;}
.boite3bis {width: 38%; text-align:justify; vertical-align:top;}
.boite4bis {width: 4%; text-align:justify; vertical-align:top;}


table.tableconcours {border-collapse: collapse;}
table.tableconcours tr:hover {background-color: #f5f5f5;}
table.tableconcours td {border-bottom: 1px solid #ccc;}
table.tableconcours th {border-bottom: 1px solid #ccc;}
table td.gris {color: #666666;} 

table.tablechrono {width:100%; border-collapse: collapse;}
table.tablechrono tr:hover {background-color: #f5f5f5;}
table.tablechrono td {border-bottom: 1px solid #ccc; vertical-align:top; padding:5px; padding-right:10px;}


hr  /*Ligne horizontale de séparation des notes*/
{
    display: inline-block;
    width: 90%;
}

hr.dotted  /*Ligne horizontale de séparation des notes, poitillé*/
{
    width: 75%;
    border: 1px dashed #999999;
}


p { /*Balise <p> (paragraphe)*/
  margin-top: 0em;
  margin-bottom: 0.5em;
  margin-left:0.5em;
  text-indent: 2em;  /*alinéa en début de paragraphe*/
}

p.noindent {
  text-indent: 0em;  /*alinéa en début de paragraphe*/
}

u.dotted {
  border-bottom: 1px dashed #202020;
  text-decoration: none; }
  
u.doubledotted {
  border-bottom: 1px dashed #202020;
  text-decoration: underline; }
  
abbr, acronym {
   border-bottom: none;
   cursor: help; }

acronym.rien {border-bottom: 0em none;}
 
ul{
   margin:0;
   margin-left: 3em;
   padding:0;
   list-style: square; } 

/*li{
   margin:0;
   padding:0 } */
   
   /* Titres */
h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0;
}
h1 {
    margin: 0;
	font-size: 1.6em;
	font-weight: bold;
	font-family: "Trebuchet MS"; 
	color: #485625; 
	padding: 0px;
}
h2 {font-size: 1.5em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1em;}

a {
  font-family: "Trebuchet MS"; 
  color: #485625; 
  padding: 0px; text-decoration: none; } 

a.black {
  color: #000000;} 

a:hover, a:focus {
	color: crimson;
}
a img {
	border: none;
}

blockquote.important { /*mettre en emphase un texte avec une barre à gauche*/
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    border-left: 4px solid #CCC;
    padding-left: 8px;
}

blockquote.cite { /*mettre en emphase un texte avec une barre à gauche*/
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote.cite:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0em;
  vertical-align: -0.4em;
}
blockquote.cite:after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.4em;
}
blockquote.cite p {
  display: inline;
}



/* A affecter à un div par exemple. Le contenu du div ne sera affiché que sur mobile */
.show_mobile_block {
	display: none;
}

/* Classe pour un span qui sera affichée police small sur grand écran, et police 0.3em sur petit écran. */
.mobile_adapt {
	    font-size: small
	    }




/* Pour bouton "afficher plus" */
input#inputHiddenContent1,#inputShownContent1 {display: none;}
span#spanHiddenContent1 {display: none;}
input#inputShownContent1:checked ~ span#spanHiddenContent1 {display: block;}
input#inputHiddenContent1:checked ~ span#spanHiddenContent1 {display: none;}
input#inputShownContent1:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent2,#inputShownContent2 {display: none;}
span#spanHiddenContent2 {display: none;}
input#inputShownContent2:checked ~ span#spanHiddenContent2 {display: block;}
input#inputHiddenContent2:checked ~ span#spanHiddenContent2 {display: none;}
input#inputShownContent2:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent3,#inputShownContent3 {display: none;}
span#spanHiddenContent3 {display: none;}
input#inputShownContent3:checked ~ span#spanHiddenContent3 {display: block;}
input#inputHiddenContent3:checked ~ span#spanHiddenContent3 {display: none;}
input#inputShownContent3:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent4,#inputShownContent4 {display: none;}
span#spanHiddenContent4 {display: none;}
input#inputShownContent4:checked ~ span#spanHiddenContent4 {display: block;}
input#inputHiddenContent4:checked ~ span#spanHiddenContent4 {display: none;}
input#inputShownContent4:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent5,#inputShownContent5 {display: none;}
span#spanHiddenContent5 {display: none;}
input#inputShownContent5:checked ~ span#spanHiddenContent5 {display: block;}
input#inputHiddenContent5:checked ~ span#spanHiddenContent5 {display: none;}
input#inputShownContent5:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent6,#inputShownContent6 {display: none;}
span#spanHiddenContent6 {display: none;}
input#inputShownContent6:checked ~ span#spanHiddenContent6 {display: block;}
input#inputHiddenContent6:checked ~ span#spanHiddenContent6 {display: none;}
input#inputShownContent6:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent7,#inputShownContent3 {display: none;}
span#spanHiddenContent7 {display: none;}
input#inputShownContent7:checked ~ span#spanHiddenContent7 {display: block;}
input#inputHiddenContent7:checked ~ span#spanHiddenContent7 {display: none;}
input#inputShownContent7:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent8,#inputShownContent8 {display: none;}
span#spanHiddenContent8 {display: none;}
input#inputShownContent8:checked ~ span#spanHiddenContent8 {display: block;}
input#inputHiddenContent8:checked ~ span#spanHiddenContent8 {display: none;}
input#inputShownContent8:checked ~ #myReadMore p {display: none;}

input#inputHiddenContent9,#inputShownContent9 {display: none;}
span#spanHiddenContent9 {display: none;}
input#inputShownContent9:checked ~ span#spanHiddenContent9 {display: block;}
input#inputHiddenContent9:checked ~ span#spanHiddenContent9 {display: none;}
input#inputShownContent9:checked ~ #myReadMore p {display: none;}








/* Tout ceci se déclenche lorsque le site est consulté sur un mobile */
@media (max-width: 760px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */
	img {
		height: auto;
	}
	
	/* gestion des mots longs */
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
    .boite2 {width: 100%}
    .boite3 {width: 100%}
    
    .boite2bis {width: 100%}
    .boite3bis {width: 100%}
    .boite4bis {width: 0%}
    
    
    
	
	/* masquer les éléments superflus */
	.hide_mobile {
		display: none;
	}
	
	.show_mobile_block {
		display: block;
	}
	
	.mobile_adapt {
	    font-size: 0.3em
	    }
	
	/* Un message personnalisé */
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}