body { background: #FFFFFF; }
#header { 
  background: url("../images/login/background-entete.gif") repeat-x 0 bottom #1F368B;
}

.zoneMessages {
  margin-bottom: 1em;
  text-align: left;
}
.zoneMessages ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.zoneMessages ul.ccsPUCC {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 844px;
}
.zoneMessages ul li:first-child {
  margin-top: 0;
}
.zoneMessages li {
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  padding: 10px 10px 10px 60px;
  margin-top: 5px;
}
.zoneMessages li.erreur-M1 {
  background: url("/SCEN/images/messages/msg-erreur-technique.png") no-repeat scroll 10px top #ffffff;
  border-color: #CC0000;
  color: #CC0000;
  font-weight: bold;
}
.zoneMessages li.erreur-M2 {
  background: url("/SCEN/images/messages/msg-info-application.png") no-repeat scroll 10px top #ffffff;
  border-color: #CC0000;
}
.zoneMessages li.erreur-M3 {
  background: url("/SCEN/images/messages/msg-erreur-utilisateur.png") no-repeat scroll 10px top #ffffff;
  border-color: #CC0000;
  color: #CC0000;
  font-weight: bold;
}
.zoneMessages li.erreur-M4 {
  background: url("/SCEN/images/messages/msg-alerte-metier-L6.png") no-repeat scroll 10px top #ffffff;
  border-color: #FFD204;
}
.zoneMessages li.erreur-M5 {
  background: url("/SCEN/images/messages/msg-info-comm-L54.png") no-repeat scroll 10px top #ffffff;
  border-color: #229BEA;
}
.zoneMessages li.erreur-M6 {
  background: url("/SCEN/images/messages/msg-com.png") no-repeat scroll 10px top #ffffff;
  border-color: #229BEA;
}
.zoneMessages li.erreur-M7 {
  background: url("/SCEN/images/messages/msg-info-metier-L55.png") no-repeat scroll 10px top #ffffff;
  border-color: #229BEA;
}
.zoneMessages li.erreur-M8 {
  background: url("/SCEN/images/messages/msg-erreur-utilisateur.png") no-repeat scroll 10px top #ffffff;
  color: #222222;
  border-color: #CC0000;
}
.zoneMessages:focus {
  outline: none;
}

#header .container { height: 110px; }
#main { margin-top: 0 !important; }
#main .container {
  box-shadow: none;
  padding: 5px 30px;
}
h3 {
  font-size: 28px;
  font-weight: bold;
}
.ui-widget-overlay {
  background-color: #FFFFFF;
  background-image: url("../images/ui-bg_flat_75_ffffff_40x100.png");
}

/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* FIX IE */
/* ------------------------------------------------- */
/* ------------------------------------------------- */

