/*******************************

	REINITIALISATION DES CSS
	!!!! Ne pas modifier !!!!
	
*******************************/

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
   font-size:16px;
 }
 
p, form, table {
    font-size:1rem;
}

/* Pas de puces pour les listes */
ol, ul {
	list-style: none;
}

ul.circ {
    list-style: disc inside none;
    padding: 10px 20px 20px 20px;
    font-size:1rem;
}

a {
    text-decoration: none;
}


/*
 *
 *wrapper : classe englobante de toute la page
 *
 */

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Permet de faire des pages qui remplissent l'écran ; 1vh=1% de hauteur d'écran */
	
    /*margin-left: auto;
    margin-right: auto; inclus dans ligne ci-dessus */
	/*font:normal 0.8em Poppins, Verdana, Arial, Helvetica, sans-serif;*/
    font:normal 0.8em Poppins, Verdana, Arial, Helvetica, sans-serif;
}

/*
 *
 * header : classe du header (partie haute sans le menu)
 *
 */
 
.header_large {
    background: #bbdef7; /*#d6eaf8;*/    /* --color4-- */
}

.header_large {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}

.nav_large {
    margin-top:80px;  
} 

.header_large > .header {
    width: 1024px;
    margin: 0 auto;    
    display:flex;
    flex-direction: row;
    align-items: center;
    /*border-style: solid;
    border-width: 1px;*/
}

.header .header_left_menu_responsive, .header .header_left_logo, .header .header_left_text  {
    margin: 0;
}

.header_left_menu_responsive {
    display: flex;
    /*border-style: solid;
    border-width: 1px;*/
    flex: 0 0 min-content;
    margin-right: 10px;
}

.header_left_logo {
    /*border-style: solid;
    border-width: 1px;*/
    flex-direction: column;
    align-items: center;
    flex: 0 0 min-content;
}

.header_left_text {
    /*border-style: solid;
    border-width: 1px;*/
    flex: 0 0 min-content;
}

#img_masecupro_casque {
    height: 60px;
    margin-top: 10px;    
}

#img_masecupro_texte {
    width: 300px;
    margin-top: 10px;
    margin-left: 10px;    
}

a.logo_msem_casque {
    /*border-style: solid;
    border-width: 1px;*/    
}

/* Pour etirer la zone vide du milieu */
.header_espace_etirable {
    flex: 1 10 auto; 
}

.header_espace_etirable {
    /*border-style: solid;
    border-width: 1px;*/         
}

ul.action_nav {
    display:flex;
    flex-direction: row;
    align-items: center;
}

a.logo_msem_texte {
    margin: 10px 0 0 0;
    /*border-style: solid;
    border-width: 1px;*/
}

.top_nav {
    /*border-style: solid;
    border-width: 1px;*/
    flex: 0 0 min-content;
}

.nav_top {     
    margin-left: 20px;
    display:flex;
    flex-direction: row;
    align-items: center;
}

.nav_top a {
    color: #112875;
    transition: all 1s;
}

.nav_top_large {     
    margin-left: 40px;
    display:flex;
    flex-direction: row;
    align-items: center;
}

.nav_top_large a {
    color: #112875;
    transition: all 1s;
}

.nav_top_text {
    display:flex;
    flex-direction: column;
    font-size: 0.9rem;
    padding-top: 17px; 
    padding-bottom: 17px;
    /* 2 dernieres lignes pour éviter que le menu 'Mon compte' ne se referme */
}

.nav_top:hover a {  /* Sans le "a" ne fonctionne pas ! */
    color: #298ee0;
        
}

.nav_top_large:hover a {  /* Sans le "a" ne fonctionne pas ! */
    color: #298ee0;
        
}

.nav_top_img img, .moncompte2_img img {
    width: 50px;
}

.moncompte2_img2 img, .nav_top_img2 img {
    width: 30px;
    fill: #1368a4;
    margin-left: 5px;
}

.nav_top_img2 img {
    display: none;
}

.moncompte {
    display:flex;
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
}

#logo-user-small, #logo-disconnect {
    width: 30px;
	height: 30px;
}

/* En vertical : Mon compte + "nom + prenom" */ 
.moncompte2 {
    display:flex;
    flex-direction: column;
}

ul.action_nav li .moncompte_expand {
	background: #fff url(../img/form/bg_top_expand.png) 0 0 no-repeat;
	border: solid #999;
	border-width: 0 1px 0 0;
	display: none;
	padding: 3px 0 0;
	position: absolute;
	/* left: 600px; >>> sera positionne dynamiquement */
	top: 66px;
	z-index: 1003;
}

ul.action_nav li .moncompte_expand ul li {
	border: solid #999;
	border-width: 0 1px 1px 1px;
	padding: 7px 10px;
}

ul.action_nav li .moncompte_expand ul li a {
    display:flex;
    align-items: center;
}

