/*
style.css
---------

Essai pour le site du Cabinet Bouan

----------------------------------------------------------
body
--header
----div bloclogo
------img logo
----nav menuprinc
------ul onglets
--section
----nav menusec
------ul lateral
----article
--footer
----------------------------------------------------------
body a une taille maxi et est centr 
*/

body
{
	max-width: 1300px;
	font-family: Arial, Verdana, sans-serif;
	margin-top : 0;
	margin-left : auto;
	margin-right : auto;
}

@media all and (max-width: 1300px)
{
    .fixe{position:relative;}
    #menusec {padding-left: 10px;}
    footer {width: auto;}
    iframe {margin-right: 10%;}
/*    .contact {margin-left: 10%;}*/

}

h1
{
    color : #376092 ;
    font-size: x-large;
    font-weight: 800;
    text-decoration: none;
}

h2
{
    /*color : #595959;*/
	    color : #376092 ;
    font-size: large;
    font-weight: bold;
    /*text-decoration: underline;*/
	margin:0
}

.Etat0   { background-color : #82E0AA ;}
.Etat1   { background-color : #FEF77F ;}
.Etat2   { background-color : #98f5c0;}
.Etat3   { background-color : #D5F5E3 ;}
.Etat4   { background-color : #F6DDCC ;}
.Etat5   { background-color : #AED6F1 ;}
.Etat6   { background-color : #EAEDED ;}
.Etat7   { background-color : #D7DBDD ;}
.Etat9   { background-color : #AAB7B8 ;}
.Etat11   { background-color : #AAB7B8 ;}

.Delai_Officiel { font-weight : bold ;}
.Delai_Officiel_Urgent {background-color : #FBFF00 ; font-color : #FD000 ; font-weight : bold ;}
.Courrier_sortant { background-color : #F5F5F5 ; font-style : italic ;}

.Even_fini { background-color : #F5F5F5 ;}
.Facture_en_cours { background-color : #C0C0C0 ;}
.Delai_depasse { background-color : red ;}
.Delai_tresproche { background-color : #FF6000 ;}
.Delai_proche { background-color : #FFC000 ;}
.Delai_moyen { background-color : #F0F000 ;}
.Delai_loin { background-color : #B0FF00 ;}

#prerempli
{
background-color : #DADADA ;	
  font-style: italic;
}

/*em ( l ment important, qui apparait en g n ral en italiquue) est utilis  pour les onglets abr g s*/
em
{
font-style: normal;
}

/*
---------
img LOGO
---------
*/


#logo
{				 	   /*border : 1px solid green;*/
	display: inline-block;
	vertical-align: top;
	width : 50%;
	min-width : 450px;
	max-width : 600px;
	height: auto;
}


/*
----------------------------------------------------------------------
NAV MENUPRINC (barre d'onglets) contient la liste onglets
----------------------------------------------------------------------
*/

#menuprinc
{					   /*border : 1px solid red;*/
        border-bottom : 1px solid #9EA0A1;
}

#onglets
{					   /*border : 1px solid green;*/

	display: flex;
	flex-direction: row;
    	flex-wrap: nowrap;
        position : relative;
        border : 1px solid transparent;
        padding : 0;
        list-style-type : none;
        margin: -2; 		/*permet d'aligner les onglets sur la ligne de base*/
}


#onglets li
{
    height : 25px; /*   modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color:  #f2f3f4 ;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
	white-space: nowrap;
}

#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #fff;
    font-weight: bold;
}

#onglets a
{
    display : block;
    color : #376092 ;
    text-decoration : none;
    padding : 4px;
}

#onglets a:hover
{
    border-bottom: 1px solid #fff;
    background-color : #fff;
}


/*
----------------------------------------------------------------------
SECTION contient nav menusec et articles
----------------------------------------------------------------------
*/

section
{					   /*border : 1px solid red;*/
    background-color :#fff;
}

#menusec
{
	float: left;
    	width: 200px;

}

#lateral
{
    	display: flex;
	flex-direction: column;
        padding : 0;
        list-style-type : none;
    	position : relative;
	top :0;
	left : 0;
        margin-top : 0;
    	width: 200px;
					   /*border : 1px solid blue;*/
}

#lateral a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
    overflow: hidden;
}

#lateral a:hover
{
    background-color : #fafafa;
}

#lateral li
{
    height : 25px; /*   modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color:  #f2f3f4 ;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
}
#lateral li.active
{
    background-color: #fafafa;
    font-weight: bold;
}

article
{
    margin-left: 220px;
  /*  text-align: justify; */
    margin-right : 30px;
    max-width : 1000px;
    background-color :#fff;
					   /*border : 1px solid green;*/
}


div.colonnegauche {
width: 50%;
  display: inline;
  float: left;
  border-right: 2px solid black;

}

div.colonnedroite {
	display: inline;
	width: 50%;
  padding-right: 5px;

}

.droite
{
    margin-left: 20px;
	float: right;
    	width: 30%;
					   /*border : 1px solid green;*/
}

footer
{					   /*border : 1px solid red;*/
position : relative;
text-align: center;
clear: both;
}

/*/////////////////////////////////
//Présentation des formulaires //
////////////////////////////////*/

form {
	 background-color:#f2f3f4;
	 padding:5px;
	 width: 80%;
}
form.large {
	width:100%;
}
form.tiny {
	width:70%;
}

fieldset {
	 padding:0 20px 20px 20px;
	 margin-bottom:10px;
	 border:1px solid #666;
}
fieldset div{
	 padding: 5px;
	 margin-right:40px;
	 height: 38px;
}
legend {
	 color:#666;
	 font-weight:bold;
	 margin-bottom: 10px;
}
input, textarea, select {
 		background-color:#fafafa;
		padding:3px;
		margin:0px 0px 8px 0px;
}
input[type=radio]{
	margin-top:12px;
	margin-left:0px;
	margin-right:5px;
}
label {
  display: inline-block;
	text-align: left;
	padding-left:2px;
	padding-right:20px;
	padding-bottom: 2px;
}
label.princ {
	border-style: solid;
	border-width: 1px 0px 0px 1px;
	border-color: #BBB;
	width:200px;
	vertical-align: top;
}

input[type=submit], input[type=reset] {
	 width:100px;
	 height:35px;
	 display: block;
	 margin: 0 auto;
	 cursor:pointer;
}
form.evenement-form .event-field-row {
	float: none;
	clear: both;
	display: flex;
	align-items: center;
	padding: 0 0 8px 0;
	margin-right: 0;
	height: auto;
}
form.evenement-form .event-field-row input,
form.evenement-form .event-field-row select {
	margin-bottom: 0;
}
form.evenement-form .event-field-help {
	clear: both;
	margin: 0 0 12px 222px;
}
form.evenement-form .event-form-actions {
	float: none;
	clear: both;
	padding: 10px 0 0 0;
	margin-right: 0;
	height: auto;
}
form.evenement-form .event-form-actions.aligned input[type=submit] {
	margin: 0 0 0 222px;
}
form div {
	float:left;
}
form span.comment {
	font-style:italic;
	font-size: 80%;
}

/*/////////////////////////////////////
// Formulaire generation de courrier //
/////////////////////////////////////*/
form.courrier-form {
	width: 100%;
	max-width: 760px;
}

form.courrier-form div {
	float: none;
}

form.courrier-form fieldset div {
	height: auto;
	margin-right: 0;
}

form.courrier-form .courrier-field {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 6px;
	align-items: center;
	margin-bottom: 10px;
	padding: 0;
}

form.courrier-form .courrier-field-textarea,
form.courrier-form .courrier-field-radio {
	align-items: start;
}

form.courrier-form .courrier-field label {
	display: block;
	padding: 0;
	margin: 0;
}

form.courrier-form .courrier-field-control {
	min-width: 0;
}

form.courrier-form textarea {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
	min-height: 52px;
}

form.courrier-form input[type=text],
form.courrier-form select {
	width: 340px;
	max-width: 100%;
	box-sizing: border-box;
}

form.courrier-form .courrier-field-radio #courrier_appel {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

form.courrier-form .courrier-field-radio #courrier_appel label {
	white-space: nowrap;
	padding-right: 12px;
}

form.courrier-form .courrier-field-radio #courrier_appel input[type=radio] {
	margin-top: 0;
}

form.courrier-form .courrier-submit {
	margin-top: 16px;
	text-align: center;
}

form.courrier-form .courrier-submit button {
	width: 140px;
	height: 35px;
	cursor: pointer;
}

@media all and (max-width: 700px) {
	form.courrier-form .courrier-field {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}

	form.courrier-form textarea,
	form.courrier-form input[type=text],
	form.courrier-form select {
		width: 100%;
		max-width: none;
	}
}

/*//////////////////////////////
// Formulaire Contenu (DOC-005)
//////////////////////////////*/
form.contenu-form {
	width: 100%;
	max-width: 860px;
}

form.contenu-form div {
	float: none;
}

form.contenu-form .contenu-field {
	margin-bottom: 10px;
}

form.contenu-form label {
	display: block;
	padding-right: 0;
}

form.contenu-form input[type=text],
form.contenu-form select,
form.contenu-form textarea {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
}

form.contenu-form select {
	max-width: 320px;
}

form.contenu-form textarea {
	min-height: 70px;
}

form.contenu-form .contenu-submit {
	margin-top: 12px;
}

form.contenu-form .contenu-submit button {
	width: 140px;
	height: 35px;
	cursor: pointer;
}

div.auto-adjust {
  display: block;      /* comportement standard d’un div */
  width: auto;         /* largeur selon le contenu ou contraintes du parent */
  height: auto;        /* s'ajuste selon le contenu */
  overflow: visible;   /* ne coupe pas le contenu s'il dépasse */
}


/*////////////////////////////////////
//Présentation des Liens de dossiers//
////////////////////////////////////*/
ul.lien {
	padding:0;
	margin:0;
	list-style-type:none;
}
ul.lien li {
	margin-left:2px;
	float:left; /*pour IE*/
	height : 25px; /*   modifier suivant la taille de la police pour centrer le texte dans l'onglet */
	background-color:  #f2f3f4 ;
	margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
	margin : 1px 2px 0 2px;  /* Pour IE  */
	border : 1px solid #9EA0A1;

}
ul.lien li a {
	display:block;
	float:left;
	text-decoration:none;
	color : #666;
	padding : 4px;
	overflow: hidden;
}
ul.lien li a:hover {
  background-color : #e0e0a0;
}

/*////////////////////////////////
//Présentation des tables Liste//
////////////////////////////////*/
table
{

}

tr
{
}
td, th
{
    border : 1px solid black;
	border-collapse: collapse;
}

th
{
    background-color:  #f2f3f4 ;
}


//Cellules

td.grisé
{
    background-color:  #f2f3f4 ;
}

.Id_Doss
{
witdh: 50px;
}

.Numero
{

witdh: 100px;
}

.Type
{

witdh: 100px;
}

.Nom
{

witdh: 300px;
}

.Famille
{

witdh: 50px;
}

.Montant
{
witdh: 200px;
}

.ColMontant
{
witdh: 200px;
text-align: right;
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* Erreurs de formulaire Symfony */
.form-error-box {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.form-error-box ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}
.form-error-box li {
    margin-bottom: 3px;
}

/* Erreurs inline sous les champs */
ul.form-errors,
.invalid-feedback,
form ul[id$="_errors"] {
    color: #a94442;
    font-size: 0.9em;
    list-style: none;
    padding: 0;
    margin: 2px 0 8px 0;
}
ul.form-errors li,
form ul[id$="_errors"] li {
    background: none;
    height: auto !important;
    padding: 2px 0;
}

/* Formulaire conditionnel - champs selon nature personne */
.nature-conditional {
    transition: opacity 0.2s ease-in-out;
}

.nature-conditional.hidden {
    opacity: 0;
}