/*
 * Odyssée / Barre d'actions
 * CSS de la barre d'actions (hors modale)
 *
 * Dépendance : Bootstrap 4
 * Date : janvier 2019
 * Auteur : Alsacréations, PHV
 *
 * Composants Bootstrap 4 utilisés : Navbar, Tabs, Dropdown, Tooltip et uniquement pour le livrable 1 Modal
 * Note : quelques styles ne sont pas encapsulés dans
 * #barre-actions ("namespace"). Chaque sélecteur commence par #barre-actions
 * et ne provoquera donc pas de régression ailleurs dans la page ou d'autres
 * pages chargeant cette CSS.
 * Sélecteur sans ce namespace :
 *  .modal-lg-down-pleine-largeur
 *       l'élément concerné est ancêtre de #barre-actions
 *  .ss-content
 *       lié au plugin Simple Scrollbar
 *  body[ss-container], :not(.modal-content) > #barre-actions .tab-pane
 *       (le 1er est lié au plugin Simple Scrollbar, le 2e au composant BS4 Tabs
 *       hors modale uniquement - livrable 2)
 *  :not(.modal-content) > #barre-actions
 *       permet de ne cibler que le livrable 2 - barre d'actions hors modale
 */

#barre-actions {
	width: 100%; /* nécessaire vers 950px pour qu'onglets et btn-fenetre soient à droite de la large modale, pour le livrable 1 - barre d'actions dans modale (et pas gênant dans l'autre cas) */
	height: 50px;
	border-bottom: 1px solid #c3c3c3;
	padding: 0 10px 0 4px; /* écrase BS .navbar pour livrable 2 - barre d'actions hors modale (livrable 1 voir c-dessous) */
}

@media (max-width: 575.98px) {
	#barre-actions {
		padding: 0 3px 0 3px; /* évite de passer sur 2 lignes vers 320-324px pour livrable 2 - barre d'actions hors modale */
	}

	/* Hors modale (livrable 2) uniquement : pleine largeur sur mobile, conformément au design (et on gagne 30px de largeur) */
    /*
	:not(.modal-content) > #barre-actions {
		width: calc(100% + 30px); 
		margin-left: -15px; 
		margin-right: -15px; 
	}
    */
}

/* Spécifique livrable 1 - barre d'actions dans modale */
.modal #barre-actions {
	padding: 0 3px 0 3px; /* écrase BS .navbar */
	border-radius: 4px 4px 0 0; /* nécessaire en l'absence de .modal-header */
}

/* Comportement sticky (avec _feature query_ @supports pour ne cibler que les navigateurs supportant cette déclaration. IE11 ne supporte ni l'un ni l'autre) */
/* Pour le comportement sticky, on pourrait aussi utiliser la classe BS4 .sticky-top dans le livrable 1 - barre d'actions dans modale mais comme on ne peut l'utiliser hors modale, le choix est fait d'harmoniser le code HTML. À cause du livrable 2 - barre d'actions hors modale, on utilise une classe personnalisée car .sticky-top collerait la barre actions en haut du viewport en conflit avec la barre appli et il n'y a pas de classe utilitaire pour un espace de 50px (mt-5 c'est 3*10px) */
@supports ((position: -webkit-sticky) or (position: sticky)) {
	#barre-actions.barre-actions-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0px; /* livrable 2 - barre d'actions hors modale (écrasé ci-dessous) */
		z-index: 1020; /* 1 suffirait dans le livrable 1 - barre d'actions dans modale mais comme hors modale on a 1020 (convention BS4), on harmonise */
	}
	/* livrable 1 - barre d'actions dans modale */
	.modal #barre-actions.barre-actions-sticky {
		top: 0; /* Sinon sticky est sans effet. Pas de barre d'appli ici donc pas 50px mais 0 = en haut */
	}
}

#barre-actions .onglets {
	margin-left: auto; /* Autant à droite que possible (à droite de la barre en l'absence de .btn-fenetre, sinon collé à la gauche de ce dernier) */
}

/* Styles typo et couleur */
#barre-actions .nav-link {
	color: black;
}

