@charset "utf-8";
/* Intermittent CSS Document */

:root {
	/* --bar-X : background bar (header/footer) du theme X */
	--bar-a: #000000;
	--bar-b: #ffffff;
	--bar-c: #2e2793;
	--bar-d: #ff7f40;
	--bar-e: #22a058;
	--bar-f: #dedede;
	--bar-g: #3999dc;
	--bar-h: #dedede;

	--btn-f: #f0f0f0;

	--erreur-text:#401313 ;
	--erreur-background:#ffd4d4 ;
	--warning-text:#433011 ;
	--warning-background:#ffefbe ;
	--mode-emploi-background:aliceblue;

	/* invariants */
	--erreur-icon:#d20000 ;
	--warning-icon:#ff9c00 ;
	--base-font-size: 16px ;
}


/* --------------------------------------------- Apparence : darkmode ---------------------------------------------------- */

.i-darkmode {
	--bar-a: #ffffff;
	--bar-b: #000000;
	--bar-c: #6257ff; /* éclaircie pour lisibilité du texte sur fond noir */
	--bar-d: #ff7f40;
	--bar-e: #22a058;
	--bar-f: #383838;
	--bar-g: #3999dc;
	--bar-h: #383838;
	
	--btn-f: #1c1c1c;
	
	--erreur-text:#ffd4d4;
	--erreur-background:#401313 ;
	--warning-text:#ffefbe;
	--warning-background: #433011;
	--mode-emploi-background:#00213e;
}
.i-darkmode .ui-overlay-shadow , .i-darkmode .i-shadow , .i-darkmode .i-dialogue-draggable .i-draggable , .i-darkmode .i-dialogue-modeless.i-draggable  {
	box-shadow: 0 0 12px rgb(255 255 255 / 60%);
}
.i-darkmode .ui-checkbox-off:after , .i-darkmode .ui-radio-off:after {
	background-color: #b5b5b5 /*{global-icon-color}*/;
	background-color: rgba(181,181,181,0.6) /*{global-icon-disc}*/;
}
.i-darkmode .i-floatbutton-master {
	box-shadow: 0 0 0px 2px rgb(255 255 255 / 60%);
}
.i-darkmode .i-header-shadow {
	box-shadow: 0 4px 4px 0px rgb(255 255 255 / 0.3)
}
.i-darkmode .ei-profil-bg-color {
	background-color: #2d1300 !important;
	color :white !important;
}
.i-darkmode .i-avant-impot-color {
	color: #f700ff !important;
}
.i-darkmode .table-stripe tbody tr:nth-child(odd) td, .i-darkmode .table-stripe tbody tr:nth-child(odd) th {
    background-color: #161616;
}


/* ----------------------------------- jQM : transformation des tailles de px vers em ---------------------------------------- */

/* transformation jQM de tout 'px' en 'em', puis déclaration de la taille de 'body' (https://stackoverflow.com/a/15204011 ), 1 exception/modification : 
	- pour .ui-header .ui-btn-left/right, car présence de fa5 mal gérés
*/

/* 16px > 1em */ 
.ui-btn,
.ui-bar,
.ui-loader-verbose h1,
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6,
.ui-header .ui-title, 
.ui-footer .ui-title,
.ui-btn-inner,
.ui-fullsize .ui-btn-inner,
.ui-fullsize .ui-btn-inner,
label.ui-submit,
.ui-collapsible-heading,
.ui-controlgroup-label,
.ui-controlgroup .ui-checkbox:not(.ui-mini) label, .ui-controlgroup .ui-radio label,
.ui-popup .ui-title,
.ui-select .ui-btn,
label.ui-select,
label.ui-input-text,
textarea.ui-input-text,
.ui-li-heading,
label.ui-slider,
.ui-slider-switch .ui-slider-label,
.ui-mobile label,
div.ui-controlgroup-label
{
    font-size: 1em;
}
input {
	font-size: inherit !important;
}

/* 14px > 0.875em */
.ui-li-divider
{
    font-size: 0.875em;
}

/* 12.5px > 0.78em */
.ui-header .ui-btn,.ui-footer .ui-btn
{
	/* corrige l'erreur jQM qui devrait être .ui-header .ui-btn-left .ui-btn ,.ui-footer .ui-btn-left .ui-btn , ... */
	font-size: inherit;
}
.ui-header .ui-btn-left,.ui-header .ui-btn-right 
{
    font-size: 0.85em;
}

/* 12px > 0.75em */
.ui-mini .ui-btn-inner,
.ui-li-desc ,

.ui-mini.ui-radio , .ui-mini.ui-checkbox , .ui-mini.ui-select , .ui-mini.ui-btn ,
input.ui-mini, .ui-mini input, textarea.ui-mini,
input.ui-input-text.ui-slider-input,

.ui-mini .ui-input-text input,
.ui-mini .ui-input-search input,
.ui-input-text.ui-mini input,
.ui-input-search.ui-mini input,
.ui-mini textarea.ui-input-text,

.ui-slider-switch.ui-mini .ui-slider-label
{
    font-size: 0.85em !important;
}

/* 11px > 0.65em */
.ui-li-has-count .ui-li-count 
{
    font-size: 0.65em;
}

/* ----------------------------------- Fonte ---------------------------------------- */

body,
input,
select,
textarea,
button,
.ui-btn, .ui-mini {
	font-size: var(--base-font-size);
}
h1, h2, h3, h4, h5 ,h6 {
	font-weight: normal;
	margin-top: 0.99em;
	margin-bottom: 0.33em;
}
h1:first-of-type , h2:not(.ui-collapsible-heading):first-of-type , h3:first-of-type , h4:first-of-type , h5:first-of-type , h6:first-of-type {
	margin-top: 0.33em;
}
h2 {
	font-size: 130%;
}
h3 {
	font-size: 122%;
}
h4 {
	font-size: 115%;
}
h5 {
	font-size: 100%;
	font-weight: bold;
}
h6 {
	font-size: 100%;
	text-decoration-line: underline;
}

hr {
    border: none;
    border-top: 1px solid var(--bar-f);
    overflow: visible;
    text-align: center;
    height: 0px;
}
hr.hr-ou {
    margin: 2em 0;
}
hr.hr-ou:after {
    background: var(--bar-f);
    content: 'ou';
    padding: 5px 10px;
    position: relative;
    top: -10px;
    border-radius: 50%;
}

body, input, select, textarea, button, .ui-page , .ui-btn , .ui-title, .ui-bar-inherit, .ui-body-inherit {
	text-shadow: none !important;
	/* iPhone X */
	/* padding-top: constant(safe-area-inset-top); */
	/* padding-top: env(safe-area-inset-top); */
}
strong {
	font-weight: 600;
}

::-webkit-input-placeholder {	/* taille du texte du placeholder, voir aussi i-color-libelle */
    font-size: 90%;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
a , a .fa-stack {
	text-decoration:none;
}
p {
	-webkit-margin-after: 0.5em;
	-webkit-margin-before: 0.5em;
}
ul {
	-webkit-margin-before: 0em;
	-webkit-margin-start: inherit;
	/* -webkit-padding-start: 2em; */
}

.i-text-tiny , .i-cadre-mode-emploi {
	font-size : 85% !important;
}
.i-text-larger {
	font-size : 115% !important;
}
.i-text-smallcaps {
	font-variant: all-small-caps;
	font-size: 110%;
}
.i-line-height-large , .i-popup-content {
 	line-height: 1.5em
 }
/*
*, *:before, *:after { box-sizing: border-box; }
*/

/* ------------------------------------ SwipeToReveal --------------------------------------- */
/*
	- swipetr- : prefixe
	- seul display:flex (éventuellement :grid) permet d'uniformiser les hauteurs de siblings avec align-items:stretch
	- transition: transform 400ms ease-out; est conservé pour mémoire, mais le déplacement effectif (en js) n'est que de -1px !
	- en option (js), désactivation de margin-left: calc(...) pour ne pas décaler swipetr-a hors écran (et laisser faire flex)
	- utilisation de var() : https://www.lambdatest.com/blog/guide-to-css-variables-with-examples/
*/

.swipetr-master {
	--button-width: 3.5em ;
	--button-length: 2 ;
}

.swipetr-master .swipetr-child {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: flex;
    justify-content: normal;
    max-width: 100%;
    margin: auto;
    align-items: stretch;
}
a.swipetr-a {
	display:block;
}
.swipetr-master .swipetr-child > .swipetr-a {
    overflow: initial;
    margin-right: 0;
    margin-left: 0;
    -webkit-transition: -webkit-transform 400ms ease-out;
    -moz-transition: -moz-transform 400ms ease-out;
    -o-transition: -o-transform 400ms ease-out;
    transition: transform 400ms ease-out;
    transition: margin-left 400ms ease-out;
    flex-grow: 1;
}
.swipetr-master .swipetr-child > .swipetr-a.slide {
    margin-left: calc( -1 * var(--button-width) * var(--button-length) );
    /* background: whitesmoke; */
}

.swipetr-master .swipetr-child .swipetr-button {
    z-index: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 0px !important;
    min-width: 0px;
    text-align: center;
    /* border: 1px solid white; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: clip;
    visibility: hidden;
    -webkit-transition: width 1380ms ease-out;
    -webkit-transition: min-width 1380ms ease-out;
    -moz-transition: width 380ms ease-out;
    -o-transition: width 380ms ease-out;
    transition: min-width 380ms ease-out;
}
.swipetr-master .swipetr-child .swipetr-button.show {
    width: 70px;
    cursor: pointer;
    visibility: unset;
    min-width: var(--button-width);
}


/* ------------------------------------ ItemSlide --------------------------------------- */
/*
	- https://itemslide.org/index.html
*/
.itemslide-master { /* Carousel Frame */
    position:fixed;
    bottom: 0px;
    background: var(--btn-f);
    height: 3.6em;
    width:100%;
    overflow: hidden;
    border: 0;
    padding-top: 0em;
    z-index: 1000;
    /* border-top: 1px solid #7e7e7e !important; */
    display: none;
}

.menu-footer-show .itemslide-master {
	display: inherit;
}
.i-iphone-with-unsafe-bottom .itemslide-master {
	/* iphoneX ou supérieur */
	padding-bottom: 0.9em ;
}

ul.itemslide-ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    transform-style: preserve-3d;
    /* margin-left: 0.5em; */
    /* padding: 0 0.5em; */
    margin-top: 0.6em;
}
.itemslide-select .itemslide-text {
	/* attention à ne pas confondre avec .itemslide-active interne et inutilisée */
	border-bottom: 2px solid var(--bar-c);
}
li.itemslide-li {
    float: left;
    min-width: 29px;
    color: #000;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
    /* transform: scale(0.95); */
    padding: 0 0.25em 0 0.25em;
}
li.itemslide-li:first-of-type {
	padding-left: 1.5em;
}
li.itemslide-li:last-of-type {
	padding-right: 1.5em;
}
li.itemslide-li .ui-link {
	text-decoration:none;
}


/* ----------------------------------- Infinite dots (avec animation) ------------------------------------
	- https://codepen.io/MarioD/pen/OmWaqz
	- eg : pour AssistantConfiguration
*/


.pagination-container {
  text-align: center;
}
.pagination-wrapper {
  font-size: 0;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@keyframes pagination-container--animation-prev {
  0% { transform: translateX(0); }
  100% { transform: translateX(18px); }
}

@keyframes pagination-container--animation-next {
  0% { transform: translateX(0); }
  100% { transform: translateX(-18px); }
}

.transition-prev .pagination-container {
  animation: pagination-container--animation-prev 0.3s forwards;
}

.transition-next .pagination-container {
  animation: pagination-container--animation-next 0.3s forwards;
}

.little-dot {
  width: 6px;
  height: 6px;
  background: #c1c1c1;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 6px;
  position: relative;
  z-index: 10;
}

.little-dot--first,
.little-dot--last {
  z-index: 5;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-18px);
  }
}

