@CHARSET "ISO-8859-1";
/* ===================================================================
   Annuaire national des reseaux CPias et CRAtb - feuille de style
   Refonte visuelle (palette, typographie, formulaires, boutons, liens)
   Tous les selecteurs existants sont conserves a l'identique : aucune
   page HTML n'a besoin d'etre modifiee pour beneficier de ce style.
   =================================================================== */

:root {
	--color-primary: #1B4B91;
	--color-primary-dark: #123568;
	--color-primary-light: #2E6FC7;
	--color-accent: #0E9C95;
	--color-danger: #D64545;
	--color-success: #1E8E5A;
	--color-warning: #DF7401;

	--color-bg: #F2F4F8;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F6F8FB;
	--color-border: #DDE3EC;

	--color-text: #232A33;
	--color-text-muted: #5B6472;

	--radius: 8px;
	--radius-sm: 5px;
	--shadow: 0 2px 10px rgba(27, 75, 145, 0.08);
	--shadow-lg: 0 8px 24px rgba(20, 40, 70, 0.12);

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html body {
	font: 100% Arial, Helvetica, sans-serif;
	font-family: var(--font-base);
	font-size: 10pt;
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.5;
}
img {
  vertical-align:middle;
  border:0px;
}

h2{
font-size : 20px;
color: var(--color-primary-dark);
}

form {
  margin: 0;
  display:inline;
}


table {
	border-collapse: collapse;

}

td {
	padding:5px 6px;

}
tr.impaire {
	background: var(--color-surface);
}

tr.paire {
	background: var(--color-surface-alt);
}
tr.impaire:hover,
tr.paire:hover {
	background: #E9F1FB;
}
td.laccueil {
	background: #E4EEFA;
}
/*---------------------------------------------------*/
/*Definition de la page d'acceuil*/
.Tbody {
	width:80%;
	background: var(--color-surface);
	text-align: left;
	margin: 20px 50px 20px 150px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);

}
.entete {
	width:80%;
	background: var(--color-surface);
	text-align: left;
	margin: 100px 50px 20px 150px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

#debut{
	font-size : 25px;
	font-weight : bold;
	margin-left: 150px;
	color: var(--color-primary-dark);
}
#texte{
	font-size : 25px;
	font-weight : bold;
	margin-left: 250px;
	color: var(--color-primary-dark);
}
#texte1{
	font-size : 25px;
	font-weight : bold;
	margin-left: 350px;
	color: var(--color-primary-dark);
}
#texte2{
	font-size : 16px;
	font-weight : bold;
	margin-left: 180px;
	color: var(--color-primary-dark);
}
#textecoul{
	color: var(--color-primary);
}
.aide{
	color: var(--color-success);
	font-size: 10px;
	font-weight:bold;
}
.aide2{
	color: var(--color-success);
	font-size: 11px;
	font-weight:bold;
}
#textecoul1{
	color: var(--color-accent);
	font-weight : bold;
}
#titre{
	font-size : 16px;
	font-weight : bold;
	color: var(--color-primary-dark);
}
#titre2{
	font-size : 14px;
	font-weight : bold;
	color: var(--color-primary-dark);
}
#titre3{
	font-size : 16px;
	font-weight : bold;
	margin-left: 450px;
	color: var(--color-primary-dark);
}
#question{
	font-size : 14px;
	font-weight : bold;
	margin-left: 80px;
}
.ident{
	text-align:left;
	margin-left: 350px;
}
.aide{
	margin-left: 850px;
}
.text_ident{
	text-align:left;
	margin-left: 22px;
}

.saut{
	margin-top: 80px;
	}
p {
   margin: 0.3em 0;
}
#titImpl{
	font-weight : bold;
	color: var(--color-warning);
}

/*Affichage des boutons dans l'indentification */
.flottante1{

    width: 200px;
    height: 13px;
    background: var(--color-surface-alt);
	padding:10px;
	margin-left: 60px;
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family : var(--font-base);
    font-size : 9pt ;
    font-style : italic;
	font-weight : bold;
	color: var(--color-text-muted);
}
.flottante2{

    width: 200px;
    height: 20px;
    background: var(--color-surface-alt);
	padding:10px;
	margin-left: 200px;
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family : var(--font-base);
    font-size : 10pt ;
    font-style : italic;
	font-weight : bold;
	color: var(--color-text-muted);
}
/*  Pied de page de l'dentification*/
.pied {
	font-size:10pt;
	width:80%;
	background: var(--color-surface-alt);
	margin: 20px 50px 20px 150px;
	border-radius: var(--radius);
}
#suitepied {
	margin-left : 700px ;

}
/*-------------------------------------------------*/
/*Definition pour chaque page de l'application */
#boutton{
	font-size:9pt;
	text-align : center;
	font-weight : bold;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	border: none;
	background-color: var(--color-primary);
	color: white;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
