/* Variables */

:root
{

	--couleur-fond: #ffffff;
	
	--couleur-fond-bloc-opaque: #f2f2f2;
	--couleur-fond-bloc-transparent: #f2f2f2cf;
	
	--couleur-fond-bloc-mitransparent: #a6a6a68f;
	--couleur-fond-bloc-opaque-fonce: #e6e6e6;
	
	--couleur-gen-blanchi: #f2f8fa;
	--couleur-gen-tres-clair: #e8f7fc;
	--couleur-gen-clair: #d1f0fa;
	--couleur-gen-miclair: #a3e0f5;
	--couleur-gen: #51C5ED;
	--couleur-gen-mifonce: #138fb9;
	--couleur-gen-fonce: #0a485c;
	--couleur-gen-tres-fonce: #05242e;
	
	--couleur-erreur-clair: #fad1d1;
	--couleur-erreur: #e83030;
	
	--couleur-erreur-variante-clair: #fae6d1;
	--couleur-erreur-variante: #e88c30;
	
	--couleur-valide-clair: #d1fad1;
	--couleur-valide: #30e830;
	--couleur-valide-transparent: #30e8301a;
	
	--couleur-ombre: grey;
	
	--couleur-lien: #0c5a73;
	--couleur-lien-visite: #0c5a73;
	--couleur-lien-actif: #05242e;

}

/* Police 

@font-face
{
 	font-family: lm;
	src: url("../../police/lm/lmroman12regular.otf");
}
@font-face 
{
	font-family: lm;
	font-style: italic;
	src: url("../../police/lm/lmroman12italic.otf");
}
@font-face {
	font-family: lm;
	font-weight: bold;
	src: url("../../police/lm/lmroman12bold.otf");
}

*/

