@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------	*/
/* FONT 												*/ 
/* ---------------------------------------------------	*/
@font-face {
font-family: 'Gotham Rounded Bold';
font-style: normal;
font-weight: normal;
src: local('Gotham Rounded Bold'), url('../fonts/Gotham Rounded Bold.woff') format('woff');
}
@font-face {
font-family: 'Gotham Rounded Light';
font-style: normal;
font-weight: normal;
src: local('Gotham Rounded Light'), url('../fonts/Gotham Rounded Light.woff') format('woff');
}
@font-face {
font-family: 'Gotham Rounded Light Italic';
font-style: normal;
font-weight: normal;
src: local('Gotham Rounded Light Italic'), url('../fonts/Gotham Rounded Light Italic.woff') format('woff');
}
@font-face {
font-family: 'Gotham Rounded Medium';
font-style: normal;
font-weight: normal;
src: local('Gotham Rounded Medium'), url('../fonts/Gotham-Rounded-Medium.woff') format('woff');
}
@font-face {
font-family: 'Gotham Rounded Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Gotham Rounded Medium Italic'), url('../fonts/Gotham Rounded Medium Italic.woff') format('woff');
}

:root{
	
	--color-text-base : #151517;
	
	--color-blue-base : #00a4b6;
	--color-blue : #0073b0;
	--color-blue-dark : #004d72;
	
	--color-green-base : #80ba27;
	--color-green : #008c46;
	--color-green-dark : #1b7672;
	
	--color-orange : #f3953f;
	--color-red : #d84b46;
	--color-brown : #6f454e;
	--color-grey : #f8f9fa;
}

html body {
  color: var(--color-text-base);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  text-rendering: optimizelegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Gotham Rounded Medium' !important;
  	font-optical-sizing: auto;
  	font-style: normal;
}
/* L'ID (#) est plus fort que la classe (.), donc ça écrasera AdminLTE naturellement */
#my-custom-login {
    background: url('../images/fond.png') no-repeat center center fixed;
    background-size: cover;
}

.text-bg-primary {
	color: #fff !important;
	background-color: var(--color-blue) !important;
}

.text-bg-success {
	color: #fff !important;
	background-color: var(--color-green-dark) !important;
}

.text-bg-danger {
	color: #fff !important;
	background-color: var(--color-red) !important;
}

.text-bg-warning {
	color: #fff !important;
	background-color: var(--color-orange) !important;
}

.bg-primary {
	background-color: var(--color-blue-base) !important;
}

.bg-success {
	background-color: var(--color-green-base) !important;
}

.bg-warning {
	background-color: var(--color-orange) !important;
}

.text-primary {
	color: var(--color-blue) !important;
}

.bg-blue {
	background-color: var(--color-blue) !important;
}

.border-primary {
	border-color: var(--color-blue-base) !important;
}

/* ************************************************************** */
/* MISE EN FORME DES BOUTONS ************************************ */
/* ************************************************************** */

/* Changer la couleur du bouton primaire d'AdminLTE */
.btn-primary {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue-dark) !important;
}
.btn-primary:hover {
    background-color: var(--color-blue-dark) !important;
    border-color: var(--color-blue) !important;
}

/* Changer la couleur du bouton primaire d'AdminLTE */
.btn-success {
    background-color: var(--color-green-base) !important;
    border-color: var(--color-blue-base) !important;
	color: var(--color-text-base) !important;
}
.btn-success:hover {
    background-color: var(--color-blue-base) !important;
    border-color: var(--color-blue) !important;
	color: #FFFFFF !important;
}

/* Changer la couleur du bouton primaire d'AdminLTE */
.btn-outline-primary {
	color : var(--color-blue);
  	border-color: var(--color-blue);
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible  {
	color : #FFFFFF;
	background-color: var(--color-blue);
 	border-color: var(--bs-btn-hover-border-color);	
}

/* Changer la bordure du haut de la carte de login */
.card-primary.card-outline {
    border-top: 3px solid var(--color-blue-base) !important;
}

/* Changer la bordure du haut de la carte de login */
.card-warning.card-outline {
    border-top: 3px solid var(--color-orange) !important;
}

.card-success.card-outline {
    border-top: 3px solid var(--color-green-base) !important;
}
.card-danger.card-outline {
    border-top: 3px solid var(--color-red) !important;
}

.btn-danger {
    background-color: var(--color-red) !important;
    border-color: var(--color-brown) !important;
}
.btn-danger:hover {
    background-color: var(--color-brown) !important;
    border-color: var(--color-res) !important;
}
/* Changer la couleur du bouton primaire d'AdminLTE */
.btn-outline-danger {
	color : var(--color-red);
  	border-color: var(--color-red);
}
.btn-outline-danger:hover, .btn-outline-danger:focus-visible  {
	color : #FFFFFF;
	background-color: var(--color-red);
 	border-color: var(--bs-btn-hover-border-color);	
}


a {
	color: var(--color-blue);
}
a:hover {
	color: var(--color-blue-dark);
	text-decoration: underline;
		
}

/* ************************************************************** */
/* GESTION DES FOCUS ******************************************** */
/* ************************************************************** */

/* 1. Pour tous les champs de formulaire (inputs, textarea, select) */
.form-control:focus {
    border-color: var(--color-blue) !important; /* Ou ton bleu clair */
    outline: 0;
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-blue), transparent 75%) !important;
}

