:root {
--bgrd: #7091C5;
}


body{
margin:0;
padding:0;
/* 
blue : #48a5ae
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif; 
*/
font-family: Helvetica, Arial, sans-serif;
font-size: 1.1em;
background-color:#fff;
}

.clear{
clear:both;
}


#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur noire avec 50% de transparence */
    display: none; /* Cache l'overlay par défaut */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assure qu'il est au-dessus de tout le reste */
}



.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1000;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
/* border-top: 16px solid #48a5ae; */
border-top: 16px solid var(--bgrd);
min-width: 120px;
min-height: 120px;
-webkit-animation: spin 1s linear infinite/* , dilate 1s linear infinite*/;
-moz-animation:  spin 1s linear infinite/* , dilate 1s linear infinite*/;
-o-animation:  spin 1s linear infinite/* , dilate 1s linear infinite*/;
-ms-animation:  spin 1s linear infinite/* , dilate 1s linear infinite*/;
animation: spin 1s linear infinite/* , dilate 1s linear infinite*/;
}


.fade-out {
  opacity: 0 !important;
}

/*
@-webkit-keyframes dilate {
  0% { 
  -webkit-transform: width(120px); 
  -moz-transform: width(120px);
  -o-transform: width(120px);
  -ms-transform: width(120px);
  transform: width(120px);
  }
  100% { -webkit-transform: width(300px);
  -moz-transform: width(300px);
  -o-transform: width(300px);
  -ms-transform: width(300px);
  transform: width(300px);
  }
}

@keyframes dilate {
  0% { 
  width: 120px;
  height: 120px;
  }
  100% { 
  width: 300px;
  height: 300px;
  }
}

*/

@-webkit-keyframes spin {
  0% { 
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg); 
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg); 
  }
  100% { -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg); 
  }
}




@keyframes spin {
  0% { 
  transform: rotate(0deg); 
  }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-fadein {
/*  position: relative;*/
  -webkit-animation-name: animatefadein;
  -webkit-animation-duration: 0.2s;
  -moz-animation-name: animatefadein;
  -moz-animation-duration: 0.2s;
  -o-animation-name: animatefadein;
  -o-animation-duration: 0.2s;
  -ms-animation-name: animatefadein;
  -ms-animation-duration: 0.2s;
  animation-name: animatefadein;
  animation-duration: 0.2s
}

@-webkit-keyframes animatefadein {
  from { opacity:0 } 
  to { opacity:1 }
}

@keyframes animatefadein { 
  from{opacity:0 } 
  to{ opacity:1 }
}

.full_frame{
position: fixed;
height: 0;
width: 100%;
z-index: 1000;
top: 0;
left: 0;
padding:0;
background-color: #000;
opacity:0.6;
overflow-x: hidden;
}

.fw-600{
font-weight:600;
}

.bando{
padding:20px;
width:800px;
background-color:#ddd;
min-height: 60px;
display:flex;
font-size:0.9em;
}

.bando_messages{
margin-left:5px;
}


div#slider {width: 8%; max-width: 512px; overflow: hidden }
div#slider figure {
  position: relative;
  width: 1000%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}

div#slider figure img { width: 10%; height: auto; float: left; }

@keyframes slidy {
  0%  { left: 0%; }
  8%  { left: 0%; }
  11% { left: -100%; }
  19% { left: -100%; }
  22% { left: -200%; }
  30% { left: -200%; }
  33% { left: -300%; }
  41% { left: -300%; }
  44% { left: -400%; }
  52% { left: -400%; }
  55% { left: -500%; }
  63% { left: -500%; }
  66% { left: -600%; }
  74% { left: -600%; }
  77% { left: -700%; }
  85% { left: -700%; }
  88% { left: -800%; }
  94% { left: -800%; }
  100% { left: -900%; }
}

.sticker{
position: absolute;
top: 20px;
left: calc(50% - 208px);
transform: rotate(10deg);
/* background-color: #d03939; */
background-color: #f05a67;
padding: 2px 4px;
border-radius: 5px;
font-size: 0.75em;
text-align: center;
border: 1px solid #000;
font-stretch: semi-condensed;
/* box-shadow: 3px 1px 3px #222; */
}


