/*** STYLE ADJF ***/
HTML, BODY
{ height: 100%; 
	width: 100%; 
	margin: 0;
  padding: 0;
	background: #111111; 
	color: #727070; 
	font-size: 16px; 
	font-family: cursive;
}  

H1
{ text-align: center;
  font-size: 130%; 
  color: #d11592;
	margin-top: 1rem;
	font-weight: 100;
}
H2 
{ font-size: 120%; 
	text-align: center; 
  color: #08a1bf; 
	margin-bottom: 2rem;
}
H3 { font-size: 110%; }
H4 { font-size: 110%; } 

A { color: #FFFFFF; text-decoration: none; }
.container A { color: #08a1bf; }

P { margin: .8rem; }

DIV { margin: 0; padding: 0; }
TABLE { width: 100%; border-collapse: collapse; }
TR, TD 
{ border-top: 0.1rem solid #08a1bf;
  padding: .8rem 0; 
}
TD.separation { padding: .1rem 0; }
.trait 
{ border-bottom: .15rem solid #08a1bf; 
	padding-bottom: 1.4rem;
}

.reponse 
{ padding: 1rem; 
	margin: 1rem 0;
	text-align: center; 
	border-radius: 6px;
}

/*** BOUTON ***/
.btn, A.btn
{ background-color: #990066;
  border-color: #990066; 
	color: #fff;
	font-size: .875rem;
  border-radius: .25rem;
	padding: .25rem .5rem;
	margin: 0 .5rem 0 0;
	width: auto;
	line-height: normal;
	text-align:center; 
} 

.btn:hover { background-color: #3e86f0; }
.btns-centre
{ display: flex;
	align-items: center;
  justify-content: center;
	margin-top: 20px;
}

.btns-centre-superpose
{ display: flex; 
  align-items: center;
	flex-direction: column;
	gap: .5rem;
}
.btn-sm { font-size: 70%!important; }

.pastille { border-radius: 48%; }

.container
{ border-radius: 6px;
	padding: 6px 8px;
	margin: 20px auto;
  background: #FFFFFF;
  color: #111111;
  min-height: 480px;
	max-width: 1024px;
}

.pleinecran
{ position: absolute;
	top: 7rem;
	left: 0;
	width: 100%;
	background: #111;  
	height: 2000px;
	color: #AAA; 
}

.retour
{ display: flex; 
	justify-content: flex-end;
	margin: 8px 8px 0 0; 
}

A.btn-ico-fermer
{ color: #FFFFFF;
	background-color: #08a1bf;
	padding: 0.1rem 0.3rem;
	border-radius: 50%; 
	display: inline-block; 
}

/*** Texte ***/
.small { font-size: 80%!important; }
.center { text-align: center!important; }
.text-gras { font-weight: bold!important; }
.text-rouge { color: red!important; }
.text-orange { color: #ffa500!important; }
.text-bleu { color: #0d6efd!important; }
.text-blanc { color: #eff4f7!important; }
.text-vert { color: #09a810!important; }

/*** Background  ***/
.bg-rouge 
{ background-color: red!important; 
	border-color: red!important; 
	color: #eff4f7!important; 
}
.bg-orange 
{ background-color: #ffa500!important;
	border-color: #ffa500!important;
	color: #FFFFFF!important;
}
.bg-bleu 
{ background-color: #0d6efd!important;
	border-color: #0d6efd!important;
	color: #eff4f7!important;
}
.bg-blanc 
{ background-color: #eff4f7!important;
	border-color: #eff4f7!important;
	color: #727070!important;
}
.bg-vert 
{ background-color: #0bbe13!important;
	border-color: #0bbe13!important;
	color: #ccf0cd!important; 
}

/** TABS **/
.ligne
{ display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.lg { margin: 0; padding: 20px 0; }
.sep { border-bottom: 1px solid #08a1bf; }
.sup
{ margin-top: 30px;
	padding: 15px;
	background-color: red; 
	color: #FFFFFF;
	text-align: center;
} 

.tabs-fichiers {
  display: flex;
  flex-direction: column;
}

.tabs-fichiers H2 { margin-bottom: .1rem; } 

.lignes-fichiers {
  display: grid;
  grid-template-columns: 1fr auto; /* La première colonne pour le contenu, la deuxième pour les boutons */
  gap: 10px; /* Espace entre les colonnes */
}

/* Style pour centrer les boutons */
.lignes-fichiers > div:nth-child(2) {
  align-self: flex-end; /* Aligner la deuxième colonne (boutons) à droite */
}
 
/*** CMA - PLIER/DEPLIER Masquer initialement le contenu ***/
.cma { display: none; }

/*** MENU ***/
.menu 
{ display: flex;
	padding-bottom: 1rem; 
}
.menu.r { justify-content: flex-end; }
.menu.c { justify-content: center; }
.menu .menuBtn { display: inline-block; margin-right: .8rem; }
 
/*** FORMULAIRE ***/
FORM.centre 
{ width: 600px; 
	max-width: 100%;
	margin: 2rem auto; 
	border: .1rem solid #990066;
	border-radius: .5rem;
	padding: .5rem 1.5rem 1.5rem; 
}

FORM.centre H2
{ background-color: #990066;
  color: #FFFFFF;
	padding: .5rem 1.5rem;
	border-radius: .25rem;
}

LABEL { color: #727070; }
INPUT, SELECT, TEXTAREA
{	display: block;
	background-clip: padding-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	
	width: 100%;
	box-sizing: border-box;
	line-height: 1.5;
	margin-bottom: .8rem;
	padding: .375rem .75rem;
	border-radius: .25rem;
	border: 1px solid #ced4da;
	color: #0a2bac;
	font-family: cursive;
}

INPUT[type=checkbox]
{ width: 2rem;
	height: 1rem;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}
.check { display: flex; }
INPUT:focus, SELECT:focus, TEXTAREA:focus 
{ outline-color: #28baf1; }

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  position: relative;
  padding-left: 1.6rem;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content:'';
  border-radius: 1rem;
}
input[type="radio"] + label::before {
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 1rem;
  height: 1rem; 
}
input[type="radio"] + label::after {
  bottom: 3px;
  left: 3px;
  width: calc(1rem - 6px);
  height: calc(1rem - 6px);
}
input[type="radio"]:checked + label::after {
  background-color: #00B7E8;
}
div.radio { margin: 1rem 0; }

/** INPUT CHECK GLISSE **/
input[type="checkbox"].checkglisse {
  display: none;
}
input[type="checkbox"].checkglisse + label {
  box-sizing: border-box;
  display: inline-block;
  width: 2.3rem; 
  height: 1.3rem; 
  border-radius: 1.3rem;
  padding:2px;
  background-color: #c0ceda ;
  transition: all 0.5s ;
}
input[type="checkbox"].checkglisse + label::before {
  box-sizing: border-box;
  display: block;
  content: "";
  height: calc(1.3rem - 4px);
  width: calc(1.3rem - 4px);
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.5s ;
}
input[type="checkbox"].checkglisse:checked + label {
  background-color: #990066 ;
}
input[type="checkbox"].checkglisse:checked + label::before {
  margin-left: 1.05rem;
} 

FORM.enligne 
{ display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem; 
}
DIV.label { margin: 0 8px 0 4px; } 


.form-btns
{ display: flex;
	align-items: center;
  justify-content: center;
	margin-top: 20px;
}

.champs-invalide
{ color: red;
	font-size: 85%; 
	margin: -.8rem 0 .8rem;
}

.group
{ display: flex;
  flex-wrap: nowrap;
	align-items: center;
  justify-content: space-between;
	margin-bottom: .8rem;
}
.group INPUT, .group SELECT, .group TEXTAREA 
{ margin-bottom: 0; 
	border-radius: .25rem 0 0 .25rem;
}
.group-ico
{ padding: .35rem .7rem;
  border-radius: 0 .25rem .25rem 0;
  background: #caedfa;
  color: #58585a;
}
/** FOOTER **/
#copyright { text-align: center; font-size: 80%; }

/** Page Installation **/
#installation.container
{ margin: 0 auto;
	width: 500px;
}

/** Ecran Configuration **/
TABLE#configuration
{ width: 600px;
	margin: 0 auto;
	border-top: 0.1rem solid #08a1bf;
}

TABLE#configuration TH
{ text-align: right;
	font-size: 13px;
  font-weight: normal;
  padding: .8rem; 
}

TD.filexist A { font-size: 12px; } 

/** Ecran Sauvegarde **/
#sauvegarde TABLE
{ text-align: center;
}

/** Ecran Connexion **/
#connexion
{ width: 300px; margin: 30px auto; padding: 30px 15px; min-height: auto!important; }
.login-logo
{ text-align: center; margin: 30px 0 40px; }
img#logo { width: 100%; }

img#logoInterne {
	margin: 2rem auto;
	text-align: center;
	display: block;
}