@font-face {
    font-family: lm;
    src: url('../../police/lm2/lmroman-bolditalic-webfont.eot');
    src: url('../../police/lm2/lmroman-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../police/lm2/lmroman-bolditalic-webfont.woff') format('woff'),
         url('../../police/lm2/lmroman-bolditalic-webfont.ttf') format('truetype'),
         url('../../police/lm2/lmroman-bolditalic-webfont.svg#latin_modern_roman10BdIt') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: lm;
    src: url('../../police/lm2/lmroman-bold-webfont.eot');
    src: url('../../police/lm2/lmroman-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../police/lm2/lmroman-bold-webfont.woff') format('woff'),
         url('../../police/lm2/lmroman-bold-webfont.ttf') format('truetype'),
         url('../../police/lm2/lmroman-bold-webfont.svg#latin_modern_roman10_bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: lm;
    src: url('../../police/lm2/lmroman-italic-webfont.eot');
    src: url('../../police/lm2/lmroman-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../police/lm2/lmroman-italic-webfont.woff') format('woff'),
         url('../../police/lm2/lmroman-italic-webfont.ttf') format('truetype'),
         url('../../police/lm2/lmroman-italic-webfont.svg#latin_modern_roman10_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: lm;
    src: url('../../police/lm2/lmroman-regular-webfont.eot');
    src: url('../../police/lm2/lmroman-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../police/lm2/lmroman-regular-webfont.woff') format('woff'),
         url('../../police/lm2/lmroman-regular-webfont.ttf') format('truetype'),
         url('../../police/lm2/lmroman-regular-webfont.svg#latin_modern_roman10_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.police_lm
{
  font-family: lm;
  font-size: 18px;
}

/* Généralités */

img 
{
  max-width: 100%;
  height: auto;
}


/* Cadre principale */

body
{
  position: relative;
  
  margin: 30px;
  
  font-size: 16px;
  font-family: Garamond, serif;
  
  background-image: url("../images/fd.png");
  background-repeat: no-repeat;
  
  background-color: var(--couleur-fond);
  
  max-width: 800px;
  
  margin: auto;
  padding: 10px; 
}

div#body_centre
{
  position: relative;
  
  margin: auto;
  
  padding: 0;
  
  max-width: 600px;
  
  border: none;
}

#corps
{
	position: relative;
	
	padding: 0;
	
	border: none;
}

#bandeau, #menu, #corps, #bas_de_page
{
  margin: 0px;
}

#bandeau, #bandeau2, #menu, #corps div.bloc, #corps div.bloc_connecte, #bas_de_page, #connexion
{  
  position: relative;
  
  background-color: var(--couleur-fond-bloc-transparent);
  
  margin-bottom: 25px;
  margin-right: 0px;
  
  padding: 7px;
  
  border-radius: 10px;
  
  box-shadow: 2px 2px 7px var(--couleur-ombre);
  
}

#bandeau
{    
  
  border: 4px solid var(--couleur-gen);
}


#bandeau
{
	margin-right: 220px;
	
	overflow-wrap: break-word; 
}

#bandeau2
{
	position: absolute;
	  top: 14px;
	  right: 10px;
	height: 180px;
	width: 180px;
}

#connexion
{
	border-left: 4px solid var(--couleur-gen);
  border-right: 4px solid var(--couleur-gen);
  border-bottom: 4px solid var(--couleur-gen);
  
  background-color: var(--couleur-fond-bloc-transparent);
}


#corps div.bloc, #corps div.bloc_connecte, #apercu
{
  padding: 9px;
  
  border-top: 4px solid var(--couleur-gen);
  border-right: 4px solid var(--couleur-gen);
  
  background-color: var(--couleur-fond-bloc-transparent);
}

#corps div.bloc_connecte
{
	border-top: 4px solid var(--couleur-gen-mifonce);
  border-right: 4px solid var(--couleur-gen-mifonce);
  
  background-color: var(--couleur-valide-transparent);
}

#bas_de_page
{
  
  
  padding: 8px;
  
  color: var(--couleur-gen-tres-clair);
  
  background-color: var(--couleur-gen-tres-fonce);
  
  border: 4px solid var(--couleur-gen-tres-fonce);
}

/* Bandeau */ 

div#contenant_logo_gf
{
	text-align: center;
	
	margin-top: 5px;
	margin-right: 40px;
}

img#logo_gf
{
	width: 450px;
}

div#contenant_titre_bandeau_gf
{
	text-align: center;
	
	margin-top: 10px;
	
	font-family: lm;
	font-size: 20px;
	
	color: var(--couleur-gen-tres-fonce);
	
	text-shadow: -1px 1px 1px var(--couleur-ombre);
}

div#contenant_logo_pf
{
	text-align: center;
	
	margin-top: 5px;
}

img#logo_pf
{
	width: 70px;
}

div#contenant_titre_bandeau
{
	position: relative;
	
	text-align: center;
	
	height: 180px;
	
	font-size: 23px;
	
	color: var(--couleur-gen-tres-fonce);
	
	text-shadow: -1px 1px 1px var(--couleur-ombre);
}

div#contenant_titre_bandeau strong
{
	color: var(--couleur-gen-mifonce);
}

div#contenant_titre_bandeau span
{
	display: block;
	width: 100%;
	margin: 0;
  position: absolute;
   top: 50%;
   left: 50%;
  transform: translate(-50%, -50%);
}

/* Connexion */

#bouton_connexion
{
	background-image: url('../../images/menu_mb.png');
}

/* Aperçu */

#apercu
{
  display: none;
  
  position: absolute;
  	top: 0px;
  	left: 0px;
  	
  min-height: 100%;
  width: 100%;
  	
  margin-right: 30px;
  margin-bottom: 30px;
  
  background-color: var(--couleur-fond-bloc-opaque);
  
  border-radius: 10px;
  
  box-shadow: 2px 2px 7px var(--couleur-ombre);
  
  z-index: 200;
}

    /* Apercu dans le cas grand écran +850px */ 
@media only screen and (min-width: 850px) 
{
	
	#apercu
	{
	  display: none;
	  
	    left: auto;
	  
	  min-width: 140px;
	  
	  width: auto;
	  height: calc(100% - 23px);
	  
	  margin-left: 630px;
	  
	}
}

#apercu_wysiwyg
{
  /*font-family: lm;*/
}

/* Liens */

a, a:visited
{
  color: var(--couleur-lien); 
}

a:hover, a:active
{
  color: var(--couleur-lien-actif);
}

a.atelecharger img:hover
{
	transform: translate(1px,1px);
}

#bas_de_page a, #bas_de_page a.visited
{
	color: var(--couleur-gen-tres-clair);
}

#bas_de_page a:hover, #bas_de_page a:active
{
  color: var(--couleur-gen-miclair);
}

/* Boutons et inputs */

input.input_block
{
  display: block;
  
  margin: 3px;
  margin-left: 0px;
  
  resize: horizontal;
  
  width: 90%;
  max-width: 300px;
}

.bouton_general, .bouton_texte, .bouton_texte_moyen, .bouton_texte_gros, .desc_motcle
{
	background-color: var(--couleur-gen-mifonce);
	color: var(--couleur-gen-miclair);
	font-size: 10px;
	font-weight : bold;
	
	padding: 3px;
	
	border: 3px solid var(--couleur-gen);
	border-radius: 10px;
	
	box-shadow: -1px 1px 2px var(--couleur-ombre);
}

.bouton_general
{
  width: 50px;
}

.bouton_general:hover
{
	transform: translate(1px,1px);
}

.bouton_texte, .bouton_texte_moyen, .bouton_texte_gros, .desc_motcle
{
  transform: translate(0px,-2px);
}

.bouton_texte:hover, .bouton_texte_moyen:hover, .bouton_texte_gros:hover, .desc_motcle:hover
{
	transform: translate(1px,-1px);
}

.bouton_texte_moyen
{
  padding: 4px;
  font-size: 12px;
}

.bouton_texte_gros
{
  padding: 5px;
  font-size: 15px;
}

.fermer_fonce
{
	background-color: var(--couleur-gen-fonce);
	color: var(--couleur-gen-miclair);
	font-size: 10px;
	font-weight : bold;
	
	border: 3px solid var(--couleur-gen);
	border-radius: 10px;
	
	width: 30px;
	height: 30px;
	
	box-shadow: -1px 1px 2px var(--couleur-ombre);
}

.fermer_fonce:hover
{
	transform: translate(1px,1px);
	
	background-color: var(--couleur-gen-tres-fonce);
}

#apercu input#fermer_apercu
{
  position: absolute;
  	top: -5px;
  	right: -5px;
}

input.voir_apercu, input.voir_apercu_gros, input.input_lettre
{
  background-color: var(--couleur-gen-clair);
  
  width: 35px;
	height: 35px;
  
  border: 3px solid var(--couleur-gen-mifonce);
	border-radius: 10px;
	
	box-shadow: -1px 1px 2px var(--couleur-ombre); 
}

input.voir_apercu, input.voir_apercu_gros
{
  
  background-image: url('../../images/oeil.png');
  background-repeat: no-repeat;
  background-position: center;
   
}

input.voir_apercu_gros
{
	width: 50px;
	height: 50px;
}

input.input_lettre
{
  padding: 0;
  color: black;
  font-size: 15px;
}

input.voir_apercu:hover, input.voir_apercu_gros:hover, input.input_lettre:hover
{
  transform: translate(1px,1px);
  
  background-color: var(--couleur-gen-miclair);
}

/* CSS général des pages */

.contenant_relatif
{
  position: relative;
}

.info_title
{
	color: black;
	background-color: var(--couleur-fond);
	
	padding: 5px;
	
  font-size: 20px;
  padding-left: 10px;
  
  margin-top: 10px;
  margin-bottom: 10px;
  
  border-left: 4px solid var(--couleur-gen);
  border-bottom: 4px solid var(--couleur-gen);
  border-radius: 10px;
  
  box-shadow: -2px 2px 8px var(--couleur-ombre);
}

div.bloc_connecte .info_title
{
	border-left: 4px solid var(--couleur-gen-mifonce);
  border-bottom: 4px solid var(--couleur-gen-mifonce);
}

.titre_clair, .titre_fonce
{
  padding: 7px;
  
  margin-bottom: 5px;
  margin-left: 7px;
  
  font-size: 15px; 
  
  color: var(--couleur-gen-clair);
  
  background-color: var(--couleur-gen-tres-fonce);
	
	border-left: 2px solid var(--couleur-gen-clair);
	border-bottom: 2px solid var(--couleur-gen-clair);
	
  border-radius: 10px;
  
  box-shadow: -2px 2px 8px var(--couleur-ombre);
}

.titre_clair
{  
  color: var(--couleur-gen-tres-fonce);
  
  background-color: var(--couleur-gen-tres-clair);
	
	border-left: 2px solid var(--couleur-gen-mifonce);
	border-bottom: 2px solid var(--couleur-gen-mifonce);
}

.titre_fonce a, .titre_fonce a:visited
{
  color: var(--couleur-gen);
}

.titre_fonce a:hover, .titre_fonce a:active
{
  color: var(--couleur-gen-miclair);
}

.rubrique
{
	position: relative;
	
	background-color: var(--couleur-gen-clair);
	
	border-left: 2px solid var(--couleur-gen);
	border-bottom: 2px solid var(--couleur-gen);
  border-radius: 10px;
  
  min-height: 20px;
  
  margin-top: 7px;
  margin-left: 7px;
  
  margin-bottom: 10px;
  
  padding: 6px;
  padding-left: 10px;
  
  box-shadow: -2px 2px 3px grey;
}

.rubrique:hover
{
	background-color: var(--couleur-gen-miclair);
}

.block_centre
{
  text-align: center;
}


/* Listes */

ul.clair, ul.fonce
{
  list-style-type: none;
  margin: 0;
  padding: 0; 
}

ul.clair li, ul.fonce li
{
  position: relative;
  
  margin-top: 8px;
  margin-left: 8px;
  
  padding: 6px;
  
  border-radius: 10px;
  
  box-shadow: -2px 2px 3px var(--couleur-ombre);
}

ul.clair li
{
  background-color: var(--couleur-gen-clair);
	
	border-left: 2px solid var(--couleur-gen);
	border-bottom: 2px solid var(--couleur-gen);
  
}

ul.fonce li
{
  color: var(--couleur-gen-clair);
  
  background-color: var(--couleur-gen-tres-fonce);
	
	border-left: 2px solid var(--couleur-gen-clair);
	border-bottom: 2px solid var(--couleur-gen-clair);	
}

ul.fonce li:hover
{
	background-color: var(--couleur-gen-fonce);  
}

ul.fonce a, ul.fonce a:visited
{
  color: var(--couleur-gen);
}

ul.fonce a:hover, ul.fonce a:active
{
  color: var(--couleur-gen-miclair);
}

ul.petite_liste
{
  margin: 0;
  padding-left: 10px;
}

ul.petite_liste li
{
  font-size: 11px;
}

/* URL */

.afficher_url
{
  
  margin: 5px;
  padding: 5px;
  
  text-align: center;
  
  color: black;
  font-size: 12px;
  font-family: monospace;
  
  border: 2px solid var(--couleur-gen);
  border-radius: 10px;
  
  background-color: var(--couleur-gen-miclair);  
  
}

.email
{
	font-family: monospace;
	
	font-weight: bold;
	
	color: var(--couleur-gen-mifonce);
}

/* Select */

select
{
  max-width: 95%;
}

input[type="text"], input[type="password"]
{
  max-width: 90%;
  
  padding: 5px;
  
  border: 2px solid var(--couleur-gen-fonce);
  border-radius: 8px;
  
  background-color: var(--couleur-gen-blanchi);
  
  box-shadow: 1px 1px 2px var(--couleur-ombre);
}

input[type="text"].erreur_formulaire, input[type="password"].erreur_formulaire, .erreur_formulaire input[type="text"]
{
  
  border: 2px solid var(--couleur-erreur);
  
  background-color: var(--couleur-erreur-clair);
}

input[type="text"].erreur_formulaire_variante, input[type="password"].erreur_formulaire_variante, .erreur_formulaire_variante input[type="text"]
{
  
  border: 2px solid var(--couleur-erreur-variante);
  
  background-color: var(--couleur-erreur-variante-clair);
}

/* Formulaire */

table.formulaire
{
  border: 2px solid transparent;
  border-radius: 10px;
  
  border-spacing: 6px 10px;
  
  margin-top: 10px;
  margin-bottom: 10px;
  
  width: 100%;
}

table.formulaire td
{
  padding: 3px;
  padding-left: 7px;
  border-radius: 10px;
  
  border-left: 2px solid var(--couleur-gen-clair);
	border-bottom: 2px solid var(--couleur-gen-clair);
	
	box-shadow: -2px 2px 3px var(--couleur-ombre);
}

table.formulaire tr td.champ_titre
{
  font-weight: bold;
  color: var(--couleur-gen-clair);
  background-color: var(--couleur-gen-tres-fonce);
}

table.formulaire tr td.champ
{
	text-align: left;
	
	color: var(--couleur-gen-tres-fonce);
  background-color: var(--couleur-gen-clair);
  
  border-left: 2px solid var(--couleur-gen);
	border-bottom: 2px solid var(--couleur-gen);
}

table.formulaire tr td.champ_info
{
	font-size: 12px;
	
	background-color: var(--couleur-gen-miclair);
}

/* Réponse formulaire // Erreurs */

div.reponse_envoi_positif, div.reponse_envoi_negatif
{
  position: relative;
	
	padding: 6px;
	padding-left: 10px;
	
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 7px;
	
	font-size: 16px;
  font-family: Garamond, serif;
	
	background-color : var(--couleur-valide-clair);

	color: black;
	
	border-top: none;
	border-left: 2px solid var(--couleur-valide);
	border-right: none;
	border-bottom: 2px solid var(--couleur-valide);
	
	border-radius: 10px;
	
	box-shadow: -2px 2px 3px var(--couleur-ombre);
}

div.reponse_envoi_negatif
{
  background-color: var(--couleur-erreur-clair);
  
  border-left: 2px solid var(--couleur-erreur);
	border-bottom: 2px solid var(--couleur-erreur);
}

div.reponse_envoi_positif ul, div.reponse_envoi_negatif ul
{
	font-size: smaller;
}

div.reponse_envoi_positif ul li, div.reponse_envoi_negatif ul li
{
	padding: 5px;
	margin-bottom: 5px;
	
	border-radius: 10px;
	
	background-color: var(--couleur-fond-bloc-transparent);
}

/* Pagination */

div.pagination
{
  text-align: center;
  
  margin: 10px;
}

div.pagination a, div.pagination span, div.pagination input.pagination_avant_apres
{
  margin-left: 5px;
  margin-right: 5px;
}

div.pagination span
{
  padding: 3px;
  
  border-radius: 100%;
  background-color: var(--couleur-gen-miclair);
}

div.pagination input.pagination_avant_apres
{
  transform: translate(-1px,-1px);
  
  font-weight: bold;
  border: none;
  background-color: transparent;
  
  padding: 3px;
  
  border-radius: 100%;
}

div.pagination input.pagination_avant_apres:hover
{
  transform: translate(0px,0px);
  background-color: var(--couleur-gen-miclair);
}

/* Mots Clés (voir aussi .desc_motcle -> .bouton_texte */

div.motcle
{
  position: relative;
  
  font-size: 12px;
}

div.motcle input.saisie_recherche
{
  max-width: 90%;
}

div.contenant_mc
{
  display: table;
  
  width: 97%;
  
  margin: 10px;
}

div.contenant_resultat_recherche, div.contenant_liste_motcle
{
  position: relative;
  
  display: table-cell;
  
  width: 50%;
  
  font-size: 14px;
  
  padding: 3px;
  
  background-color: var(--couleur-gen-tres-clair);
  
  border-left: 2px solid var(--couleur-gen);
  border-bottom: 2px solid var(--couleur-gen);
  
  border-radius: 5px;
  
  overflow: hidden;
  
}

div.resultat_recherche, div.liste_motcle
{
    
  opacity: 0.8;
  
  z-index: 101;
  
}

/* Rafraichir la page */

a.rafraichir_structure, a.rafraichir_structure:hover, a.rafraichir_structure:visited, a.rafraichir_structure:active
{
  position: absolute;
  	top: -30px;
  	right: -30px;
  
  display: block;
  
  font-size: 1px;
  color: transparent;
  
  background-image: url('../../images/rafraichir.png');
  background-repeat: no-repeat;
  background-position: center;
  
  background-color: var(--couleur-gen-tres-clair);
  
  border-radius: 100%;
  border: 5px solid var(--couleur-gen);
  
  width: 47px;
  height: 47px;
  
  opacity: 0.8;
}

a.rafraichir_structure:hover
{
  transform: rotate(-45deg);
}


/* Page Perso */

div.info_content
{
  margin-left: 15px;
}

div.contenant_photo
{
	text-align: right;
}

img#photo
{	
	display: block;
}

img#poincare
{
  
  border-radius: 10px;
  border: 1px solid tranparent;
  box-shadow: 0px 0px 8px var(--couleur-ombre);
}