.more_actions {
	background: #fff url(../img/header/bg_top_expand.png) 0 0 no-repeat;
	border: solid #999;
	border-width: 0 1px 0 0;
	display: none;
	margin: 3px 0 0;
	position: absolute;
	/* left: 600px; >>> sera positionne dynamiquement */
	top: 66px;
	/* z-index: 1002; */
	/* LBX 13/09/2026 : 1002 passait au-dessus du menu principal (#nav : z-index 99, menu.css) et du
	   header fixe (.header_large : 1001). 98 = juste sous #nav, au-dessus du contenu (tablesorter <= 10) */
	z-index: 98;
}

.more_actions ul {
	border: solid #999;
	border-width: 1px 1px 1px 1px;
    border-radius: 5px;
}

.more_actions ul li {
    cursor: pointer;
    padding: 7px 10px;
}

.more_actions ul li:hover {
    background: #d8d5db;
}

.more_action ul li:not(:first-child) {
    border: solid #999;
	border-width: 1px 0px 0px 0px;
}



/*.more_actions ul li a {
    display:flex;
    align-items: center;
}*/

/*
 *
 * nav : classe du menu
 *
 */
 
.nav_large {
    background: #efefef;
    /*margin-bottom: 1em;*/ 
}
 
 .nav {
    width: 1024px;
    margin: 0 auto;
 }

/*
*
* content : classe du corps de texte
*
*/
 
.content_large {
    background: #f6f6f6;    
    flex: 1;    /* Complement pour que la page occupe toute la hauteur d'�cran */  
}
 
.content {
   width: 1024px;
   margin: 0 auto;
}

/*strong {
    font-weight: bold;
}*/

/*
*
*  Contenu des formulaires
*
*/

.form_container {
    background: #f2f3f4;
}

.bg_gris {
    background: #d8d5db;   /* --color1.1-- */
}

/* Fond rouge */
.bg_rouge {
    background: #f00;
}

.form_container > h1, .form_container > h2, .form_container h3, .form_container > h4 {
    padding: 5px;
    margin: 20px 5px 5px 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: auto;
}
/* Voir ici pour le overflow:auto : https://www.w3schools.com/css/css_align.asp "The clearfix hack" */

h2 {
    font-size: 1rem;
}

.form_container > h1, .form_container > h2 {
    font-size: 1.3rem;
    font-weight: bold; 
    /*background: #d8d5db;*/   /* --color1.1-- */
}

.form_container h3 {
    font-size: 1.1rem;
    font-weight: bold; 
    background: #e4e1e8; /* --color1.2-- */
}

.form_container > h4 {
    font-size: 1rem;
    font-weight: bold;  
    /*background: #fff;  --color1.3-- */
}



/* old : a garder juste un peu
.form_container h2 {
    padding: 5px;
    margin: 20px 5px 5px 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 120%;
    font-weight: bold;    
    background: #d8d5db; /*#ccc;    --color1.1-- 
}

.form_container h3 {
    padding: 5px;
    margin: 20px 5px 5px 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 100%;
    font-weight: bold;
    background: #e4e1e8;   /* --color1.2--     
} */ 

.form_container p, h2, h2 p {
    padding: 10px 0 0 0;
    margin: 10px;
}
 
.form_row {
    display:flex;
    flex-direction: row;
    padding: 5px 5px;
}

.form_line {
    display:flex;
    flex-direction: row;
    padding: 5px 5px;
}

.form_row input:focus, .form_row select:focus {
    /*outline-width: 0;*/
    outline: #888 solid 1px;
}

.form_container form .form_row > label, .form_container form .form_line > label {
    float: left;
    line-height: 20px;
    margin: 0 30px 0 0;
    width: 30%;
}

.form_container form .form_row > .field, .form_container form .form_line > .field {
    width: 60%;
}

.form_container form input.text, .form_container form textarea, .form_container form select, #fenmods_select {
    border: 1px solid #999;
    border-radius: 3px;
    /*padding: 5px;*/
    /*font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;*/
    /*font-weight: bold;*/
    color: blue;
}

/* S�paration des select et des autres elements de form pour la largeur, car les marges ne sont pas g�r�es de la m�me fa�on */
.form_container form input.text, .form_container form textarea {
    box-sizing: border-box; /* Balise magique pour que les differents input ait le meme comportement */
    width: 100%;
}

.form_container form select, #fenmods_select {
    width: 100%;
}

/* Rendu pas top, trouver autre solution */
.form_container form .bg_red {
    background:  #F7D6D9;    
}

.form_container form .field .msg {
    color: red;
}

.form_container form .form_line > .field .msem_photo {
    width: 100%;
}

.chevron_down:before {
	/*content: "\2bc6";*/
    content: "⯆";
	font-family: 'icons';
}

.chevron_up:before {
	/*content: "\2bc5";*/
    content: "⯅";
	font-family: 'icons';
}