/* 2. Pour tous les boutons */
.btn:focus, .btn.focus, a:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-blue), transparent 60%) !important;
}

/* 3. Pour les cases à cocher (icheck) si tu les utilises */
.icheck-primary > input:first-child:focus + label::before {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-blue), transparent 75%);
}

/* ************************************************************** */
/* MISE EN FORME DES FORMULAIRES ******************************** */
/* ************************************************************** */

label {
	font-weight: 700;
}

.btn-input-group {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

/* ************************************************************** */
/* MISE EN FORME MODAL ****************************************** */
/* ************************************************************** */
.modal-header-primary{
	background-color: var(--color-blue-base);
}

/* Ciblage du bouton fermer uniquement quand il est dans ton header bleu */
.modal-header-primary .btn-close:focus {
    outline: 0 !important;
    /* On utilise ta variable de couleur ou color-mix pour le halo */
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-blue-dark), transparent 20%) !important;
    
    /* Optionnel : changer l'opacité au focus pour qu'il soit plus visible */
    opacity: 1;
}

/* ************************************************************** */
/* MISE EN FORME SIDEBAR ET NAVBAR ****************************** */
/* ************************************************************** */

.img-size-30 {
  width: 30px;
}
.bg-body-secondary{
	
	/*background : linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), linear-gradient(180deg, var(--color-blue), var(--color-green)) !important;*/
	background : linear-gradient(180deg, var(--color-blue), var(--color-green)) !important;

}
.brand-image {
	max-height: 3.5rem;
}
.sidebar-brand {
	border-bottom: none;
}
/* Ciblage spécifique à la structure AdminLTE 4 */
.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 5px; /* Espace harmonieux entre icône et texte */
    color: rgba(255, 255, 255, 1) !important; /* Blanc cassé pour le contraste */
    text-decoration: none !important;
    padding: 10px 15px;
    border-radius: 0px; /* ancien 8px */
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Sécurité pour le dégradé */
}

/* On retire la marge par défaut de l'icône AdminLTE pour utiliser le gap */
.app-sidebar .nav-link > .nav-icon {
    margin-right: 0 !important;
}

/* État Hover (Survol) et Focus */
.app-sidebar .nav-link:hover, 
.app-sidebar .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* État Actif (La page où l'on se trouve) */
.app-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Accessibilité Clavier */
.app-sidebar .nav-link:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -2px;
}
.app-sidebar .nav-link:hover {
    border-left: 3px solid #ffffff;
     /* On réduit un peu le padding pour compenser l'épaisseur de la bordure */
	padding-left: 3px;
}
@media (max-width: 768px) {
    /* Si tu veux masquer le logo et afficher un titre à la place sur petit écran */
    .brand-image {
        display: none; 
    }
    .sidebar-brand::after {
        content: "M-Tutorat"; /* Texte qui remplace l'image */
        color: white;
        font-weight: bold;
    }
}

.btn-sidebar, .btn-sidebar.active  {
	color: var(--color-blue) !important;
}
.btn-sidebar:hover  {
	color: var(--color-green) !important;
}
/* ************************************************************** */
/* MISE EN FORME TABLEAU DATAT TABLE **************************** */
/* ************************************************************** */
.btn-export {
	margin-bottom: 15px;
}
table.dataTable {
    width: 100% !important;
}
.text-expired {
    color: #dc3545 !important;
    font-weight: bold;
}
/* Pour s'assurer que le menu ColVis est au-dessus de tout */
.dt-button-collection {
    z-index: 2000 !important;
}

/* Pour que les boutons du menu ColVis ressemblent à des éléments de liste propres */
div.dt-button-collection button.dt-button.active {
    background-color: #007bff !important;
    color: white !important;
}

/* ************************************************************** */
/* MISE EN FORME INFO ET SMALL BOX ****************************** */
/* ************************************************************** */
.small-box h4, .small-box h2  {
    min-height: 3.5rem; /* Ajuste selon la longueur max de tes titres (ex: 2 ou 3 lignes) */
    display: flex;
    align-items: center; /* Centre le titre verticalement s'il est court */
	font-size: 1.2rem !important;
}
.text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.small-box > .small-box-footer{
	border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important
	
} 

.small-box > .small-box-footer:hover {
	opacity: 0.93 !important;
}

/* On estompe seulement le contenu texte et le picto, pas la barre ni l'alerte */
.is-locked .inner > *:not(.progress):not(.alert):not(small) {
    opacity: 0.5;
}