.header_dropdown:before {
box-sizing: border-box ;
content: "";
width: 15px;
height: 15px;
background-color: #fff;
position: absolute;
top: -8px;
right: 36px;
transform: rotate(45deg);
border-left: 1px solid #919191;
border-top: 1px solid #919191;}


.header_dropdown {
box-sizing: border-box;
display: none;
background-color: #fff;
position: absolute;
top: 74px;
right: calc(50% - 400px);
z-index: 100;
padding: 20px 10px 5px;
border: 1px solid #919191;
border-radius:3px;
width:300px;
line-height:1.6em;
}

.form-group{
padding-top: 5px;
}

.hr_2x{
height: 2px;
background: #ccc;
margin: 10px 20px 20px;
border: 0;
}
.header_dropdown input{
line-height:20px;
font-size:16px;
}


*{
margin: 0;
padding:0;
}

form{
margin:0;
padding:0;
}

.page{
margin: 0 auto;
width:840px;
min-height: calc(100% - 255px); /* 600px; */
background: #eee;

}

.col415{
box-sizing: border-box;
margin: 0;
width:420px;
/* display:inline-block; */
padding: 2em 5px;
vertical-align:top;
float:left;
}

.bl2{
border-left: 2px solid #ddd;
}

.br2{
border-right: 2px solid #ddd;
}


.block_info{
border: 1px #aaa solid;
border-radius: 3px;
background-color: #fff;
}

.bceee{
background-color: #eee;
}

.footer{
width:100%;
margin:0;
padding-top:2em;
background-color:#eee;
border-top:1px solid #ddd;
color: #000;
font-size:0.9em;
line-height:2em;
}

a.a-footer:link,a.a-footer:visited,a.a-footer:active{
color:#555;
text-decoration: none;
}

.hdr_bar,.hdr_bar_index{
margin:0;
padding:0;
/* background-color:#48a5ae; */
background-color:var(--bgrd);
color: #fff;
}

.h50{
height:50px;
}

.h150{
height:150px;
}

.lh50{
line-height:50px;
}


.fl-right{
float:right;
}

.fl-left{
float:left;
}

.cl-both{
clear:both;
}

.p-10{
padding:10px ;
}

/*
.vam *{
vertical-align: middle;
}
*/

.hdr_bar_index div {
vertical-align: middle;
}

.h17{
height:17px
}

.h35{
height:35px
}



button:focus{
/* outline:0; */
border: 1px solid #efefef;
outline: none;
}

.pointer{
cursor:pointer;
	
}

.contrat{
border-top:1px solid #888;
border-bottom:1px solid #888;
width:840px;
background-color: #eee;
margin:0;
padding:0;
display: inline-block;
}

.border-bottom-0{
border-bottom:0;
}

.border-top-0{
border-top:0;
}

.valid{
position: relative;
top: 0;
right: 0;
float: right;
margin: 0 1em;
}

.mglh{
margin-left:30px;
}

.fs36px{
font-size:36px;	
}

.fs33px{
font-size:33px;
}

.fs24px{
font-size:24px;	
}

.fs13px{
font-size:13px;	
}

.fs14px{
font-size:14px;	
}

.center{
text-align:center;
}

.right{
text-align:right;
}

.justify{
text-align:justify;
}

.fixed-w-35px{
min-width: 35px;
max-width: 35px;
}

.fixed-w-65px{
min-width: 65px;
fixed-width: 65px;
}

.fixed-w-110px{
min-width: 110px;
max-width: 110px;
}

.fixed-w-120px{
min-width: 120px;
max-width: 120px;
}

.fixed-w-200px{
min-width: 200px;
max-width: 200px;
}
.fixed-w-220px{
min-width: 220px;
max-width: 220px;
}

.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
}

.w30{
width: 30px;
}

.w32{
width: 30px;
}

.w80{
width: 80px;
}

.w85{
max-width: 85px;
}

.w100{
width: 100px;
}

.mw125{
max-width: 125px;
}

.w150{
width: 150px;
}

.w155{
max-width: 155px;
}

.w200{
width: 200px;
}

.w205{
width: 205px;
}

.status_btn{
padding: 5px 0 0 0;
margin: 15px 0;
}


.contrat * {
  vertical-align: middle;
}

.contrat div{
  margin: 0.5em 1em;
  } 

.w840{
width:840px;
margin:0 auto;
}  
  
