/*
Theme Name: chssntheme

Author: Flamme Lisa
Author URI: https://liam.assurance-maladie.fr
Description: Thème officiel du site du Comité d'Histoire de la Sécurite sociale Normandie
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: Assurance Maladie, CPAM, Comité d'Histoire
*/

/* 
-------------------------------------------------------------- */
*{
	box-sizing: border-box;
}

html, body{
    	background-color: #ffffff;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	font-family: 'Nunito', sans-serif;
}

pre{
	font-family: 'Nunito', sans-serif;
}

a{
	text-decoration: underline;
	color: #685155;
}

h1, h2 {
	 font-size: 2em;
 }
 
 h3{
	 font-size: 1.3em;
 }
 
 p{
	 font-size: 16px;
 }
 
 h1, h2, h3, h4, h5, h6{
	  font-family: 'Judson', serif;
	  color: #037971;
 }
 
 a{
	text-decoration: underline;
	color: #685155;
 }
  
 hr{
	margin:auto;
	background-color: #685155;
	width: 60%;	
	height: 1px;
	border: 0px;
 }
 
 span{
	 font-weight: bold;
 }
 
 button{
	border-radius: 100px;
	color: #fff;
	background-color: #685155;
	padding: 5px 15px;
	border: 0;
	cursor: pointer;
}

 button a{
	color: #fff;
	text-decoration: none;
}


/*ARTICLE-------------------------------------------------------------------------------------------*/

.principale{
	width: 60%;
	margin: auto;
}

.principale img{
	width: auto;
	height: auto;
}

/*HEADER-------------------------------------------------------------------------------------------*/

#haut-de-la-page {
	margin: auto;
	max-width: 60%;
	display: flex;
	justify-content:center;
}

#haut-de-la-page img{
	max-width: 70px;
	margin: 0.7em 1.3em 0.7em 0;
}

/*MENU-------------------------------------------------------------------------------------------*/
nav{
	margin: auto;
	min-width: 60%;
}

nav .menu {
	position: relative;
	text-align: center;
	margin: 0px;
	padding: 0px;
	display: block;
}

nav .lien-menu {
	display: inline-block;
}

nav .titre-menu {
	display:inline-block;
	color: #685155;
	text-align: center;
	padding: 13px 30px;
	text-decoration: none;
	transition: 0.2s;
	min-height: 35px;
	line-height: 35px;
}

nav li .titre-menu:hover, nav li a:hover {
	background-color: #685155;
	color: #fff;
}

.sous-menu{
	position: absolute;
	visibility: collapse;
	z-index: 1000;
	background-color: #fbfbfb;
	padding: 0px;
	display: block;
}

.parent:hover .sous-menu{
	visibility: visible; 
}

.lien-sous-menu{
	display: flex;
	justify-content: center;
	width: auto;
	border-bottom: solid 1px #685155;
	border-right: solid 1px #685155;
	border-left: solid 1px #685155;
}

.lien-sous-menu a{
	padding: 7px 15px;
	line-height: 35px;
	white-space: nowrap;
	width: 100%;	
	text-decoration: none;
}

.lien-sous-menu:first-child{
	border-top: solid 1px #685155;
}

/*PAGINATION-----------------------------------------------------------------------------------------*/

.pagination{
	width: 60%;
	margin: 2em auto 0em auto;
	text-align: center;
}

.pagination h2{
	display: none;
}

.pagination .page-numbers{
	color: #685155;
	margin: 0px 0.3em;
	text-decoration: none;
	border-radius: 5px;
	padding: 0.5em 0.8em;
	border: solid 1px rgba(104, 81, 85, 0);
}

.pagination .page-numbers:hover{
	border-color: rgba(104, 81, 85, 1);
}


/*FOOTER----------------------------------------------------------------------------------------------*/

footer {
	text-align: center;
	min-width: 100%;
	background-color: #037971;
	height: auto;
	padding-bottom: 1em;
	margin-top: 2em;
}

footer a {
	line-height: 5em;
	margin: 1em 1.5em;
	color: #fff;
}

