:root
{
	--couleur-1: #96b3da;
	--couleur-1-survol: #6395d6;
	--fond-defaut-1: #FFFFFF;
	--fond-defaut-2: #EFEFEF;
	--bordure-defaut-1: #CDCDCD;
	--bordure-defaut-champ: #9C9C9C;
	--bordure-couleur-1: #536a8b;
	--bordure-couleur-2: #002ca3;
	--texte-normal: #000000;
	--texte-leger-1: #515151;
	--texte-inverse: #FFFFFF;
}

html, body
{
	margin: 0;
	padding: 0;
	font-family: Tahoma, Helvetica, Arial;
	font-size: 12px; /* 10px pour jQuery */
}
*
{
	box-sizing: border-box;
}
a, a:visited, a:hover,
.lien-navigation-couleur
{
	color: blue;
}
.lien-navigation-couleur
{
	text-decoration: underline;
	cursor: pointer;
}
.surligne
{
	background-color: #DAFDA0;
}
h1
{
	text-align: center;
	margin: 0;
	padding: 20px 0;
}
footer
{
	display: block;
	margin: 30px 0 0;
	padding: 10px 0;
	text-align: center;
	color: #515151;
	background-color: #EFEFEF;
	border-top: 1px solid #CDCDCD;
}
footer > *
{
	display: inline-block;
	vertical-align: top;
}
footer > * + *
{
	margin-left: 48px;
}
input[type="submit"]
{
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid var(--bordure-couleur-1);
	background-color: var(--couleur-1);
	cursor: pointer;
}
input[type="submit"]:hover
{
	background-color: var(--couleur-1-survol);
}

#maintenance
{
	padding: 16px;
	margin-bottom: 16px;
	text-align: center;
	border: 1px solid #CDCDCD;
}
#maintenance > h2
{
	padding: 0;
	margin: 0;
	font-weight: normal;
}