/* Icônes-boutons : fond blanc puis disque gris au survol et au focus */
/* (1) Centrages vertical et horizontal de l'icône */
/* (2) Écrase le p:0.5r 1r; de BS4 sur .nav-link (voulu lorsqu'il n'y a qu'une icône dans un "bouton" mais pas sur les onglets)*/
/* (3) Effet à la Gmail 2018 : un ::pseudo sera positionné en absolu */
#barre-actions .btn-disc {
	position: relative; /* (3) */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; /* (1) */
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* (1) */
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center; /* (1) */
	min-width: 40px;
	height: 40px;
	margin-right: 1px; /* gain de place par rapport à margin: 3px initial (pour mobile vers 320+) */
	padding: 0; /* (2) */
	background-color: white;
	background-position: center; /* effet ripple / propagation au clic (1/3) */
	border-radius: 40px; /* et pas 50% car il y a le cas de l'icône+texte (rectangle arrondi) */
	-webkit-transition: background 0.75s;
	transition: background 0.75s; /* effet ripple */
}

/* effet ripple (2/3) */
#barre-actions .btn-disc:focus,
#barre-actions .btn-disc:hover {
	background: #eaeaea radial-gradient(circle, transparent 1%, #eaeaea 1%) center/15000%; /* effet ripple */
}

/* effet ripple (3/3) */
#barre-actions .btn-disc:active {
	background-color: #bdbdbd;
	background-size: 100%;
	-webkit-transition: background 0s;
	transition: background 0s;
}

/* Effet au survol à la Gmail 2018 */
#barre-actions .btn-disc::before {
	content: '';
	display: block;
	opacity: 0;
	position: absolute;
	-webkit-transition-duration: 0.15s;
	        transition-duration: 0.15s;
	-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background: none;
	border-radius: 50%;
	-webkit-transform: scale(0);
	        transform: scale(0);
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
}

#barre-actions .btn-disc:hover::before {
	-webkit-transform: scale(1);
	        transform: scale(1);
	opacity: 1;
	border: none;
	background-color: #eaeaea;
}

/* Texte dans icônes-boutons */
#barre-actions .btn-disc img:not(:only-child) {
	margin-left: 6px;
}

#barre-actions .btn-disc .btn-disc-text {
	margin-right: 15px;
	margin-left: 5px;
}

/* Supprime le triangle des dropdowns (souvent porté par ::after mais parfois par ::before) */
#barre-actions .dropdown-no-caret::before,
#barre-actions .dropdown-no-caret::after {
	content: none; /* écrase BS */
}

/* Onglets */
#barre-actions .onglets .nav-tabs {
	border-bottom: none; /* écrase BS */
}

#barre-actions .onglets .nav-item {
	margin-bottom: 0; /* écrase BS */
}

/* .nav-link */
#barre-actions .onglets a {
	position: relative; /* permet de positionner les .badge fuchsia */
	height: 50px;
	border: none; /* écrase BS */
	border-bottom: 5px solid transparent;
	padding: 0.6875rem 0.625rem 0.3125rem 0.5625rem; /* écrase BS "0.5r 1r" / 8px 16px, maintenant équivalent à 11px 9px 5px 9px. Marge à droite dans le cas sans .badge-pill. Voir ci-dessous :not(:empty) pour l'autre cas. */
	background-position: center; /* effet ripple */
	border-radius: 0; /* écrase BS */
	-webkit-transition: background 0.75s;
	transition: background 0.75s;
}

/* @BUGFIX L'onglet actif – pour pouvoir être distingué d'un onglet survolé voisin – doit avoir une bordure bleue mais pas de fond gris.
           L'onglet survolé garde un fond gris mais la bordure basse devient gris un peu plus foncé et plus bleue.
           En utilisant le clavier, :focus va avoir le même aspect */
/* État survolé (si actif, sera écrasé par la règle qui suit) */
#barre-actions .onglets .nav-link:hover {
	border-bottom-color: #cecece;
	background: #eaeaea radial-gradient(circle, transparent 1%, #eaeaea 1%) center/15000%; /* effet ripple */
}

/* États :focus, onglet actif y compris survolé */
#barre-actions .onglets .nav-link:focus,
#barre-actions .onglets .active,
#barre-actions .onglets .active:hover {
    border-bottom-color: var(--barreappli-couleur) /* #009be5 */;
    background-color: white; /* et pas seulement transparent afin de pouvoir écraser le gris ci-dessus */
}