a.none:link,a.none:visited,a.none:active{
text-decoration: none;
} 
  
a:link,a:visited,a:active{
text-decoration: none;
/* color: #48a5ae; */
color:var(--bgrd);
}

a.blanc:link, a.blanc:visited, a.blanc:active {
text-decoration: none;
color: #fff;
}

a.blanc_disabled{
text-decoration: none;
color: rgb(255,255,255);
color: rgba(255,255,255,0.2);
cursor:default;
}


.black{
border: 1px solid #000;
box-shadow: 5px 5px 20px;
color: #000;
}

button, button:focus, button:active{
/* background-color:#48a5ae; */
background-color:var(--bgrd);
color: #fff;
}

/* a:hover, */
button:hover{
box-shadow: #888 5px 5px 20px;
}

.button, button {
margin: 1em;
padding: 8px 15px;
border: 1px solid #888;
border-radius: 3px;
font-size:17px;
cursor:pointer;
/* display: inline; */
}

button.mysav{
margin: 0.6em 0.3em;
}

button:disabled,
button[disabled]{
background-color: #ccc;
color: #666;
cursor:default;
}

button[disabled]:hover{
box-shadow: none;
}


button.blanc, button.blanc:focus button.blanc:active{
background-color:#fff;
color: #000;
}

input:disabled,input[disabled],
textarea:disabled,textarea[disabled],
select:disabled,select[disabled] {
background-color: #ddd;
border-color:#aaa;
color:#000;
}


label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

input,textarea,select{
/*  width: 250px;
  box-sizing: border-box; */
  border: 1px solid #888;
  padding:2px 4px;
  border-radius:3px;
}

input:focus{
  
  border: 1px solid #444;
}


.register div{
margin:0.5em;
font-size:18px;
}

.register label{
width:300px;
}

.register input {
box-sizing: border-box;
font-size:20px;
padding:5px;
width:280px;
margin-left:1em;
}

.mb1{
margin-bottom:1em;
}

.dialog_form_content{
padding:1em;
min-height: 61px;
text-align:center;
line-height:1.5em;
}

.form_caption{
padding: 1em 0 1em 1em;
font-weight: 900;
background-color: var(--bgrd);
color: #fff;
margin:0;
}

.mr10{
margin-right:10px
}

.p0em5{
padding:0.5em;
}

.mt10pxb{
margin-top:10px;
}

.ml10{
margin-left:10px;
}

.spacer{
box-sizing: border-box;	
margin:1em;	
display: block;
height: 2px;
border: 0;
border-top: 2px solid #ddd;
padding: 0; 
clear:both;
}

.form_status{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #f3f3f3;
right: 0;
text-align: right;
padding: 2px 0;
line-height: 4em;
margin:0;
}


.dialog_form{
box-sizing: border-box;
/* position: absolute; */
position:fixed;
margin:auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 40%;
height: 30%;
/* background-color: #ccc; */
background-color: #fff;
border-radius: 3px;
display: none;
z-index: 9500;
border: 2px solid var(--bgrd);
overflow-x: auto;
min-height: 230px;
}

.closebtn {
position: absolute;
top: 0;
right: 5px;
/* font-size: 36px; */
/* margin-left: 50px; */
}

.contenu-tronque {
  white-space: nowrap;    /* Empêche le retour à la ligne */
  overflow: hidden;       /* Cache le contenu qui déborde */
  text-overflow: ellipsis;/* Affiche "..." pour le contenu caché */
}

.filtre{
width:100%;
height:100%;
margin:0;
padding:0;
opacity:0.5;
display:none;
top:0;
bottom:0;
right:0;
left:0;
position:fixed; /* absolute; */
}

.f1000{
background-color: #000;
z-index:1000;
}

.m0p0{
margin:0;
padding:0;
}

.ml100{
margin-left:100px;
}

.mw-80{
max-width:80px;
}

.header-ico{
display:inline-block;
min-width:120px;
max-width:170px;
margin: 10px 5px 3px;
}

/*
.header-ico-disabled{
color: rgb(255,255,255,0.2);
}
*/
th.b45{
color: #fff;
background-color: var(--bgrd);
}

.pad7{
padding: 7px; 
margin: 0 53px 0 0;
width: 445px;
float:right;
}

.ilbl{
display:inline-block;
}