.transition-prev .little-dot--first {
  animation: slideLeft 0.4s 0.3s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes little-dot--first--animation {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.transition-next .little-dot--first {
  animation: little-dot--last--animation 0.3s forwards;
}


@keyframes little-dot--last--animation {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.transition-prev .little-dot--last {
  animation: little-dot--last--animation 0.3s forwards;
}

@keyframes slideRight {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }

  100% {
    transform: translateX(18px);
    opacity: 1;
  }
}

.transition-next .little-dot--last {
  animation: slideRight 0.4s 0.3s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.big-dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #f6af54;
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
}

.transition-next .big-dot {
  right: auto;
  left: -6px;
}

.big-dot-container {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  z-index: 10;
}

.transition-next .big-dot-container {
  right: auto;
  left: 3px;
}

@keyframes big-dot-container--animation-prev {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(-50%) rotate(-179deg); }
}

@keyframes big-dot-container--animation-next {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(-50%) rotate(-181deg); }
}

.transition-prev .big-dot-container {
  animation: big-dot-container--animation-prev 0.3s forwards;
}

.transition-next .big-dot-container {
  animation: big-dot-container--animation-next 0.3s forwards;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.6;
}

.btn--next {
  left: calc(100% + 20px);  
}

.btn--prev {
  right: calc(100% + 20px);
}

/* ----------------------------------- Floating button ------------------------------------- 
	RAF : la position de .i-floatbutton-list est "fixed" : elle devrait dépendre dépendre de celle de .i-floatbutton-master
			-> c'est .i-floatbutton-set qui devrait avoir sa position réglée et -master + -list devraient suivre le flot...
*/
.i-floatbutton-master {
	position:fixed;
	bottom: 1.5em;
	right: 1.5em;
	background-color: #868686;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	z-index: 1020;
	/* 	animation: bot-to-top 1s ease-out; */
}
.menu-footer-show .i-floatbutton-master {
	bottom: 3.5em !important;
}
.menu-footer-show .i-floatbutton-list {
	/*bottom: 5.5em;*/
	bottom: 0.5em;
}

.i-floatbutton-master-text {
	display:none ;
}
.i-floatbutton-fa {
	font-size: 1.8em;
	margin-top: 0.5em;
	/*position: absolute;
	margin-left: -0.6em;*/

	position: relative;
	margin-left: 0;
}
.i-floatbutton-child-container:after {
    content: " ";
    position: absolute;
    left: 100%;
    top: 28%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 16px solid;
    border-bottom: 10px solid transparent;
    border-left-color: inherit;
    border-left-width: 10%;
    vertical-align: middle;
    visibility: hidden;
    display: block;
    /* float: left; */
}
.i-floatbutton-child-container {
	position:relative;
	/*top: 0.7em;
	right: 3em;*/
	visibility: hidden;
	float:right;
	background: inherit;
	border-left-color: inherit;
	-webkit-border-radius: 0.2em;
	border-radius: 0.2em;
	width: max-content;
	line-height: 0.8;
	z-index: -1;
	border: inherit;
	box-sizing: border-box;
	box-shadow: inherit;

	top: -2em;
	right: 3.2em;
}

.i-floatbutton-child-text {
	color: inherit;
	/* display:table-cell; */
	vertical-align:middle;
	padding: 0.8em;
	font-size: 0.85em;
}

.i-floatbutton {
	clear:both;
	width: 3.437em;
	height: 3.437em;
}

ul.i-floatbutton-list {
	position:fixed;
	/*right: 1.5em; incompatible FF
	bottom: 3.5em;*/
	padding: 0 0 1.5em 8em;
	z-index:1020;
	margin-block-end: 0;
	right: 5.25em;
	bottom: -1.3em;
}
ul.i-floatbutton-list li {
	list-style:none;
	/*margin-bottom: 1em; incompatible FF*/

	margin-bottom: 0em;
	margin-left:1em
}
ul.i-floatbutton-list li a {
	background-color: #adadad;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	display:block;
	z-index: 1000;
}

ul.i-floatbutton-list:hover {
	visibility:visible!important;
	opacity:1!important;
}

/* affiche le texte sur :hover de btn */
a.i-floatbutton>div.i-floatbutton-child-container {
 	visibility: inherit;
 	opacity: 1;
 	transition: visibility 0s, opacity 0.5s ease;
}
a.i-floatbutton:hover>div.i-floatbutton-child-container {
	visibility: visible !important;
	opacity: 1;
}

/* affiche la liste sur :hover de btn-master */
a.i-floatbutton-master + .i-floatbutton-list {
	visibility: hidden;
}
a.i-floatbutton-master:hover + .i-floatbutton-list {
	visibility: visible;
	animation: scale-in 0.5s;
}

a.i-floatbutton-master i {
	animation: rotate-in 0.5s;
}
a.i-floatbutton-master:hover > i {
	animation: rotate-out 0.5s;
}

/* classe en option pour l'affichage du texte uniquement par survol */
.i-floatbutton-child-container.i-floatbutton-child-container-hover {
	visibility: hidden !important;
}
/* classe en option pour l'affichage d'un triangle flèche */
.i-floatbutton-child-container.i-floatbutton-child-container-arrow {
	right: 4.68em;
}
.i-floatbutton-child-container.i-floatbutton-child-container-arrow:after {
	visibility: inherit;
}
/* opacifie le reste de la page sur hover master (désactivable si .i-floatbutton-noopacity est ajouté) */
.i-floatbutton-set:not(.i-floatbutton-noopacity) ~ * {
	opacity: 1;
	transition: opacity 0.5s ;
}
.i-floatbutton-set:not(.i-floatbutton-noopacity):hover ~ * {
	opacity: 0.3;
	transition: opacity 0.5s;
}
.i-floating-page-extra-bottom {
	height:2.5em;
}

@keyframes bot-to-top {
    0%   {bottom:-40px}
    50%  {bottom:30px}
    75%  {bottom:10px}
}

@keyframes scale-in {
    from {transform: scale(0);opacity: 0;}
    to {transform: scale(1);opacity: 1;}
}

@keyframes scale-out {
    from {transform: scale(1);opacity: 1;}
    to {transform: scale(0);opacity: 0;}
}