.three_dots, .three_dots:visited {
    width: 30px;
    height: 30px;
    float: right;
    background-image: url(../img/icons/three-dots-black-transp.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    transition: all 1s;
}

.three_dots:hover {
    background-image: url(../img/icons/three-dots-hover.svg);
}

.msem_camera_icon, .msem_file_icon {
    width: 40px;
    cursor: pointer;    
}

.small_icon {
    height: 20px;
}

.small_icon_pointer {
    height: 20px;
    cursor: pointer;
}

.large_icon {
    height: 50px;
}

.icon-mat {
    height: 25px;
    margin-right: 5px;
}

.icon-vgp-border {
    padding: 2px;
    border: 4px solid #1368a4;
    border-radius: 3px;
}

.tab-mat {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#img_camera {
    width: 40px;
}

.form_container form .button_row {
	margin-top: 10px;
}

/* Pour formulaires AJAX */
.btn_ajax_wait input {
    display: none;    
}

.btn_ajax {
    padding: 5px;
    margin: 5px;
}

.btn_ajax > img {
    display: none;    
}

/* Indicateur de chargement indépendant */
#ajax_wait {
    display:none;
    position:fixed;
    left:50%;
    top:50%;
}

/* Partie Blog */

.blog > h1 {
    text-align: center;
}

.blog > h1, .blog > h2 {
    font-size: 1.6rem;
    font-weight: bold; 
    padding: 5px;
}

.blog h3 {
    font-size: 1.1rem;
    font-weight: bold; 
    padding: 20px 10px 15px 10px;
}

.blog > h4 {
    font-size: 1rem;
    font-weight: bold;  
    padding: 5px;
}

.citation {
    font-style: italic;
    color: #298ee0;
}

.soul {
    text-decoration: underline;
}

/* Gestion des 2 classes d'erreur et d'info */
.form_container .form_errors {
	background: #fff;
	border: 1px solid #ff8900;
	margin: 0 0 15px;
	padding: 5px;
}

.form_container .form_errors label {
	color: #ff8900;
	display: block;
	line-height: 16px;
}

.form_container .form_infos {
	background: #fff;
	border: 1px solid #3D8BDD;
	margin: 0 0 15px;
	padding: 5px;
}

.form_container .form_infos label {
	color: #3D8BDD;
	display: block;
	line-height: 16px;
}

.msem_button {
    padding: 4px 10px;
    margin: 3px;
    /* récupéré de jquery-ui ! */
    border: 1px solid #c5c5c5;
    color: #454545;
    background: #f6f6f6;
    border-radius: 15px;
    text-align: center;
    transition: all 1s;
    cursor: pointer;
    /*pointer-events: auto;*/
    outline-style:none;
}

.msem_button:hover {
    background: #d8d5db;
}

.msem_button:link, .msem_button:visited, .msem_button:hover, .msem_button:active {
    border-radius: 15px;
}

.btn_small {
    width: 130px;
}

.btn_medium {
    width: 180px;
    font-size: 100%;
}

.btn_large {
    width: 220px;
}

.btn_xlarge {
    width: 300px;
}

 
 /*
 *
 * Footer : classe du footer (partie basse)
 *
 */
 
 .footer_large {
    background:  #3f3d44; /*#515a5a;*/ /* --color5-- */
    margin-top: 20px;
 }
 
 .footer {
    width: 1024px;
    margin: 0 auto;
    display:flex;
    flex-direction: row;    
    align-items: center;
    justify-content: center;
    color: white;
 }
 
 .footer_item {
    margin: 10px 10px;
 }
 
 .footer_tem a {
    text-decoration: none;
 }
 
.footer_item a:link, .footer_item a:visited, .footer_item a:hover {
    color: white;
 } 
 
 /*
 *  Liens "en savoir plus"
 *  Ex : <a class='know_more' href='#'>En savoir plus</a>
 */
 
.know_more {
	display: inline-block;
	margin-left: 20px;
    font-size: 1rem;
	/*width: 18px;
	height: 45px;
	line-height: 48px;
	content: "\e826";
	color: inherit;
	font-family: 'icons';
	text-align: center;
	font-size: 21px;
	vertical-align: top;*/
    
	background-image: url(../img/icons/arrow-right-solid.svg);
	background-repeat: no-repeat;
	background-position: right;
    background-size: 2em 0.9em;
    fill: yellow;
	padding: 4px 30px 4px 4px;
	white-space: normal;
	/*cursor: pointer;*/    
}

a.know_more {
    color: #112875;
    transition: all 1s;
}

a.know_more:hover {
    color: #298ee0;        
}

.msplink {
	margin-left: 20px;
    font-size: 1rem;
	padding: 4px 30px 4px 4px;
	white-space: normal;    
}

a.msplink {
    color: #112875;
    transition: all 1s;
}

a.msplink:hover {
    color: #298ee0;        
}

/*.know_more.is-active:after {
	content: "\e844";*/
 
 /*
 *
 *  Gestion du CookieAsk
 *
 *

.cookie_ask { 
    position:fixed;
    bottom:0;
    left:0;
    z-index:99999999;
    height:100px;
    width:100%;
    word-wrap: break-word;
 }
 
 .cookie_accepte {
    display: none;
 }
 
#cookie_ask2 {
    font-family:Calibri,Arial;
    font-weight:bold;
    color:#FFF;
    opacity:0.9;
    display:block;
    height:100px;
    line-height:100px;
    font-size:15px;
    padding-left:20px;
    background-color:#207cca;
}

#cookie_ask2_accepter, #cookie_ask2_refuser, #cookie_ask2_plusinfo {
    font-family:Calibri,Arial;
    line-height:20px;
    font-weight:bold;
    color:#333;
    display:inline-block;
    padding:1px 20px 1px 20px;
    border-radius:2px 2px 2px 2px;
    height:20px;
    margin-left:20px;
    text-decoration:none;
    background-color:#eee;
}
*/