.idx_content{
padding: 5px 0;
background-color: #eee;
}

.pl-br{
padding-left:20px;
/* border-right:1px solid #000;*/
}

.vat{
vertical-align:top;
}

.h24{
height:24px;
}

.h60{
height:60px;
}


.m20p{
margin:20px}

.m3m{
margin:3em;}

.m1m{
margin:1em 0 0;
}

.ac-header-nav{
display:flex;
}

.ac-nav-active{
box-sizing: border-box;
display:flex;
/*
width:460px;
padding:2em 5em 1em;
*/
width: 50%;
padding: 3vw;
border-bottom:2px solid #eee;
}

.ac-nav-active:hover,.ac-nav-inactive:hover{
border-bottom:2px solid var(--bgrd);
cursor:pointer;
}

.ac-nav-inactive{
box-sizing: border-box;
display:flex;
background:#fff;
border-bottom:2px solid #eee;
width: 50%;
padding: 3vw;
color:#bdbdbd;
}

.ac-nav-inactive:hover{
color:#000;
}

.display-none{
display:none;
}

.cnx_frm div {
margin: 0.5em;
font-size: 18px;
}

.ac-connexion label{
width:170px;
}

.ac-connexion input {
box-sizing: border-box;
font-size: 20px;
padding: 5px;
width: 250px;
margin-left: 1em;
}

@-webkit-keyframes clignote {
0%{box-shadow:0px 0px 10px #9C27B0;}
50%{box-shadow:0px 0px 0px #9C27B0;}
100%{box-shadow:0px 0px 10px #9C27B0;}
}


.bouton-terminer{
background-color: rgb(208, 57, 57);
-webkit-animation-name: clignote; 
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:infinite;
}

.bouton-clignote{
-webkit-animation-name: clignote; 
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:infinite;
}


.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);

}

.modal-content {
box-sizing: border-box;
background-color: #fff;
margin: 10% auto; 
/* border: 1px solid #888; */
border: 2px solid var(--bgrd);
border-radius:3px;
width: 40%;
box-shadow: 3px 3px 15px #111;
}

.modal-header{
background-color: var(--bgrd);
color:#fff;
padding: 1em;
font-weight:600;
border-radius:3px 0 0 0;
}

.modal-content-in {
padding:2em;
}

.modal-content-in input {
font-size:18px;
}

.close {
color: #fff;
float: right;
font-size: 32px;
font-weight: bold;
margin: -10px;
}

.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}

.mb1{
margin-bottom:1em;
}

.mt2b1{
margin:2em 0 1em;
}

.header-ico-svg{
height :28px;
}

.header-index-svg {
height :70px;
}

tbody.alter tr:nth-child(odd){
background-color: #fff;
}

tbody.alter td{padding:2px 5px; box-sizing: border-box;}

.titre_h2{
background-color: var(--bgrd);
color: #fff;
padding: 4px 20px;
border-radius: 3px;
box-shadow: 0.96px;
font-size: 1.2em;
text-align: center;
}

.info_checkbox{
display: inline-flex; 
margin: 1em 5em;
}

.cnx_frm{
margin: 1em 150px 2em; 
line-height:35px;
}

@media screen and (max-width:800px) {
.bando{
font-size:12px;
padding:5px;
background-color:#ddd;
min-height: 60px;
width: auto;
}

.sticker{
position: absolute;
top: 25px;
left: 106px;
transform: rotate(3deg);
font-size:2.3em;
}

.mglh{
margin-left:5px;
}

.bando_messages{
margin:0;
}

div#slider {display:none;}

label{
display:none;
}

.info_checkbox{
display: inline-flex; 
margin: 0 1em 0 0;
}

.cnx_frm{
margin: 0; 
}

.col415, .page{
    width:100%; 
  }
.br2{
border:none;
}

.w840{
width:100%;
}

.hdr_bar_index{
font-size: 1vw;
}
.fs24px{
font-size: 3vw;
}
.header-ico {
min-width: 0;
font-size:2vw;
margin: 1vw;
}

.black {
border:none;
}

img {
  width: 100%;
  height: auto;
}

.header-ico-svg{
height :9vw;
}

.header-index-svg {
height :15vw;
}


.ac-nav-active,.ac-nav-inactive{
width: 50%;
padding: 2vw 2vw;
font-size: 4vw;
}
}