#boutton:hover{
	background-color: var(--color-primary-light);
	box-shadow: var(--shadow);
}
#bouttonG{
	font-size:11pt;
	text-align : center;
	font-weight : bold;
	background-color: var(--color-primary);
	color:white;
	padding: 8px 20px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
#bouttonG:hover{
	background-color: var(--color-primary-light);
	box-shadow: var(--shadow);
}
#bouttonC{
	font-size:11pt;
	text-align : center;
	font-weight : bold;
	background-color: var(--color-danger);
	color:white;
	padding: 8px 20px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
#bouttonC:hover{
	background-color: #B93636;
	box-shadow: var(--shadow);
}
#bouttonPerso{
	font-size:13pt;
	text-align : center;
	font-weight : bold;
	background-color: var(--color-primary);
	color:white;
	padding: 8px 20px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
#bouttonPerso:hover{
	background-color: var(--color-primary-light);
	box-shadow: var(--shadow);
}
.boutton{
	margin-left: 400px;
	margin-top: 40px;
	font-size:25pt;

}
#gras{
	font-weight : bold;
}

.contenu {
	background: var(--color-surface);
	margin: 10px 50px 10px;
	padding-left:50px;
	padding-right:20px;
}
.corps {
	background: var(--color-surface);
	margin: auto 50px 30px 50px;
}
.Tsuite {
	width:50%;
	height:150px;
	background: var(--color-surface);
	text-align: left;
	margin: 150px 750px 0px 320px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);

}
.erreur{
	color: var(--color-danger);
	font-weight: bold;
	text-align: center;
	margin-left: 130px;
}
.texteC{
	font-weight: bold;
	margin-left: 380px;
}
.libelle{
	color: var(--color-warning);
	font-weight: bold;
}
.libelleR{
	color: var(--color-success);
	font-weight: bold;
}
.libelleS{
	color: var(--color-primary);
	font-weight: bold;
	text-decoration:underline;
}
.texteInfo{
	font-size : 9px;
	color: var(--color-primary);
	font-weight: bold;
}
.libelleI{
	font-size : 14px;
	font-weight: bold;
	margin-left: 200px;
}
/*----------------------------------------------------*/
/* Les liens ne seront plus soulignes */

a {
text-decoration: none;
transition: color .12s ease, background-color .12s ease;
}

a:link {
	color: var(--color-primary);
	text-decoration: none;
}
a:visited {
	color: var(--color-primary);
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: var(--color-danger);
}
a:active {
	text-decoration: none;
	color: var(--color-primary-dark);
}
/* lorsque le lien est affiche*/
a:link.lien{
	color: var(--color-primary);
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
}
a:link.lien_gros{
	color: var(--color-primary);
	text-decoration:none;
	font-weight:bold;
	font-style:normal;
	font-size:10pt;
}
a:link.lien_autre{
	text-decoration:none;
	font-weight:normal;
	font-style:italic;
	font-size:10pt;
	color: var(--color-primary);
}
a:hover.lien_gros{
	color: var(--color-primary);
	text-decoration:none;
	font-weight:bold;
	font-style:normal;
	font-size:10pt;
}
a:hover.lien{
	color: white;
	background-color: var(--color-primary);
	text-decoration:none;
	font-size:10pt;
	border-radius: 3px;
}
/*Lien sur lequel on a deja clique*/

/* Lorsqu on passe la souris sur le lien*/
a:hover.lien_autre{
	color: white;
	background-color: var(--color-primary);
	text-decoration:none;
	font-size:10pt;
	border-radius: 3px;
}
a:visited.lien_autre{
	color: var(--color-primary);
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
}
a:visited.lien_gros{
	color: var(--color-primary);
	text-decoration:none;
	font-weight:bold;
	font-style:normal;
}
.dhtmlgoodies_question {
	color: var(--color-warning);
	cursor: pointer;
}
.dhtmlgoodies_answer {
	visibility: hidden;
	overflow: hidden;
}
/* Affichage des bouton dans l'affichage acteur */
.bouton1{
	padding:10px;
	margin-left: 400px;
	margin-top : 400px;
	text-align: center;
    font-size : 9pt ;
}
.bouton2{
	float:left;
	margin:2px;
	padding:10px;
	margin-left: 450px;
	margin-top : 400px;
	text-align: center;
    font-size : 9pt ;
}