/* effet ripple (3/3) */
#barre-actions .onglets .nav-link:active {
	background-color: #bdbdbd;
	background-size: 100%;
	-webkit-transition: background 0s;
	transition: background 0s;
}

/* Icône d'un onglet */
#barre-actions .onglets img {
	width: 1.3125rem; /* équiv 19px */
}

/* Texte visible dans un onglet */
#barre-actions .onglets .nav-link-text {
	padding-right: 0; /* @BUGFIX correspond aux marges à droite du design pour les onglets sans .badge-pill (Fiche et Historique) */
}

/* @BUGFIX Cas avec .badge-pill (marge interne à droite de l'onglet différente, pour PJ et Discussion) */
#barre-actions .onglets .badge:not(:empty) ~ .nav-link-text {
	padding-right: 0.75rem;
}


/* .badge en exposant et plus petit (couleurs de texte et de fond sont stylées via notre classe .badge-fuchsia) */
#barre-actions .onglets .badge {
	position: absolute;
	top: 8px;
	right: 5px;
	padding: 0.3em 0.6em 0.4em 0.6em; /* écrase BS et permet d'obtenir un disque. Référence 1em = la taille de texte donc 10px */
	font-size: 0.625em; /* écrase BS 10px souhaité, pas 75%=12px */
	font-weight: normal; /* écrase BS pas en bold */
}

/* Positionnement différent du badge quand le texte des onglets est visible (vs par rapport à sur une icône seule en XS et small) */
@media (min-width: 768px) {
	#barre-actions .onglets .badge {
		top: 11px;
		right: 9px;
	}
}

/* Ombre sous la barre d'actions au scroll du contenu @source http://lea.verou.me/2012/04/background-attachment-local/ */
#barre-actions-panes .tab-pane {
	/* @TODO Décommenter ces 2 propriétés pour voir l'ombrage */
	/* overflow: auto; */
	/* height: calc(50vh); */
	background:
	/* Shadow covers */
		-webkit-gradient(linear, left top, left bottom, color-stop(30%, white), to(rgba(255,255,255,0))),
		-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(70%, white)) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
	/* Shadow covers */
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
	background-attachment: local, local, scroll, scroll;
}

/*
 * Classes utilitaires
 */
/* Cacher un élément visuellement mais en le gardant perceptible par les lecteurs d'écran, uniquement en résolutions basses (en Sass avec BS4, ce serait la mixin @include media-breakpoint-down(small)). En medium et au-delà (>=768px) l'élément est visible par tous.
Équivalent à .sr-only de BS mais dans une MQ */
/* Similaire : perçu en résolutions jusqu'à 768px exclu (extra small et small devices). À partir de $grid-breakpoints(md) càd >=768px, l'élément est visible par tous. */
@media (max-width: 767.98px) {
	#barre-actions .md-down-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Lié à l'ascenseur façon iOS. On ne veut cibler que le livrable 2 - barre
   d'actions hors modale où le container de Simple Scrollbar est sur body et où
	 la barre d'actions n'a pas pour parent .modal-* */
body[ss-container],
:not(.modal-content) > #barre-actions .tab-pane {
	height: 100vh;
}

/* compense `width: calc(100% + 18px)` de simple-scrollbar.css (*) et évite
   que la large modale ou le contenu ne dépasse à droite du viewport sur mobile
	 et soit décentrée
	 (*) technique de ce plugin pour cacher l'ascenseur vertical natif
	 La double classe est une astuce pour ajouter de la spécificité au sélecteur
	 et écraser la simple classe de la CSS du plugin qui vient _après_ */
.ss-content.ss-content {
	padding-right: 18px;
}

/* Dans les onglets, badge en exposant en blanc sur fond fuchsia */
#barre-actions .badge-fuchsia {
	color: white;
	background-color: #FF3C7E;
}

/* Dans les onglets, badge en exposant en blanc sur fond fuchsia */
#barre-actions .badge-orange {
    color: white;
    background-color: #DD3500 !important;    
    /*var(--barreappli-couleur) !important;*/ /* #DD3500; */ /*orangered;*/
}

/* Modale pleine largeur en medium et en deçà (xs, <sm, <md et entre md et lg - nom de cet intervalle ?? - mais pas >lg ni >xl)
	@TOPROD Attention cette classe utilitaire ne peut pas être préfixée par #barre-actions (pas possible car ce dernier est un descendant de la modale…)*/