form.connexion,
form.modifier-mdp
{
	display: block;
	width: 384px;
	margin: 40px auto 0;
	padding: 16px 24px;
	background-color: #EFEFEF;
	border: 1px solid #CDCDCD;
	box-shadow: 5px 5px 7px 7px #515151;
}
form.connexion > *,
form.modifier-mdp > *
{
	margin: 16px 0;
}
form.connexion > .connexion,
form.connexion > .mdp-oublie
{
	padding: 16px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
form.modifier-mdp > .valider
{
	display: flex;
	justify-content: center;
}
form.connexion > .champ,
form.modifier-mdp > .champ
{
	padding: 4px;
	background-color: #FFFFFF;
	border: 2px solid var(--bordure-defaut-champ);
	border-radius: 8px;
}
form.connexion > .champ:focus-within,
form.modifier-mdp > .champ:focus-within
{
	border-color: var(--bordure-couleur-2);
}
form.connexion.mot-de-passe-oublie > .champ.mdp,
form.connexion.mot-de-passe-oublie > .connexion,
form.connexion:not(.mot-de-passe-oublie) > .mdp-oublie
{
	display: none;
}
form.connexion > * > label,
form.modifier-mdp > * > label
{
	display: block;
	padding: 2px 0;
	font-weight: bold;
	color: var(--texte-leger-1);
}
form.connexion > * > input[type="email"],
form.connexion > * > input[type="password"],
form.modifier-mdp > * > input[type="password"]
{
	width: 96%;
	border: none;
}
form.connexion > * > input[type="email"]:focus,
form.connexion > * > input[type="password"]:focus,
form.modifier-mdp > * > input[type="password"]:focus
{
	outline: none;
}
form.connexion > * > input[type="email"]:not(:empty):invalid + .invalide,
form.connexion > * > input[type="password"]:not(:empty):invalid + .invalide,
form.modifier-mdp > * > input[type="password"]:not(:empty):invalid + .invalide
{
	display: block;
	color: red;
}


#informations-numero
{
	display: none;
	position: absolute;
	top: 150px;
	left: 15%;
	padding: 20px 2%;
	background-color: #FFFFFF;
	width: 65%;
	border: 1px solid #CDCDCD;
	box-shadow: 5px 5px 10px 10px #515151;
}
#informations-numero .conteneur-numero
{
	display: -webkit-flex; display: flex;
}
#informations-numero .conteneur-numero .conteneur-couverture
{
	-webkit-flex: 1 1 auto; flex: 1 1 auto;
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: center; align-items: center;
	padding: 10px 2%;
	background-color: #515151;
}
#informations-numero .conteneur-numero .conteneur-couverture > img
{
	max-width: 100%;
}
#informations-numero .conteneur-numero .conteneur-informations
{
	-webkit-flex: 0 0 250px; flex: 0 0 250px;
	padding: 0 0 0 2%;
}
#informations-numero .conteneur-numero .conteneur-informations>.titre
{
	color: #515151;
	display: inline-block;
	width: 20%;
	vertical-align: top;
}
#informations-numero .conteneur-numero .conteneur-informations>.valeur
{
	display: inline-block;
	width: 80%;
	vertical-align: top;
}

#informations-support
{
	display: none;
	position: absolute;
	top: 150px;
	left: 20%;
	padding: 20px 2%;
	background-color: #FFFFFF;
	width: 60%;
	border: 1px solid #CDCDCD;
	box-shadow: 5px 5px 10px 10px #515151;
}


.informations-utilisateur
{
	margin: 24px auto 32px;
	max-width: 512px;
	padding: 8px 16px;
	border: 1px solid #CDCDCD;
	border-radius: 16px;
}
.informations-utilisateur > .ligne
{
	padding: 8px 0;
	display: flex;
	align-items: center;
}
.informations-utilisateur > .ligne > .libelle
{
	flex: 0 0 128px;
}
.informations-utilisateur > .ligne > .valeur,
.informations-utilisateur > .ligne > .info
{
	flex: 1 1 auto;
}
.informations-utilisateur > .ligne > .icone
{
	flex: 0 0 32px;
	padding: 4px 0;
	line-height: 1em;
	font-size: 16px;
	text-align: center;
	border: 1px solid #CDCDCD;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}
.informations-utilisateur > .ligne > .icone:hover
{
	background-color: #515151;
}
.informations-utilisateur > .info
{
	padding: 0 0 8px 128px;
}

.conteneur-recherche-support
{
	width: 90%;
	margin: 0 auto;
	padding: 8px 0;
}
.conteneur-recherche-support nav
{
	padding: 16px 0 0;
	margin: 0;
	text-align: center;
}
.conteneur-recherche-support nav > *
{
	display: inline-block;
}
.conteneur-recherche-support nav > *:not(:last-child)
{
	margin-right: 24px;
}
.conteneur-recherche-support form
{
	display: block;
}
.conteneur-recherche-support form p
{
	margin: 0;
	text-align: center;
}
.conteneur-recherche-support form p input[type="text"]
{
	width: 150px;
}
.conteneur-resultats-recherche
{
	width: 90%;
	margin: 20px auto 0;
	/*	100 - header - form - margin résultats recherche - footer	*/
	min-height: calc(100vh - 70px - 23px - 20px - (30px + 37px));
}
.conteneur-resultats-recherche table
{
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #CDCDCD;
}
.conteneur-resultats-recherche table tr>*
{
	border: 1px solid #CDCDCD;
	padding: 0;
}
.conteneur-resultats-recherche table thead tr > *
{
	padding-top: 10px;
	padding-bottom: 10px;
}
.conteneur-resultats-recherche table thead tr,
.conteneur-resultats-recherche table tbody tr:hover
{
	background-color: #EFEFEF;
}
.conteneur-resultats-recherche table tr>.identifiant-support
{
	width: 8%;
	padding-left: 1%;
}
.conteneur-resultats-recherche table tr>td.identifiant-support
{
	color: #808080;
	font-size: 10px;
}
.conteneur-resultats-recherche table tr>.nom-support
{
	padding-left: 1%;
}
.conteneur-resultats-recherche table tr>.id-kiosque-support,
.conteneur-resultats-recherche table tr>.ipg
{
	width: 7%;
	text-align: center;
}
.conteneur-resultats-recherche table tr>.cppap
{
	width: 10%;
	text-align: center;
}
.conteneur-resultats-recherche table tr>.correspondance-support
{
	width: 13%;
	padding-left: 1%;
	padding-right: 1%;
}
.conteneur-resultats-recherche table tbody tr>.correspondance-support
{
	cursor: pointer;
	background-size: 16px 16px;
	background-position: right center;
	background-repeat: no-repeat;
}
.conteneur-resultats-recherche table tbody tr:not(.modification-en-cours)>.correspondance-support:hover
{
	background-image: url('../images/editer.png');
}
.conteneur-resultats-recherche table tbody tr.modification-en-cours>.correspondance-support
{
	text-align: center;
}
.conteneur-resultats-recherche table tbody tr>.correspondance-support input
{
	width: 96%;
	margin: 0;
	padding: 4px 2%;
	border: none;
	outline: 1px solid #CDCDCD;
	outline-offset: -1px;
}
.conteneur-resultats-recherche table tbody tr>.creer,
.conteneur-resultats-recherche table tbody tr>.supprimer
{
	width: 4%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	color: #515151;
}
.conteneur-resultats-recherche table tbody tr.modification-en-cours>.creer,
.conteneur-resultats-recherche table tbody tr.modification-en-cours>.supprimer
{
	color: transparent;
}
.conteneur-resultats-recherche table tbody tr>.correspondance-support button
{
	width: 80%;
	margin: 3px 0 0;
	padding: 3px 0;
	background-color: #515151;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
}
.conteneur-resultats-recherche table tr>.dernier-numero
{
	width: 11%;
	text-align: center;
}
.conteneur-resultats-recherche table tbody tr>.dernier-numero
{
	cursor: pointer;
}
.conteneur-resultats-recherche table tr>.derniers-numeros
{
	width: 7%;
	text-align: center;
}
.conteneur-resultats-recherche table tr>.references-clients
{
	width: 4%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	color: #515151;
}



.parutions-titre
{
	padding: 30px 0 15px;
}
.parutions-titre > h2,
.parutions-titre > h3,
.parutions-titre > h4
{
	text-align: center;
	margin: 0;
	padding: 0;
}
.parutions-titre > h2
{
	padding: 15px 0 0;
}
.parutions-titre > h3
{
	max-width: 290px;
	padding: 5px 10px;
	margin: 10px auto;
	text-align: left;
	font-weight: normal;
	background-color: #F8F8F8;
}
.parutions-titre > h3 > div
{
	padding: 3px 0;
}
.parutions-titre > h3 > div > span
{
	display: inline-block;
	width: 110px;
	color: #818181;
	font-size: 0.9em;
}
.parutions-titre > h4
{
	font-weight: normal;
	padding-top: 10px;
}
.parutions-titre > ul
{
	margin: 0 auto;
	padding: 15px 0 30px;
	max-width: 500px;
}
.parutions-titre > ul > li
{
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	padding: 5px 0;
	transition: all 400ms;
}
.parutions-titre > ul > li:hover
{
	background-color: #EFEFEF;
}
.parutions-titre > ul > li > .couverture
{
	-webkit-flex: 0 0 110px; flex: 0 0 110px;
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: center; align-items: center;
}
.parutions-titre > ul > li > .couverture > img
{
	max-width: 100%;
}
.parutions-titre > ul > li > .informations
{
	-webkit-flex: 1 1 auto; flex: 1 1 auto;
}
.parutions-titre > ul > li > .informations > .numero,
.parutions-titre > ul > li > .informations > .date-faciale,
.parutions-titre > ul > li > .informations > .date-parution
{
	padding: 2px 0;
}
.parutions-titre > ul > li > .informations > * > span
{
	color: #808080;
}
.parutions-titre > ul > li > .informations > .numero
{
	font-weight: bold;
}
.parutions-titre > ul > li > .informations > .numero > span
{
	font-weight: normal;
}