:root {	
	/** COULEURES DE FOND PRINCIPALES */	
  --couleur-fond-footer: #162c35;
  --couleur-fond-footer-secondaire: #34697d;
  --couleur-fond-primaire: #162c35;
  --couleur-fond-secondaire: #34697d;
  --couleur-fond-page: #f9f9f9;
  --couleur-fond-contenu: #FFFFFF;
  --couleur-fond-valide:#03805a ; 
  --couleur-fond-invalide:#dc3545 ; 
  
  /** GESTION BORDER */
  
  --border-radius : 5px;
  
  
  
  /**** BOUTONS */
  
  --bs-btn-height : 40px;
  --couleur-fond-btn :#f0cb23;
  --couleur-fond-btn-piece :#f0cb23;
  --couleur-fond-btn-hover :#f05923;  
}

html {
  font-size: 100%; 
}

html[data-font="small"]  { font-size: 87.5%; } 
html[data-font="medium"] { font-size: 100%; }  
html[data-font="large"]  { font-size: 112.5%; }
html[data-font="xlarge"] { font-size: 125%; }   
html[data-font="xxlarge"] { font-size: 150%; }  
html[data-font="xxxlarge"] { font-size: 175%; }  


/******* Images et icones ********/
btn img, .bloc_icone img, svg{
	max-height: 25px;
}

.icone_cancel{
	max-height: 25px;
}
.svg_btn{
	cursor:pointer !important;
}

.ico_valide img , .ico_valide_tableau_bord img{
	filter: invert(58%) sepia(43%) saturate(359%) hue-rotate(78deg) brightness(91%) contrast(90%);
}
.ico_invalide img , .ico_invalide_tableau_bord img {
	filter: invert(23%) sepia(86%) saturate(5280%) hue-rotate(355deg) brightness(103%) contrast(137%);
}
.ico_transmise img , .ico_transmise_tableau_bord img{
	filter: invert(63%) sepia(52%) saturate(5588%) hue-rotate(1deg) brightness(104%) contrast(104%);
}
.ico_transmise img , .ico_dossier_tableau_bord img{
	filter: invert(12%) sepia(26%) saturate(1064%) hue-rotate(152deg) brightness(99%) contrast(90%);
}

.ico_inscription_wait, .ico_inscription_valide, .ico_inscription_invalide{
	cursor: help;
	height:20px;
}

.ico_inscription_wait{
	filter: invert(63%) sepia(52%) saturate(5588%) hue-rotate(1deg) brightness(104%) contrast(104%);
}
.ico_inscription_valide{
	filter: invert(58%) sepia(43%) saturate(359%) hue-rotate(78deg) brightness(91%) contrast(90%);
}
.ico_inscription_invalide{
	filter: invert(23%) sepia(86%) saturate(5280%) hue-rotate(355deg) brightness(103%) contrast(137%);
}

.info_usager_insc_multi{
	font-weight:bold;
}

/* Entete Bootstrap */

.mode_connexion_user{
	font-size:12px !important;
}
.mode_connexion_ico{
	border : 1px solid #ffffff !important;
	border-radius:40px;
	background-color: #FFFFFF;
	margin-left:10px;
	height:35px !important;
}

.display_none{
	display: none;
}


#bs_menu_rapide_recherche{
	padding-left:30px;
	background: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23d4d4d4"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="%23bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>') no-repeat;
	background-size: 20px;
	background-position-y: 8px;
	border:1px solid #D3D3D3 !important;
	width:97%;
}

#tableau_bord_famille{
	scroll-margin-top: 70px;
}

.card-header img{
	height:25px !important;
}

.bloc_etape .bloc_icone{
	float: left;
   
}

.icone_pin_tableau_bord{
	transform: rotate(40deg);
	margin-bottom: 12px;
}

.tooltip{
	opacity: 1;
}

.bold{
	font-weight: bold;
}




/*** MESSAGERIE   ********/

.msg-board-dossier .bordure_entete_droite{
	border-color: #F9F9F9 !important;
}

.msg-board-dossier .col_old {
	background-color:var(--couleur-fond-btn-piece);
}
.msg-board-dossier .col_old:hover, .msg-board-dossier .selected:hover {
	background-color:var(--couleur-fond-btn-hover);
}
.msg-board-dossier .selected {
	background-color: var(--couleur-fond-valide);
}
.message_board img{
	filter: invert(99%) sepia(70%) saturate(2%) hue-rotate(108deg) brightness(114%) contrast(100%);
}