@keyframes rotate-in {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes rotate-out {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}


/* ----------------------------------- jQM : header et menu fixes ------------------------------------- */

.i-header-fixed.ui-page , .i-header-fixed.ui-dialog-contain {
	overflow: visible !important;	
}
.i-header-fixed>.ui-header {
    position: sticky;
    top: 0px;
    right: 0;
    z-index: 1000;
}
.i-header-fixed>.ui-panel {
   position: fixed !important;
}
.ui-footer {
	border: none;
}
/* 
	sticky : https://gedd.ski/post/position-sticky/
	et aussi : 
	- liste alphabetique : https://codepen.io/simevidas/pen/JbdJRZ 
	- ombrage du header : https://codepen.io/StijnDeWitt/pen/LryNxa (ne peut fonctionner avec une hauteur de header indéterminée)
*/

/* ----------------------------------- jQM : Uniformisation des widgets ---------------------------------------- */

/* padding -> uniformisation de la hauteur interne de select, radio/chk-horizontal, inline-btn sur la base de celle de input */
.ui-select .ui-btn , .ui-controlgroup-horizontal .ui-radio .ui-btn , .ui-controlgroup-horizontal .ui-checkbox .ui-btn , .ui-checkbox .ui-btn , .ui-collapsible-heading .ui-btn {
	padding-top: 0.465em;
	padding-bottom: 0.465em;
}
.ui-btn.ui-btn-inline , .ui-btn {
	padding-top: 0.42em;
	padding-bottom: 0.42em;
}
/* réduction des marges gauche droite du select si aucune icone */
.ui-select .ui-btn-icon-noicon {
	padding-left: 0.4em;
	padding-right: 0.4em;
}
/* ré-affirmation pour les boutons spéciaux (eg : croix des popup) */
.ui-btn-icon-notext,.ui-header button.ui-btn.ui-btn-icon-notext,.ui-footer button.ui-btn.ui-btn-icon-notext {
    padding: 0;
}

/* margin -> uniformisation des marges */
.ui-select , .ui-btn , .ui-input-text, .ui-controlgroup, .ui-checkbox , fieldset.ui-controlgroup, .ui-mini textarea.ui-input-text, 
textarea.ui-mini, .ui-checkbox.ui-mini , .ui-select.ui-mini , .ui-header .ui-select , .ui-collapsible-inset, .ui-collapsible-set {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.ui-input-text, .ui-controlgroup, .ui-checkbox , fieldset.ui-controlgroup, .ui-mini textarea.ui-input-text, 
textarea.ui-mini, .ui-checkbox.ui-mini , .ui-select.ui-mini , .ui-header .ui-select {
	margin-left: 0em !important;
}
.ui-collapsible {
	margin-left: 0em;
	margin-right: 0em;
}
.ui-content .ui-listview-inset {
	margin: 0.1em 0;
}

/* ----------------------------------- jQM : Personnalisation ---------------------------------------- */

body,
input,
select,
textarea,
button,
.ui-btn {
	font-weight: 400 !important ;
}

.ui-select .ui-btn, .ui-checkbox .ui-btn, .ui-radio .ui-btn, .ui-listview .ui-btn,  
.ui-header .ui-btn {
	font-weight: normal;
}
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a,
.ui-page-theme-b a, html .ui-bar-b a, html .ui-body-b a, html body .ui-group-theme-b a,
.ui-page-theme-c a, html .ui-bar-c a, html .ui-body-c a, html body .ui-group-theme-c a,
.ui-page-theme-d a, html .ui-bar-d a, html .ui-body-d a, html body .ui-group-theme-d a,
.ui-page-theme-e a, html .ui-bar-e a, html .ui-body-e a, html body .ui-group-theme-e a,
.ui-page-theme-f a, html .ui-bar-f a, html .ui-body-f a, html body .ui-group-theme-f a,
.ui-page-theme-g a, html .ui-bar-g a, html .ui-body-g a, html body .ui-group-theme-g a,
.ui-page-theme-h a, html .ui-bar-h a, html .ui-body-h a, html body .ui-group-theme-h a {
	font-weight: normal;
	text-shadow: none !important;
}


/* Slider ---------------------------------------- */

/* correction du slider mini */
.ui-slider-track.ui-mini {
	margin: 0 7px 0 57px;
}
input.ui-slider-input {
    font-weight: initial;
}
/* slider avec input plus large */
.larger-input-slider input.ui-slider-input {
    width: 70px;
}
.larger-input-slider .ui-slider-track {
	margin-left: 98px;
}
/* slider sans input (pleine largeur)) */
.full-width-slider input.ui-slider-input {
	display: none;
}
.full-width-slider .ui-slider-track {
	margin-left: 15px;
}
/* tooltip du slider */ 
.ui-slider-popup {
	font-size: larger;
	width:80px;
    height: 50px;
}
/* correction de l'erreur dans Chrome/Console : https://github.com/bevacqua/dragula/issues/468#issuecomment-485819336 */
a.ui-slider-handle {
	touch-action: none;
}

/* solution au problème de galon fin au-dessus du header après clic sur la page */
.ui-header-fixed.ui-fixed-hidden {
	top: -1px;
}
.ui-header {
    border-top-style: none;
}

/* augmente la largeur max de dialog, centre verticalement */
.ui-mobile .ui-page-active.ui-dialog {
	display: flex;
}
.ui-dialog-contain {
    max-width: 800px;
    top: 0px;
    margin: auto;
}
.ui-dialog-contain.ui-corner-all {
	border-radius: 0.75em;
	overflow: hidden;
}
/* augmentation de la zone de titre du dialogue */
.ui-dialog .ui-header .ui-title {
	margin: 0 15%;
}
/* augmente la surface d'affichage des ui-body  */
.ui-content {
	border-width: 0;
	overflow: visible;
	overflow-x: hidden;
	margin: 0px;
	padding: 0em;
}
.ui-bar, .ui-body { 
	padding-left: 5px ; padding-right: 5px;
}
.ui-radio .ui-btn {
	text-overflow: inherit;
}
.ui-controlgroup-horizontal .ui-radio .ui-btn , .ui-controlgroup-horizontal .ui-checkbox .ui-btn {
	padding-right: 0.7em;
	padding-left: 0.7em;
}
.ui-btn.ui-mini {
	margin-left:0em;
	margin-right:0em;
}

.ui-mini.ui-btn , .ui-checkbox.ui-mini label , .ui-radio.ui-mini label  { /* , .ui-select.ui-mini .ui-btn */
	padding-top: 0.446em;
	padding-bottom: 0.446em;
}
.ui-controlgroup:not(.ui-controlgroup-horizontal) .ui-radio.ui-mini {
	margin-right: 0.446em;
}
/* correction du problème de non affichage sous Chrome
*  http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome
*/
.ui-loader {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
.ui-loader .ui-icon-loading {
	background-color: white;
    background-size: 15em;
    background-image: url(coimages/ajax-loader-alt.gif);
    width: 3em;
    height: 3em;
    background-position: center;
}
/* hauteur fixe des textarea : inutilisé
textarea {
  height: auto !important; 
} */
/* espacement des selects */
.ui-btn-inline {
	 margin-left: 0 !important;
	 margin-right:0.3em;
}
/* suppression du halo persistent après click */
.ui-focus,
.ui-btn:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/* réducton hauteur des listes */
.ui-listview>.ui-li-static {
    padding: 0.3em 1em;
}
.ui-popup ul {
	-webkit-padding-start: 1.6em;
}
/* popup */
.ui-popup {
	padding:0.7em;
	margin: auto;
	border-radius: 0.75em;
}
.ui-popup-screen.in {
	background-color:#000;
	position: fixed;
}
.i-popup-content {	/* correction dû à i-scollauto : corps du popup avec scroll-y si nécessaire */
	overflow-y: auto;
	max-height: 90vh;
}

/* dialog */
.ui-dialog-contain .ui-btn-icon-notext.ui-btn-left {
    top: .5em;
    left: .5em;
}
.ui-dialog-contain .ui-btn-icon-notext.ui-btn-right {
    top: .5em;
    right: .5em
}
/* même padding que celui jqm de ui-header : pour l'instant déplacé en iDialogue 
.ui-dialog-contain .ui-header .ui-btn-left {
	padding: .7em 0;	
}*/
.ui-btn-c.ui-btn-icon-left::after , .ui-btn-c.ui-btn-icon-right::after {
	background-color: inherit;
}
/* 	bug jQM : impossible de fonctionner avec le réglage global "default icon:without disc" (effet de bord)
	donc changement manuel de la couleur du disque des collapsibles */
.ui-alt-icon .ui-btn:after, .ui-alt-icon.ui-btn:after {
	background-color: inherit;
}
/* 	bug jQM : ui-icon-alt d'un titre de collapsible est appliqué à tord sur les checkbox enfant du collapsible -> rétablissement */
.ui-checkbox-on:after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C4%2011%2C1%205.003%2C6.997%203%2C5%200%2C8%204.966%2C13%204.983%2C12.982%205%2C13%20%22%2F%3E%3C%2Fsvg%3E") !important
}
/* bug jQM : fond des checkbox/radio */
.ui-checkbox-off:after , .ui-radio-off:after {
	background-color: #2d3a43 /*{global-icon-color}*/;
	background-color: rgba(45,58,67,0.6) /*{global-icon-disc}*/;
}

/* lien */
.ui-link:hover {
	text-decoration: underline;
}
/* meilleure lisibilité des champs disabled */
.ui-disabled, .ui-state-disabled, input:disabled, .i-disabled {
	background-color: var(--bar-b);
	opacity: 0.6 !important;
} 

/* collapsible : par défaut pas de cadre */
.ui-collapsible .ui-listview .ui-link-inherit { /* hauteur des éléments de liste (réduction) */
	padding-top:0.4em !important;
	padding-bottom:0.4em !important;
}
.ui-collapsible-content {	/* bug jQM de padding:0em */
	padding: 0.01em 0 0 0;
	border-width:0 !important;
}
.ui-collapsible-heading-collapsed a {
	border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 1px !important; /* permet de "séparer" le collapsible fermé de ce qui le suit */
}
.ui-collapsible {
	border-radius:0em;
}
.ui-collapsible-inset, .ui-collapsible-set {
	border-radius:0.2em;
}

.ui-input-text, .ui-input-search , .ui-btn:not(.ui-slider-handle) , label.ui-btn , .ui-flipswitch {
    border-style: none;
}
.ui-input-search {
	margin:0px;
}
.ui-page-theme-f .ui-collapsible-heading .ui-btn-inherit:not(.ui-btn-icon-noicon) , .ui-page-theme-f .ui-collapsible-heading .ui-btn-f:not(.ui-btn-icon-noicon) {
	background-color: var(--bar-f) ;
}
.ui-collapsible.i-collapsible-cadre>.ui-collapsible-content { /* ajout d'un cadre */
	border-radius: 0 0 0.2em 0.2em;
	padding: 0.5em 0.5em;
	/* border: 1px #dedede solid !important; */
	border-width: 1px !important;
	border-style:solid;
}

.ui-btn.ui-checkbox-off:after , .ui-btn.ui-radio-off:after {
	/* background-color: #bfbfbf; */
	/*background-color: rgba(0 ,0 ,0 ,0.3)*/
}

.ui-controlgroup-vertical label.ui-btn {
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    /* border-bottom-color: #dedede !important; */
}
.ui-controlgroup-vertical label.ui-btn.ui-last-child {
    border-bottom-width: 0px !important;
}
.ui-controlgroup-horizontal label.ui-btn , .ui-controlgroup-horizontal .ui-select .ui-btn {
	border-right-style: solid !important;
	border-right-width: 1px !important;
	/* border-right-color: #dedede !important; */
}
.ui-controlgroup-horizontal label.ui-btn.ui-last-child , .ui-controlgroup-horizontal .ui-select .ui-btn.ui-last-child {
    border-right-width: 0px !important;
}

.ui-flipswitch.ui-bar-b:not(.ui-flipswitch-active) {
    background-color: #c2c2c2;
}
/* tables */ 
.ui-table, .ui-controlgroup-label {
	/* font-size:0.9em !important; // optionnel : permet l'affichage de plus de colonnes */
}
.ui-table .i-table-vertical-divide {
	border-right: 1px solid rgba(0,0,0,.1);
}
/* ui-grid */
.ui-block-a:not(:last-child) , .ui-block-b:not(:last-child) , .ui-block-c:not(:last-child) , .ui-block-d:not(:last-child) , .ui-block-e:not(:last-child) {
	padding-right: 0.2em;
}

/* bug jQM/Safari : ajout de !important pour prévenir le débordement de page des i-bar et autres */
.ui-hidden-accessible {
	width: 1px !important;
}
/* correction de dialog1 avec externalPanel */
#dialog1 {
	z-index: 1002;
} 

/*--------------------------------- dialog -------------------------------------*/

.i-dialogue-draggable .i-draggable , .i-dialogue-modeless.i-draggable {
	position: absolute;
	overflow: hidden;
	border-radius: 0.2em;
	width: 92.5%;
}
.i-dialogue-draggable .i-draggable , .i-dialogue-modeless.i-draggable {
	top: 20px;
}

.i-dialogue-draggable>.i-draggable.ui-dialog-contain {
	left: 50%;
	transform: translate(-50%, 0%);
}
.i-dialogue-modeless.i-draggable {
	position: fixed;
	right: 30px;
}
/* arriere plan du dialogue */
.ui-overlay-shadow , .i-shadow , .i-dialogue-draggable .i-draggable , .i-dialogue-modeless.i-draggable {
	box-shadow: 0 0 12px rgba(0,0,0,.6);
}
div[class^="i-dialogue-disabled-"], div[class*=" i-dialogue-disabled-"] {
	pointer-events: none ;
	opacity : 0.7 ;
}
.i-dialogue .i-draggable .ui-header.i-draggable-handle {
	/* background-color: #dadada; */
}
.i-dialogue.i-draggable .ui-header.i-draggable-handle {
	background-color: #a7a7a7;
}
.i-dialogue.i-draggable .ui-header.i-draggable-handle .ui-title {
	/* padding:0.4em; */
}
.i-dialogue.i-draggable .ui-header.i-draggable-handle .ui-btn-left .ui-btn, .i-dialogue.i-draggable .ui-header.i-draggable-handle .ui-btn-right .ui-btn {
	padding:0.5em;
}
.i-dialogue-small.i-dialogue-modal .ui-dialog-contain , .i-dialogue-small.i-dialogue-draggable .ui-dialog-contain , .i-dialogue-small.i-dialogue-modeless {
	max-width:350px;
}
.i-dialogue-medium.i-dialogue-modal .ui-dialog-contain , .i-dialogue-medium.i-dialogue-draggable .ui-dialog-contain , .i-dialogue-medium.i-dialogue-modeless {
	max-width:500px;
}
.i-dialogue-standard.i-dialogue-modal .ui-dialog-contain , .i-dialogue-standard.i-dialogue-draggable .ui-dialog-contain , .i-dialogue-standard.i-dialogue-modeless {
	max-width:800px;
}
.i-dialogue-large.i-dialogue-modal .ui-dialog-contain , .i-dialogue-large.i-dialogue-draggable .ui-dialog-contain , .i-dialogue-large.i-dialogue-modeless {
	max-width:1280px;
}
.i-dialogue-large .ui-content>div , .i-dialogue-standard .ui-content>div {
	padding: 0.8em;
}
.i-dialogue-medium .ui-content>div , .i-dialogue-small .ui-content>div {
	padding:0.5em;
}
.i-dialogue-medium .ui-content .i-dialogue-msg , .i-dialogue-small .ui-content .i-dialogue-msg {
	font-size: 0.9em;
}
.i-dialogue .ui-content.i-fixed-header {
	max-height: 90vh;
}

/* ------------------------------------ navmenu ------------------------------------- */

.i-navmenu-panel .i-navmenu-buttons {
	text-align: center;
	/* background-color: var(--bar-f); */
	padding-top: max(0.2em ,min(1.5vh, 0.5em) );
	padding-bottom: max(0.2em ,min(1.5vh, 0.5em) );
	font-size: max(0.8em ,min(2.5vh, 1.8em) );
}
.i-navmenu-panel .i-navmenu-buttons a {
	font-size: max(0.8em ,min(2vh, 1em) ) ;
}
.i-navmenu-panel .ui-panel-inner>.ui-listview {
	margin:0;
}
.i-navmenu-panel .ui-panel-inner {
	padding:0;
}
/* permet le scroll du menu (pour mobile en paysage), mais à améliorer avec mediaqueries
.i-menu-panel-responsive .i-navmenu-panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
*/
.i-navmenu-panel a.ui-btn {
	border-top-width:0 !important;
	border-bottom-width:0 !important;
}
.i-navmenu-panel .ui-listview>.ui-li-divider {
	font-weight: inherit;
	border-bottom-width: 0px;
	font-size: inherit;
}
.i-navmenu-panel li .ui-btn.ui-btn-active {
	/*background-color: #e4e4e4;*/
}
.i-navmenu-panel li:not(.i-no-group) .ui-btn:not(.ui-btn-active) {
	/* color: #D6D6D6 !important; */
}
.i-navmenu-panel {
	border-right: 1px solid #dedede;
}
.i-navmenu-panel .ui-listview li a {
	padding-top: max(0.2em ,min(1.5vh, 0.5em) );
	padding-bottom: max(0.2em ,min(1.5vh, 0.5em) );
	font-size: max(0.8em ,min(2.5vh, 1.8em) );
	background-color:var(--bar-b) !important;
;}
.i-navmenu-panel .ui-listview .ui-li-divider {
	/*padding-top: 0.35em;
	padding-bottom: 0.35em;*/
	padding-top: max(0.1em ,min(1.0vh, 0.3em) );
	padding-bottom: max(0.1em ,min(1.0vh, 0.3em) );
	font-size: max(0.6em ,min(2.5vh, 0.85em) );
}

/* ------------------------------------ Maps ------------------------------------- */

/* styles de InfoWindow (https://stackoverflow.com/questions/3844314/controlling-the-width-of-a-google-maps-infowindow) */
.gm-style-iw {
	/* left: 10px; */
	/* background-color: #f4f4f4; */
	/* padding-top: 5px; */
	/* padding-left: 5px; */
	width: 200px !important;
	max-height: 200px;
	overflow-y: auto !important;
}
.gm-style-iw.gm-style-iw-c {
	color:black;
}

/* ------------------------------------ Charts ------------------------------------- */

/* correction tooltip flickering on hover : https://github.com/google/google-visualization-issues/issues/2162 */
.google-visualization-tooltip { 
	pointer-events:none;
}

/* ------------------------------------ Section et paragraphe ------------------------------------- */

/* section à padding et bordure-bas */

.i-section , .i-section-parent , .i-section-xl , .i-section-nopadding {
	box-sizing: border-box;
}
.i-section , .i-section-parent>div:first-child , .i-section-xl {
	padding-left: 1em;
}
.i-section , .i-section-parent>div:last-child , .i-section-xl {
	padding-right: 1em;
}
.i-section {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.i-section-xl {
	padding-top: 1em;
	padding-bottom: 1em;
}
.i-section , .i-section-parent , .i-section .i-section , .i-section-xl, .i-section-nopadding {
	border-bottom-width: 0px;
	border-bottom-color: var(--bar-h);
	border-bottom-style: solid;
}
.i-dialogue .i-section , .ui-dialog .i-section {
	padding-left: 0em;
	padding-right: 0em;
}
.i-section:not(:last-of-type), .i-section-parent:not(:last-of-type), .i-section-xl:not(:last-of-type), .i-section-nopadding:not(:last-of-type) {
	border-bottom-width: 1px;
}
[class$='mode-emploi'] .i-section:first-of-type {
	margin-top: 0.4em;
}

.i-distinct , a.i-nolink>div.i-distinct , .i-distinct-bottom , a.i-nolink>div.i-distinct-bottom {
	border-bottom: 1px var(--bar-f) solid;
	padding-bottom: 1px;	/* correction bug Safari pour faire toujours apparaitre border-bottom */
}
.i-distinct-bottom-lite, a.i-nolink>div.i-distinct-bottom-lite {
	border-bottom: 1px var(--btn-f) solid;
	padding-bottom: 1px;	/* correction bug Safari pour faire toujours apparaitre border-bottom */
}
.i-distinct-top, a.i-nolink>div.i-distinct-top {
	border-top: 1px var(--bar-f) solid;
}
.i-distinct-top-lite, a.i-nolink>div.i-distinct-top-lite {
	border-top: 1px var(--btn-f) solid;
}
.i-distinct:last-child , .i-distinct-bottom:last-child , .i-distinct-bottom-lite:last-child {
	border-bottom: 0px;
}
	
.i-border-top {
	border-top-width: 1px;
	border-top-color: var(--bar-h);
	border-top-style: solid;
}
/* autre */

.i-cell {
	display:table-cell;
	vertical-align: middle;
}
.i-cell:not(:first-child) {
	padding-left:0.5em;
}

.i-marge-verticale {
	margin: 1em 0;
}
.i-marge-hautbas {
	margin: 0.5em 0;
}
.i-marge-haut {
	margin-top: 0.5em;
}
.i-marge-bas {
	margin-bottom: 0.5em;
}
.i-marge-droite {
	margin-right: 0.2em !important;
}
.i-marge-zero {
	margin: 0 !important;
}
.i-padding {
	padding: 1em;
}
.i-padding-lite {
	padding: 0.5em;
}
.i-padding-vertical {
	padding: 1em 0;
}
.i-padding-texte {
	padding: 0.2em 0.4em;
}
.i-max-height-25 { /* limite la hauteur + ajoute scroll si besoin */
	max-height: 25vH;
	overflow: auto;
	/* min-height: 2.5em; */
}

.i-popup-page {
	height: 98%;
	width: 98% !important;
	position: absolute;
	top: 20px;
	left:0px;
}

.i-map-map {
    min-height: 300px;
}
.i-map-legend {
}

.i-agenda-balise-mois .i-periode-mensuelle {
	font-weight: normal;
	/* color:white !important; */
	/* text-decoration: none; */ 
	text-shadow: none;
	font-size: smaller;
}

/* flag à insérer sur les éléments qui ne doivent pas être visibles si compte démo actif */
.i-demo-hidden .i-demo {
	display:none;
}

.i-detail-emploi-hidden .i-detail-emploi {
	display: none;
}

.i-cadre-mode-emploi-hidden .i-cadre-mode-emploi:not(.i-force-mode-emploi) {
	display: none;
}
.i-cadre-mode-emploi {
	position: relative;
}
.i-cadre-mode-emploi .i-masquer-mode-emploi {
	top: 0.25em;
	right: 0.5em;
	position: absolute;
}
.i-cadre-resp {
	margin-top: 1em;
	padding: max(0.25em, min(0.75em, 1.5vh)) max(1em, min(1.5em, 1.5vw)); /* ie : 0,25em < h < 0,75em, permet de se passer de mediaquery */
	border-radius: 0.5em;
}
.i-cadre-noborder , .i-cadre-mode-emploi, .i-cadre-mode-emploi-alt , .i-cadre-erreur {
	border-style: none;
	padding: 2% 3% 2% 3% !important;
	line-height: 1.5;
}
.i-cadre-noborder {
	background-color: initial;
}
.i-cadre-mode-emploi { /* pour désactiver l'affichage/masquage automatique, ajouter i-force-mode-emploi, ou, utiliser i-cadre-mode-emploi-alt */
	background-color: var(--mode-emploi-background);
}
.ui-page.ui-dialog .i-cadre-mode-emploi {
	border-radius: 0.2em ;
}
.i-cadre-mode-emploi:not(.i-force-mode-emploi) { /* légère augmentation du padding-right pour ne pas chevaucher la croix de fermeture */
	padding: 2% 5% 2% 3% !important; 
}
.i-cadre-mode-emploi-alt {
	background-color: var(--mode-emploi-background);
}
.i-cadre-erreur {
	border: 2px var(--erreur-icon);
	border-style: solid;
	background: none;
}

.i-nolink {
	color: inherit !important;
	text-decoration: none !important;
}
/* flipswitch sans texte */
.i-no-text-flipswitch.ui-flipswitch {
	width: 3em;
	border-radius: 1em;
	margin: 0;
	font-size: 70%;
}
.i-no-text-flipswitch.ui-flipswitch .ui-btn {
	font-size: inherit;
}
.i-no-text-flipswitch.ui-flipswitch.ui-flipswitch-active {	/* quand actif : width+padding-left = width ci-avant */
	width: 1.875em;
	padding-left: 1.125em;
}
.i-scrollauto {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* corrige le scroll haché sur iOS : https://stackoverflow.com/questions/21198459/jquery-mobile-scrolling-not-smooth-on-ios/22398992 */
}
.i-ul-no-puce {
	/* avec puces 
	-webkit-padding-start: 1.1em;	
	-webkit-margin-after : 0.5em; */
	/* sans puce */
	list-style-type: none;
	-webkit-padding-start: 0;
	-webkit-margin-after: 0px;
}

/*------------------------------------ couleurs ------------------------------------*/

/* ip : couleurs de chaque module */

.i-intermittent-color {				/* logo et theme c */
	color: var(--bar-c) !important;
}
.i-intermittent-bg-color {
	background-color: var(--bar-c) !important;
	border-style: none;
	color: white !important;
}
.i-intermittence-color {
	color: var(--bar-e) !important; 
}
.i-intermittence-bg-color {
	background-color: var(--bar-e) !important;
	border-color: var(--bar-e) !important;
	color: white !important;
}
.i-assistant-color {
	color: var(--bar-g) !important; 
}
.i-assistant-bg-color {
	background-color: var(--bar-g) !important; 
	border-color: var(--bar-g) !important; 
	color: white !important;
}
.i-communaute-color {
	color: var(--bar-d) !important;
}
.i-communaute-bg-color {
	background-color: var(--bar-d) !important;
	border-color: var(--bar-d) !important;
	color: white !important;
}

/* ei : couleurs de chaque page */

.i-emploi-intermittent-color {		/* logo */
	color: #660000 !important; 
}
.i-accueil-bg-color , .i-emploi-intermittent-bg-color {
	background-color: #660000 !important;
	color: white !important;
}
.i-emploi-intermittent-bg-color-lite {
	background-color: #fff5ed !important;
}
.i-annonce-color {
	color: #a04646 !important;
}
.i-annonce-bg-color {
	background-color: #a04646 !important;
	color: white !important;
}
.i-annonce-bg-color-lite {
	background-color: rgb(255, 216, 186) !important;
}
.ei-profil-bg-color {
	background-color: #ffeadb !important;
	color: black !important;
}
.i-relation-color {
	color: #ffb72d !important;
}
.i-relation-bg-color {
	background-color: #ffb72d !important;
	color: white !important;
}
.i-intermittent-bg-color-lite {
	background-color: #dddaff !important;
}
.ui-block-a.i-intermittent-bg-color {
	background-color: #aca4ff !important;
}
.ui-block-b.i-intermittent-bg-color {
	background-color: #7066d5 !important;
}

/* ip,ei : couleurs communes */

.i-recherche-border-color {
	border-color: var(--bar-d) !important;	
}
.i-recherche-bg-color {
	background-color: var(--bar-d) !important;
	color: white !important;
}
.i-recherche-color {
	color: var(--bar-d) !important;
}
.i-parametres-bg-color {
	background-color: #dedede !important;
}
.i-parametres-color {
	color: #dedede !important;	
}
.i-aide-color {
	color: #868686 !important;
}

/***** couleur de texte *****/

.i-color-btncolor {
	color: var(--bar-a);
}
.i-color-libelle , ::-webkit-input-placeholder { 
	color: #797979;
}
.i-color-passe {
	color: #eaeaea; 
}
.i-color-incertain {
	color: #dddddd;
}
.i-color-futur , .i-color-valide {
	color: var(--bar-e) !important;
}
.i-color-erreur, .i-color-supprimer , .i-color-error {
	color: var(--erreur-icon) !important;
}
.i-color-warning , .i-color-simplifie {
	color: var(--warning-icon) !important;
}
.i-color-obligatoire , .i-color-negatif {
	color: var(--erreur-icon);
}
.i-color-active, .i-color-positif {
	color: var(--bar-g) !important ; 
}
.i-color-neutre {
	color: #7b7b7b;
}
.i-avant-impot-color {
	color: #8a008e !important;
}
.i-apres-impot-color {
	color: var(--bar-d) !important;
}
.i-color-enseignement-formation {
	color: #5449ff !important;
}

.i-selection-active:after {
	content:" • " ; 
}

li.i-color-positif, li.i-color-negatif , li.i-color-neutre {
	/* list-style-type: none; */
	padding: 0.1em 0 0.1em 0em;
}

/*---------------------------- youtube video ------------------------------*/
/* ajustée et sans barres noires : https://stackoverflow.com/a/43954878 */
.i-video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.i-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*---------------------------- datebox ------------------------------*/

.sa-datebox {
	width: 9em;
}
.sa-timebox {
	width: 6em;
}
.ui-datebox-container .ui-header {
	display:none;
}
.ui-datebox-container .ui-input-text>input {
	font-size: 118% !important; /* equiv à 1/0,85% de ui-mini */

}
.ui-page-theme-f .sa-datebox .ui-bar-inherit , .ui-page-theme-f .sa-timebox .ui-bar-inherit {
	background-color: var(--btn-f);
}

/*------------------------------------ cadre de texte ------------------------------------*/

/* texte encadré : par défaut pour afficher un élément sous le fond de couleur des boutons (theme f), surclassable avec .i-background-xxx */
.i-texte-encadre-cmd , .i-texte-encadrerond-cmd , .i-texte-encadre-pastille , .i-texte-encadre-border-small {
	border-style: none;
	/* border-width: 1px;
	border-color:inherit; */
	padding: 0.2em 0.4em 0.2em 0.4em;
	text-shadow:none;
	white-space:nowrap;
	margin: 0.1em 0;
	text-align: center;
}
.i-texte-encadre-cmd {
	border-radius: 0.2em;
	color: #868686;
	background-color: var(--bar-b);
} 
.i-texte-encadrerond-cmd {
	border-radius: 50px;
	color: #868686;
	background-color: var(--bar-b);
}
.i-texte-encadre-pastille {
	border-radius: 20px;
/*	color: inherit;
	background-color: var(--btn-f);*/
	margin: 0 0.4em;
}
.i-texte-encadre-border-small {
	border-style: solid;
    border-width: 1px;
    border-radius: 0.2em;	
    padding: 0 0.2em;
    font-size: 0.75em;
}
/* 
	texte encerclé [-sub], format : <span class="i-texte-encercle[-sub]-cmd"><span> caractère || fa5 </span></span> 
	- width:1.8em convient jusqu'à 3 caractères, l'augmenter si besoin
	- [-sub] est plus bas et plus à gauche (superpose un peu ce qui précède)
	- pas de background-color par défaut
*/
.i-texte-encercle-cmd , .i-texte-encercle-sub-cmd {
	width: 1.8em;
	border-radius: 50%;
	line-height: 0;
	/* NECESSARY FOR TEXT */
	position: relative;
	display:inline-block;
	vertical-align: middle;
}
.i-texte-encercle-sub-cmd {
    margin: 0 0 -1.2em -0.4em;
    font-size: 0.70em;
}
.i-texte-encercle-cmd:after , .i-texte-encercle-sub-cmd:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.i-texte-encercle-cmd * , .i-texte-encercle-sub-cmd * {
	position: absolute;
	width: 100%;
	text-align: center;
}
.i-texte-encercle-cmd svg , .i-texte-encercle-sub-cmd svg{			/* pour fa5 */
	left: 24%;
	bottom: 16%;
}
.i-texte-encercle-cmd :not(svg) , .i-texte-encercle-sub-cmd :not(svg) {	/* pour texte */
	bottom: 50%;
}

.i-association {
	background: rgba(255, 228, 181, 0.68) !important;
}
.i-agenda-echeance {
	background: #d2f3ff /* gris-bleu clair */
	color:black ;
}
.i-agenda-balise-mois {
	background: var(--bar-b) !important; 
	padding-bottom: 0px; padding-top: 0px;
}
.i-agenda-passe {
	/* techniques modifiant une couleur de fond */
	/* background-color: rgba(0, 0, 0, 0.2);/* 	filtre ajoutant du noir : bof */
	/* opacity: 0.5;						/*	filtre gérant la transparence : bon compromis */
	/* -webkit-filter: brightness(70%);		/*	filtre gérant la luminosité : le meilleur mais partiellement supporté (iOS 5+ et Android 4.4+) */
	filter: opacity(0.5);
}

.i-background-parametres {		/* theme h (gris clair) */
	background-color: var(--bar-f);
	color: var(--bar-a); 
	border-style: none ;
}
.i-background-neutre {			/* gris très clair = theme f */
	background-color: var(--btn-f);
	color: var(--bar-a); 
	border-style: none ;
}
.i-background-bouton {			
	background-color: var(--bar-b);
	color: var(--bar-a); 
	/* border: 1px solid #d8d8d8; */
}
.i-background-supprimer {
	background-color: var(--erreur-icon) !important;
	border-style: none;
	color: white !important;
}
.i-background-warning {
	background-color: var(--warning-background) ;
	border-style: none;
	color: var(--warning-text) ;
}
.i-background-erreur , .i-background-error {
	background-color: var(--erreur-background) !important;
	border-style: none;
	color: var(--erreur-text) !important;
}
.i-background-simplifie , .i-background-demo {			
	background-color:#ff9c00;
	color: black;
	border-style: none ;
}
.i-background-enseignement-formation {			
	background-color: #5449ff;
	color: black;
}
.i-border-radius {
	border-radius: 0.2em;
}

.i-encadre {
	border-radius: 0.2em;
	padding: 1em 1em;
	border: 1px var(--btn-f) solid;
	margin-bottom: 1em;
}
.i-separateur {
	border-top: 1px var(--btn-f) solid;
}
.i-separateur-bas {
	border-bottom: 1px var(--btn-f) solid;
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
}


/*------------------------------------ divers ------------------------------------*/

/* ombrage header si scroll-y (cf js) */
.i-header-shadow {
	/*-webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);*/
	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.3);
	z-index: 1000;
}

/* produit (in app) */
.i-produit {
	border-width: 1px;
	border-style: solid;
	padding: 0.5em;
	/* margin-top: 1em; */
}
/* erreur de saisie */
.i-erreur {
	color: var(--erreur-icon) !important;
	font-weight: bold;
	border-width: 2px;
	border-style: solid;
	border-color:var(--erreur-icon) !important;
}
.i-ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
}
/* texte de bouton complet */
.i-btn-fulltext {
	white-space: normal;	
}
/* floutage */
.i-outdated {
	opacity : 0.5;
}
.i-blurry {
	filter: blur(4px);
}
.i-relation-compteur {
	font-size: smaller;
	width:50px ;
}
.i-relation-compteur .fa-layers-text {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}
.ui-panel .i-relation-compteur {
	float: right;
	/* height: inherit; */
	top: 5px;
}
.i-relation-isnew {
	border: 2px solid var(--bar-d) !important;
}
.i-relation-icone-compteur {
	background-color: var(--bar-f);
	display: inline-block;
	border-radius: 50%;
	width: 4em;
	height: 4em;
	text-align: center;
	margin-top: 1em;
}
.i-resume-court-texte-ellipsis {
	display:none;
}
.i-relation-resume .i-resume-court-texte-ellipsis {
	display:initial;
}
.i-resume-court {
	display: table;
	/* justify-content: space-between; */
}
.i-resume-court div {
	vertical-align: top;
	display: table-cell;
}
.i-resume-court div:first-child {
	width: 3.4em;
	padding-right: 0.5em;
}
.i-selection .i-resume-court div:nth-child(2) {
	/* nom+métier occupe le max entre photo et corbeille */
	width: 100%;
}
.i-relation-resume .i-resume-court-texte {
	cursor: pointer;
}
.i-section.i-selection {
	padding-left:0.5em;
}
.i-resume-long {
	clear:both;
	margin-top:0.3em ;
}
.i-sync-error {
	padding: 0.3em 0;
	text-align: center;
	color: white;
	text-shadow: none;
	background-color: #d20000;
}
.i-border-erreur {
	box-shadow: inset 0 0 0 0.2em var(--erreur-icon) !important;
}
.i-sync-error span {
	margin-left: 2em;
}