/*----------------------------------------------------*/
/* Formulaires : champs de saisie, listes, cases a cocher */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
	font-family: var(--font-base);
	font-size: 10pt;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 5px 8px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-primary-light);
	box-shadow: 0 0 0 3px rgba(46, 111, 199, 0.18);
}
input[type="submit"],
input[type="button"],
button {
	font-family: var(--font-base);
	font-size: 10pt;
	font-weight: bold;
	color: white;
	background-color: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	padding: 7px 18px;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background-color: var(--color-primary-light);
	box-shadow: var(--shadow);
}
hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 12px 0;
}

/*----------------------------------------------------*/
/* Page de connexion (index.php) - mise en page moderne */
.login-card {
	max-width: 480px;
	margin: 40px auto;
	padding: 40px 48px 32px;
	float: none;
}
.login-title {
	color: var(--color-primary-dark);
	font-size: 22px;
	margin: 0 0 18px;
	text-align: center;
}
.login-intro {
	color: var(--color-text-muted);
	font-size: 10pt;
	margin: 0 0 10px;
	line-height: 1.5;
}
.login-form {
	margin-top: 24px;
}
.login-field {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.login-field label {
	width: 110px;
	flex-shrink: 0;
	font-weight: bold;
	color: var(--color-text);
}
.login-field input[type="text"],
.login-field input[type="password"] {
	flex: 1 1 180px;
}
a.login-link:link,
a.login-link:visited {
	font-size: 9pt;
	font-style: italic;
	font-weight: bold;
	color: var(--color-danger);
	white-space: nowrap;
}
a.login-link:hover {
	color: var(--color-danger);
	text-decoration: underline;
}
.login-actions {
	text-align: center;
	margin: 20px 0;
}
.login-actions input[type="submit"] {
	padding: 10px 32px;
	font-size: 11pt;
}
.login-footer {
	text-align: center;
	margin-top: 24px;
	font-size: 9pt;
}

/*----------------------------------------------------*/
/* Bandeau d'entete de la zone membres (_private/_head.php) */
.app-header {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.app-header-logo {
	flex-shrink: 0;
}
.app-header-title {
	font-size: 22px;
	font-weight: bold;
	color: var(--color-primary-dark);
	flex: 1 1 auto;
}
.app-header-user {
	color: var(--color-accent);
	font-weight: bold;
	white-space: nowrap;
}
.app-header-welcome {
	font-weight: bold;
	font-size: 12pt;
	margin-right: 12px;
}
.app-header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 10px 0;
}
.app-header-actions-right {
	margin-left: auto;
	color: var(--color-primary);
}

/*----------------------------------------------------*/
/* Page d'accueil membres (membres/accueil.php) */
.aide-corner {
	text-align: right;
	margin: 4px 0 10px;
}
.search-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 24px;
	overflow: hidden;
}
.search-panel-header {
	background: #E4EEFA;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--color-border);
}
.search-panel-header #titre {
	color: var(--color-primary-dark);
}
.search-panel-body {
	padding: 20px 24px;
}
.search-grid {
	display: grid;
	grid-template-columns: 190px minmax(160px, 1fr) 190px minmax(160px, 1fr);
	gap: 14px 16px;
	align-items: center;
}
.search-grid label {
	font-weight: bold;
	color: var(--color-text);
}
.search-grid input[type="text"],
.search-grid select {
	width: 100%;
	box-sizing: border-box;
}
.search-actions {
	text-align: center;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 16px 0;
}
.admin-grid input[type="button"] {
	width: 100%;
}
.admin-grid #boutton {
	font-size: 10pt;
	color: white;
	background-color: var(--color-primary);
	background: var(--color-primary);
	border: none;
}
.admin-grid #boutton:hover {
	background-color: var(--color-primary-light);
	background: var(--color-primary-light);
	box-shadow: var(--shadow);
}
@media (max-width: 900px) {
	.search-grid {
		grid-template-columns: 160px 1fr;
	}
}

/*----------------------------------------------------*/
/* Onglets (membres/accueil.php) */
.tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--color-border);
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.tab-btn {
	background: none;
	border: none;
	font-family: var(--font-base);
	padding: 12px 22px;
	font-size: 11pt;
	font-weight: bold;
	color: var(--color-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color .15s ease, border-color .15s ease;
}
.tab-btn:hover {
	color: var(--color-primary);
}
.tab-btn.active {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}