.cookie_ask { 
    position:fixed;
    bottom:0;
    left:0;
    z-index:99999999;
    height:200px;
    width:100%;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    word-wrap: break-word;
    background-color:#207cca;
    font-family:Calibri,Arial;
    font-weight:bold;
    font-size:15px;
    opacity:0.9;
 }
 
 .cookie_accepte {
    display: none;
 }
 
#cookie_ask2 {
    color:#FFF;
    margin:10px; 
    /*padding-left:20px;*/
}

#cookie_ask2_accepter, #cookie_ask2_plusinfo {
    /*font-family:Calibri,Arial;*/
    /*line-height:20px;*/
    /*font-weight:bold;*/
    color:#333;
    padding:7px 20px;
    border-radius:15px;
    /*height:20px;*/
    margin:10px;
    text-decoration:none;
    background-color:#eee;
}
 
/*
*
*  DIVERS
*
*/

/*
 * Diaporama
 */
 
.diapo{
    position: relative;
    overflow: hidden;
}

/*.diapo_medium{
    position: relative;
    overflow: hidden;
	width: 60%;
	margin-left: auto;
    margin-right: auto;
}*/

#nav-droite, #nav-gauche{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 3em;
}

#nav-droite{
    right: 20px;
}
#nav-gauche{
    left: 20px;
}

.elements{
    display: flex;
    transition: 0.5s step-end;
	transform: translateX(0px);
    width: 220px;
}

/*.element{
    flex: 1 0 100%;
    position: relative;
}*/

/*.element > img{
    width: 100%;
}*/

.caption {
    text-align: center;
    /*padding: 5px;*/
	color: #112875;
}

.caption p{
    size: 1rem;
	/*font-weight: bold;*/
	/*display: none;*/
}

/* Fin diaporama */

/*
* Page accueil
*/
.acc_message {
    margin: 10px;
    padding: 10px;
    border-radius: 3px;
    background-color: #1368a4; /*rgb(116, 81, 235);*/
    color: rgb(255, 255, 255);
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}

/* Flexbox horizontale */
.acc_horiz_fb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.acc_fb_cell {
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 10px;
}

.acc_fb_cell_contour {
    border: 2px #bbdef7 outset;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #91caf2;
}


.acc_fb_cell_text {
    /*width: 280px;*/
    font-size: 1rem;
    font-weight: bold;
    margin: 10px;
}

.acc_fb_cell_text a, .acc_fb_cell_text:visited a {
    color: #112875;
}

.acc_fb_cell_text:hover a {
    transition: all 1s;
    color: #298ee0;
}

.acc_fb_cell_text_complement {
    /*width: 280px;*/
    font-weight: normal;
}

.acc_fb_cell_text_small_italic {
    /*width: 280px;*/
    font-weight: normal;
    font-style: italic;
    font-size: 1rem;
}

.decale1px {
    transition: all 1s;
}

.decale1px:hover {
    transform: translateY(5px);
}

.acc_fb_cell_text_large {
    width: 480px;
    /*font-weight: bold;
    margin: 5px;
    text-align: center;*/    
}

.acc_fb_cell_text_small {
    width: 180px;
    height: 40px;
    font-weight: bold;
    margin: 5px;
    text-align: center;    
}

.acc_fb_cell_text_small_1_2lignes {
    height: 50px;
}

.acc_fb_cell_text_small_2lignes {
    height: 50px;
}

.acc_fb_cell_text_small2 {
    width: 180px;
    margin: 5px;
    text-align: center;
}

#acc_fb_cell1 {
    width: 450px;
}

.fb_cell_w450 {
    width: 450px;
}

#acc_fb_cell2 {
    width: 280px;
}

.fb_cell_w280 {
    width: 280px;
}

.pict_copieecran_tel {
    width: 220px;
}

.pict_copieecran_ordi {
    width: 70%;
}

/* Flexbox verticale */
.acc_vertic_fb {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
}

.acc_fb_cell_horiz {
    display: flex;
    flex-direction: row;
    margin: 5px 10px 5px 10px;
    padding: 5px 10px 5px 10px;
}

/* Flexbox horizontale */