.dossierCol1{
	border-top-left-radius: var(--border-radius);
}
.dossierCol3{
	border-top-right-radius: var(--border-radius);
}

.message_board .consult-msg-disc-pictoF img{
	filter: none !important;
}


/********** TABLEAU DE BORD ****************/

.bloc_info_usa img {
	height:35px !important;
	width:35px !important;
	margin-top:10px;
}

.insc-cat-voeux{
	vertical-align: top;
}

.insc-cat-activite, .insc-cat-voeux, .insc-cat-lieu, .insc-cat-tarif{
	float:left;
}

/********** CATALOGUE ETAPE 2 ****************/


.ligne_activite_complete .row_old{
	display: inline-block !important;
}

.ligne_activite_complete {
	margin: 0px !important;
	padding: 0px !important;
}

.div_calend_serv {
	width:30%;
	float:left;
	padding-right: 12px;
	padding-left: 12px;
	margin: 0px !important;
}

.div_calend_serv fieldsetdset {
	height: 60px;
}

.div_calend_serv entete_cal_hebdo_jours, .div_calend_serv form_calend_hebdo {
	height: 30px;
}

.div_calend_serv input {
	height: auto;
}

.presta_comp {
	margin: 0px !important;
}

.ligne_act_catalogue{
	width: 100%;
	padding: 12px 0px !important;
	margin: 0px !important;
}

.insc-cat-desc, .act_catalogue {
	margin: 0px !important;
}

.ligne_act_prestation{
	width: 100%;
	padding: 6px 0px !important;
	margin: 0px !important;
}

.ligne_act_catalogue_sans_calhebdo, .ligne_act_prestation_sans_calhebdo {
	width: 100%;
	float: left;
	display: flex;
	flex-wrap: wrap;
}

.ligne_lib_colonne_sans_calend {
	width:100%;
}

.ligne_lib_colonne_sans_calend .container_texte, .ligne_lib_colonne .container_texte {
	padding-top: 0px;
	padding-bottom: 0px;
}

.insc-cat-tarif {
	text-align: right;
}

.div_transport_serv label  , .div_transport_serv select{
	width:50% !important;
}



#btn_page_top {
  display: none;
  position: fixed;
  bottom: 110px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  color: #162c35;
  cursor: pointer;
  height:60px;
  width:60px;
  border-radius: 60px;
}

#btn_page_top:hover {
  background-color: #f05923;

}
#btn_page_top:hover img{
  filter: invert(99%) sepia(70%) saturate(2%) hue-rotate(108deg) brightness(114%) contrast(100%);
}

.card_bs_info{
	max-width:800px;
}

.custom-file-upload label{
	font-weight: normal !important;
}
.custom-file-upload {
	text-align: left !important;
}

.entete_card_user{
	background-color:#212529;
	color:#ffffff;
}
.entete_card_user img{
	filter: invert(100%) sepia(0%) saturate(5945%) hue-rotate(97deg) brightness(103%) contrast(108%);
}

.entete_card_file{
	background-color:#34697d;
	color:#ffffff;
}

.mw-33{
	min-width: 33%;
}
.entete_card_file img{
	filter: invert(100%) sepia(0%) saturate(5945%) hue-rotate(97deg) brightness(103%) contrast(108%);
}
/* Spécifique dossiers et pièces */
.card-bg-alt{
	background-color: #FFFFFF;
}
.card-bg-princ{
	background-color: #ececec;
}
@media (max-width: 1100px){
	.bloc_min_width{
		width:100% !important;
	}	
}

#tableau_bord_famille{
	padding-top:10px;
}


legend {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: unset !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


.img_jour_reserve_hebdo, .img_jour_non_reserve_hebdo {
    min-width: 15px;
}

.insc-cat-calend {
    width: 19% !important;
    text-align: center;
}

.baby-binsc-hidden{
	display:none !important;
}

@media (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 810px) and (orientation: portrait), (max-device-width: 810px) and (orientation: portrait), screen and (min-width: 100px) and (max-width: 810px) {
    div.docs-eng-hidden {
        display: inline-block !important;
        padding-top: 10px;
        width: 40%;
    }
	
	.fieldset_calend_hebdo{
		width:100%;
	}
	
	.ligne_act_catalogue_sans_calhebdo{
		width:100% !important;
		float:none !important;
	}
	
	.div_transport_serv label, .div_transport_serv select {
		width:45% !important;
	}	
	
	div.facture-hidden {
		display:inline-block !important;
	}
	div.baby-binsc-hidden{
		display:inline-block !important;
		font-weight: bold;
	}
	
	.row_tab_bord_insc{
		font-size: 12px;
	}
}

@media (max-width: 1800px){
	.chatContainerScroll .column2div30 img {
		float: none !important;
		margin: auto;
		display: block;
	}
	.chatContainerScroll .column2div30 div {
		float: none !important;
		display: block;
		width: calc(100% - 30px);
	}
}

.loadding-page {
  width: 100%;
  height: 100%;
  background: #d90845;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.cssload-box-loading {
  width: 49px;
  height: 49px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.cssload-box-loading:before {
  content: '';
  width: 49px;
  height: 5px;
  background: #000000;
  opacity: 0.1;
  position: absolute;
  top: 58px;
  left: 0;
  border-radius: 50%;
  animation: shadow 0.58s linear infinite;
  -o-animation: shadow 0.58s linear infinite;
  -ms-animation: shadow 0.58s linear infinite;
  -webkit-animation: shadow 0.58s linear infinite;
  -moz-animation: shadow 0.58s linear infinite;
}
.cssload-box-loading:after {
  content: '';
  width: 49px;
  height: 49px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  animation: cssload-animate 0.58s linear infinite;
  -o-animation: cssload-animate 0.58s linear infinite;
  -ms-animation: cssload-animate 0.58s linear infinite;
  -webkit-animation: cssload-animate 0.58s linear infinite;
  -moz-animation: cssload-animate 0.58s linear infinite;
}
@keyframes cssload-animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-o-keyframes cssload-animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -o-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -o-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -o-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -o-transform: translateY(0) rotate(90deg);
  }
}
@-ms-keyframes cssload-animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -ms-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -ms-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -ms-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -ms-transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes cssload-animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
  }
}
@-moz-keyframes cssload-animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -moz-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -moz-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -moz-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -moz-transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-o-keyframes shadow {
  0%,
  100% {
    -o-transform: scale(1, 1);
  }
  50% {
    -o-transform: scale(1.2, 1);
  }
}
@-ms-keyframes shadow {
  0%,
  100% {
    -ms-transform: scale(1, 1);
  }
  50% {
    -ms-transform: scale(1.2, 1);
  }
}
@-webkit-keyframes shadow {
  0%,
  100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
@-moz-keyframes shadow {
  0%,
  100% {
    -moz-transform: scale(1, 1);
  }
  50% {
    -moz-transform: scale(1.2, 1);
  }
}

.zone_validation_mail {
	z-index:20 !important;
}


/* Etapes de progressions demandees  */
.bp_bs img{
	height:25px;
	width:25px;
    margin-left: 8px;
    margin-top: 8px;
	filter: invert(100%) sepia(0%) saturate(5945%) hue-rotate(97deg) brightness(103%) contrast(108%);
	
}
.bp_bs .rounded-circle{
	height:40px;
	width:40px;
	margin: auto;
	position: absolute;
	z-index:1;
}
.bp_bs .row{
    width: max-content;
    margin: auto;
}
.bp_bs .col{
	font-size: 12px;
	
}
.bp_bs .col:before {
    content: " ";
    width: 100%;
    height: 2px;
    background-color: #141414 !important;
   position: absolute;
   z-index:0;
   margin-top:1%;
}


.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  max-width: 1200px;
  margin: auto; 
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item img {
  height:25px;
  width:25px;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 4px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 4px solid #ccc;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #28aaf5;
}

.stepper-item.completed::before {
  position: absolute;
  content: "";
  border-bottom: 4px solid #28aaf5;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 3;
}
.stepper-item.last::after {
  position: absolute;
  content: "";
  border-bottom: 0px !important;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 3;
}


.stepper-item.completed img{
	filter: invert(100%) sepia(0%) saturate(5945%) hue-rotate(97deg) brightness(103%) contrast(108%);
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

.step-name{
	font-size: 12px;
	text-align: center;
    width: 50%;
}


/*/////////// Inscription Catalogue etape 2//////////////////////*/


@media (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 800px) and (orientation: portrait),
(max-device-width: 800px) and (orientation: portrait),
screen and (min-width: 100px) and (max-width: 800px) {

	.insc-cat-activite-hidden, .insc-cat-tarif-hidden, .insc-cat-lieu-hidden, .insc-cat-calendrier-hidden, .insc-cat-voeux-hidden, .insc-cat-hidden,
	.insc-cat-activite, .insc-cat-tarif, .insc-cat-lieu, .insc-cat-calend, .insc-cat-voeux {
		float:left;
		line-height: 1em;
	}

	.insc-cat-voeux {
		text-align: left !important;
		padding-left: 20px;
	}
	
	.div_calend_serv {
		width: 100%;
		float: left;
	}

	div.insc-cat-calendrier-hidden{
		float:left;
	}
}

/*//////// DOSSIERS ET PIECES //////////////////*/

.card-box {
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 30px;
    background-color: #fff;
}

.file-man-box {
    padding: 20px;
    border: 1px solid #e3eaef;
    border-radius: 5px;
    position: relative;
    margin-bottom: 20px;
	min-height:360px;
}

.file-man-box .file-obl {
    color: #f1556c;
    position: absolute;
    line-height: 24px;
    font-size: 24px;
    right: 10px;
    top: 20px;
}

.file-man-box .file-img-box {
    text-align: center;
	margin-top: 20px;
}

.file-man-box .file-img-box img {
    height: 60px;
}

.file-man-box .file-download {
    font-size: 25px;
    color: #98a6ad;
	cursor: pointer;
}

.file-man-box .file-download:hover {
    color: #313a46
}

.file-man-box .file-man-title {
    padding-right: 25px;
}

.file-man-box .file-man-title h5{
    font-size:1.1rem;
}

.file-man-box:hover {
    -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02)
}

.bloc_date_validite_pce{
	font-size: 0.7rem !important;
	text-align: right;

}

.file_description{
	font-size: 0.9rem !important;
	color:gray;
	padding-top: 25px;
}

.file_action_btns i{
	font-size: 1.2rem !important;
	cursor: pointer;
	padding-top: 25px;	
}

.file_row{
	border:1px dashed gray;
	margin-top:10px;
}
.new_file_row{
	border:1px dashed green;
	margin-top:10px;
	background-color: #e1fce8;
}
.no_file_row{
	border:1px dashed red;
	margin-top:10px;

}

.bloc_piece_complet{
	min-width: 280px !important;
}
.desc_btn_ajout_fichier{
	font-size: 0.8rem;

}
.col-titre{
	font-weight: bold;
	padding-left:20px;
}

.icone-titre{
	height:25px;
	width:25px;
}
.col-titre-dossier{
	margin-top:15px;
	font-weight: bold;
	padding-left:40px;
}
.description_dossier_piece{
	font-style: italic;
}
.col-demande-cours-dossier{
	font-style: italic;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:40px;
}

/*** EDITEUR DE PAGES ****/

.ligne_drag_drop {
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.dragging {
  opacity: 0.7;
  background-color: #f0f0f0;
  transform: scale(1.02);
  border-radius: 8px;
}

#bloc_preview_module_editeur {
  transition: all 0.25s ease-in-out;
}
/* === TABLEAU FACTURES RESPONSIVE === */
.facture-header {
  border-bottom: 2px solid #dee2e6;
  display: flex;
  flex-wrap: nowrap;
  padding: 0.75rem 0.5rem;
}

.facture-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  padding: 0.75rem 0.5rem;
}