.zone_input input::-ms-clear {
  display: none;
  height: 0;
  width: 0;
}
.zone_input input::-ms-reveal {
  display: none;
  height: 0;
  width: 0;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Titre étapes */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
h5 {
  background: url("../images/login/sprite-bullet-o.png") no-repeat 0 -87px transparent;
  display: block;
  color: #1F368B;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 30px;
  margin: 50px 0 0;
  padding: 0 0 10px;
  text-indent: 40px;
}
h5:first-child {
  background-position: 0 0;
  margin-top: 0;
}
.opt-grp {
  margin-top: 30px;
}
.opt-grp > div {
  display: none;
}
.opt-grp > a {
  display: none;
}
.opt-grp h5 {
  background-position: 0 -174px;
}
.opt-grp div:first-child {
  display: block;
}
.opt-grp h5.tgris2 {
  background-position: 0 -261px;
  color: #D4D4D4;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Champs INPUT */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
.zone_input {
  background-color: #FFFFFF;
  border: 2px solid #D4D4D4;
  color: #222222;
  display: none;
  font-size: 1.3em;
  height: 36px;
  margin-top: 10px;
  position: relative;
  -webkit-transition: box-shadow 0.4s, border-color 0.4s;
  -moz-transition: box-shadow 0.4s, border-color 0.4s;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.zone_input i {
	font-size: 1.6em;
	left: 0;
	margin-left: 20px;
	position: absolute;
	top: 1px;
}
.zone_input input {
	background: transparent;
	border: 0;
	height: 32px;
	margin: 0;
	outline: 0;
	position: relative;
	text-indent: 40px;
	vertical-align: top;
	width: 100%;
}
/* 
Événements
*/
.zone_input.focus {
	background-color: #FFFFFF;
	background-position: 10px -30px;
	border-color: #0078E7;
	color: #0060B2;
	opacity: 1;
}
.zone_input.non-valide {
	border-color: #CB0101;
	color: #CB0101;
}
.zone_input.non-valide.focus {
	border-color: #CB0101;
}
/* LOGIN */
h5:first-child + .zone_input {
	display: block;
}
.zone_input label {
	color: #999999;
	display: none;
	margin: 0;
	position: absolute;
}
/* AIDE */
.zone_input a {
	font-size: 0.9em;
	line-height: 32px;
	position: absolute;
	right: 10px;
	text-decoration: underline;
	top: 0;
}

.field-icon {
position: absolute;
top: 50%;
right: 50px; /* Ajuste selon l’espace entre input et lien */
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
font-size: 18px;
color: #666;
}

/* Icône œil - état normal */
.fa-eye {
  color: #666;
  font-size: 18px;
  transition: all 0.3s;
}

/* Icône œil - état "masqué" */
.fa-eye-slash { /* Même classe que dans le HTML */
  color: #0056b3; /* Bleu LCL */
}

/* Positionnement */
.toggle-password {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}

/* Espace input */
#pwd {
  padding-right: 70px;
  width: 100%;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Messages d'erreur */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
.zone_input .tooltip,
.toggle-btn-grp .tooltip {
	background-color: #CB0101;
	color: #FFFFFF;
	display: inline-block;
	font-size: 14px;
	left: 0;
	margin-top: 7px;
	padding: 0 10px;
	position: absolute;
	visibility: hidden;
}

.toggle-btn-grp .tooltip {
  top: 112px !important;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Modes d'authentification */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
.toggle-btn-grp {
  margin-top: 8px;
  position: relative;
}
.toggle-btn {
  background: url("../images/login/sprite_ico-mode.png") no-repeat center 8px #F1FDFE;
  border-radius: 2px;
  border: solid 2px #A0D5DC;
  display: inline-block;
  color: #000000;
  cursor: pointer;
  font-size: 0.9em;
  height: 115px;
  margin: 0 0 10px;
  padding-top: 70px;
  position: relative;
  text-align: center;
  width: 115px;
  -webkit-transition: background-color 0.2s, border-color 0.4s;
  -moz-transition: background-color 0.2s, border-color 0.4s;
  transition: background-color 0.2s, border-color 0.4s;
}
.toggle-btn + .toggle-btn { background-position: center -107px; } /* LCL Identité */
.toggle-btn + .toggle-btn + .toggle-btn { background-position: center -222px; } /* LCL m-Identité */
.toggle-btn + .toggle-btn + .toggle-btn + .toggle-btn { background-position: center -337px; } /* Certificat */
/* 
Événements
*/
.toggle-btn:hover {
  background-color: #FEFEFE;
  border: solid 2px #0078E7 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.toggle-btn.focus,
.grp-active .toggle-btn.focus:hover,
.grp-desactive .toggle-btn.focus:hover {
  border: solid 2px #D4D4D4 !important;
}
.grp-active .toggle-btn
.grp-desactive .toggle-btn {
  opacity: 0.8;
}
.grp-active .toggle-btn:hover,
.grp-desactive .toggle-btn:hover {
  border: solid 2px #0078E7 !important;
  background-color: #FFFFFF;
}
.grp-active .toggle-btn.focus,
.grp-desactive .toggle-btn.focus {
  background-color: #FFFFFF;
  color: #000000;
  font-weight: bold;
  opacity: 1;
}
.non-valide .toggle-btn {
  border-color: #CB0101;
}
.non-valide .toggle-btn:hover {
  border-color: #890405 !important;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Bouton Submit */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
input.btn {
  font-size: 18px;
  margin: 20px 0;
  width: 50%;
}
input.btn-disabled {
  background-color: #D4D4D4;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Layer description LCL Identité */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
#layerGuide {
  background-color: #FFFFFF;
  border: 1px solid #A5CE55;
  display: none;
  position: absolute;
  right: 3%;
  width: 34%;
  z-index: 999999;
}
#layerGuide > div { display: none; }
#layerGuide i { cursor: pointer; }
iframe {
  border: none;
  height: 530px;
  overflow: hidden;
  width: 100%;
}
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* Responsive */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
@media (max-width: 999px) {
#header { 
min-width: inherit;
}
.container { width: 100%; }
#layerGuide { width: 32%; }
}
@media (max-width: 769px) {
.container {
  width: 100%;
}
#main .container {
  padding-left: 5%;
  padding-right: 5%;
}
.toggle-btn {
  font-size: 1em;
  width: 49%;
}
input.btn { width: 100% !important; }
.opt-grp { position: relative; }
.opt-grp > a {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
#layerGuide {
  left: 5% !important;
  opacity: 1 !important;
  top: 40px !important;
  width: 90% !important;
}
.ui-effects-wrapper { display: none !important; }
}
 @media (min-width: 850px) and (max-width: 880px) {
#colActu {
  width: 37%;
}
}
 @media (min-width: 769px) and (max-width: 849px) {
#colActu {
  padding-left: 5px;
  width: 29%;
}
}
 @media (max-width: 480px) {
#header {
  min-width: inherit;
}
#main .container {
  padding-left: 2%;
}
h5 {
  font-size: 1.3em;
  text-indent: 35px;
  text-transform: uppercase;
}
.toggle-btn {
  background-image: none !important;
  font-size: 0.9em;
  height: 50px;
  padding-top: 13px;
}
.toggle-btn i:first-child {
  font-size: 1.5em;
}
#header h2 {
	font-size: 0.8em;
left: 175px;
}
#breadcrumb a {
    font-size: 0.88em;
    padding: 0 8px;
}
}