.fb_horiz {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.txt_h4 {
    font-size: 1.3rem;
    font-weight: bold;
}

.txt_normal {
    font-size: 1rem;
    font-weight: normal;
}

li.circle {
    list-style-type: disc;
    margin-left: 10px;
}

.margin_bottom_5px {
    margin-bottom: 5px;
}

.margin_right_5px {
    margin-right: 5px;
}

.padding_right_15px {
    margin-right: 15px;
}

/* Gestion des décalages pour les ancres internes à la page fonctionnalites */
/*div:target {
    padding-top: 70px; 
    margin-top: -70px; 
}*/

/* Temoignage */

.msem_temoignage_text {
    margin: 50px;
    text-align: justify;
}

.msem_temoignage_sign {
    text-align: center;
}


/* Séparateur */

.sep {
    height:15px;
}

/* Cellule de QCM */

.qcm_cell {
    display: flex;
    flex-direction: column;
    
    justify-content: center;
    align-items: center;
    
    margin: 10px;
    padding: 10px;
    border: 2px #bbdef7 outset;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #91caf2;
    
    width: 480px;
    height: 100px;
    /*font-weight: bold;
    margin: 5px;*/
    text-align: center;
      
}

.qcm_cell_qu:hover {
    transition: all 1s;
    background: #d8d5db;
    transform: translateY(5px);
    cursor: pointer;
}

.qcm_cell_rep_strike {
    text-decoration-line: line-through;
}

.qcm_cell_rep_green {
    background: #00ff00;
}

.qcm_cell_rep_red {
    background: #ff0000;
}

/* Bouton effacer dans un tableau */

.pic_del {
	display:block;
	width:22px;
	height:22px;
    background-image:url(../img/poubelle_trans.png);
	/*background-image:url(../img/trashcan_empty.png);*/
	background-repeat:no-repeat;
	margin-left:6px;
    float:left;
}
.pic_del:hover {
    background-image:url(../img/poubelle_trans2.png);
	/*background-image:url(../img/trashcan_full.png);*/
}

/* Bouton MAJ dans un tableau */

.pic_maj {
	display:block;
	width:22px;
	height:22px;
	background-image:url(../img/iconmaj_empty.png);
	background-repeat:no-repeat;
	margin-left:6px;
	float:left;
}
.pic_maj:hover {
	background-image:url(../img/iconmaj_full.png);
}

/* Cameleon */

.pic_cameleon {
	display:block;
	width:22px;
	height:22px;
	background:url(../img/icons/agt_family.png) no-repeat;
	margin-left:6px;
	float:right;
}

.pic_cameleon:hover {
	background:url(../img/icons/agt_family-off.png);
}

/* Volet de MAJ Ajax */
#info_maj_ajax {
	width: 300px;
	padding: 10px;
    text-align: center;
	background: #8FA3AD; color: #fff;
    position: absolute;
	left: 0px; top: -70px;
    border-radius: 5px;
    -webkit-transition: all .5s ease-in;
	transition: all 1s ease-in;
    z-index: 99999;	
}

/*
 *
 * Gestion des fenetres d'alerte MSEM
 *
 */
 
.infoAlertMsem {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.infoAlertMsem:target {
  opacity:1;
  pointer-events: auto;
}
 
.infoAlertMsem:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.infoAlertMsem > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.infoAlertMsem > div header,.infoAlertMsem > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.infoAlertMsem .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.infoAlertMsem > div h2 {
    margin:0;
    font-weight: bold;
}
 
.infoAlertMsem > div .btn {
  float:right;
}
 
.infoAlertMsem > div section, .infoAlertMsem > div > header, .infoAlertMsem > div > footer, .infoAlertMsem > div {
  padding:15px;
}

#idConfirmMsem section p {
  padding:15px;
}


/*
 *
 * Gestion des fenetres modales (fenMod)
 *
 */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
.gauche {
  float:left;
}
 
.fenMod {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.fenMod:target {
  opacity:1;
  pointer-events: auto;
}
 
.fenMod:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.fenMod > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.fenMod > div header,.fenMod > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.fenMod .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.fenMod > div h2 {
    margin:0;
    font-size: 1.2em;
    font-weight: bold;
}
 
.fenMod > div .btn {
  float:right;
}
 
.fenMod > div section,.fenMod > div > header, .fenMod > div > footer {
  padding:15px;
}

#fenModsResult {
    margin-top: 10px;
}

#fenModsResult select {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
}

/* Fin gestion fenetres modales */

/*
 *
 * Gestion des fenetres modales d'upload (fenModUpload)
 *
 */
/*.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}*/
 