/* On peut aussi griser le fond de la carte pour bien marquer le blocage */
.is-locked .card {
    background-color: #f8f9fa; 
}

/* ************************************************************** */
/* MISE EN FORME FIL ARIANE (BREADCRUMB) ************************ */
/* ************************************************************** */
/* Style pour le fil d'ariane sur PC */
.breadcrumb-item {
    max-width: 200px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-item.active {
    max-width: 350px;
    font-weight: bold;
}

.breadcrumb-item a:hover {
    text-decoration: underline !important;
}

/* ************************************************************** */
/* MISE EN FORME QUIZ ******************************************* */
/* ************************************************************** */
/* Quand le radio (caché) est coché, on change le style du conteneur parent */


.hover-shadow:hover {
    background-color: #f8f9fa;
    transition: 0.2s;
	border: var(--color-blue) 1px solid !important;
}


/* Désactive le focus-within par défaut ou limite-le */
.quiz-option-container:focus-within {
    outline: none;
    box-shadow: none;
}



/* État sélectionné (Souris ou Clavier) */
.quiz-option-container:has(input:checked) {
    background-color: #e7f1ff;
    border-color: var(--color-blue) !important;
}

/* État Focus Clavier uniquement */
.quiz-option-container:has(input:focus-visible) {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* On nettoie le style du label pour ne pas surcharger */
.form-check-input:checked + .form-check-label {
    background-color: transparent; /* Le fond est déjà géré par le parent :has */
    border: none;
}

/* Style pour le champ de précision imbriqué */
.extra-container {
    margin-left: 2.5rem; /* Aligné avec le texte de l'option */
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-left: 3px solid #0073b0; /* Rappel de la couleur primaire */
    background-color: #f8f9fa;
    border-radius: 0 5px 5px 0;
}

.extra-container input {
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* ************************************************************** */
/* SWEET ALERT 2 ************************************************ */
/* ************************************************************** */
 /* Change la couleur de la barre de progression du timer */
  .swal2-timer-progress-bar {
    background: var(--color-blue-base) !important; /* Ou une couleur hexadécimale comme #0073b0 */
  }
/* ************************************************************** */
/* BLOC NOTES OFFCANCAS ***************************************** */
/* ************************************************************** */

/* Style de la languette Bloc-notes */
#btn-offcanvas-notes {
    position: fixed;
    /* On le place à 40% du haut pour qu'il soit sous le pouce sur mobile 
       et loin des boutons de navigation en bas */
    bottom: 25%; 
    right: 0;
    /*bottom: auto; /* On annule le bottom: 80px actuel */
    
    width: 45px;
    height: 50px;
    
    /* On change l'arrondi : droit sur le bord de l'écran, arrondi à gauche */
    border-radius: 10px 0 0 10px !important;
    
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    
    /* Petite ombre portée vers la gauche uniquement */
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: width 0.2s ease, background-color 0.2s;
}

#btn-offcanvas-message {
    position: fixed;
    /* On le place à 40% du haut pour qu'il soit sous le pouce sur mobile 
       et loin des boutons de navigation en bas */
    bottom: 18%; 
    right: 0;
    /*bottom: auto; /* On annule le bottom: 80px actuel */
    
    width: 45px;
    height: 50px;
    
    /* On change l'arrondi : droit sur le bord de l'écran, arrondi à gauche */
    border-radius: 10px 0 0 10px !important;
    
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    
    /* Petite ombre portée vers la gauche uniquement */
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: width 0.2s ease, background-color 0.2s;
}

/* Effet au survol sur Desktop uniquement */
@media (min-width: 992px) {
    #btn-offcanvas-notes:hover, #btn-offcanvas-message:hover  {
        width: 55px; /* S'agrandit légèrement pour inviter au clic */
        background-color: #005a8d; /* Une nuance plus sombre du bleu */
    }
}

/* Ajustement pour très petits écrans si besoin */
@media (max-width: 576px) {
    #btn-offcanvas-notes,  {
        width: 40px;
        height: 45px;
        top: 35%; /* On le remonte un peu plus pour éviter le clavier virtuel */
    }
}


#positionnement-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#offcanvas-chat-badge {
    position: absolute !important;
    /* On le place sur le coin supérieur gauche */
    top: -6px;
    left: -8px; 
    
    /* On annule les effets Bootstrap qui pourraient interférer */
    transform: none !important; 
    
    /* Ajustement de la taille du texte à l'intérieur */
    font-size: 0.70rem;
    padding: 4px 7px;
    z-index: 1045;
    
    /* Optionnel : petite animation discrète à l'apparition */
    animation: popBadge 0.3s ease-out;
}

@keyframes popBadge {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ************************************************************** */
/* MIS ENE FORME DES ACCORDEONS ********************************* */
/* ************************************************************** */

/* Animation fluide de l'icône des accordéons */
    .toggle-icon {
        transition: transform 0.3s ease;
    }
    .card-header[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }