/*

Anciennes couleurs officielles
	#101E49  bleu foncé
	#5096CA  bleu clair
	#666666  gris

Références pour les caractères : https://offroadcode.com/rem-calculator/
	8px = 0.4444rem
	9px = 0.5rem
	10px = 0.5556rem
	11px = 0.6111rem
	12px = 0.6667rem
	13px = 0.7222rem
	14px = 0.7778rem
	15px = 0.8333rem
	16px = 0.8889rem
	18px = 1rem (base)
	20px = 1.111rem
	22px = 1.222rem
	24px = 1.333rem
	26px = 1.444rem
	28px = 1.556rem
	30px = 1.667rem
	32px = 1.778rem
	34px = 1.889rem
	36px = 2rem
	38px = 2.111rem
	40px = 2.222rem
	50px = 2.778rem

Palette officielle
	$mainColor-light 			#5FC1EB
	$mainColor 					#3BB3E7
	$mainColor-dark 			#1BA3DE
	$secondaryColor-light 		#0C3345
	$secondaryColor 			#061922
	$secondaryColor-dark 		#000000
	fond						#F5F5F5

*/


/** Prevent iPhone to render address, telephone numbers etc. as links **/
/*
a[href^=3D"x-apple-data-detectors:"] {
	color: inherit;
	text-decoration: inherit;
}


a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
 */

/* juste dans l'accueil */
.blue_bold b {
	color: #3BB3E7;
}

/*
.espacev {
	margin-top: 6px;
}
 */

/*
juste pour l'exemple, pas utilisé
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'),
       local('Roboto-Regular'),
       url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
       format('woff');
}
 */

.copyright_year:after {
	content: "2026";
}

.popover-content > .alert  {
	margin-bottom: -30px !important;
}

body {
	font-family: Barlow, Helvetica, Arial, sans-serif;
/* 	font-size: 0.8333rem; */
	font-size: 0.8889rem;
}

/* pour corriger hauteur changée par body */
.main-header .sidebar-toggle {
	font-size: 14px;
}

a {
	color: #1ba3de;
	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

a:hover {
  color: #0c3345;
}

a.disabled, a[disabled] {
	opacity: 0.40;
	pointer-events: none;
	cursor: default;
}

.strike {
	text-decoration: line-through;
	opacity: 0.40;
}

.nav-tabs-custom .tab-content {
	border: 1px solid #d2d6de;
}

.nav-tabs-custom>.nav-tabs>li.active {
	border-top-color: #3BB3E7;
	border-top-width: 3px;
	border-left: 1px solid #d2d6de;
	border-right: 1px solid #d2d6de;
}

.nav-tabs-custom>.nav-tabs>li>a {
	color: #737373;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
	color: #3BB3E7;
};

.btn {
/* 	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); */
}

.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
	background-color: #0c3345;
}

/* possiblement utilisé seulement dans Mon Sogetel */
.plan {
    font-family: "Montserrat", sans-serif;
	font-size: 2.778rem;
	color: #0c3345;
	display: flex;
    align-items: center;
}

.plan > i {
	color: #3BB3E7;
}

.plan > small {
/* 	color: red; */
	font-size: 0.7778rem;
}

.sgt-pager > .status {
	background-color: #0c3345;
	border-color: #0c3345;
	color: #FFFFFF;
	opacity: 1;
}

.section {
	display: block;
	color: #0c3345;
	font-weight: bold;
	font-size: 1rem;
	margin-top: 30px;
	margin-bottom: 15px;
}

.section2 {
	display: block;
	color: #0c3345;
	font-weight: bold;
	font-size: 1rem;
	margin-top: 30px;
	margin-bottom: 15px;
}

.section2[disabled] {
	color: rgb(0, 0, 0, 0.4);
}

.section:before {
	padding-right: 10px;
	color: #5fc1eb;
	font-family: FontAwesome;
	font-weight: light;
	content: "\f054";
/* 	content: "\f0c9";	/* code unicode dans doc de fa */
}

/* pas de marge au-dessus quand la section ouvre son conteneur */
.section:first-child,
.section2:first-child {
	margin-top: 10px;
}

.section a.pull-right {
	font-size: 0.8333rem;
	font-weight: 400;
	color: #1ba3de;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Barlow, Helvetica, Arial, sans-serif;
	font-weight: 800;
}

h1 {
	color: #3BB3E7;
	font-size: 1.66667rem;
	line-height: 1.05;
}

h2 {
	color: #3BB3E7;
	font-size: 1.33333rem;
	line-height: 1.05;
}

/* Dans un .alert (ex. Markdown rendu par le filtre `markdown`), les H1/H2
   doivent suivre la couleur du contexte plutôt que le bleu Sogetel. */
.alert h1,
.alert h2 {
	color: inherit;
}

h3 {
  font-size: 1.16667rem;
  line-height: 1.1;
}

h4 {
  font-size: 1rem;
  line-height: 1.1;
}

h5 {
	font-size: 0.77778rem;
	line-height: 1.1;
}

h6 {
	font-size: 0.66667rem;
	line-height: 1.1;
}

blockquote {
	border-left: 0.4em solid #3BB3E7;
	font-size: 0.8333rem;
}

/* p, blockquote, .content-wrapper { */
/* p, blockquote, content { */
/* 	font-size: 0.8333rem; */
/* 	line-height: 1.50; */
/* 	margin-bottom: 1.3em; */
/* } */

.content-wrapper {
	background-color: #F5F5F5;
}

code {
	color: #337ab7;
	background-color: rgba(51, 122, 183, 0.1);
}

code:empty {
  display: none;
}

/* enlever le filet bleu en haut */
.box.box-primary {
	border: none;
}

/* on ne veut pas les marges habituelles dans les entêtes */
.box-header > .section {
	margin-top: 4px;
	margin-bottom: 4px;
}

.xbox {
	border: none !important;
	box-shadow: none;
	background-color: #F5F5F5;
}

.xbox-header {
	padding-left: 0px;
	padding-right: 0px;
/* 	background-color: rgba(51, 122, 183, 0.1); */
}

.xbox-body {
	padding-left: 0px;
	padding-right: 0px;
}

.xbox-footer {
	background-color: #F5F5F5;
}

html {
	overflow-y: scroll;  /* forcer le scroll bar vertical */
	font-size: 18px; /* référence = 1 REM */
}

.highlightedText {
    background: yellow;
}

/* override de styles Admin LTE*/
@media print {
	.box-header, .box-footer, .btn-group {
		display: none !important;
	}

	.section {
		background-color: #CCCCCC !important;
		padding: 4px !important;
	}
}

/* pour les entête de tables - override bootstrap */
.table>thead>tr>th {
	background-color: #0c3345;
	color: #3BB3E7;
	border-bottom: none;
}

/* l'attribut align-center sur les TH est ignoré, on le force via CSS */
.table>thead>tr>th[align="center"] {
    text-align: center;
}

.table>thead>tr>th a {
	color:#FFFFFF;
}

/* ...sauf les liens d'un menu déroulant logé dans un TH (ex. dropdown
   d'ajout dans la première colonne d'entête) : le dropdown a un fond
   blanc, le blanc hérité de la règle ci-dessus les rendait invisibles */
.table>thead>tr>th .dropdown-menu a {
	color: #333333;
}

/* pour éviter que les boutons fassent changer la hauteur des tableaux */
.table .dropdown-toggle {
	margin-top: -6px !important;
	margin-bottom: -5px !important;
}

/* réaligner le haut des dropdowns avec le bas des boutons */
.table .btn-group .dropdown-menu {
	margin-top: 6px;
}

/* nouveau style de tableau avec les entêtes dans la première colonne */
.table-data > tbody > tr > td:first-child {
    font-weight: bold; /* Met le texte en gras */
}

.table-data > tbody > tr > th,
.table-data > tbody > tr > td {
	border: none;
}

/* enlever les coins ronds et ajouter de l'ombre */
.dropdown-menu {
	box-shadow: 2px 2px 5px 0px #999999;
	border-radius: 0px;
}

.table {
	background-color: #FFFFFF;
	font-size: 0.7222rem;
	font-size: 0.7778rem;
}

/*  pour les regroupements dans les tableaux */
.table>tbody>.group,
.table>tbody>.group a {
/* 	color: #0c3345; */
	color: #FFFFFF;
}

.table>tbody>.group td {
/* 	background-color: rgba(95, 193, 235, 0.6); */
/* 	background-color: #1ba3de; */
/* 	background-color: #1a7fa8; */
	background-color: #1790c4;
	vertical-align: middle;
}

/* ...pareil que pour thead>th : dans une ligne .group (fond bleu, texte blanc),
   les items d'un dropdown-menu logé dans la ligne (ex. sgt-drop-down « Renommer... »
   sur un titre de groupe) ont un fond blanc et le blanc hérité les rendait
   invisibles */
.table>tbody>.group .dropdown-menu a {
	color: #333333;
}

/* Neutralise les margins négatives de .table .dropdown-toggle dans une ligne
   .group : celles-ci existent pour compresser la hauteur des rows normales
   (bouton entouré d'autres contenus), mais dans une ligne .group qui ne
   contient que le dropdown, elles décentrent visuellement le caret vers le
   haut — visible surtout dans Safari. */