.fenModUpload {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.fenModUpload:target {
  opacity:1;
  pointer-events: auto;
}
 
.fenModUpload:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.fenModUpload > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.fenModUpload > div header,.fenModUpload > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.fenModUpload .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.fenModUpload > div h2 {
    margin:0;
    font-weight: bold;
}
 
.fenModUpload > div .btn {
  float:right;
}
 
.fenModUpload > div section,.fenModUpload > div > header, .fenModUpload > div > footer {
  padding:15px;
}

.fenModUploadContainer {
    width: 300px;
    height: 100px;
    border: 2px dashed #007BFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #007BFF;
    margin: 20px auto;
    cursor: pointer;
    transition: background-color 0.2s;
}
.fenModUploadContainer.dragover {
    background-color: #f0f8ff;
}

.hidden-input {
    display: none;
}

/* Fin gestion fenetres modales d'upload */

/* Gestion des tableaux */

.simpletable {
    /*display: block;*/
    /*font-family: sans-serif;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*font-size: 115%;*/
    overflow: auto;
    width: 100%;    /* autre valeur possible = auto */
}
  
.simpletable th {
    background-color: #a0d3f7;
    color: black;
    font-weight: bold;
    padding: 5px 5px;
    text-align: center;
    border: #cdcdcd 1px solid;
  }
.simpletable td {
    background-color: rgb(238, 238, 238);
    color: rgb(111, 111, 111);
    padding: 5px 5px;
    border: #cdcdcd 1px solid;
}

.simpletable tbody tr:nth-child(even) td { /* td final obligatoire car sinon ne fonctionne pas */
    background: rgb(235,242,250);
}

.simpletable tbody tr:nth-child(odd) td { /* td final obligatoire car sinon ne fonctionne pas */
    background: #FFF;
}

.simpletable tbody tr:hover td {    /* td final obligatoire car sinon ne fonctionne pas */
    background-color: rgb(191,191,191);
}

/* Tri des tableaux */
.msemtriunsorted {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-repeat: no-repeat;
	background-position: center right;
	padding: 4px 18px 4px 4px;
	white-space: normal;
	cursor: pointer;
}

.msemtriasc {
    background-color: #9fbfdf;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}

.msemtridesc {
    background-color: #8cb3d9;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}



.centrage_h {
    text-align: center;
}

.centrage_v {
    text-align: center;
}

img.export_tableur {
    float: right;
    cursor: pointer;
}

.tablewrapper {
    overflow-x: auto;
}

.no_h_scrollbar {
    overflow: visible;
}

.h_scrollbar {
    overflow: scroll;
}

/*.tablesorter .header3 {
    background-color: #111111;
}*/

/*.simpletable tr:nth-child(even) {
    background: hsla(50, 50%, 80%, 0.7);
}*/

/*
*
*  PAGE DE LOGIN;
*
*/
/* Page de login simple */
.login_page {
    display:flex;
    flex-direction: column;
    justify-content: center;
	background: #eee 0 no-repeat;
	/*height: 220px;*/
	margin: 120px auto 50px;
	padding: 10px;
	width: 420px;
    border: solid 1px #aaa;
    border-radius:10px;
}

.login_page .form_row label, .login_page .line label {
	float: left;
	font-size: 1.15rem;
	line-height: 40px;
	margin: 0 8px 0 0;
	text-align: right;
	width: 140px;
}

.login_page .form_row input {
    float: left;
	font-size: 1.15rem;
	border: 1px solid #999;
	height: 30px;
	padding: 0 0 0;
	width: 220px;
    border-radius:3px;
    /*outline: green solid 1px;*/
}

/*.login_page .form_row #pwd {
    width: 220px;
}*/

/*.login_page .form_row input:focus {
    outline: #888 solid 1px;
}*/

.login_page .line {
	clear: both;
}

.login_page .cnx_label {
    color:black;
    font-size: 125%;
    font-weight: bold;
    text-align: center;
}

.login_page .cnx_error_msg {
    color:red;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}

.login_page .btn_cnx {
    margin:10px;
    text-align: center; 
}

.login_page .link_margin {
    margin:10px; 
}

/* Mots de passe */

.passwd-container {
    display: flex;
}

.passwd-container > input {
    flex: 1;
}

.show-hide-passwd {
    padding-top: 5px;
    width: 30px;
    height: 30px;
    padding-left: 2px;
}

/*#show-hide-passwd {
    padding-top: 5px;
    width: 30px;
    height: 30px;
    padding-left: 2px;
}*/

.form-passwd {
    display: flex;
}

.login_page #login {
    margin-right: 28px;
}

/*
*
*  GESTION DES INFOBULLES
*
*/

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}

.infobulle_btn {
  position: relative;  /* les .infobulle deviennent référents */
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after,
.infobulle_btn:hover::after,
.infobulle_btn:focus::after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour a la ligne */
  
  /* Tout ce qui suit = mise en forme de l'infobulle */
  padding: 5px 14px;
  background: #d6eaf8;
  color: #000;
  border-radius: 4px;
  /*font-size: 1.2rem;*/
}

/*
*
*   CSS SPECIFIQUE A CERTAINES IMAGES
*
*/

/*
*  TABLEAU DES TARIFS
*/

.pricing_table {
    margin-top: 20px;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.pricing_table th, .pricing_table table, .pricing_table td {
    border: 1px solid black;
    padding: 4px;
}

.pricing_table th {
    text-align: center;
    background-color: #a0d3f7;
    padding: 4px 1px;
    text-align: center;
    border: #cdcdcd 1px solid;
}

.pricing_table td {
    background-color: rgb(238, 238, 238);
    color: #444;
    padding: 5px 5px;
    border: #cdcdcd 1px solid;
}

.pricing_table tbody tr:nth-child(even) td { /* td final obligatoire car sinon ne fonctionne pas */
    background: rgb(235,242,250);
}

.pricing_table tbody tr:nth-child(odd) td { /* td final obligatoire car sinon ne fonctionne pas */
    background: #FFF;
}

/*.pricing_table thead th.first {
    background: #f6f6f6;
    border: none;
}*/
.pricing_table thead th.first {
    background: #b4dcf8;
}


.pricing_table tbody tr:hover td {    /* td final obligatoire car sinon ne fonctionne pas */
    background-color: rgb(191,191,191);
}

.pricing_table .value {
    text-align: center;
}

.pricing_table tbody tr td.subtitle {   /* ecrase definition even/odd */
    text-align: center;
    background: #c7e5fa;
}

.pricing_table .fonction_detail {
    color: #999;
}

.pricing_table .check {
    background-image: url(../img/icons/check-solid.svg);
	background-repeat: no-repeat;
	background-position: center;
    background-size: 3em 1.2em;
	padding: 4px;
}

.pricing_table .check_not_alone {
    padding: 20px 4px 4px 4px;
    background-position: top;
}

h3.txt_bleu, h4.txt_bleu {
    font-weight: bold;    
}

.txt_bleu {
    color: #1368a4;    
}

.line_cutter {
    display: none;
}

#img_illustration_site2 {
    width: 500px;
}

#img_illustration_appli {
    width: 220px;
}