.facture-cell {
  flex: 1;
  padding: 0.25rem 0.5rem;
  text-align: left;
}

.facture-cell.text-end {
  text-align: right;
}

/* === MODE MOBILE === */
@media (max-width: 768px) {
  /* Cache le header en mobile */
  .facture-header {
    display: none !important;
  }

  /* Les lignes deviennent des blocs */
  .facture-row {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    margin-bottom: .75rem;
    padding: .75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  /* Chaque cellule devient une ligne d'infos */
  .facture-cell {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    padding: .25rem 0;
  }

  /* Libellé gauche uniformisé */
  .facture-cell::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 130px; /* même longueur pour tous les libellés */
    font-weight: 600;
    color: #6c757d;
    flex-shrink: 0;
  }

  .facture-cell.text-end {
    justify-content: flex-start;
    text-align: left;
  }
}



/******** Listing Paiements *********/
 

.timeline {
  position: relative;
  border-left: 3px solid #0d6efd;
  padding-left: 1.2rem;
  margin-left: 1rem;
}

.timeline-month {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-month::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  background-color: #0d6efd;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
}

/* === TITRES DE MOIS === */
.timeline-month h5 {
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* === CARTES DE PAIEMENT === */
.timeline-card {
  background-color: #f9fbfd;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}

/* Effet hover dynamique */
.timeline-card:hover {
  transform: translateY(-5px);
  background-color: #eef6ff;
  border-color: #0d6efd;
  box-shadow: 0 8px 20px rgba(13,110,253,0.15);
}

/* Contenu des cartes */
.timeline-card .card-body {
  padding: 1rem 1.2rem;
}

.timeline-card h6 {
  color: #0d6efd;
}

.timeline-card p {
  margin-bottom: 0.5rem;
}

/* Montant */
.payment-amount {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0d6efd;
}

/* === ALIGNEMENT ET ESPACEMENT === */
.timeline .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.timeline .col-md-3 {
  flex: 0 0 calc(25% - 1rem);
  max-width: calc(25% - 1rem);
}

/* Responsive */
@media (max-width: 992px) {
  .timeline .col-md-3 {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

@media (max-width: 576px) {
  .timeline .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* === BADGES ET ICONES === */
.badge {
  font-size: 0.8rem;
  padding: 0.4em 0.6em;
  border-radius: 0.5rem;
}

.bi-calendar3 {
  color: #0d6efd;
  font-size: 1rem;
  vertical-align: middle;
}

/* === ANIMATION LÉGÈRE === */
.timeline-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}



.stylish-select {
  min-width: 90px;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  color: #333;
}

.stylish-select:hover {
  border-color: #0d6efd;
  background-color: #eef6ff;
  box-shadow: 0 3px 8px rgba(13,110,253,0.15);
}

.stylish-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
  background-color: #fff;
  outline: none;
  color: #000;
}

/* Icône et alignement */
.bi-filter-circle {
  font-size: 1.1rem;
  vertical-align: text-bottom;
}


/* --- Styles Gmail-like --- */
.mailbox-container { min-height: 60vh; }
.sidebar_message { border-right: 1px solid #e9ecef; background: #fff; }
.sidebar_message .nav-link { color: #333; border-radius: .25rem; margin-bottom: .25rem; }
.sidebar_message .nav-link.actif { background: #0d6efd; color: #fff !important; }
#mailTabsContent .message-row { transition: background .12s, transform .08s; border: 1px solid #f1f1f1; }
#mailTabsContent .message-row:hover { background: #e9ecef; transform: translateX(3px); }
#mailTabsContent .message-unread .subject { font-weight: 700; }
#mailTabsContent .preview { 
  color: #6c757d; 
  white-space: nowrap; /* <-- ça empêche le texte de passer à la ligne */
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 200ch; 
  display: block;
}

#mailTabsContent .meta-small { color: #6c757d; font-size: .85rem; }
#mailTabsContent .badge-count { min-width: 28px; }
#mailTabsContent .card-left-border-unread { border-left: .4rem solid #dc3545; }
#mailTabsContent .card-left-border-read { border-left: .4rem solid #6c757d; background: #f8f9fa; }
#mailTabsContent .controls .btn { min-width: 40px; }


/* --- Responsive --- */

@media (max-width: 1000px) {
  #mailTabsContent .message-row { font-size: .9rem; padding: .5rem !important; }
  #mailTabsContent .subject { font-size: 1rem; }
  #mailTabsContent .preview { max-width: 60ch;  }
  #mailTabsContent .btn-sm { padding: .25rem .4rem; font-size: .75rem; }
}

.sidebar_message {
  position: sticky;
  top: 0;
  overflow-y: auto;
}

#mailTabsContent .actif {
	color: #fff !important;
}

#mailTabsContent .etat_1{
	background:black;
}
#mailTabsContent #mailTabsContent .etat_6, #mailTabsContent .etat_2{
	background:green;
}
#mailTabsContent #mailTabsContent .etat_16{
	background:black;
}
#mailTabsContent .etat_11, #mailTabsContent .etat_13, #mailTabsContent .etat_99{
	background:grey;
}
#mailTabsContent .etat_4, #mailTabsContent .etat_12, #mailTabsContent .etat_15{
	background:orange;
}