@media (max-width: 991.98px) {
	.modal-lg-down-pleine-largeur {
		max-width: calc(100% - 8px);
	}
}

/* TOPROD Sinon plus grand chose n'est cliquable dans la page */
.container {
    z-index: unset;
}

/*  Classes ajoutées par SICCRF */

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/*
.btn-disc:focus,
.btn-disc:active {
    outline: none !important;
    box-shadow: none !important;
}
*/

.retour-consult:after {
	/*height: 24px;
    width: 24px;
    content: url(../images/retour.svg)*/
	content: "Retour";
}

.retour:after {
	/*height: 24px;
    width: 24px;
    content: url(../images/retour.svg)*/
	content: "Annuler";
}

.modif:after {
    height: 24px;
    width: 24px;
    content: url(../images/modif.svg)
}

.enregistrer:after {
	/*
    height: 24px;
    width: 24px;
    content: url(../images/enregistrer.svg)
}*/
	content: "Enregistrer";
}


.supprimer:after {
    height: 24px;
    width: 24px;
    content: url(../images/poubelle.svg)
}

.imprimer:after {
    height: 24px;
    width: 24px;
    content: url(../images/imprimer.svg)
}

.envoyer:after {
    height: 24px;
    width: 24px;
    content: url(../images/unfct.svg)
}

.envoyer-pro:after {
    height: 24px;
    width: 24px;
    content: url(../images/ets.svg)
}

.dupliquer:after {
    height: 24px;
    width: 24px;
    content: url(../images/dupliquer.svg)
}

.newversion:after {
	height: 24px;
	width: 24px;
	content: url(../images/newversion.svg)
}

/*
.blanc:after {
    height: 24px;
    width: 24px;
    content: url(../images/white.svg)
}

.gris-clair:after {
    height: 24px;
    width: 24px;
    content: url(../images/gray.svg)
}

.gris-fonce:after {
    height: 24px;
    width: 24px;
    content: url(../images/dark-gray.svg)
}
*/

.ba-fiche > span.nav-link-text:before {
    height: 24px;
    width: 24px;
    position: relative;
    top: 5px;
    content: url(../images/fiche.svg)
}

.ba-fiche > span.nav-link-text {
    position: relative;
    top: -5px;
}

.ba-pj > span.nav-link-text:before {
    height: 24px;
    width: 24px;
    position: relative;
    top: 5px;
    content: url(../images/pj.svg)
}

.ba-pj > span.nav-link-text {
    position: relative;
    top: -5px;
}

.ba-discussion > span.nav-link-text:before {
    height: 24px;
    width: 24px;
    position: relative;
    top: 5px;
    content: url(../images/discussion.svg)
}

.ba-discussion > span.nav-link-text {
    position: relative;
    top: -5px;
}

.ba-historique > span.nav-link-text:before {
    height: 24px;
    width: 24px;
    position: relative;
    top: 5px;
    content: url(../images/historique.svg)
}

.ba-historique > span.nav-link-text {
    position: relative;
    top: -5px;
}

.precedent:after {
    width: 24px;
    height: 24px;
    content: url(../images/precedent.svg)
}

.suivant:after {
    width: 24px;
    height: 24px;
    content: url(../images/suivant.svg)
}

.tout-deplier:after {
    width: 24px;
    height: 24px;
    content: url(../images/tout-deplier.svg)
}

.tout-replier:after {
    width: 24px;
    height: 24px;
    content: url(../images/tout-replier.svg)
}

.pleine-page:after {
    width: 24px;
    height: 24px;
    content: url(../images/pleine-page.svg)
}

/*  Classes ajoutées  SICCRF */

/* Bidouille */

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 0 !important; /* pour récupérer tout l'espace */
}

/* Bidouille */

.item-titre {
    padding: 15px;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

/*[data-toggle="collapse"] .fa:before {
    content: "\f077";
    color: #000000;
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
    color: #000000;
}*/

.ody_pos_droite {
    float: right;
}

.ody_pos_gauche {
    float: left;
}

.ody_verif_ok {
    color: green;
    font-size: 0.8em; /* écrase BS 10px souhaité, pas 75%=12px */
    font-weight: normal; /* écrase BS pas en bold */
}