.i-uldl-progress {
    display: block;
    text-align: center;
    width: 0;
    height: 20px;
    background: var(--bar-e);
    transition: width .3s;
}
.i-uldl-progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

/* ---------------------------------- Effets ------------------------------------------- */

/* Effet blinker slow */
.i-blinker-slow {
	animation: blinker-slow 3s linear infinite;
}
@keyframes blinker-slow {
  50% { opacity: 1; }
  90% { opacity: 0.2; }
}

/* Effet blinker fast */
@keyframes blinker-fast {
  0%   { opacity:1; }
  20%  { opacity:1; }
  50%  { opacity:0; }
  80%  { opacity:1; }
  100% { opacity:1; }
}
@-webkit-keyframes blinker-fast {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.i-blinker-fast {
   -webkit-animation: blinker-fast 2s infinite;
    animation: blinker-fast 2s infinite;
}

/* Effet Sonar from koalandar.com */
@-webkit-keyframes sonar {
    0% { box-shadow: 0 0 0 0 var(--bar-c),0 0 4px 2px rgba(0,0,0,.4) }
    to { box-shadow: 0 0 0 10px rgba(255,147,223,0),0 0 4px 2px rgba(0,0,0,.4) }
}
@keyframes sonar {
    0% { box-shadow: 0 0 0 0 var(--bar-c),0 0 4px 2px rgba(0,0,0,.4) }
    to { box-shadow: 0 0 0 10px rgba(255,147,223,0),0 0 4px 2px rgba(0,0,0,.4) }
}
.i-sonar {
	animation: 0.8s ease-out 0s infinite normal none running sonar;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: sonar;
}
/*------------------------------------ flags ------------------------------------*/

.i-lock {
}
/* flag à insérer sur les éléments à cacher qd la page est en lecture */
.i-hidden-read { 
}
/* flag à insérer sur les éléments à cacher qd la page est en edition */
.i-hidden-write { 
}
/* flag à insérer sur les éléments à inactiver qd la page est en lecture */
.i-disabled-read { 
}
/* flag à insérer sur les éléments à inactiver qd la page est en édition */
.i-disabled-write { 
}
/* flag à insérer sur les éléments à ne jamais désactiver sous l'action des boutons du header */
.i-always-enabled {
}
/* flag à insérer sur les éléments à ne jamais activer sous l'action des boutons du header */
.i-always-disabled {
}
/* flag à insérer sur les éléments input[type=date] pour l'ouverture du plugin pickerdate natif */
.i-date {
	min-width: 100px;
}
/* flag à insérer sur les éléments input[type=time] pour l'ouverture du plugin pickertime natif */
.i-time {
}
/* flag à insérer sur les éléments qui ne doivent pas réagir au balayage de page */
.i-swipe-disabled {
}
/* flag à insérer sur les éléments qui ne doivent pas réagir au plugin pullrorefresh (eg : Map de Recherche */
.i-pulltorefresh-disabled {
}
/*------------------------------------ images ------------------------------------*/ 

/*
	Options ------------
	ui-btn-inline		marges
	ui-btn-X			fond de couleur swatch X
	i-img-nobackground	fond transparent suppression bordure
	i-img-tooltip		taille fixe

	SVG intermittent ---
	texte rappel btn	<span class="i-texte-encadre-cmd i-img i-img-lg i-img-checkmark"></span>
	bouton				<a href="#" class="ui-btn i-img i-img-checkmark"></a>
						<a href="#" class="ui-btn ui-corner-all ui-btn-inline i-img i-img-checkmark i-img-tooltip"></a>	

	SVG fontawesome ----
	texte rappel btn	<span class="i-texte-encadre-cmd i-img i-img-lg"><i class="fa fa-bars fa-lg"></i></span>
	bouton		 		<a href="#" class="ui-btn ui-btn-inline ui-corner-all i-img-tooltip"><i class="fa fa-question fa-lg"></i></a>
*/
 
/* marques */
.i-img-chrome {
    background: transparent url("coimages/chrome-icon.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-opera {
    background: transparent url("coimages/opera-icon.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-safari {
    background: transparent url("coimages/safari-icon.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-brave {
    background: transparent url("coimages/brave-icon.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-edge {
    background: transparent url("coimages/edge-icon.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
/* intermittent[gratuit|plus] */
.i-img-migration {
    background: transparent url("coimages/migration-2-plus.png") no-repeat center center;
    /* width: 120px; */
    height: 36px;
}
.i-img-intermittent {
    background: transparent url("coimages/intermittent.png") no-repeat center center ;
	width: 2em !important;
	height: 2em !important;
}
.i-img-intermittentgratuit {
    background: transparent url("coimages/intermittentgratuit.png") no-repeat center center ; 
}
.i-img-intermittentplus {
    background: transparent url("coimages/intermittentplus.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-intermittent-duo {
	height: 2em !important;
	width: 2em !important;
	z-index: 10;
	position: relative;
}
.i-img-intermittentgratuit-duo {
	height: 1.8em !important;
	width: 1.8em !important;
	margin-left: -8px;
	opacity: 0.85;
	z-index: 0;
	position: relative;
}
.i-img-emploiintermittent {
    background: transparent url("coimages/emploiintermittent.png") no-repeat center center ;
    font-size: initial;
    background-size: 100% !important;
}
.i-img-map-s {
  background-size: cover;
  width: 20px !important;
  height: 23px !important;
  background-position-x: center;
  background-position-y: top;
  display: inline-block;
}
.ui-btn.i-img-tooltip .i-img-map-s {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 3px;
}
.i-img-map-intermittent {
  background-image: url("coimages/map-marker-s-int.png");
}
.i-img-map-employeur-ei {
  background-image: url("coimages/map-marker-s-emp.png");
}
.i-img-map-annonce {
  background-image: url("coimages/map-marker-s-ann.png");
}
.i-croix-rouge {
    background: transparent url("coimages/croix-rouge.png") no-repeat center center;
    font-size: initial;
    background-size: 100% !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: inherit;
    height: inherit;
    top: 4px;
}
/* RAF-fa5 : remplacement des images par fa5 (cf index.html/relation)
.i-img-map-relation {
  	margin-right: 0.2em;
  	display: inline-block;
  	vertical-align: middle;
}
*/
.i-img-map-relation {
  	background-repeat: no-repeat;
  	background-size: contain;
  	height: 20px;
  	margin-right: 0.2em;
  	display: inline-block;
  	width: 20px;
  	vertical-align: middle;
}
.i-img-map-relation-10 {
  	background-image: url("coimages/map-marker-s-rel-10.png");
}
.i-img-map-relation-01 {
  background-image: url("coimages/map-marker-s-rel-01.png");
}
.i-img-map-relation-11 {
  background-image: url("coimages/map-marker-s-rel-11.png");
}

/* image */
.i-photo , .i-photo-thumb , .i-photo-icon {
	border-radius: 50% !important;
}
.i-photo {
	width :100px;
	height:100px;
}
.i-photo-thumb {
	/* width: 50px; */
	height: 50px;
}
.i-photo-icon {
	height: 25px;
}
.i-preview {
	width: 100%;
	/*height: 100%;*/
	object-fit: contain;
	max-width: 300px;
	max-height: 300px;
}
img {
	image-rendering: pixelated;
}
img:not(.i-photo , .i-preview) {
	/* correction : la photo de Profil n'était pas affichée la 1ère fois */
	max-width: max-content;
}

.i-img-cs {
    background-image: url("coimages/i-cs.svg");	
}
.i-img-cs-btncolor {
    background-image: url("coimages/i-cs-gris.svg");	
}
.i-img-poleemploi {
    /*background-image: url("coimages/i-poleemploi-gris.svg");*/
    background-image: url("coimages/i-france-travail.svg");
}
.i-img-nobackground {
    background-color: transparent !important;
    border-width: 0px;
}
.i-img-lg {
    width: 1.5em !important;
    height: 1.5em !important;
}
.i-img-1x {
    width: 1.2em !important;
    height: 1.2em !important;
}
.i-img-2x { 
    width: 2em !important;
    height: 2em !important;
}
.i-img {
    width: 1em;
    height: 1em;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
.i-img-tooltip , .i-img-tooltip-lg , .i-img-tooltip-2x , .i-img-tooltip-1x {
	padding: 0.4em;
	border-width:0;
	text-overflow: clip;
}
.i-img-tooltip , .i-img-tooltip-lg {
	width: 1.1em;
	height: 1.1em;
}
.i-img-tooltip-2x {
	width: 2.2em;
	height: 2.2em;
}
.i-img-tooltip-1x5 {
    width: 1.6em;
    height: 1.6em;
}
.i-img-tooltip-1x {
    width: 0.8em;
    height: 0.8em;
    padding-top: 0;
}
/* assure qu'une image (img, svg...) reste collée au texte qui précède ou suit (https://stackoverflow.com/a/76211977) */
.i-img-nowrap-before , .i-img-nowrap-after {
	white-space: nowrap;
}
.i-img-nowrap-before::before {
	content: "\200B";
	margin-right: 0.25em;
}
.i-img-nowrap-after::after {
	content: "\200B";
	margin-left: 0.25em;
}

/* fa5 */
.ui-header .ui-btn-right .i-img-tooltip-2x {
	width: 1.8em;
}

/* tout petit bouton */
.i-btn-tiny , .ui-table-columntoggle-btn {
	padding-top: 0.44em;
	padding-bottom: 0.44em;
	/* padding-left: 0.3em; */
	margin-top: 0;
	margin-bottom: 0;
	/* font-size: smaller !important; */
}
.i-btn-tiny:not([class*="ui-icon-"]) , .ui-table-columntoggle-btn {	/* réduction à droite si aucun ui-icon-xxx */
	/* padding-right: 0.4em; */
}

/*--------------------------------- fontawesome ---------------------------------------*/

.fas, .fal {
	text-shadow: none;
}
.fa-lg {
	vertical-align: initial;
}
.i-texte-encadre-cmd .fa-lg {
	vertical-align: middle;
}
.i-img-tooltip .fa-lg {
	margin-left: -2px;
}
.fa-stack , .fa-stack-1x, .fa-stack-2x {
	font-style:inherit;
}
.i-background-supprimer>.fa-trash-alt {
	color:white;
}
.fa-trash-alt {
	color:#d20000;
}
.fa-user.fa-border.fa-fw , .fa-flag.fa-border.fa-fw {
	width: 1em;
}
/* Aide : ? toujours blanc */
.ui-btn-c .fa-question , .ui-btn-c .fa-exclamation-circle {
	color:var(--bar-b);
}
.fa-2x.fa-responsive {
	font-size:max( 2em , 3.5vw );
}
.fa-layers-counter.fa-layers-bottom-right.fa-2x {
	bottom:-0.1em;
}

/*------------------------------------ histogramme (i-bar) ------------------------------------*/ 

.i-bar-set {
	display: inline-table;
	width: 100%;
	margin: 0 0 0.6em 0;
}
.i-bar-bloc {
	width : 100%;
	display: table;
}
.i-bar-bloc-r { 
	width : 19%; display: table-cell; 
	vertical-align: middle; 
	padding-left: 5px; text-align : left;
}
.i-bar {
	color:#fff;
	width:0%;
	border-radius: 0.2em 0.2em 0.2em 0.2em;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	text-shadow: 0 0 0 #111111;
	text-overflow: clip;
	overflow: hidden;
	height: 2em;
}
.i-bar-embedded {
	width:50px !important;
	display : inline-block !important;
}
.i-bar-seuil {
	width: 10% !important;/* doit être identique à cSoft.barSeuil !! */
}

/*------------------------------------ blocs ------------------------------------*/

/* bloc : divise la largeur en 2 : blocXX et blocXX-r */

.bloc50 {	width: 49%; }
.bloc50-r {width: 49%; }
.bloc50:nth-of-type(even) { text-align:right; }

.bloc25 {	width : 25%; text-align : right; }
.bloc25-r { width : 71%; }
.bloc33 {	width : 40%; text-align : right; }
.bloc33-r {width: 58%;}
.bloc60 {	width : 59%; }
.bloc60-r {width : 38%;text-align : right;}
.bloc70 {	width : 69%; }
.bloc70-r {	width : 29%; text-align : right; }
.bloc75 {   width : 75%; }
.bloc75-r { width : 23%; text-align : right;}
.bloc80 {   width : 80%; }
.bloc80-r {width: 17%;text-align : right;}
.bloc85 { 	width : 84%; }
.bloc85-r {width: 14%;text-align : right;}
.bloc100 {  width : 100%; display : block; }
.blocmax {  width : 100%; display : block; text-overflow: ellipsis; overflow: hidden;}
.blocmax-r{ width : 100%; display : block; text-align : right;}

.blocright{ float:right; }

/* alignement */
.bloc-inline {
	display: inline-block;
}
.blocmax, .bloc25, .bloc25-r, .bloc33, .bloc33-r, .bloc50, .bloc50-r, .bloc60, .bloc60-r, .bloc70, .bloc70-r, .bloc75, .bloc75-r, .bloc80, .bloc80-r, .bloc85, .bloc85-r, .bloc100
/*,.cell25*/ {
	display: inline-block;
	vertical-align: middle;
	margin: 0.25em 0;
}
*
.bloc25, .bloc33, .bloc50, .bloc60, .bloc80, .bloc85 {
	padding-right:1%;
}

.bloc85 h4, .bloc85 {
	margin-top: 0;
	margin-bottom: 0;
}
.bloc85, .bloc50, .bloc50-r, .bloc33-r, .tablecell-l, .tablecell-r {
	text-overflow: ellipsis;
	overflow: hidden;
}

.tablecell-l , .tablecell-r {
	width: 99%;
	vertical-align: middle;
}
.tablecell-l {
	margin: 0.25em 0;
}
.tablecell-r {
	margin-bottom: 0.25em;
} 

.i-grid-resp-a .ui-block-a , .i-grid-resp-a .ui-block-b {
	float: none;
	width: 100%;
}

/* box-sizing : permet de traiter les blocs marge et padding compris */
.bloc80, .bloc80-r, .bloc85, .bloc85-r, .bloc70, .bloc70-r, .bloc50, .bloc50-r, .bloc33, .bloc33-r, .bloc100, .tablecell-l, .tablecell-r  {
	-webkit-box-sizing: content-box;
	box-sizing: border-box;
}
.ui-block-a>span , .ui-block-a>div , .ui-block-b>span , .ui-block-b>div , .ui-block-c>span , .ui-block-c>div , .ui-block-d>span , .ui-block-d>div , .ui-block-e>span , .ui-block-e>div {
	vertical-align: middle;
} 

/* ---- réduction de la largeur max et centrage (eg utilisé en Dialog) ---- */
.i-wcenter-40 {
    width: 100%;
    max-width: 40em;
    margin: auto;
}

/* ---- réduction de la largeur à Xem max , 6em : valeur num , 9em : pour <input> même taille que sa-datebox ,  20em : utilisé pour <input>  ---- */
.i-wmax-6 {
	max-width: 6em;
}
.i-wmax-9 {
	max-width: 9em;
}
.i-wmax-20 {
	max-width: 20em;
}
		 
/* ------------------ flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox ---------------- */

/* parent, par défaut : align-items: stretch; 	justify-content: flex-start; */
.i-flex {
	display: flex;
	/* align-items: center; */
}

/* options du parent */
.i-flex.i-flex-start {
    align-items: flex-start;	/* vertical haut */
}
.i-flex.i-flex-end {
    align-items: flex-end;		/* vertical bas */
}
.i-flex.i-flex-center {
    align-items: center;		/* vertical center */
}
.i-flex.i-flex-responsive , .i-flex.i-flex-responsive-32 , .i-flex.i-flex-responsive-19 , .i-flex.i-flex-responsive-reverse {  /* .i-flex-responsive correspond à -48 */
    flex-direction: column;
}
.i-flex.i-flex-responsive > div , .i-flex.i-flex-responsive-32 > div , .i-flex.i-flex-responsive-19 > div , .i-flex.i-flex-responsive-reverse > div {
    padding-right: 0em !important;
    padding-bottom: 0.5em;
}
.i-flex.i-flex-wrap {			/* permet un seul flex avec enfants sur plusieurs lignes, alignables avec .i-flex-N */
	flex-wrap: wrap;
}
.i-flex.i-flex-space {
	justify-content: space-between;
}

/* options du parent pour les enfants */
.i-flex>div {
	box-sizing: border-box;
	text-overflow: ellipsis;
	overflow: hidden;
} 
.i-flex.i-flex-virgule>div:not(:last-of-type)::after {
	content:"\00a0•";	/* label[59] */
}
.i-flex>div:not(:last-of-type) , .i-flex.i-flex-wrap>div {
	padding-right: 0.5em;
} 
 .i-flex.i-flex-wrap-spaceline>div {
	padding-bottom: 0.5em;
}
.i-flex.i-flex-vcenter > div {
	/* centre verticalement le contenu
	NB : ne permet pas de changer l'alignement horizontal du contenu de l'enfant -> si besoin, utiliser .i-flex-center sur le parent et text-align sur l'enfant */
	display: flex;
	align-items: center;
}
.i-flex.i-flex-border-bottom > div {
	border-bottom: 1px solid #d0d0d0;
}
.i-flex.i-flex-border-responsive > div {
	border-bottom: 1px solid #d0d0d0;
	padding: 0.5em 0 0 0 !important;
}
.i-flex.i-flex-only-child>div:only-child {
 	/* maximise l'enfant s'il est seul */ 
	flex: 0 100%;
}
.i-flex.i-flex-stretch > div {
 	/* maximise les enfants */ 
	flex: 1;
}

/* 	taille enfant, utilisable avec .i-flex-wrap, i-flex-responsive, ...
	total<100% possible TQ la part restante est inférieure à la part du 1er. Ex:30,30,30 donnera 33,33,33 
	le dernier d'une ligne peut éventuellement être surchargé avec "flex-grow:1"
*/
.i-flexel-nooverflow {
	overflow: unset !important;
} 

.i-flexel-5 {	flex: 1 1 5%;
}
.i-flexel-10 {	flex: 1 1 10%;
}
.i-flexel-15 {	flex: 1 1 15%;
}
.i-flexel-20 {	flex: 1 1 20%;
}
.i-flexel-25 {	flex: 1 1 25%
}
.i-flexel-30 {	flex: 1 1 30%;
}
.i-flexel-40 {	flex: 1 1 40%;
}
.i-flexel-50 {flex: 1 1 50%;}
.i-flexel-60 {	flex: 1 1 60%;
}
.i-flexel-70 {	flex: 1 1 70%;
}
.i-flexel-80 {	flex: 1 1 80%;
}
.i-flexel-90 {	flex: 1 1 90%;
}
.i-flexel-100 {flex: 1 1 100%;}

/* --------------------------------------- charts ------------------------------------ */

.i-chart {
	width: 100%;
	/* min-height: 150px; */
	border-bottom: 1px var(--bar-h) solid;
	background-color: var(--bar-b);
	box-sizing: border-box;
}
.i-chart-titre, .i-chart-showhide-text {
	background-color: var(--bar-f);
}
.i-chart-corps {
	text-align: center;
}
.i-chart-corps-inner {
	display: block;
	margin: 0.5em;
}

/* -- chart : actualité -- */
/* styles for '...' http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  /* margin-right: -1em; -> commentaire car parent overflow:hidden*/
  padding-right: 1em;
  border-bottom: 1px var(--btn-f) solid;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: ''; 
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  /*background: white;*/
}

/* correction tooltip flickering */
svg > g > g:last-child {
	pointer-events: none;
}
/* correction tooltip (type isHtml) */
.i-googlechart-tooltip {
	padding: 10px 15px;
	color:black ;
	background-color:white;
}

/*--------------------------------- externalPanel -------------------------------------*/

/*
	- ajouter i-menu-panel-responsive à body (garde la hiérarchie de standardPanel)
*/
.i-menu-panel-responsive .ui-dialog.ui-page-active {
	/* z-index:1050; géré en commonDialog */
}
.i-menu-panel-responsive .ui-dialog.ui-page-active:not(.i-draggable) {
	background-color: var(--bar-b) !important;
}

/*--------------------------------- standardPanel -------------------------------------*/

/* 
	- corrige un bug jQM (?) et augmente l'ombre portée quand menu ouvert
*/
.i-navmenu-panel.ui-panel-closed {
	width:0;
}
.i-menu-panel-responsive .i-logo {
	display: none;
}
.i-navmenu-panel.ui-panel-display-overlay {
	box-shadow: 20px 0px 20px 5px rgba(0,0,0,.15);
}
/* 
	- Ajuste à 15em la largeur du panel ouvert au lieu de 17em (jQM) : désactivé
*/
/*
.i-navmenu-panel.ui-panel {
	width:15em;
}
.i-navmenu-panel .ui-panel-page-content-position-left,
.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
	left:15em;
}
.i-navmenu-panel .ui-panel-animate.ui-panel-page-content-position-left.ui-panel-page-content-display-overlay {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(15em,0,0);
    -moz-transform: translate3d(15em,0,0);
    transform: translate3d(15em,0,0);
}
*/

/* ------------------------------------ Surcharges localisées ------------------------------------- */

/*
#intermittence-content #heuresprecisions li:not(:first-of-type) , #intermittence-content #prochainsdroitsprecisions li:not(:first-of-type) {
	border-top: 1px #e2e2e2 solid;
}
#intermittence-content li {
	padding: 0.1em 0 0.1em 1em;
}*/
#agenda-aujourdhui .aujourdhui-texte {
	margin-top : 0.2em;
}
/* ajustement de la position de l'icone en partie droite des 2 listviews d'employeurs */
[id$="employeur-list"] .ui-li-aside {
	right:1em;
	top: 0.7em;
}

/* ------------------------------------ Mise à jour conditionnelle (largeur écran) ------------------------------------- */

/*
	- pour alterner le texte -> 				'<span class="i-display-max-28">calendrier</span><span class="i-display-min-28">sélection des calendriers</span>' 
 	- pour ajouter du texte (si plus large) -> 	'calendriers<span class="i-display-min-32"> disponibles</span>'
	NB : sauf popup ou zone mode-emploi
*/

.i-display-min-28 , .ui-popup  .i-display-min-32 , .ui-popup .i-display-min-42 {
	display: none;
}
.ui-popup .i-display-min-28 , .ui-popup  .i-display-min-32 , .ui-popup .i-display-min-42 , 
.i-cadre-mode-emploi .i-display-min-28 , .i-cadre-mode-emploi  .i-display-min-32 , .i-cadre-mode-emploi .i-display-min-42 {
	display: initial;
}

/* ------------------------------------ Media Queries ------------------------------------- */

/*
	Problème du double scroll sur synthèse et profil
	- les 2 solutions (disjointes) height et bottom rendent la fermeture des popups difficile car la hauteur de leur l'overlay est fausse
	- la solution overflow-y semble fonctionner...
*/
@media screen and (orientation: portrait) {
    .ui-mobile .ui-page {
        /* overflow-y: hidden;*/
    }
}
@media screen and (orientation: landscape) {
    .ui-mobile .ui-page {
        height: 100%;
    }
}

/* 304px */
@media all and (min-width:19em) {
	/* Vues : Show the table header rows and set all cells to display: table-cell */
	.activite-breakpoint td,
	.activite-breakpoint th,
	.activite-breakpoint tbody th,
	.activite-breakpoint tbody td,
	.activite-breakpoint thead td,
	.activite-breakpoint thead th {
		display: table-cell;
		margin: 0;
	}
	/* Vues : Hide the labels in each cell */
	.activite-breakpoint td .ui-table-cell-label,
	.activite-breakpoint th .ui-table-cell-label {
		display: none;
	}
	.i-flex.i-flex-responsive-19 {
		align-items: center;
		flex-direction: row;
	}
	.i-flex.i-flex-responsive-19.i-flex-border-responsive > div {
		border: 1px solid #d0d0d0;
		padding: 0.5em;
	}
}

/* 448px */
@media all and (min-width: 28em) {
	.i-display-max-28 {
		display: none !important;
	}
	.i-display-min-28 {
		display: inline;
	}
}

/* 512px */
@media all and (max-width: 32em) {
	/* sort un élément du flex, pour l'afficher pleine largeur (https://stackoverflow.com/a/51174230) */
	.i-flex.i-flex-wrap>.i-flex-out-32 {
		flex-basis: 100%;
	}
	.i-dialogue-modeless.i-draggable {
		margin: auto;
		right: unset;
		position: relative;
	}
}

@media all and (min-width:32em) {	
	.i-display-max-32 {
		display: none !important;
	}
	.i-display-min-32 {
		display: inline;
	}
	/* gmap infoWindow */
	.gm-style-iw {
		width: 400px !important;
	}
	.i-flex.i-flex-responsive-32 {
		align-items: center;
		flex-direction: row;
	}
	.i-flex.i-flex-responsive-32 > div {
	    padding-right: 0.5em !important;
	    padding-bottom: 0em;
	}
	.i-flex.i-flex-responsive-32.i-flex-border-responsive > div {
		border: 1px solid #d0d0d0;
		padding: 0.5em;
	}
}

/* 672px */
@media all and (min-width:42em) {
	
	.i-display-max-42 {
		display: none !important;
	}
	.i-display-min-42 {
		display: inline;
	}
	/* i-bar */
	.i-bar-bloc-r { 
		width : 14%;
	}
	/* gmap infoWindow */
	.gm-style-iw {
		width: 350px !important;
		max-height:unset;
	}
	.ui-page:not(.ui-dialog) .ui-collapsible-heading .ui-btn {
		/*padding-top: 0.4em;
		padding-bottom: 0.4em;
		padding-left: 0.75em;	*/
	}
}

/* 768px = tablette Onda v975m : breakpoint général du menu, empilement... */
@media (min-width: 48em) {
 
	/* gmap infoWindow */
	.gm-style-iw {
		width: 450px !important;
	}
	.i-relation-container {
		column-count: 2;
		column-gap: 0.5%;
	}
	.i-section.i-relation {
		display: inline-block;
		border-width: 1px 1px 1px 1px;
		border-style: solid;
		border-color: var(--bar-h);
		width: 100%;
	}
	.i-section.i-relation.i-relation-resume {
		font-size: smaller;
	}

	.i-map-map {
		min-height: 350px;
		float: left;
		width: 94%;
	}
	.i-map-legend {
		float: right;
		width: 6%;
		text-align: center;
	}
	.i-map-legend div {
		text-align: center !important;
		width: initial;
		margin-top: 2em;
	}
	.i-map-legend div > * {
		display: block;
	}

	.i-photo {
		width:inherit;
		height:inherit;
	}
	.tablecell-l { /* defaut à width:15%, sinon utiliser cellXX */
		text-align:right;
		padding-right: 1.5%;
		width: 15%;
		display: inline-block;
	}
	.tablecell-r {
		width: 84%;
		display: inline-block;
		margin: 0.25em 0;
	} 
	.tablecell-l.cell25 {
		width: 25%;
	} 	
	.tablecell-r.cell25 {
		width: 74%;
	} 
	.tablecell-l.cell35 {
		width: 35%;
	} 	
	.tablecell-r.cell35 {
		width: 64%;
	} 
	.tablecell-l.cell50 , .tablecell-r.cell50 {
		width: 49.5%;
	} 
	.tablecell-l.cell75 {
		width: 75%;
	} 	
	.tablecell-r.cell75 {
		width: 24%;
	} 
	.i-grid-resp-a .ui-block-a , .i-grid-resp-a .ui-block-b {
		/* float: left; */
		width: 49.95%;
		display: table-cell;
		/* padding-right: 1em !important; */
	}

	/* menu panel */
	.i-menu-panel-responsive .i-navmenu-panel {
		visibility: visible;
		position: absolute;
		left: 0;
		clip: initial;
		float: left;
		width: 16em;
		background: none;
		-webkit-transition: none !important;
		-moz-transition: none !important;
		transition: none !important;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		transform: none !important;
		-webkit-box-shadow: none;
		box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.3);
		/* border-right: 1px solid #dedede; */
	}
	.i-menu-panel-responsive .ip-content , .i-menu-panel-responsive>.ui-header {
		width: calc(100% - 16em);
		float: right;
	}
	.i-menu-panel-responsive .i-menu {
		display: none;
	}
	.i-menu-panel-responsive .i-logo {
		width: 3.0em;
		height: 3.0em;
		display: inline-block;
	}
	.i-navmenu-buttons {
		/* height: 7.5em; */
	}
	/* footer menu */
	.menu-footer-show .itemslide-master {
		display: none;
	}
	.i-floatbutton-master {
		bottom: 1.5em;
	}
	/* header */
	.ui-header .ui-btn-left , .ui-header .ui-btn-right {
		padding: inherit;
	}
	/* popup moins large */
	.ui-popup {
		max-width: 900px;
	}
	/* i-bar */
	.i-bar-bloc-r { width : 13% }
	.ui-slider-track { height:20px; }

	/* ----------------------------------- Floating button ------------------------------------- */
	/* agrandissement pour l'ajout d'un texte, placement à droite, enfants placés à droite */

	.i-floatbutton-master.i-floatbutton {
		left: 3em;
		bottom: 2em;
	}
	.i-floatbutton-master .i-floatbutton-fa {
		font-size: 2em;
		margin-top: 0.4em;
	}
	.i-floatbutton-master-hastext .i-floatbutton-fa {
		position: relative; 
	}
	.i-floatbutton-master-hastext {
		width: fit-content;
		padding: 0 2em;
	}
	.i-floatbutton-master-text {
		display: initial;
		font-size: 1.2em;
	}
	.i-floatbutton-set .i-floatbutton-master-text {
		vertical-align: super;
	}
	ul.i-floatbutton-list {
		left: 12.8em;
		right: unset;
		bottom: 0.4em;
		padding: 0 13em 0 6em;
		margin-left: -5em;
	}
    .i-floatbutton-child-container {
    	float: left;
    	/*top: 0.55em;*/
    	left: 3em;
    	right: unset;
    	z-index: 1;

		top: -2.1em;
    }
	.i-floatbutton-child-text {
		font-size: 1em;
	}
	.i-floating-page-extra-bottom {
		height:0;
	}


	/*------------------------------------ 3D transform du menu et boutons :hover ------------------------------------*/

	/* zoom in sur hover */
	.i-navmenu-panel li .ui-btn:not(.ui-btn-active):hover , .i-img-tooltip.ui-btn:hover , .i-img-tooltip-2x.ui-btn:hover , .i-hover-transform:hover  {
	   /*box-shadow: 0px 0px 4px #868686;*/
	   z-index: 2;
	   -webkit-transition: all 200ms ease-in;
	   transition: all 200ms ease-in;
	}
	.i-navmenu-panel li .ui-btn:not(.ui-btn-active):hover , .i-img-tooltip.ui-btn:hover , .i-img-tooltip-2x.ui-btn:hover  {
		-webkit-transform: scale(1.05);
	   transform: scale(1.05);
	}
	.i-hover-transform:hover  {
		/* -webkit-transform: scale(1.01); */
		/* transform: scale(1.01); */
		/* background: #dedede !important; */
		-webkit-filter: brightness(0.9);	/* assombtrit qq soit la couleur initiale */
		filter: brightness(0.9);
	}
	/* zoom out sur not(hover) */
	.i-navmenu-panel li .ui-btn:not(.ui-btn-active) , .ui-btn.i-img-tooltip , .i-img-tooltip-2x.ui-btn , .i-hover-transform {
		/* border:0; */
		position: relative;
		-webkit-transition: all 200ms ease-in;
		-webkit-transform: scale(1);
		transition: all 200ms ease-in;
		transform: scale(1);
	}

	/* ------------------------------------ i-flex ------------------------------------ */

	.i-flex.i-flex-responsive , .i-flex.i-flex-responsive-reverse {
		align-items: center;
	}
	.i-flex.i-flex-responsive {
		flex-direction: row;
	}
	.i-flex.i-flex-responsive-reverse {
		flex-direction: row-reverse;
	}
	.i-flex>.i-flexel-right {
	    text-align: right !important;
	}
	.i-flex.i-flex-responsive > div {
	    padding-right: 0.5em !important;
	    padding-bottom: 0;
	}
	.i-flex.i-flex-responsive.i-flex-border-responsive > div {
		border: 1px solid #d0d0d0;
		padding: 0.5em !important;
	}

	/* ------------------------------------ swipeToReveal ------------------------------------ */

	.swipetr-master .swipetr-child .swipetr-button {
		width: 70px;
		cursor: pointer;
		visibility: unset;
		min-width: var(--button-width);
	}
	.swipetr-master .swipetr-child > .swipetr-a.slide {
		margin-left: inherit ;
	}
}

@media (min-width: 56em) { /* 896px */

	/* charts */
	.i-chart {
		width: 50%;
		display: inline-block;
		box-sizing: border-box;
		border-right: 1px var(--bar-h)solid;
	}
	.i-chart-corps {
		height: 11em;
		text-align: center;
	}
	.i-chart-corps-inner {
		display: inline-block;
	}
}

@media (min-width: 75em) { /* 1200px */

	.i-text-tiny.i-text-responsive-75 {
		/* RAF : généraliser le principe à toute classe h1, h2...*/
		font-size: 100% !important;
	}
	.i-relation-container {
		column-count: 3;
	}
	.i-menu-panel-responsive .i-navmenu-panel {
		width: 19em;
	}
	.i-menu-panel-responsive .ip-content , .i-menu-panel-responsive>.ui-header {
		width: calc(100% - 19em);
	}

	.i-map-map {
		min-height: 400px;
		width: 96%;
	}
	.i-map-legend {
		width: 4%;
	}

	/* ----------------------------------- Floating button ------------------------------------- */
	
	.i-floatbutton-master.i-floatbutton {
    	left: 4.5em;
    }
	ul.i-floatbutton-list {
    	left: 14.3em;
    }
}