.table>tbody>.group .dropdown-toggle {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Badges (dont sgt-count) dans une ligne .group : le fond aqua du badge
   par-dessus le fond bleu Sogetel du .group rend du bleu-sur-bleu illisible.
   On inverse : badge blanc, texte bleu — se lit d'un coup.
   !important requis pour battre le style="" inline du template sgtCount. */
.table>tbody>.group .badge {
	background-color: #FFFFFF !important;
	color: #1790c4;
}

/*  pour date coupons resto */
.btn-group-vertical .btn+.btn {
	margin-left: 0px;
	margin-top: -3px;
}

/* air-datepicker (directives date-input et date-range-input) : sa variable interne
   --adp-z-index vaut 100 par défaut, ce qui le fait passer sous le header AdminLTE et
   les modals (1030 = modal) */
.air-datepicker {
	--adp-z-index: 1051;
}

.tableau_de_bord {
	cursor: pointer;
}

canvas[chart-click] {
	cursor: pointer;
}

.tableau_de_bord:hover {
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

/* AdminLTE small-box : l'icône de fond est en position absolute top:-10px et
   passe de font-size 90px à 95px au hover — elle déborde donc du cadre en
   permanence (accentué au hover). On rogne proprement : le zoom reste visible,
   mais contenu dans la tuile. Bénéficie aux dashboards de toutes les apps. */
.small-box {
	overflow: hidden;
}

/* AdminLTE anime le zoom du .icon via font-size (90px → 95px), ce qui force le
   browser à re-rastériser le glyph à chaque frame et laisse des artéfacts
   sub-pixel côté gauche pendant l'animation (l'icône grandit vers la gauche
   puisque `right` est fixé). Remplacement par transform: scale — GPU-accéléré,
   pas de re-rastérisation, animation lisse. On neutralise le grow font-size
   natif au hover et on applique un scale équivalent (95/90 ≈ 1.056). */
.small-box .icon {
	transition: transform 0.3s linear;
	transform-origin: right center;
}
.small-box:hover .icon {
	font-size: 90px;
	transform: scale(1.056);
}

/* Grille de tableau de bord — layout flex : les tuiles occupent uniformément
   la largeur peu importe leur nombre (contourne la contrainte Bootstrap 12-cols).
   Utilisé par sgtDsiDashboard, sgtFdtDashboard, sgtAdressesDashboard et tout
   futur dashboard de tuiles cliquables. */
.sgt-dashboard-row                              { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.sgt-dashboard-row > .sgt-dashboard-tuile       { flex: 1 1 180px; padding: 0 5px; box-sizing: border-box; }
.sgt-dashboard-row .small-box                   { margin-bottom: 10px; }

/* Séparateur vertical pour marquer un regroupement dans une rangée de tuiles.
   À poser sur la tuile qui débute le second groupe — le trait cyan Sogetel apparaît
   à sa gauche. Le padding-left compense pour préserver la symétrie visuelle. */
.sgt-dashboard-row > .sgt-dashboard-tuile.sgt-dashboard-separator-left {
	border-left: 1px solid #3BB3E7;
	margin-left: 10px;
	padding-left: 15px;
}

/* Case qui garde sa largeur naturelle au lieu du flex: 1 1 180px des tuiles standard.
   Utile pour un contenu à taille intrinsèque (ex. sgt-circular-progress) déposé
   dans la rangée à côté des tuiles cliquables. Centré verticalement. */
.sgt-dashboard-row > .sgt-dashboard-tuile.sgt-dashboard-tuile-fit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Signal de la case active : checkmark blanc flottant au coin haut-droit,
   text-shadow léger pour rester lisible sur toutes les couleurs bg-*. */
.sgt-dashboard-tuile-check {
	position: absolute;
	top: 6px;
	right: 10px;
	color: #fff;
	font-size: 22px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
	pointer-events: none;
	z-index: 2;
}

/* Trait vertical bleu Sogetel à gauche d'une colonne — sépare visuellement
   une colonne secondaire (aperçu, aide, encart) de la colonne principale du
   formulaire. À poser sur la colonne Bootstrap de droite (typ. col-md-4).
   Ex. usage : catalyst #/administration/securite/usagers/N onglet Signature. */
.sgt-col-separator-left {
	border-left: 1px solid #3BB3E7;
}

/* Slideshow modal (sgtPhotoSlideshowService). Photo centrée avec chevrons
   flottants gauche/droite. Navigation aussi via touches ← / → / Esc.
   Hauteur du body fixée (65vh) pour éviter que la fenêtre saute d'une
   photo à l'autre — chaque image est downscalée pour rentrer dans le
   cadre (object-fit contain, ratio préservé, pas d'upscale). */
.sgt-photo-slideshow-body {
	position: relative;
	padding: 15px;
	height: 65vh;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sgt-photo-slideshow-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.sgt-photo-slideshow-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	padding: 12px 16px;
	font-size: 20px;
	z-index: 10;
	opacity: 0.6;
	transition: opacity 0.15s ease;
	border-radius: 4px;
}
.sgt-photo-slideshow-nav:hover,
.sgt-photo-slideshow-nav:focus {
	opacity: 1;
	color: #fff;
	outline: none;
}
.sgt-photo-slideshow-nav-left  { left:  10px; }
.sgt-photo-slideshow-nav-right { right: 10px; }

/* Mini-form d'édition dans le footer du slideshow — activé quand
   sgtPhotoSlideshowService reçoit edit_fields + on_apply. Compact. */
.sgt-photo-slideshow-editform {
	padding: 10px 15px 0;
	border-top: 1px solid #eee;
}
.sgt-photo-slideshow-editform .form-group {
	margin-bottom: 6px;
}
.sgt-photo-slideshow-editform label {
	font-size: 0.9em;
	margin-bottom: 2px;
}

/* Widget <sgt-photo-etiquette> : split-button — à gauche, bouton "Ajouter"
   (file-picker) ; à droite (n'apparaît que si ≥1 photo pour l'étiquette),
   une pastille avec l'icône image + le compteur, cliquable pour ouvrir le
   slideshow sur la plus récente de l'étiquette.

   Se comporte comme un form-control : prend toute la largeur disponible du
   parent (respecte donc col-md-N si passé dans une Bootstrap grid).
   Le bouton principal (upload) grossit ; la pastille badge reste compacte. */
.sgt-photo-etiquette {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
}
.sgt-photo-etiquette > .btn:first-child {
	flex: 1 1 auto;
	text-align: left;
}
.sgt-photo-etiquette > .btn.sgt-photo-etiquette-badge {
	flex: 0 0 auto;
}
.sgt-photo-etiquette-badge {
	color: #3BB3E7;
}
.sgt-photo-etiquette-badge:hover,
.sgt-photo-etiquette-badge:focus {
	color: #1ba3de;
}
.sgt-photo-etiquette-badge .badge {
	background: #3BB3E7;
	margin-left: 2px;
}

/* Aperçu de la photo principale dans l'onglet État des lieux du central.
   Cliquable — ouvre le slideshow seedé sur cette photo. */
.sgt-photo-principale {
	text-align: center;
	margin-bottom: 12px;
}
.sgt-photo-principale-img {
	max-width: 100%;
	max-height: 260px;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 3px;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}
.sgt-photo-principale-img:hover {
	box-shadow: 0 0 6px rgba(59, 179, 231, 0.5);
}

.table .footer {
	font-weight: bold;
}

/* le texte normal doit être avec rbg() pour ne pas affecter les menus contextuels qui sont aussi dans le td directement
 opacity hérite sur tout le contenu du TD ... */
.table .disabled>td,
.table .disable>td {
	color: rgb(0, 0, 0, 0.4);
}

/* span(ex.: note) - code - lien - check */
/* .table .disabled>td>span, */
/* .table .disable>td>span, */
.table .disabled>td>my-checked,
.table .disable>td>my-checked,
.table .disabled>td>a,
.table .disable>td>a,
.table .disabled>td>code,
.table .disable>td>code,
.table .disabled>td>.label,
.table .disable>td>.label {
	opacity: 0.4;

}

.small-box {
	border-radius: 3px;
}

.small-box-icon {
	position: absolute;
	top: -10px;
	right: 10px;
	font-size: 60px;
	transition: none;
	color: rgba(0, 0, 0, 0.15);
}

.small-box-header {
	background-color: #FFFFFF;
	padding: 6px;
}

.small-box-body {
	color: #333;
	background-color: #FFFFFF;
}

.form-text {
	margin-top: 25px;
/* 	background-color: teal; */
	line-height: 34px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

/* Par défaut en mode XS, l'input prend toute la largeur disponible */
.f4em .f5em .f6em .f7em .f8em .f9em .f10em .f11em .f12em .f13em .f14em .f15em .f16em {
    width: 100%;
}

/* À partir de l'affichage Small ou plus grand (>= 768px) */
@media (min-width: 768px) {
    .f4em { width: 4em !important; }
    .f5em { width: 5em !important; }
    .f6em { width: 6em !important; }
    .f7em { width: 7em !important; }
    .f8em { width: 8em !important; }
    .f9em { width: 9em !important; }
    .f10em { width: 10em !important; }
    .f11em { width: 11em !important; }
    .f12em { width: 12em !important; }
    .f13em { width: 13em !important; }
    .f14em { width: 14em !important; }
    .f15em { width: 15em !important; }
    .f16em { width: 16em !important; }
}

.duallistbox {
/* 	padding: 10px; */
/* 	border: 1px solid silver; */
/* 	border-radius: 3px; */
/* 	background-color: #d9edf7; */
}

.duallistbox select[multiple] {
	background-color: #FFFFFF !important;
}

select::-ms-expand {
    display: none;
}

/* pour option disabled */
select[multiple] .disable {
	color: #BBBBBB;
}

select, select.ng-invalid, select.ng-dirty.ng-invalid {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0LjkgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQuOSAxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0NDQ0NDQ7fQo8L3N0eWxlPgo8dGl0bGU+YXJyb3dzPC90aXRsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxLjQsNC43IDIuNSwzLjIgMy41LDQuNyAiLz4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz4KPC9zdmc+Cg==) !important;
	background-size: 32px 32px; /* sans taille, IE strech les BG en SVG */
	background-repeat: no-repeat;
	background-position: right 0px top;
	padding-right: 30px !important;

	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 3px !important;
}

/* pas encore supporté par tous les browsers */
label:has(>input[type=checkbox][disabled]) {
	color: rgb(0, 0, 0, 0.4);
}

.label.fill {
	display: inline-block;
	width: 100%;
}

input, textarea {
	border-radius: 3px !important;
}

/* doit être après bloc précédent... */
@media print {
	select, input, textarea {
		background-image: none !important;
		border: none !important;
		padding: 0px !important;
	}

	.input-group-btn, .btn, .drag-handle {
		display: none;
	}
}

select[multiple] {
	background: none !important;
	padding-right: 0px !important;
}

.btn:not(.dropdown-toggle) {
/* 	border: 1px solid #3BB3E7; */
/* 	background: #3BB3E7; */
	font-size: 0.7778rem;
	font-weight: 500;
/* 	color: #061922; */
	border-radius: 0;
}

.btn:hover {
	border: 1px solid #3BB3E7 !important;
	color: #FFFFFF !important;
	background: #3BB3E7 !important;
}

.btn-group > .btn {
	margin: 2px;
}

.mono {
	font-family: Lucida Console, Monaco, monospace;
}

/* pour les validations */
input.ng-invalid, textarea.ng-invalid, select.ng-invalid {
	background-color: #FFFFCC !important; /* jaune */
}

input.ng-dirty.ng-invalid, textarea.ng-dirty.ng-invalid, select.ng-dirty.ng-invalid {
	background-color: #FFEEEE !important; /* rose */
}

.form-control[disabled] {
	color: #333333;
	background-color: #F5F5F5;
}

.form-control-static {
	color: #555;
	font-size: 14px;
}

/* override de la taille std de bootstrap qui est trop petite (14px) */
.form-control {
	font-size: 15px;
}


/* pour le positionnement des icones dans les champs */
/* enable absolute positioning */
.inner-addon {
	position: relative;
}

/* style icon */
.inner-addon .fa {
/* 	background-color: lightblue; */
	z-index: 5;
	position: absolute;
	font-size: 0.8889rem;
	height: 34px;
	line-height: 34px;	/* pour centrage vertical */
	width: 34px;
	color: #666;
	text-align: center;
	pointer-events: none;
}

/* align icon */
.left-addon .fa  { left:  0px; }
.right-addon .fa { right: 0px; }

/* add padding  */
.left-addon input  { padding-left:  38px; }
.right-addon input { padding-right: 38px; }

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
.pagination-page>a { width: 50px; text-align: center;}

a[ng-click],
a[sgt-confirm-click],
a[confirm-click] {
    cursor: pointer;
}

/* les liens de navig dans les box sortent gris, on les veut bleus...
	équivalent à text-light-blue */
.box-body .nav-pills a {
	color: #1ba3de;
}

.box-body .nav-pills a:hover {
	background-color: #1ba3de;
	color: #FFFFFF;
}

.isdragged {
	background-color: #1ba3de;
	color: #FFFFFF;
}

.drag-handle {
	color: #1ba3de;
	text-align: center;
	vertical-align: middle !important;

}

.drag-handle:hover {
	background-color: #1ba3de;
	color: #FFFFFF;
	cursor: pointer;
}

.box-body .nav-pills a > i:first-of-type {
	color: #0c3345;
}

/* les couleurs d'AdminLTE sont à vomir... retour à l'original Bootstrap */
.alert-info {
	color: #31708f !important;
	background-color: #d9edf7 !important;
	border: none;
}

.alert-warning {
	color: #8a6d3b !important;
	background-color: #fcf8e3 !important;
	border-color: #faebcc !important;
}

.alert-danger {
	color: #843434 !important;
	background-color: #f2dede !important;
	border: none;
}

.alert-success {
	color: #3c763d !important;
	background-color: #dff0d8 !important;
	border: none;
}

.alert a {
	color: #1ba3de;
	text-decoration: none;
}

.alert a:hover {
  color: #0c3345;
}

/* permet d'appliquer l'équivalent du clearfix de bootstrap sur le dernier p afin d'éviter l'effondrement du parent */
.alert p:last-of-type::after {
  display: block;
  clear: both;
  content: "";
}

/* pour angularupload - voir https://github.com/nervgh/angular-file-upload/wiki/Introduction */
.nv-file-over {
	color: #31708f !important;
	background-color: #d9edf7 !important;
	border: 1px solid #31708f;
}

/* Couleurs pâles pour FullCalendar avec texte assorti */
.apple-calendar .fc-event {
    border: none;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 5px;
}

/* pour le filet à gauche */
.apple-calendar .fc-event-main-frame {
	padding-left: 4px;
	border-left-width: 3px;
	border-left-style: solid;
}

.apple-calendar .fc-daygrid-day-events .fc-event-main-frame {
	border-left-width: 0px;
}

.apple-calendar .fc-event-red .fc-event-main-frame {
    border-left-color: #FF2968; /* Rouge Apple */
}

.apple-calendar .fc-event-orange .fc-event-main-frame {
    border-left-color: #FF9500; /* Orange Apple */
}

.apple-calendar .fc-event-yellow .fc-event-main-frame {
    border-left-color: #FFCC02; /* Jaune Apple */
}

.apple-calendar .fc-event-green .fc-event-main-frame {
    border-left-color: #63DA38; /* Vert Apple */
}

.apple-calendar .fc-event-blue .fc-event-main-frame {
    border-left-color: #00AAF8; /* Bleu Apple */
}

.apple-calendar .fc-event-purple .fc-event-main-frame {
    border-left-color: #CC73E1; /* Violet Apple */
}

.apple-calendar .fc-event-pink .fc-event-main-frame {
    border-left-color: #FF8AD8; /* Rose Apple */
}

.apple-calendar .fc-event-gray .fc-event-main-frame {
    border-left-color: #C0C0C0; /* Gris Apple */
}

/* événements réguliers */
.apple-calendar .fc-event-red {
    background-color: #FFD4E1; /* Rouge pâle */
    color: #801434 !important; /* Rouge foncé assorti */
}

.apple-calendar .fc-event-orange {
    background-color: #FEEACB; /* Orange pâle */
    color: #804A00 !important; /* Orange foncé assorti */
}

.apple-calendar .fc-event-yellow {
    background-color: #FBF1C8; /* Jaune pâle */
    color: #806601 !important; /* Jaune foncé assorti */
}

.apple-calendar .fc-event-green {
    background-color: #DFF7D7; /* Vert pâle */
    color: #346F1E !important; /* Vert foncé assorti */
}

.apple-calendar .fc-event-blue {
    background-color: #D1EEFD; /* Bleu pâle */
    color: #005981 !important; /* Bleu foncé assorti */
}

.apple-calendar .fc-event-purple {
    background-color: #EFD7F6; /* Violet pâle */
    color: #663971 !important; /* Violet foncé assorti */
}

.apple-calendar .fc-event-pink {
    background-color: #FEDDF4; /* Rose pâle */
    color: #895076 !important; /* Rose foncé assorti */
}

.apple-calendar .fc-event-gray {
    background-color: #ECECEC; /* Gris pâle */
    color: #606060 !important; /* Gris foncé assorti */
}

/* éviter l'override en blanc pour les événements en plage... */
.fc-v-event .fc-event-main,
.fc-h-event .fc-event-main {
	color: inherit;
}

/* pour les icones en "lettrine" dans les alertes */
.modal-content .big, .alert .big, .box-body .big {
	font-size: 4rem;
	float: left;
	margin-right: 10px;
}

.gras {
	font-weight: bold;
}

.content {
	padding-top: 0px;
}

/* réduire le padding des zone de filtrage */
.box-header > .well-sm {
	padding: 2px;
}

.breadcrumb {
	background-color: #0c3345;
	font-size: 0.8889rem;
	font-weight: normal;
}

/* le dernier */
.breadcrumb>.active {
	color: #5fc1eb;
}

/* les cliquables */
.breadcrumb a {
	color: #ffffff;
}

.breadcrumb>li+li:before {
	padding-right: 0px;
	color: #8aa4af;
	font-family: FontAwesome;
	font-weight: light;
	content: "\f105";	/* code unicode dans doc de fa */
}

.btn.btn-app {
	margin-left: 0px;
	width: 100%;
	white-space: normal;
	height: auto;
	font-weight: 700;
	color: #3BB3E7;
	background-color: #FFFFFF;
	border: 4px solid #3BB3E7;
}

.btn.btn-app:hover {
	border: 4px solid #3BB3E7 !important;
}

.btn.btn-app i {
	color: #000000;
}

.btn.btn-app.btn-app-lg {
	font-size: 1.444rem;
	min-height: 100px;
}

.btn.btn-app.btn-app-lg i {
	font-size: 2rem;
	color: #061922;
}

.btn.btn-app:hover i {
	color: #ffffff;
}

.btn-app:hover i {
	color: #ffffff;
}

.rotate {
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.rotate.down {
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
}
.rotate.left {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate.right {
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

.bell{
  -webkit-animation: ring 7s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 7s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 7s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.questionnaire div.form-group:has(input[type="radio"]) {
	margin-bottom: 0px;
	margin-left: 10px;
}

.questionnaire label:has(>input[type="radio"]) {
	border: none;
	padding: 4px;
	margin: 0px;
}

.questionnaire label:has(>input[type="radio"]:checked) {
	color: #31708f !important;
	background-color: #d9edf7 !important;
	border: none;
	padding: 4px;
	border-radius: 3px;
}

/* https://www.w3schools.com/howto/howto_css_switch.asp */
.sgt-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.sgt-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sgt-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sgt-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sgt-slider {
  background-color: #3788d8;
}

input:focus + .sgt-slider {
  box-shadow: 0 0 1px #3788d8;
}

input:disabled + .sgt-slider {
	background-color: #F5F5F5;
}

input:checked + .sgt-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.sgt-slider.sgt-round {
  border-radius: 34px;
}

.sgt-slider.sgt-round:before {
  border-radius: 50%;
}

/* CL 2025-07-23  slider plus petit */

.sgt-switch-sm {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.sgt-switch-sm input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sgt-slider-sm {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sgt-slider-sm:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sgt-slider-sm {
  background-color: #3788d8;
}

input:focus + .sgt-slider-sm {
  box-shadow: 0 0 1px #3788d8;
}

input:disabled + .sgt-slider-sm {
	background-color: #F5F5F5;
}

input:checked + .sgt-slider-sm:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

.sgt-slider-sm.sgt-round-sm {
  border-radius: 24px;
}

.sgt-slider-sm.sgt-round-sm:before {
  border-radius: 50%;
}

/* CL 2025-09-02  sélection liste de rues dans directive sgt-adresse */
.sgt-selection-rue {
	color: #333;
	font-size: 14px;
	margin-bottom: 4px;
	margin-top: 4px;
	padding-left: 10px;
}

.sgt-selection-rue:hover {
	background-color: #f5f5f5
}


.sgt-sticky {
	position: fixed;
	top: 0;
	z-index: 6;
}

@media (max-width: 767px) {
	.nav-tabs-custom>.nav-tabs>li+li {
		margin-left: 0px;
	}
	.nav-tabs-custom>.nav-tabs>li{
		width: 50%;
		text-align: center;
		padding-right: 1px;
		padding-left: 1px;
		margin-right: 0px;
	}
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    border-color: transparent;
}

/* nouvelle top nav inspirée de Telco */
.top-nav {
	padding-bottom: 10px;
	display: flex;
	gap: 10px;
}

.side-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.top-nav > .btn, .side-nav > .btn {
	background: #1ba3de;
	color: #FFFFFF;
	padding: 10px;
	text-align: left;
	flex: 1;
	transition: transform 0.3s ease; /* Smooth transition */
}

.top-nav > .btn:hover, .side-nav > .btn:hover {
    transform: scale(1.1); /* Scale up the button to 110% on hover */
}

.top-nav i, .side-nav i  {
	font-size: 36px;
	display: block; /* force saut de ligne */
}

.btn-group, .round button:first-child {
	border-radius: .25em 0 0 .25em;
}

.btn-group, .round button:last-child {
	border-radius: 0 .25em .25em 0;
}

.icon-list {
	padding-inline-start: 20px;
}
.icon-list > li {
	display: list-item;
	list-style-type: none;
	margin-bottom: 8px;
}

.icon-list > li {
	display: list-item;
	list-style-type: none;
	margin: 10px 0px;
}

/* pour faire en sorte que la puce soit considérée dans l'alignement
  car c'est problématique lorsque notre LI n'est pas dans un UL ou un OL
  c'était l'ancien comportement du Quirks mode */
.content :not(ul):not(ol) > li {
    list-style-position: inside;
}

input[type=number].sgt-input-number-hide-arrow::-webkit-outer-spin-button,
input[type=number].sgt-input-number-hide-arrow::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number].sgt-input-number-hide-arrow {
	-moz-appearance: textfield;
}

/* air-datepicker : thème Sogetel
   - entête des jours de la semaine
   - cellule sélectionnée (= marqueurs de début / fin de plage)
   - bordure des cellules en range (hérite via la variable selected) */
.air-datepicker {
	--adp-day-name-color:                   #1ba3de;
	--adp-cell-background-color-selected:   #1ba3de;
	--adp-cell-background-color-selected-hover: #1791c5;
}

.air-datepicker-body--day-name {
	font-weight: bold;
}

/* ============================================================================
   sgt-markdown-editor — éditeur Markdown (inspiré GitHub)
   ----------------------------------------------------------------------------
   Structure DOM :

       <div class="sgt-md-editor">
           <div class="sgt-md-tabs">
               <a class="sgt-md-tab active">Écriture</a>
               <a class="sgt-md-tab">Aperçu</a>
               <span class="sgt-md-logo"><svg .../></span>
           </div>
           <div class="sgt-md-toolbar">
               <button class="btn btn-sm">…</button>
               <span class="sgt-md-sep"></span>
               …
               <div class="btn-group sgt-md-help">…</div>
           </div>
           <div class="sgt-md-body">
               <textarea class="form-control">…</textarea>
           </div>
           <div class="sgt-md-preview">…</div>
       </div>
   ========================================================================= */

.sgt-md-editor {
	border: 1px solid #d0d7de;
	border-radius: 4px;
	background: #fff;
	overflow: visible;
}
.sgt-md-editor.ng-invalid > .sgt-md-body > textarea {
	/* le fond jaune du required (règles textarea.ng-invalid globales de la
	   ligne 676 de ce fichier) reste sur le textarea lui-même — pas besoin
	   de redéfinir ici, on garde juste la border du wrapper cohérente */
}

/* ---- Barre d'onglets ---------------------------------------------------- */
.sgt-md-editor .sgt-md-tabs {
	display: flex;
	align-items: stretch;
	background: #f6f8fa;
	border-bottom: 1px solid #d0d7de;
	border-radius: 3px 3px 0 0;
	padding: 0 8px;
}
.sgt-md-editor .sgt-md-tab {
	padding: 8px 14px;
	color: #57606a;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 13px;
}
.sgt-md-editor .sgt-md-tab:hover,
.sgt-md-editor .sgt-md-tab:focus {
	color: #1f2328;
	text-decoration: none;
}
.sgt-md-editor .sgt-md-tab.active {
	color: #1f2328;
	border-bottom-color: #1ba3de;   /* bleu Sogetel (cf. skin-sogetel navbar) */
	font-weight: 600;
}
.sgt-md-editor .sgt-md-counter {
	margin-left: auto;                              /* pousse compteur + logo à droite */
	display: flex;
	align-items: center;
	color: #656d76;
	padding: 8px 6px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;             /* chiffres alignés — le compteur ne dance pas */
}
.sgt-md-editor .sgt-md-counter.text-red {
	color: #dd4b39;                                 /* rouge Sogetel/AdminLTE quand > max */
	font-weight: 600;
}
.sgt-md-editor .sgt-md-logo {
	display: flex;
	align-items: center;
	color: #656d76;
	padding: 8px 4px 8px 6px;
}

/* ---- Toolbar ------------------------------------------------------------ */
.sgt-md-editor .sgt-md-toolbar {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	border-bottom: 1px solid #d0d7de;
	background: #fafbfc;
	flex-wrap: wrap;
}
.sgt-md-editor .sgt-md-toolbar .btn,
.sgt-md-editor .sgt-md-toolbar .btn-group > .btn {
	padding: 4px 8px;
	background: transparent;
	color: #57606a;
	border: 1px solid transparent;
	border-radius: 3px;
	box-shadow: none;
	margin: 0 1px;
}
.sgt-md-editor .sgt-md-toolbar .btn:hover,
.sgt-md-editor .sgt-md-toolbar .btn:focus,
.sgt-md-editor .sgt-md-toolbar .btn.active {
	background: #eaeef2;
	color: #1f2328;
	outline: none;
}
.sgt-md-editor .sgt-md-sep {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: #d0d7de;
	margin: 0 6px;
	vertical-align: middle;
}
.sgt-md-editor .sgt-md-help {
	margin-left: auto;
}

/* le split-button du bloc de code — le caret doit rester collé au bouton
   principal, sans marge séparatrice */
.sgt-md-editor .sgt-md-toolbar .btn-group > .btn + .btn.dropdown-toggle {
	margin-left: -1px;
	padding-left: 4px;
	padding-right: 4px;
}

/* dropdown du choix de langage du bloc de code — largeur généreuse et flex
   pour que le label technique (```javascript) et la caption (JavaScript, ou
   « PowerBuilder (via vbnet) ») tiennent chacun sur une ligne, bien alignés
   aux deux bouts */
.sgt-md-editor .sgt-md-langages {
	min-width: 320px;
}
.sgt-md-editor .sgt-md-langages > li > a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	white-space: nowrap;
	gap: 20px;
}

/* cheatsheet dans le dropdown Aide — un peu plus large que le défaut */
.sgt-md-editor .sgt-md-cheatsheet {
	min-width: 320px;
	padding: 8px 12px;
}
.sgt-md-editor .sgt-md-cheatsheet table {
	margin-bottom: 0;
}
.sgt-md-editor .sgt-md-cheatsheet code {
	background: #f6f8fa;
	color: #24292f;
}

/* ---- Corps (textarea) --------------------------------------------------- */
.sgt-md-editor .sgt-md-body textarea.form-control {
	border: none;
	border-radius: 0 0 3px 3px;
	box-shadow: none;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
}
.sgt-md-editor .sgt-md-body textarea.form-control:focus {
	box-shadow: none;
	border-color: transparent;
}

/* ---- Aperçu ------------------------------------------------------------- */
.sgt-md-editor .sgt-md-preview {
	padding: 16px;
	background: #fff;
	border-radius: 0 0 3px 3px;
	overflow-x: auto;
	word-wrap: break-word;
}
.sgt-md-editor .sgt-md-preview > *:last-child {
	margin-bottom: 0;
}


/* ============================================================================
   sgt-timeline — fil vertical d'événements chronologiques
   ----------------------------------------------------------------------------
   Structure minimale :

       <ul class="sgt-timeline">
           <li class="sgt-timeline-item">
               <div class="sgt-timeline-node" style="background: #3c8dbc;">DG</div>
               <div class="sgt-timeline-body">
                   <div class="sgt-timeline-header">
                       <span class="sgt-timeline-name">Dominic Germain</span>
                       <span class="sgt-timeline-date">2026-07-30 14:37</span>
                   </div>
                   <div class="sgt-timeline-content">Contenu HTML libre…</div>
               </div>
           </li>
           …
       </ul>

   - Ligne verticale grise à gauche, nœud circulaire par item (32×32px)
   - Le nœud accepte des initiales (2 caractères) ou une icône fa
   - Couleur du nœud pilotée par style inline (généralement hash sur le nom)
   - Compagnon optionnel : <small class="sgt-timeline-count">42 interventions</small>
   - Compagnon optionnel : <a class="sgt-timeline-goto"><i class="fa fa-arrow-down"/> Aller au dernier</a>
   - À l'impression : cercles forcés en gris uni (économie d'encre)
   ============================================================================ */
.sgt-timeline {
	list-style: none;
	padding: 0;
	margin: 16px 0 16px 16px;
	position: relative;
}
.sgt-timeline:before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 15px;
	width: 2px;
	background: #dfe3e8;
}
.sgt-timeline-item {
	position: relative;
	padding-left: 48px;
	margin-bottom: 20px;
	min-height: 32px;
}
.sgt-timeline-item:last-child {
	margin-bottom: 0;
}
.sgt-timeline-node {
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
	z-index: 1;
	background-color: #6c757d; /* fallback si aucune couleur inline */
}
.sgt-timeline-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
	line-height: 32px;
	min-height: 32px;
}
.sgt-timeline-name {
	font-weight: 600;
	color: #1ba3de;
}
.sgt-timeline-date {
	color: #888;
	font-size: 0.9em;
	white-space: nowrap;
	margin-left: 12px;
}
.sgt-timeline-content {
	word-wrap: break-word;
}
.sgt-timeline-count {
	display: block;
	margin: 4px 0 16px 48px;
	color: #888;
}
.sgt-timeline-goto {
	display: inline-block;
	margin-bottom: 12px;
}

@media print {
	/* Cercles en gris uni à l'impression (économie d'encre) */
	.sgt-timeline-node {
		background-color: #444 !important;
	}
}


/* ============================================================================
   tag-input — champ de saisie de tags (bulles + × )
   ----------------------------------------------------------------------------
   Encapsule les classes de la directive <tag-input> (site-directives.js).
   Le ng-model est une string CSV compacte ; la directive fabrique les bulles.

   Structure rendue :

       <div class="sgt-tag-input form-control">
           <span class="label label-primary sgt-tag">
               <span class="sgt-tag-text">perl</span>
               <a class="sgt-tag-close">×</a>
           </span>
           …
           <input class="sgt-tag-buffer" />
       </div>

   - Le container prend l'apparence d'un form-control Bootstrap (bord gris,
     hauteur ~34px, s'étire au besoin quand les bulles wrap sur plusieurs lignes)
   - L'input interne est transparent, sans bord — il « prolonge » les bulles
   - Le fond jaune-required de la règle globale input.ng-invalid est neutralisé
     sur l'input interne et rejoué sur le container (comme sgt-md-editor)
   ============================================================================ */
.sgt-tag-input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-height: 34px;
	height: auto;
	padding: 3px 6px;
	cursor: text;
}

/* Popup uib-typeahead inséré dans <body> (typeahead-append-to-body) :
   au-dessus des modales Bootstrap (1050, +10 par modale empilée). */
body > [uib-typeahead-popup].dropdown-menu {
	z-index: 1100;
}
.sgt-tag-input.sgt-tag-input-disabled {
	background-color: #F5F5F5;
	cursor: not-allowed;
}
.sgt-tag-input.ng-invalid {
	/* même mécanique que sgt-md-editor : le fond required s'applique au
	   container, pas à l'input interne (transparent) */
	background-color: #FFFFCC;
}
.sgt-tag-input.ng-dirty.ng-invalid {
	background-color: #FFEEEE;
}
.sgt-tag-input .sgt-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px 3px 8px;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;
}
.sgt-tag-input .sgt-tag-text {
	/* selection texte native — l'usager peut double-cliquer sur le contenu
	   d'une bulle pour selectionner + copier au clavier (Cmd/Ctrl+C). Le
	   ng-click stopPropagation empeche le container de refocus le buffer
	   pendant la selection. */
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	cursor: text;
}
.sgt-tag-input .sgt-tag-close {
	color: #fff;
	opacity: 0.7;
	text-decoration: none;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.sgt-tag-input .sgt-tag-close:hover,
.sgt-tag-input .sgt-tag-close:focus {
	opacity: 1;
	text-decoration: none;
}
.sgt-tag-input .sgt-tag-buffer {
	flex: 1 1 80px;
	min-width: 80px;
	border: none;
	outline: none;
	padding: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
}
.sgt-tag-input .sgt-tag-buffer.ng-invalid {
	/* neutralise la règle globale — la validation vit sur le container */
	background: transparent !important;
}
.sgt-tag-input .sgt-tag-buffer[disabled] {
	background: transparent;
	color: #333;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   sgt-segmented-pill — segments avec pill de fond qui glisse
   Directive sgtSegmentedPill dans site-directives.js
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sgt-segmented-pill {
	position: relative;
	display: inline-flex;
	background: #eef2f6;
	border-radius: 999px;
	padding: 4px;
	isolation: isolate;
	vertical-align: middle;
	max-width: 100%;
}

/* posé dans un .well : le fond du pill (#eef2f6) et celui du well (#f5f5f5)
   se confondent — bordure fine alignée sur les form-control voisins. */
.well .sgt-segmented-pill {
	border: 1px solid #d2d6de;
}

.sgt-segmented-pill-slider {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	background: #3BB3E7;
	border-radius: 999px;
	transition: transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1),
	            width     0.28s cubic-bezier(0.4, 0.0, 0.2, 1),
	            opacity   0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	z-index: 0;
	pointer-events: none;
}

.sgt-segmented-pill > .sgt-segment {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	border: 0;
	background: transparent;
	padding: 8px 16px;
	border-radius: 999px;
	color: #4a5568;
	font-weight: 500;
	transition: color 0.18s ease;
	cursor: pointer;
	white-space: nowrap;
	outline: none;
}

.sgt-segmented-pill > .sgt-segment:hover:not(.active):not(:disabled) {
	color: #0c3345;
}

.sgt-segmented-pill > .sgt-segment.active {
	color: #ffffff;
}

/* Fallback : tant que le slider n'a pas été mesuré (tab-pane initialement
   caché, valeur inconnue), le segment actif porte son propre fond bleu
   pour rester lisible. Le slider prend le relais dès qu'il est positionné. */
.sgt-segmented-pill:not(.sgt-segmented-pill-ready) > .sgt-segment.active {
	background: #3BB3E7;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sgt-segmented-pill > .sgt-segment:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 179, 231, 0.35);
}

.sgt-segmented-pill-disabled > .sgt-segment,
.sgt-segmented-pill > .sgt-segment:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sgt-segmented-pill > .sgt-segment > i.fa + span {
	margin-left: 6px;
}

/* variante compacte */
.sgt-segmented-pill-sm {
	padding: 3px;
}
.sgt-segmented-pill-sm > .sgt-segment {
	padding: 4px 10px;
	font-size: 0.85em;
}
.sgt-segmented-pill-sm .sgt-segmented-pill-slider {
	top: 3px;
	bottom: 3px;
}


/* ------------------------------------------------------------------ */
/* sgt-countdown — pie chart 1em animé, se pose comme une icône FA    */
/* Voir directive sgtCountdown dans site-directives.js.               */
/* ------------------------------------------------------------------ */
@property --sgt-cd-p {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

.sgt-countdown {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	vertical-align: -0.125em;
	background: conic-gradient(currentColor var(--sgt-cd-p), rgba(0, 0, 0, 0.15) 0);
}

.sgt-countdown.run {
	animation: sgt-cd-fill linear forwards;
}

@keyframes sgt-cd-fill {
	from { --sgt-cd-p: 0%;   }
	to   { --sgt-cd-p: 100%; }
}


/* ============================================================================
   sgt-kanban — tableau Kanban (glisser-déposer SortableJS)
   ----------------------------------------------------------------------------
   Voir directive sgtKanban dans site-directives.js. Structure DOM :

       <div class="sgt-kanban [sgt-kb-glisser|hors-cible]">
           <div class="sgt-kb-colonne sgt-kb-<couleur> [sgt-kb-replie|depot-ok|depot-non|survol]">
               <div class="sgt-kb-entete">titre · icône interdit · compte</div>
               <div class="sgt-kb-corps">
                   <div class="sgt-kb-vide">Aucune carte</div>
                   <div class="sgt-kb-carte [sgt-kb-verrouillee|sauvegarde|refuse]">…</div>
               </div>
           </div>
       </div>

   Les styles de .sgt-kb-carte ne dépendent pas de leurs ancêtres : pendant le
   glisser, SortableJS clone la carte directement sous <body> (.sgt-kb-clone).
   ========================================================================= */

.sgt-kanban {
	display: flex;
	align-items: stretch;                           /* colonnes de même hauteur : on dépose n'importe où */
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
}

/* ---- Colonne ------------------------------------------------------------ */
.sgt-kb-colonne {
	--sgt-kb-couleur: #8c959f;
	flex: 1 1 0;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	background: #f6f8fa;
	border: 1px solid #d0d7de;
	border-top: 3px solid var(--sgt-kb-couleur);
	border-radius: 6px;
	transition: opacity .15s, filter .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.sgt-kb-primary { --sgt-kb-couleur: #1ba3de; }   /* bleu Sogetel */
.sgt-kb-info    { --sgt-kb-couleur: #00c0ef; }
.sgt-kb-success { --sgt-kb-couleur: #00a65a; }
.sgt-kb-warning { --sgt-kb-couleur: #f39c12; }
.sgt-kb-danger  { --sgt-kb-couleur: #dd4b39; }
.sgt-kb-purple  { --sgt-kb-couleur: #605ca8; }

.sgt-kb-entete {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid #d0d7de;
}
.sgt-kb-titre {
	flex: 1;
	font-weight: 600;
	font-size: 13px;
	color: #1f2328;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sgt-kb-compte {
	padding: 1px 8px;
	border-radius: 10px;
	background: #eaeef2;
	color: #57606a;
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sgt-kb-compte.sgt-kb-limite-depassee {
	background: #dd4b39;
	color: #fff;
}
.sgt-kb-interdit {
	color: #dd4b39;
}

.sgt-kb-corps {
	flex: 1;
	min-height: 90px;
	padding: 8px;
	overflow-y: auto;
}
.sgt-kb-vide {
	padding: 18px 8px;
	border: 1px dashed #d0d7de;
	border-radius: 6px;
	color: #8c959f;
	font-size: 12px;
	text-align: center;
}
.sgt-kb-corps:has(.sgt-kb-fantome) .sgt-kb-vide {
	display: none;                                  /* la carte prend la place */
}

/* colonne repliée : bande verticale */
.sgt-kb-replie {
	flex: 0 0 42px;
	min-width: 42px;
}
.sgt-kb-replie .sgt-kb-entete {
	writing-mode: vertical-rl;
	min-height: 180px;
	padding: 10px 0;
	border-bottom: 0;
}
.sgt-kb-replie .sgt-kb-corps {
	display: none;
}
.sgt-kb-replie .sgt-kb-titre {
	flex: none;
}
.sgt-kb-replie .sgt-kb-compte {
	order: -1;                                      /* compteur en haut de la bande */
	padding: 8px 1px;
}

/* ---- Pendant le glisser ------------------------------------------------- */
.sgt-kb-colonne.sgt-kb-depot-ok {
	background: #f0f9fd;
	border-color: #9fd6ef;
}
.sgt-kb-colonne.sgt-kb-depot-ok .sgt-kb-vide {
	border-color: #1ba3de;
	color: #1ba3de;
}
.sgt-kb-colonne.sgt-kb-survol {
	background: #e3f4fc;
	border-color: #1ba3de;
	box-shadow: 0 0 0 3px rgba(27, 163, 222, .2);
}
.sgt-kb-colonne.sgt-kb-depot-non {
	opacity: .45;
	filter: grayscale(.7);
}
.sgt-kb-colonne.sgt-kb-depot-non,
.sgt-kb-colonne.sgt-kb-depot-non * {
	cursor: not-allowed !important;
}

/* ---- Carte -------------------------------------------------------------- */
.sgt-kb-carte {
	position: relative;
	margin-bottom: 8px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(31, 35, 40, .04);
	font-size: 13px;
	color: #1f2328;
	cursor: grab;
	transition: box-shadow .15s, border-color .15s, transform .15s, opacity .15s;
}
.sgt-kb-carte:last-child {
	margin-bottom: 0;
}
.sgt-kb-carte:hover {
	border-color: #1ba3de;
	box-shadow: 0 4px 10px rgba(31, 35, 40, .12);
	transform: translateY(-1px);
}
.sgt-kb-glisser .sgt-kb-carte:hover {
	border-color: #d0d7de;                          /* pas de survol parasite pendant le glisser */
	box-shadow: 0 1px 0 rgba(31, 35, 40, .04);
	transform: none;
}

/* verrouillée : rayures + cadenas + curseur interdit */
.sgt-kb-carte.sgt-kb-verrouillee {
	cursor: not-allowed;
	color: #57606a;
	background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #f6f8fa 6px, #f6f8fa 12px);
}
.sgt-kb-carte.sgt-kb-verrouillee:hover {
	border-color: #d0d7de;
	box-shadow: 0 1px 0 rgba(31, 35, 40, .04);
	transform: none;
}
.sgt-kb-cadenas {
	position: absolute;
	top: 7px;
	right: 8px;
	color: #8c959f;
	font-size: 12px;
}
.sgt-kb-verrouillee > .sgt-kb-contenu,
.sgt-kb-sauvegarde > .sgt-kb-contenu {
	padding-right: 16px;                            /* place pour l'icône */
}

/* emplacement réservé dans la colonne pendant le glisser */
.sgt-kb-carte.sgt-kb-fantome {
	background: #e3f4fc;
	border: 2px dashed #1ba3de;
	box-shadow: none;
	transform: none;
}
.sgt-kb-carte.sgt-kb-fantome > * {
	visibility: hidden;
}
.sgt-kb-hors-cible .sgt-kb-carte.sgt-kb-fantome {
	display: none;                                  /* pointeur hors d'une colonne permise : rien ne bougera */
}

/* carte qui suit le curseur (clone sous <body>) — `rotate`/`scale` plutôt que
   `transform`, que SortableJS utilise en inline pour la déplacer */
.sgt-kb-carte.sgt-kb-clone {
	opacity: 1 !important;
	rotate: 2deg;
	scale: 1.03;
	border-color: #1ba3de;
	box-shadow: 0 14px 30px rgba(31, 35, 40, .25);
	cursor: grabbing;
	transition: none !important;                    /* sinon le clone traîne derrière le curseur */
}

/* sauvegarde en cours (on-depot a retourné une promesse) */
.sgt-kb-carte.sgt-kb-sauvegarde {
	opacity: .6;
	pointer-events: none;
}

/* dépôt refusé : la carte revient à sa place et tremble */
.sgt-kb-carte.sgt-kb-refuse {
	border-color: #dd4b39;
	animation: sgt-kb-secousse .4s;
}
@keyframes sgt-kb-secousse {
	0%, 100% { translate: 0; }
	20%, 60% { translate: -5px 0; }
	40%, 80% { translate: 5px 0; }
}