@media all and (max-width: 1040px) {    /* Commun smartphone et tablette */

    .form_line {
        display:flex;
        flex-direction: column;
    }
    
    .form_container form .form_line > .field {
        width: 100%;
    }
}


@media all and (min-width: 721px) and (max-width: 1040px)   /* Je mets 1040 = 1024 + 16 (largeur de scrollbar) */
{
    .nav_top_text /*, .nav_top_large*/
    {
        display: none;
    }
    
    .nav_top_img2 img {
        display: flex;
    }
    
    .header_large > .header, .content, .footer, .nav {
        width: 55em;
    }
    
    /*.form_container form .form_row > label {
        width: 150px;
    }*/
    
    #info_ecran_tab {
        display: none;
    }
    
}

@media all and (max-width: 720px)
{
    .nav_top, .nav_top_large, .top_nav /*, .header_espace_etirable*/ /* .nav_top inclut .nav_top_text */
    {
        display: none;
    }
    
    .nav_large {
        margin-top:65px;  
    }
    
    .header_large > .header, .content, .footer, .nav {
        width: 100%;
    }
        /* à la place de 37em */
    
    .login_page .form_row {
        flex-direction: column;
    }
    
    #info_ecran_sp {
        display: none;
    }
    
    .form_container h2 {
        font-size: 150%;
    }
    .form_container h3, p, .form_row > label, .form_line > label, .form_container form .button_row, .acc_fb_cell_text_small2, .acc_fb_cell_text, .acc_fb_cell_text_small, .msem_input_text {
        font-size: 1rem;
    }
    
    .form_container p, .content > p {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .btn_ajax .btn_small, .btn_ajax .btn_medium, .btn_ajax .btn_large, .btn_ajax .btn_xlarge, .msem_button {
        font-size: 100%;
    } 
    
    .acc_fb_cell_text_small2 {
        width: 187px;
    }

    .btn_ajax .btn_small {
        width: 125px;
    }
    
    .btn_ajax .btn_medium {
        width: 210px;
    }
    
    .btn_ajax .btn_large {
        width: 250px;
    }
    
    .btn_ajax .btn_xlarge {
        width: 312px;
    }
    
    
    .form_container form .form_row > label {
        width: 40%;
    }
    
    .form_container form .form_row > .field {
        width: 60%;
    }
    
    .form_container form .large_label > label {
        width: 80%;
    }
    
    /*.form_container form .form_row > .large_field {
        width: 20%;
    }*/
    
    /*.form_container form .full_field > label {
        width: 100%;
    }
    
    .form_container form .full_field > .field {
        width: 100%;
    }*/
    
    .header_left_text {
        /*border-style: solid;
        border-width: 1px;*/
        /*flex: 1 10 auto;*/
    }
    
    #img_masecupro_casque {
        height: 45px;    
    }
    
    /*.logo_msem_texte {
        width: 100%;
    }*/
    
    .tablewrapper {
        width: 99vw;
    }    
    
    .cookie_ask { 
        height:200px;
    }
    
    /* Tableaux responsive */
    /*table.simpletable thead {
        display: none;
    }

    table.simpletable tr {
        display: block;
        margin-bottom: 40px;
    }

    table.simpletable td {
        display: block;
        text-align: right;
    }

    table.simpletable td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }*/
    
    .pic_del {
        float:right;
    }
    
    /* Page accueil */
    #img_illustration_site2 {
        width: 320px;
    }
    
    .acc_fb_cell_text_small_1_2lignes {
        width: 220px;   
    }
    
    .acc_fb_cell_text_small_2lignes {
        width: 220px;   
    }
    
    .login_page .form_row label, .login_page .line label {
	   text-align: left;
    }
    
    .pricing_table thead th, .pricing_table td.first {
        font-size: 0.9rem;
    }

    .pricing_table .value {
        font-size: 0.7rem;
    }
    
    /* Image dans un tableau */
    .msem_image_tab {
        width: 100px;
    }
    
    img.export_tableur {
        display: none;
    }        
    
}