footer p{
	color: #fff;
}

/*PUBLICATIONS----------------------------------------------------------------------------------------*/

.publi {
	margin: 1.2em auto;
	padding: 1em;
	border: solid 1px #c6c6c6;
	border-radius: 15px;
	min-width: 60%;
	max-width: 60%;
	max-height: 400px;
	display: flex;
	justify-content: space-between;
}

.titre-publi{
	margin: 1em auto 0 auto;
	color: #037971;
	text-decoration : none;
}

.illustration-publi{
	flex-direction: column;
	min-width: 300px;
	max-width: 300px;
	max-height: 350px;
	overflow: hidden;
	text-align: center;
}

.illustration-publi img{
	height: 100%;
	width:auto;
	overflow: hidden;
	text-align: center;
}

.col1{
	flex-direction: column;
	margin-right: 2em;
}

.flexflexsuite{
	text-align:right;
}

.lire-la-suite{
	color: #685155;
	text-decoration: underline;
}

.col1 p{
	overflow: hidden;
	max-height: 200px;
	text-align: justify;
}

#prec{
	width: 50%;
	margin: auto;
	text-align: left;
}

#suiv{
	width: 50%;
	margin: auto;
	text-align: right;
}

#prec-suiv{
	width: 60%;
	margin: auto;
	display: flex;
	margin-top: 2em;
}

/*FIL D'ARIANE------------------------------------------------------------------------------------------*/

.fil-d-ariane{
	width: 60%;
	margin: 1em auto;
}
  
.fil-d-ariane span{
	font-weight: none;
	color: #685155;
	list-style: none;
}
/*BARRE DE RECHERCHE-------------------------------------------------------------------------------------------*/

#zone-de-recherche{
	margin: 1em auto;
	justify-content: center;
	display: flex;
}

#barre-de-recherche{
	border-radius: 100px;
	min-width: 45em;
	border: solid 1px #c6c6c6;
	padding: 5px 15px;
}

#bouton{
	border-radius: 100px;
	color: #fff;
	background-color: #685155;
	padding: 5px 15px;
	border: 0;
	cursor: pointer;
}

#archives-publi{
	margin-right: 2.5em;
}

#archives-publi a{
	color: #fff;
}

/*404-------------------------------------------------------------------------------------------*/

.error404{
	width: 60%;
	margin: auto;
}

/* Formulaire de contact------------------------------------------------------------------------*/

/*****BEGIN Personnalisation du formulaire de contact *****/
.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding:10px; }
.errorForms { border: 1px solid #f00; padding:10px; color: #f00; }
.error { color: #f00; }

/*****Formulaire*****/
ol.forms { float: left; list-style: none; margin: 10; width: 100%; }

ol.forms li { 
	clear: both; 
	float: left; 
	margin-bottom: 18px; 
	position: relative;
	width: 100%;
}

ol.forms label {
	padding-right: 20px;
	width: 100px;
}

ol.forms input, ol.forms textarea {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #8E9BA9;
    padding: 5px;
    width:400px;
}

ol.forms input:hover, ol.forms textarea:hover {
	background: none repeat scroll 0 0 #eeecec;
    border: 1px solid #8E9BA9;
    padding: 5px;
    width:400px;
}

ol.forms textarea { 
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #8E9BA9;
    padding: 5px;
    width:400px;
    height:200px;
}

ol.forms textarea:hover { 
    background: none repeat scroll 0 0 #eeecec;
    border: 1px solid #8E9BA9;
    padding: 5px;
    width:400px;
}

ol.forms li.screenReader { margin-bottom: 0; }

ol.forms li.buttons button {
	background-color: #F9F9F9;
    border: 1px solid #8E9BA9;
    width: 60px;
    height: 30px;
}

ol.forms li.buttons button:hover { 
    background-color: #eeecec;
    border: 1px solid #8E9BA9;
}

ol.forms li.inline input { width: auto; }

ol.forms li.inline label { 
display: inline; 
float: none; 
width: auto; 
}
/*****END Personnalisation du formulaire de contact *****/