#mailTabsContent .etat_3,#mailTabsContent  .etat_17, #mailTabsContent .etat_18{
	background:red;
}

/******** Messagerie ********/



/******** Journal des modifications ********/


  .reservations_famille_body .timeline {
    position: relative;
    margin: 3rem 0;
    padding: 2rem 0;
	border-left: 0px;
  }

  .reservations_famille_body .timeline::after {
    content: "";
    position: absolute;
    width: 4px;
    background: #0d6efd;
    top: 0;
    bottom: 0;
    left: 20px;
  }

  .reservations_famille_body .timeline-item {
    position: relative;
    width: 100%;
    padding-left: 50px;
    margin-bottom: 2rem;
  }

  .reservations_famille_body .timeline-item::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 12px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 4px solid #0d6efd;
    border-radius: 50%;
    z-index: 1;
  }

  .reservations_famille_body .timeline-item .card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
  }

  .reservations_famille_body .timeline-item .time {
    font-size: 0.85rem;
    color: #6c757d;
  }

  /* Bloc infos inscription / calendrier */
  .reservations_famille_body .timeline-item .info-row {
    display: flex;
    flex-wrap: wrap; /* mobile: permet sauts de ligne */
    gap: 1rem;
    align-items: center;
  }
  .reservations_famille_body .info_service {
    font-weight: bold;
  }

  .reservations_famille_body .timeline-item .info-row > * {
    margin: 0;
  }

  .reservations_famille_body  .timeline-item.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Calendrier hebdomadaire */
  .reservations_famille_body .week-calendar {
    display: flex;
    justify-content: space-between;
    flex: 1;
	max-width: 800px;
  }

  .reservations_famille_body .week-calendar .day {
    flex: 1;
    margin: 0 2px;
    padding: 0.3rem 0;
    text-align: center;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background-color: #6c757d; /* Non sélectionné */
	max-width: 100px;
  }

  .reservations_famille_body .week-calendar .day.signup {
    background-color: #198754;
  }

  .reservations_famille_body .week-calendar .day.add {
    background-color: #198754;
  }

  .reservations_famille_body .week-calendar .day.remove {
    background-color: #dc3545;
  }

  /* Légende */
  .reservations_famille_body .legend {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
  }

  .reservations_famille_body .legend span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .reservations_famille_body .legend .box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    display: inline-block;
  }

  /* LARGE SCREEN: ligne unique */
  @media (min-width: 768px) {
    .reservations_famille_body .timeline-item .info-row {
      flex-wrap: nowrap; /* tout sur une seule ligne */
    }

    .reservations_famille_body .timeline-item .info-row .week-calendar {
      margin-left: 1rem; /* un peu d'espace avant le calendrier */
    }
	
	.reservations_famille_body .timeline-item .info-row {
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	}

	/* Titre + activité occupent une largeur fixe max pour que calendrier commence au même endroit */
	.reservations_famille_body .timeline-item .info-row > h6,
	.reservations_famille_body .timeline-item .info-row > p {
	  flex: 0 0 400px; /* ajustable selon la largeur maximale des noms */
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

	/* Calendrier prend tout le reste de la ligne */
	.reservations_famille_body .timeline-item .week-calendar {
	  flex: 1;
	}	
	
  }

  /* MOBILE */
  @media (max-width: 767px) {
    .reservations_famille_body .timeline::after {
      left: 10px;
    }

    .reservations_famille_body .timeline-item {
      padding-left: 40px;
    }

    .reservations_famille_body .timeline-item::after {
      left: 2px;
    }
	
	.reservations_famille_body .mb-0 {
	  width:100%;
	}	
	
  }

/******** Journal des modifications ********/