/* Gestion du header pour (petit) écran smartphone */
@media all and (max-width: 500px) {

    .header_espace_etirable {
        display: none;
    }
    
    .header_left_text {
        /*border-style: solid;
        border-width: 1px;*/
        flex: 1 10 auto;
    }

    #img_masecupro_texte {
        width: 90%;
    }
}

@media all and (max-width: 500px) {
    .line_cutter {
        display: inline;
    }
}

/* Uniquement pour fenetre de login */ 
@media all and (max-width: 420px)
{
    .login_page {
        width: 95%;
    }
}

/* Infos sur les tailles d'ecran */
#info_ecran_sp {
	width: 300px;
	padding: 10px;
    text-align: center;
	background: #8FA3AD; color: #fff;
    position: absolute;
	left: 100px; top: 100px;
    border-radius: 5px;
}

#info_ecran_tab {
	width: 300px;
	padding: 10px;
    text-align: center;
	background: #8FA3AD; color: #fff;
    position: absolute;
	left: 100px; top: 150px;
    border-radius: 5px;
}

/*
*
*   CSS SPECIFIQUE A CERTAINES IMAGES
*
*/

.img_icone_google {
    width: 190px;
}

.img_icone_bleu {
    width: 100px;
}

.img_icone_bleu_small {
    width: 60px;
}

.img_icone_bleu_mini {
    width: 30px;
}

.img_icone_height_mini {
    height: 30px;
}

.img_icone_height_20px {
    height: 20px;
}

.div_centre {
    text-align: center;
}

.div_vertical_centre {
    align-items: center;
    display: flex;
}

.img_icone_bleu_small_margin {
    width: 50px;
    padding: 5px;
}

.img_aide {
    border-style: solid;
    border-width: 1px;
    border-color: #36a6f7;
    border-radius:5px;
}

.img80p {
    width: 80%;
}

div:target {
    padding-top: 75px; 
    margin-top: -75px; 
}

/* Signatures */

#canvas{
  width:300px;
  height:200px;
  border:1px solid #000;
  margin-left:10px;
}

.mise-en-page{}
.bloc-mise-en-page{margin:10px;
  flex:1 0 0px;   
  min-width:500px;
}




/*
 * 11/10/2026 - Lot 4 SEO (page tarifs, puis pages publiques au lot 8)
 */

/* Chapo : remplace un <h2> detourne en mise en forme ; reprend le rendu du h2 global
   (font-size 1rem, padding 10px 0 0 0, margin 10px). .content > p.chapo neutralise le
   padding lateral pose sur .content > p en dessous de 720px (absent du h2). */
p.chapo, .content > p.chapo {
    font-size: 1rem;
    padding: 10px 0 0 0;
    margin: 10px;
}

/* Titre de section en <h2> avec le rendu d'un <h3 class='form_title'> dans un .form_container
   (fond gris clair, 1.1rem) au lieu de celui d'un h2 (1.3rem, sans fond). Usage :
   <div class='form_container'><h2 class='form_title ui-corner-top titre_h3'>...</h2></div> */
.form_container > h2.titre_h3 {
    font-size: 1.1rem;
    background: #e4e1e8; /* --color1.2-- */
}
@media all and (max-width: 720px) {
    .form_container > h2.titre_h3 {
        font-size: 1rem;
    }
}

/* Lien d'apparence bouton (Formulaire::add_lien_bouton_simple) : aligne un <a> sur le rendu
   d'un <button class='msem_button'> (normalize de menu.css : police heritee, 100%, line-height 1.15) */
a.msem_button, a.msem_button:link, a.msem_button:visited {
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    color: #454545;
    font-family: inherit;
    /*font-size: 100%;*/
    /* 1rem et non 100% : hors <form>, le parent .content est a 0.8rem (12.8px) ; un <form> remet 1rem */
    font-size: 1rem;
    line-height: 1.15;
}

/* Exemples chiffres de la page tarifs : icone a gauche (comme les modules de l'accueil),
   titre, description, ligne de detail du calcul */
.exemple_tarif h3 {
    color: #112875;
    padding-bottom: 5px;
}
.exemple_tarif .detail_tarif {
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
    padding-top: 5px;
}/* Icones des exemples : 70px au lieu des 100px de .img_icone_bleu (accueil) - demande de Laurent */
.exemple_tarif .img_icone_bleu {
    width: 70px;
}
/* Lot 8 SEO - titres de section des articles : <h2> avec le rendu de l'ancien .blog h3
   (et non celui de .blog > h2, 1.6rem). Usage : <div class='blog'><h2 class='titre_section'>...</h2></div> */
.blog > h2.titre_section {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 20px 10px 15px 10px;
    margin: 0;
}

/* Lot 8 SEO - titres de module en <h2 class='txt_h4'> (page fonctionnalites) : neutralise
   la marge et le padding du h2 global pour garder le rendu de l'ancien <h3 class='txt_h4'> */
h2.txt_h4 {
    margin: 0;
    padding: 0;
}