/* ============================================================
Personnalisation CSS GLPI - Support Center KFC Sénégal
Structure lisible : fond clair, header noir, rouge KFC en accent
A coller (en remplacement complet) dans :
Configuration > Générale > Personnalisation > CSS personnalisé
============================================================ */

:root {
/* Couleur principale Tabler/GLPI : les composants natifs passent au rouge KFC */
--tblr-primary: #f5002b;
--tblr-primary-rgb: 245, 0, 43;
--tblr-secondary: #222222;
--tblr-secondary-rgb: 34, 34, 34;

/* Couleurs KFC Sénégal */
--kfc-accent: #f5002b;          /* Rouge KFC : accents, bandeaux, focus */
--kfc-green: #2e9e4f;           /* Vert : succès uniquement */
--kfc-red: #f5002b;
--kfc-slate: #6b6b6b;           /* Gris neutre : icônes, suivis */

/* Déclinaisons pour la lisibilité */
--kfc-ink: #1c1c1c;             /* Texte */
--kfc-dark: #2a2a2a;            /* Fonds sombres : bandeau, en-têtes, avatar */
--kfc-sidebar: #1f1f1f;         /* Menu latéral */
--kfc-slate-dark: #3a3a3a;
--kfc-green-dark: #1f7a3a;
--kfc-red-dark: #c00022;        /* Rouge foncé : liens, texte rouge sur blanc */
--kfc-accent-pale: #ffe6ea;     /* Fond de l'élément actif */

/* Neutres */
--kfc-bg: #f4f5f6;
--kfc-border: #dcdcdc;
}

/* --- Barre du haut : sombre, liseré jaune --- */
/* Barre du haut : filet rouge en haut, bande jaune en bas, séparés par le gris.
Le vert est porté par les onglets actifs : les trois couleurs sont
présentes sur chaque page sans être empilées */
header.navbar {
background-color: var(--kfc-dark) !important;
border-top: 4px solid var(--kfc-red) !important;
border-bottom: 6px solid var(--kfc-accent) !important;
box-shadow: none !important;
}

/* Texte blanc uniquement dans la barre du haut (pas dans le menu latéral,
qui porte aussi la classe .navbar dans GLPI 11) */
header.navbar a,
header.navbar .nav-link,
header.navbar .navbar-brand,
header.navbar .btn-ghost-secondary,
header.navbar .ti {
color: #ffffff !important;
}

/* Menus déroulants du header (profil, entité...) : fond blanc, texte noir */
header.navbar .dropdown-menu a,
header.navbar .dropdown-menu .dropdown-item,
header.navbar .dropdown-menu .ti {
color: var(--kfc-ink) !important;
}

header.navbar input {
background-color: #ffffff !important;
color: var(--kfc-ink) !important;
}

/* --- Logos KFC Sénégal Support Center (charte KFC 2026 : Colonel de profil, rouge #F5002B) ---
Version négative (texte blanc) pour les fonds sombres, sans fond blanc.
Fichiers du plugin (public/pics) : rien dans le cœur de GLPI, résistent aux mises à jour */
.page .glpi-logo {
background: url("../pics/logo-negatif.png") center / contain no-repeat !important;
width: 176px !important;
height: 59px !important;
}

/* Menu latéral réduit : emblème du Colonel seul */
body.navbar-collapsed .navbar-brand .glpi-logo {
background: url("../pics/colonel-emblem.svg") center / contain no-repeat !important;
width: 42px !important;
height: 42px !important;
}

/* Logo dans la barre sombre (menu horizontal, portail self-service) : sans fond */
header.navbar .navbar-brand {
background-color: transparent !important;
}

/* --- Menu latéral --- */
#menu,
.sidebar {
background-color: #ffffff !important;
border-right: 1px solid var(--kfc-border) !important;
}

#menu a,
aside.sidebar a,
aside.sidebar .nav-link,
aside.sidebar .dropdown-item,
aside.sidebar .ti {
color: var(--kfc-ink) !important;
}

#menu .active > a,
.sidebar .active > a {
background-color: var(--kfc-accent-pale) !important;
color: var(--kfc-ink) !important;
font-weight: 600;
border-left: 4px solid var(--kfc-accent) !important;
}

#menu a:hover,
.sidebar a:hover {
background-color: var(--kfc-bg) !important;
}

/* --- Zone du logo en haut à gauche ---
Bandeau gris aligné sur la barre du haut (filet rouge en haut, bande jaune en bas) */
aside.sidebar .navbar-brand {
display: flex !important;
align-items: center;
justify-content: center;
width: calc(100% + 1.5rem);
min-height: 56px;
margin: 0 -0.75rem 1rem;
padding: 0.5rem 1rem;
background-color: var(--kfc-dark) !important;
border-top: 4px solid var(--kfc-red);
border-bottom: 6px solid var(--kfc-accent);
box-shadow: none;
}

/* --- Onglets : onglet actif souligné en vert --- */
.nav-tabs .nav-link.active {
border-bottom: 3px solid var(--kfc-green) !important;
font-weight: 600;
}

.nav-tabs .nav-link:hover:not(.active) {
border-bottom: 3px solid var(--kfc-border) !important;
}

/* --- Boutons --- */
.btn-primary,
.btn.submit {
background-color: var(--kfc-slate) !important;
border-color: var(--kfc-slate) !important;
color: #ffffff !important;
}

.btn-primary:hover,
.btn.submit:hover {
background-color: var(--kfc-slate-dark) !important;
border-color: var(--kfc-slate-dark) !important;
}

.btn-secondary {
background-color: #ffffff !important;
border-color: var(--kfc-border) !important;
color: var(--kfc-ink) !important;
}

.btn-success {
background-color: var(--kfc-green-dark) !important;
border-color: var(--kfc-green-dark) !important;
color: #ffffff !important;
}

.btn-danger {
background-color: var(--kfc-red-dark) !important;
border-color: var(--kfc-red-dark) !important;
color: #ffffff !important;
}

/* --- Liens --- */
a {
color: var(--kfc-slate-dark);
}

a:hover {
color: var(--kfc-ink);
}

/* --- Bandeau titre / fil d'ariane --- */
.navigationheader,
#c_ajaxplot,
.breadcrumb {
background-color: var(--kfc-bg) !important;
color: var(--kfc-ink) !important;
border-left: 3px solid var(--kfc-accent) !important;
}

/* Fil d'ariane affiché dans la barre du haut : fond transparent, texte blanc */
header.navbar .breadcrumb,
header.navbar .navigationheader {
background-color: transparent !important;
border-left: 3px solid var(--kfc-accent) !important;
padding-left: 0.5rem;
}

header.navbar .breadcrumb a,
header.navbar .breadcrumb-item,
header.navbar .breadcrumb-item::before {
color: #ffffff !important;
}

/* --- Tableaux --- */
.card-header,
th {
background-color: var(--kfc-dark) !important;
color: #ffffff !important;
}

tbody tr:nth-child(even) {
background-color: var(--kfc-bg) !important;
}

tbody tr:hover {
background-color: var(--kfc-accent-pale) !important;
}

/* --- Avatar utilisateur --- */
/* Uniquement les avatars à initiales : la photo de profil (style inline) reste intacte */
.avatar:not([style*="background-image"]) {
background-color: var(--kfc-dark) !important;
color: var(--kfc-accent) !important;
}

/* --- Badges : jaune avec texte noir (contraste élevé) --- */
.badge {
color: #ffffff !important;
}

.badge.bg-warning {
background-color: var(--kfc-accent) !important;
color: var(--kfc-ink) !important;
}

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

.badge.bg-danger {
background-color: var(--kfc-red-dark) !important;
}

/* --- Page de connexion (GLPI 11 : body.welcome-anonymous) ---
Fond gris clair ; les emblèmes KFC 3D animés sont définis
à la fin du fichier */
body.welcome-anonymous {
background-color: var(--kfc-bg) !important;
overflow-x: hidden;
}

body.welcome-anonymous .page-anonymous {
background: transparent !important;
}

body.welcome-anonymous .card {
background-color: #ffffff !important;
border: 1px solid var(--kfc-border) !important;
border-top: 6px solid var(--kfc-accent) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Logo KFC Sénégal Support Center en couleurs sur la page de connexion */
body.welcome-anonymous .glpi-logo {
content: url("../pics/logo-positif.png") !important;
width: 320px !important;
height: auto !important;
max-width: 80vw;
}

/* Titre "Connexion à votre compte" : encadré sombre, texte blanc */
body.welcome-anonymous .card-header {
display: flex !important;
justify-content: center;
padding: 0.9rem 1rem !important;
background-color: var(--kfc-dark) !important;
border: none !important;
border-radius: 6px !important;
}

body.welcome-anonymous .card-header h2 {
margin: 0 !important;
color: #ffffff !important;
}

/* Carte plus compacte, centrée sur le fond */
body.welcome-anonymous .container-tight {
max-width: 36rem !important;
}

body.welcome-anonymous .btn-primary {
background-color: var(--kfc-dark) !important;
border-color: var(--kfc-dark) !important;
color: var(--kfc-accent) !important;
}

body.welcome-anonymous .btn-primary:hover {
background-color: var(--kfc-slate-dark) !important;
border-color: var(--kfc-slate-dark) !important;
}

body.welcome-anonymous a {
color: var(--kfc-slate-dark) !important;
}

/* ============================================================
Accueil helpdesk : illustrations gauche/droite
GLPI 11 les masque sous 1600px, on les réaffiche
============================================================ */

/* Portables, tablettes paysage */
@media (min-width: 992px) and (max-width: 1600px) {
.search-banner .scene {
display: flex !important;
width: calc((100% - 760px) / 2);
height: 80%;
}
.search-banner .scene img,
.search-banner .scene svg {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
object-position: bottom;
}
}

/* Mobiles, tablettes portrait */
@media (max-width: 991.98px) {
.helpdesk-home-container {
height: auto;
min-height: 100vh;
}
.helpdesk-home-container h1 {
font-size: 2rem;
}
.helpdesk-home-container .search-bar-container {
padding: 1.5rem 0;
}
.search-banner {
flex-wrap: wrap;
justify-content: center;
}
.search-banner .search-banner-content {
order: 1;
width: 100%;
padding-top: 2.5rem;
padding-bottom: 0;
}
.search-banner .scene {
display: flex !important;
position: static;
order: 2;
width: 50%;
max-width: 260px;
height: auto;
justify-content: center;
padding: 0 .5rem;
}
.search-banner .scene img,
.search-banner .scene svg {
width: 100%;
height: auto;
max-height: 180px;
object-fit: contain;
}
}

/* ============================================================
Effets 3D modernes : dégradés doux, reflets, relief
(à la fin du fichier pour passer après les couleurs de base)
============================================================ */
:root {
--gloss-slate: linear-gradient(180deg, #404040 0%, #2a2a2a 52%, #1a1a1a 100%);
--gloss-accent: linear-gradient(180deg, #ff4d6a 0%, #f5002b 48%, #c00022 100%);
--gloss-red: linear-gradient(180deg, #ff4d6a 0%, #f5002b 48%, #c00022 100%);
--gloss-green: linear-gradient(180deg, #5cc47a 0%, #2e9e4f 50%, #1f7a3a 100%);
--gloss-green-btn: linear-gradient(180deg, #3fae5f 0%, #1f7a3a 55%, #17602d 100%);
--gloss-red-btn: linear-gradient(180deg, #d9392f 0%, #b91e15 55%, #9a1911 100%);
--relief: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 5px rgba(26, 28, 27, 0.18);
--relief-hover: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 14px rgba(26, 28, 27, 0.22);
}

/* Barre du haut et bandeau du logo : gris bombé, filet rouge et bande jaune brillants */
header.navbar,
aside.sidebar .navbar-brand {
border-top: 4px solid transparent !important;
border-bottom: 6px solid transparent !important;
background:
var(--gloss-red) top / 100% 4px no-repeat border-box,
var(--gloss-accent) bottom / 100% 6px no-repeat border-box,
var(--gloss-slate) border-box !important;
box-shadow: 0 4px 12px rgba(26, 28, 27, 0.18) !important;
}

/* Boutons : dégradé, reflet en haut, ombre portée, léger soulèvement au survol */
.btn-primary,
.btn.submit,
.btn-success,
.btn-danger,
body.welcome-anonymous .btn-primary {
border-radius: 7px !important;
box-shadow: var(--relief) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.btn-primary,
.btn.submit,
body.welcome-anonymous .btn-primary {
background-image: var(--gloss-slate) !important;
}

.btn-success { background-image: var(--gloss-green-btn) !important; }
.btn-danger { background-image: var(--gloss-red-btn) !important; }

.btn-primary:hover,
.btn.submit:hover,
.btn-success:hover,
.btn-danger:hover,
body.welcome-anonymous .btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--relief-hover) !important;
filter: brightness(1.06);
}

.btn-primary:active,
.btn.submit:active,
.btn-success:active,
.btn-danger:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(26, 28, 27, 0.25) !important;
}

/* Titre "Connexion à votre compte" : encadré bombé */
body.welcome-anonymous .card-header {
background-image: var(--gloss-slate) !important;
box-shadow: var(--relief) !important;
border-radius: 8px !important;
}

body.welcome-anonymous .card-header h2 {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* En-têtes de tableaux et de cartes */
.card-header,
th {
background-image: var(--gloss-slate) !important;
}

/* Cartes et tuiles : coins adoucis, ombre en couches, relief au survol */
.card {
border-radius: 10px !important;
box-shadow: 0 1px 2px rgba(26, 28, 27, 0.06), 0 4px 14px rgba(26, 28, 27, 0.07) !important;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.helpdesk-home-container .card:hover,
.grid-stack-item .card:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(26, 28, 27, 0.08), 0 10px 24px rgba(26, 28, 27, 0.12) !important;
}

/* Onglet actif : soulignement vert brillant */
.nav-tabs .nav-link.active {
border-bottom-color: transparent !important;
background-image: var(--gloss-green) !important;
background-size: 100% 3px !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
}

/* Badges : léger relief */
.badge {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(26, 28, 27, 0.15);
}

.badge.bg-warning { background-image: var(--gloss-accent) !important; }
.badge.bg-success { background-image: var(--gloss-green-btn) !important; }
.badge.bg-danger { background-image: var(--gloss-red-btn) !important; }

/* Avatar à initiales : bombé (la photo de profil n'est pas touchée) */
.avatar:not([style*="background-image"]) {
background-image: var(--gloss-slate) !important;
box-shadow: var(--relief);
}

/* Élément actif du menu latéral : barre jaune brillante */
#menu .active > a,
.sidebar .active > a {
border-left-color: transparent !important;
background-image: var(--gloss-accent) !important;
background-size: 4px 100% !important;
background-repeat: no-repeat !important;
background-position: left !important;
}

/* Champs de saisie : léger creux, halo jaune au focus */
.form-control:focus,
.form-select:focus {
border-color: #c00022 !important;
box-shadow: 0 0 0 3px rgba(245, 0, 43, 0.35), inset 0 1px 2px rgba(26, 28, 27, 0.08) !important;
}

/* Carte de connexion : bord jaune brillant */
body.welcome-anonymous .card {
border-top: 6px solid transparent !important;
background:
var(--gloss-accent) top / 100% 6px no-repeat border-box,
#ffffff padding-box !important;
box-shadow: 0 2px 4px rgba(26, 28, 27, 0.06), 0 14px 40px rgba(0, 0, 0, 0.18) !important;
}

/* ============================================================
Tous les boutons comme "Se connecter" : gris bombé, texte jaune
(les boutons succès / danger gardent leur vert / rouge avec le même relief ;
les boutons-icônes des barres d'outils ne sont pas concernés)
============================================================ */
.btn-primary,
.btn.submit,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
background-color: var(--kfc-dark) !important;
background-image: var(--gloss-slate) !important;
border-color: #0a0a0a !important;
color: var(--kfc-accent) !important;
font-weight: 600;
border-radius: 7px !important;
box-shadow: var(--relief) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.btn-primary .ti,
.btn.submit .ti,
.btn-secondary .ti,
.btn-outline-primary .ti,
.btn-outline-secondary .ti {
color: var(--kfc-accent) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
transform: translateY(-1px);
box-shadow: var(--relief-hover) !important;
filter: brightness(1.06);
color: var(--kfc-accent) !important;
}

.btn-secondary:active,
.btn-outline-primary:active,
.btn-outline-secondary:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(26, 28, 27, 0.25) !important;
}

.btn:disabled,
.btn.disabled {
filter: grayscale(0.4) opacity(0.6);
transform: none !important;
}

/* ============================================================
Page de connexion : emblèmes KFC en 3D, qui flottent doucement
et se soulèvent quand la souris passe sur le fond
============================================================ */
body.welcome-anonymous::before,
body.welcome-anonymous::after {
content: none;
position: fixed;
z-index: 0;
pointer-events: none;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNDE0Ij4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iYyI+PHBhdGggZD0iTTQwIDExMCBMMjYwIDExMCBMMjMwIDM5NSBRMTUwIDQwOSA3MCAzOTUgWiIvPjwvY2xpcFBhdGg+CjxsaW5lYXJHcmFkaWVudCBpZD0ic2giIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9Ii4zMiIvPjxzdG9wIG9mZnNldD0iLjIyIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9Ii4wIi8+CjxzdG9wIG9mZnNldD0iLjMiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjQ1Ii8+PHN0b3Agb2Zmc2V0PSIuMzgiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8c3RvcCBvZmZzZXQ9Ii43NSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIuMDgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iLjM4Ii8+PC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJyaW0iIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmY1YTc0Ii8+PHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiNFNDAwMkIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5ZTAwMWQiLz48L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InJpbXNoIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCI+CjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIuMyIvPjxzdG9wIG9mZnNldD0iLjMiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjM1Ii8+CjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iLjM1Ii8+PC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgtMTAgMTUwIDI1MCkiPgo8ZyBjbGlwLXBhdGg9InVybCgjYykiPjxwYXRoIGZpbGw9IiNFNDAwMkIiIGQ9Ik00MC4wIDExMCBMNzEuNCAxMTAgTDkyLjkgMzk1IEw3MC4wIDM5NSBaIi8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTcxLjQgMTEwIEwxMDIuOSAxMTAgTDExNS43IDM5NSBMOTIuOSAzOTUgWiIvPjxwYXRoIGZpbGw9IiNFNDAwMkIiIGQ9Ik0xMDIuOSAxMTAgTDEzNC4zIDExMCBMMTM4LjYgMzk1IEwxMTUuNyAzOTUgWiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMzQuMyAxMTAgTDE2NS43IDExMCBMMTYxLjQgMzk1IEwxMzguNiAzOTUgWiIvPjxwYXRoIGZpbGw9IiNFNDAwMkIiIGQ9Ik0xNjUuNyAxMTAgTDE5Ny4xIDExMCBMMTg0LjMgMzk1IEwxNjEuNCAzOTUgWiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xOTcuMSAxMTAgTDIyOC42IDExMCBMMjA3LjEgMzk1IEwxODQuMyAzOTUgWiIvPjxwYXRoIGZpbGw9IiNFNDAwMkIiIGQ9Ik0yMjguNiAxMTAgTDI2MC4wIDExMCBMMjMwLjAgMzk1IEwyMDcuMSAzOTUgWiIvPjxwYXRoIGQ9Ik00MCAxMTAgTDI2MCAxMTAgTDIzMCAzOTUgUTE1MCA0MDkgNzAgMzk1IFoiIGZpbGw9InVybCgjc2gpIi8+PC9nPgo8cmVjdCB4PSIyOCIgeT0iOTIiIHdpZHRoPSIyNDQiIGhlaWdodD0iMjYiIHJ4PSIxMyIgZmlsbD0idXJsKCNyaW0pIi8+CjxyZWN0IHg9IjI4IiB5PSI5MiIgd2lkdGg9IjI0NCIgaGVpZ2h0PSIyNiIgcng9IjEzIiBmaWxsPSJ1cmwoI3JpbXNoKSIvPgo8cmVjdCB4PSI0NCIgeT0iOTYiIHdpZHRoPSIyMTIiIGhlaWdodD0iNCIgcng9IjIiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjQ1Ii8+CjwvZz48L3N2Zz4=") center / contain no-repeat;
transition: scale 0.6s cubic-bezier(.2,.8,.2,1), filter 0.6s ease;
will-change: translate, scale;
}

/* Grand emblème à gauche */
body.welcome-anonymous::before {
width: 86vh;
height: 119vh;
left: -27vh;
top: 11vh;
filter: drop-shadow(0 14px 22px rgba(26, 28, 27, 0.16));
animation: kfc-float-a 7s ease-in-out infinite alternate;
}

/* Petit emblème en haut à droite */
body.welcome-anonymous::after {
width: 42vh;
height: 58vh;
right: -7vh;
top: -20vh;
opacity: 0.7;
filter: drop-shadow(0 10px 16px rgba(26, 28, 27, 0.14));
animation: kfc-float-b 9s ease-in-out infinite alternate;
}

/* Le formulaire reste au-dessus des emblèmes */
body.welcome-anonymous .page-anonymous {
position: relative;
z-index: 1;
}

/* Souris sur le fond (pas sur la carte) : les emblèmes se soulèvent */
body.welcome-anonymous:hover:not(:has(.card:hover))::before {
scale: 1.035;
filter: drop-shadow(0 26px 34px rgba(26, 28, 27, 0.24)) brightness(1.04);
}

body.welcome-anonymous:hover:not(:has(.card:hover))::after {
scale: 1.06;
filter: drop-shadow(0 20px 26px rgba(26, 28, 27, 0.2)) brightness(1.04);
}

@keyframes kfc-float-a {
from { translate: 0 0; rotate: 0deg; }
to   { translate: 0 -16px; rotate: -1deg; }
}

@keyframes kfc-float-b {
from { translate: 0 0; rotate: 0deg; }
to   { translate: -8px 10px; rotate: 1.5deg; }
}

/* Téléphones : emblème de gauche plus discret pour ne pas gêner le formulaire */
@media (max-width: 767.98px) {
body.welcome-anonymous::before { opacity: 0.45; left: -45vh; }
body.welcome-anonymous::after { opacity: 0.4; }
}

/* Utilisateurs ayant désactivé les animations dans leur système */
@media (prefers-reduced-motion: reduce) {
body.welcome-anonymous::before,
body.welcome-anonymous::after {
animation: none;
transition: none;
}
}

/* ============================================================
FINITIONS PREMIUM
Animations d'entrée, reflets, micro-interactions, détails
============================================================ */

/* --- Détails transverses --- */
::selection {
background: rgba(245, 0, 43, 0.55);
color: var(--kfc-ink);
}

:focus-visible {
outline: 3px solid var(--kfc-accent) !important;
outline-offset: 2px;
}

/* Barres de défilement aux couleurs KFC */
* {
scrollbar-width: thin;
scrollbar-color: #b5b5b5 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #555555, #1c1c1c);
background-clip: padding-box;
}

/* --- Barre du haut : champ de recherche en pilule --- */
header.navbar input[type="text"],
header.navbar input[type="search"] {
border-radius: 999px !important;
border: 1px solid transparent !important;
box-shadow: inset 0 1px 3px rgba(26, 28, 27, 0.15) !important;
transition: box-shadow 0.2s ease;
}
header.navbar input[type="text"]:focus,
header.navbar input[type="search"]:focus {
box-shadow: 0 0 0 3px rgba(245, 0, 43, 0.6), inset 0 1px 3px rgba(26, 28, 27, 0.15) !important;
}

/* --- Menu latéral : glissement au survol, icônes qui s'allument --- */
aside.sidebar .nav-link {
transition: padding-left 0.2s ease, background-color 0.2s ease !important;
border-radius: 0 8px 8px 0;
}
aside.sidebar .nav-link:hover {
padding-left: 1.35rem !important;
}
aside.sidebar .nav-link .ti {
color: var(--kfc-slate) !important;
transition: color 0.2s ease, transform 0.2s ease;
}
aside.sidebar .nav-link:hover .ti,
aside.sidebar .active > .nav-link .ti {
color: var(--kfc-ink) !important;
transform: scale(1.12);
}

/* --- Tableau de bord : tuiles avec reflet et entrée en cascade --- */
.grid-stack-item .card {
position: relative;
overflow: hidden;
border-radius: 12px !important;
animation: kfc-rise 0.55s cubic-bezier(.2, .8, .2, 1) backwards;
}
.grid-stack-item .card::before {
content: "";
position: absolute;
inset: 0 0 55% 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
pointer-events: none;
}
.grid-stack-item:nth-child(2) .card { animation-delay: 0.04s; }
.grid-stack-item:nth-child(3) .card { animation-delay: 0.08s; }
.grid-stack-item:nth-child(4) .card { animation-delay: 0.12s; }
.grid-stack-item:nth-child(5) .card { animation-delay: 0.16s; }
.grid-stack-item:nth-child(6) .card { animation-delay: 0.20s; }
.grid-stack-item:nth-child(7) .card { animation-delay: 0.24s; }
.grid-stack-item:nth-child(8) .card { animation-delay: 0.28s; }
.grid-stack-item:nth-child(n+9) .card { animation-delay: 0.32s; }

/* --- Accueil helpdesk --- */
/* Bandeau de recherche : dégradé clair et fines diagonales à l'angle du logo */
.helpdesk-home-container .search-banner {
background:
repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 22px),
linear-gradient(180deg, #ffffff 0%, var(--kfc-bg) 100%) !important;
}
.helpdesk-home-container h1 {
color: var(--kfc-ink) !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
animation: kfc-rise 0.6s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Grand champ de recherche en pilule, halo jaune au focus */
.helpdesk-home-container .home-search {
border-radius: 999px !important;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
border: 1px solid var(--kfc-border) !important;
box-shadow: 0 6px 20px rgba(26, 28, 27, 0.08) !important;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
animation: kfc-rise 0.6s 0.08s cubic-bezier(.2, .8, .2, 1) backwards;
}
.helpdesk-home-container .home-search:focus {
border-color: #c00022 !important;
box-shadow: 0 0 0 4px rgba(245, 0, 43, 0.4), 0 10px 28px rgba(26, 28, 27, 0.12) !important;
}

/* Illustrations gauche/droite : flottement léger */
.helpdesk-home-container .scene img,
.helpdesk-home-container .scene svg {
animation: kfc-float-a 8s ease-in-out infinite alternate;
}
.helpdesk-home-container .scene-right img,
.helpdesk-home-container .scene-right svg {
animation-duration: 10s;
}

/* Tuiles : entrée en cascade, illustration qui se soulève,
barre jaune qui se déploie sous la tuile au survol */
.tiles-banner .card {
position: relative;
overflow: hidden;
border-radius: 14px !important;
animation: kfc-rise 0.55s cubic-bezier(.2, .8, .2, 1) backwards;
}
.tiles-banner .col-12:nth-child(2) .card { animation-delay: 0.06s; }
.tiles-banner .col-12:nth-child(3) .card { animation-delay: 0.12s; }
.tiles-banner .col-12:nth-child(4) .card { animation-delay: 0.18s; }
.tiles-banner .col-12:nth-child(5) .card { animation-delay: 0.24s; }
.tiles-banner .col-12:nth-child(n+6) .card { animation-delay: 0.30s; }

.tiles-banner .card::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 0;
background: var(--gloss-accent);
transition: width 0.35s cubic-bezier(.2, .8, .2, 1);
}
.tiles-banner .card:hover::after {
width: 100%;
}
.tiles-banner .card .aspect-ratio-1 {
transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
}
.tiles-banner .card:hover .aspect-ratio-1 {
transform: translateY(-4px) scale(1.06);
}
.tiles-banner .card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(26, 28, 27, 0.06), 0 16px 32px rgba(26, 28, 27, 0.12) !important;
}
.tiles-banner .card-title {
color: var(--kfc-ink) !important;
font-weight: 700 !important;
}

/* --- Tickets : fil de discussion lisible au premier coup d'œil --- */
.timeline-item .timeline-content {
border-radius: 12px !important;
border-left: 5px solid var(--kfc-border) !important;
}
.timeline-item.ITILFollowup .timeline-content { border-left-color: var(--kfc-slate) !important; }
.timeline-item.ITILTask .timeline-content { border-left-color: var(--kfc-accent) !important; }
.timeline-item.ITILSolution .timeline-content { border-left-color: var(--kfc-green) !important; }
.timeline-item.Document_Item .timeline-content { border-left-color: #b5b5b5 !important; }

/* --- Tableaux de listes : indicateur jaune sur la ligne survolée --- */
table tbody tr {
transition: background-color 0.15s ease;
}
table tbody tr:hover > td:first-child {
box-shadow: inset 4px 0 0 var(--kfc-accent);
}

/* --- Alertes et notifications : coins adoucis, accent coloré --- */
.alert,
.toast {
border-radius: 10px !important;
border-left-width: 5px !important;
box-shadow: 0 6px 18px rgba(26, 28, 27, 0.1) !important;
}
.alert-success { border-left-color: var(--kfc-green) !important; }
.alert-warning { border-left-color: var(--kfc-accent) !important; }
.alert-danger { border-left-color: var(--kfc-red) !important; }
.alert-info { border-left-color: var(--kfc-slate) !important; }

/* --- Fenêtres modales : entrée en douceur --- */
.modal.show .modal-content {
border-radius: 14px !important;
animation: kfc-rise 0.35s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* --- Connexion : carte en verre dépoli, entrée soignée --- */
body.welcome-anonymous .card {
background:
var(--gloss-accent) top / 100% 6px no-repeat border-box,
rgba(255, 255, 255, 0.86) padding-box !important;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
animation: kfc-rise 0.7s cubic-bezier(.2, .8, .2, 1) backwards;
}
body.welcome-anonymous .glpi-logo {
animation: kfc-fade 0.9s ease-out backwards;
}
body.welcome-anonymous .form-control {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Animations --- */
@keyframes kfc-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes kfc-rise {
from { opacity: 0; translate: 0 14px; }
to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}

/* ============================================================
Surcharges propres à KFC Sénégal
============================================================ */

/* Barre du haut et bandeau du logo : noir brillant, bande rouge
soulignée d'un filet blanc (rappel des rayures KFC) */
header.navbar,
aside.sidebar .navbar-brand {
border-top: 0 !important;
border-bottom: 8px solid transparent !important;
background:
var(--gloss-red) bottom 2px left 0 / 100% 6px no-repeat border-box,
linear-gradient(#ffffff, #ffffff) bottom / 100% 2px no-repeat border-box,
var(--gloss-slate) border-box !important;
}

/* Boutons : rouge KFC brillant, texte blanc */
.btn-primary,
.btn.submit,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
body.welcome-anonymous .btn-primary {
background-color: var(--kfc-red) !important;
background-image: var(--gloss-red) !important;
border-color: #c00022 !important;
color: #ffffff !important;
}
.btn-primary .ti,
.btn.submit .ti,
.btn-secondary .ti,
.btn-outline-primary .ti,
.btn-outline-secondary .ti,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
color: #ffffff !important;
}

/* Liens en rouge KFC foncé (sans forcer : menus, boutons et tuiles gardent leurs couleurs) */
a {
color: var(--kfc-red-dark);
}
a:hover {
color: var(--kfc-ink);
}
body.welcome-anonymous a {
color: var(--kfc-red-dark) !important;
}

/* Avatar à initiales : texte blanc sur noir */
.avatar:not([style*="background-image"]) {
color: #ffffff !important;
}

/* Sélection de texte plus légère */
::selection {
background: rgba(245, 0, 43, 0.18);
color: var(--kfc-ink);
}

/* Onglet actif : soulignement rouge brillant */
.nav-tabs .nav-link.active {
background-image: var(--gloss-red) !important;
}

/* Avertissements : jaune doré (le rouge est réservé à KFC et aux erreurs) */
.badge.bg-warning {
background-color: #f5b700 !important;
background-image: linear-gradient(180deg, #ffd24d 0%, #f5b700 50%, #d19b00 100%) !important;
color: var(--kfc-ink) !important;
}
.alert-warning {
border-left-color: #f5b700 !important;
}

/* Fil des tickets : suivi gris, tâche rouge KFC, solution verte */
.timeline-item.ITILFollowup .timeline-content { border-left-color: var(--kfc-slate) !important; }
.timeline-item.ITILTask .timeline-content { border-left-color: var(--kfc-red) !important; }

/* ============================================================
Structure du thème KFC existant : menu latéral sombre,
panneaux blancs, en-têtes de cartes blancs soulignés de rouge
============================================================ */

/* Menu latéral sombre, texte blanc, élément actif en pastille rouge brillante */
aside.sidebar,
#menu {
background-color: var(--kfc-sidebar) !important;
border-right: 1px solid #2f2f2f !important;
}
#menu a,
aside.sidebar a,
aside.sidebar .nav-link,
aside.sidebar .nav-link .ti,
aside.sidebar .ti {
color: #ffffff !important;
}
aside.sidebar .nav-link:hover,
#menu a:hover,
.sidebar a:hover {
background-color: #333333 !important;
border-radius: 6px;
}
aside.sidebar .nav-link:hover .ti,
aside.sidebar .active > .nav-link .ti {
color: #ffffff !important;
}
#menu .active > a,
.sidebar .active > a,
aside.sidebar .nav-link.active {
background-color: var(--kfc-red) !important;
background-image: var(--gloss-red) !important;
background-size: 100% 100% !important;
color: #ffffff !important;
border-left: 0 !important;
border-radius: 6px;
box-shadow: var(--relief);
}
/* Sous-menus déroulants du menu latéral : fond blanc, texte sombre */
aside.sidebar .dropdown-menu a,
aside.sidebar .dropdown-menu .dropdown-item,
aside.sidebar .dropdown-menu .ti {
color: #222222 !important;
}

/* Menus déroulants et panneau utilisateur : fond blanc, texte sombre */
.dropdown-menu {
background-color: #ffffff !important;
}
.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu .dropdown-item {
color: #222222 !important;
}
.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
background-color: #f5f5f5 !important;
}
.offcanvas {
background-color: #ffffff !important;
}
.offcanvas,
.offcanvas a,
.offcanvas .ti {
color: #222222 !important;
}

/* En-têtes de cartes : fond blanc souligné de rouge (les tableaux restent sombres,
l'encadré de connexion garde son style noir brillant) */
.card-header {
background: #ffffff !important;
color: var(--kfc-ink) !important;
border-bottom: 2px solid var(--kfc-red) !important;
}

/* Onglet actif : texte rouge en plus du soulignement brillant */
.nav-tabs .nav-link.active {
color: var(--kfc-red) !important;
}

/* ============================================================
RESPONSIVE : téléphones, tablettes, mode application
============================================================ */

/* Tablettes et petits portables : menu latéral replié en barre du haut */
@media (max-width: 991.98px) {
aside.sidebar {
background: var(--gloss-slate) !important;
border-right: 0 !important;
}
aside.sidebar .navbar-brand {
width: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0.35rem 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
aside.sidebar .navbar-toggler {
border: 0 !important;
padding: 0.5rem !important;
}
/* Icône ☰ / × : barres dessinées en couleur du texte (pas d'inversion, qui les rendait noires) */
aside.sidebar .navbar-toggler-icon {
filter: none !important;
color: #ffffff !important;
}
/* Menu ouvert : panneau arrondi, ombré */
aside.sidebar #navbar-menu {
background-color: #1f1f1f !important;
border-radius: 12px;
margin: 0.25rem 0 0.75rem;
padding: 0.25rem;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
aside.sidebar #navbar-menu a,
aside.sidebar #navbar-menu .ti {
color: #ffffff !important;
}
/* Sous-menu ouvert dans le menu sombre : fond sombre (il restait blanc, texte blanc illisible) */
aside.sidebar #navbar-menu .dropdown-menu {
background-color: #2a2a2a !important;
border: 0 !important;
box-shadow: none !important;
}
aside.sidebar #navbar-menu .dropdown-menu a,
aside.sidebar #navbar-menu .dropdown-menu .dropdown-item,
aside.sidebar #navbar-menu .dropdown-menu .dropdown-header,
aside.sidebar #navbar-menu .dropdown-menu .ti {
color: #ffffff !important;
}
aside.sidebar #navbar-menu .dropdown-menu .dropdown-item:hover {
background-color: #3a3a3a !important;
}
aside.sidebar #navbar-menu .dropdown-menu .dropdown-item.active {
background-color: var(--kfc-red) !important;
background-image: var(--gloss-red) !important;
border-radius: 6px;
}
/* Cartes que GLPI place côte à côte (ex. Configuration > Notifications) : l'une sous l'autre */
.d-flex.justify-content-center:has(> .card.col-12) {
flex-wrap: wrap;
}
/* Barre du haut allégée : le fil d'ariane est masqué */
header.navbar .breadcrumb,
header.navbar .navigationheader {
display: none !important;
}
}

/* Tablettes : onglets verticaux plus étroits, marges réduites */
@media (min-width: 768px) and (max-width: 1199.98px) {
.card-tabs > .nav-tabs.flex-md-column {
min-width: 170px !important;
}
.nav-tabs .nav-link {
font-size: 0.9rem;
}
.page-body .container-fluid {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}

/* Téléphones */
@media (max-width: 767.98px) {
/* Texte des champs à 16 px : évite le zoom automatique de l'iPhone */
input.form-control,
select.form-select,
textarea.form-control,
.select2-container .select2-selection {
font-size: 16px !important;
}
/* Cibles tactiles confortables */
.btn {
min-height: 42px;
}
aside.sidebar .nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
/* Plus de place utile à l'écran */
.page-body .container-fluid,
.page-body .container-xl {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Gouttières des grilles à la mesure de ces marges (sinon léger débordement à droite, ex. Préférences) */
.page-body .row {
--tblr-gutter-x: 1rem;
}
/* Formulaires classiques en tableau (plugins, intitulés…) : une colonne qui tient dans l'écran */
table.tab_cadre_fixe,
table.tab_cadre_fixe > tbody,
table.tab_cadre_fixe > tbody > tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
table.tab_cadre_fixe > tbody > tr > td,
table.tab_cadre_fixe > tbody > tr > th {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
table.tab_cadre_fixe .select2-container {
width: 100% !important;
max-width: 100% !important;
}
table.tab_cadre_fixe .btn-group,
table.tab_cadre_fixe input.form-control,
table.tab_cadre_fixe textarea {
max-width: 100% !important;
}
/* Titre des fiches : l'icône (marque-page) ne recouvre plus le début du titre */
.card-header.main-header .card-title {
padding-left: 2.4rem !important;
}
/* Pagination des listes : en fin de liste, plus collée sur les dernières lignes */
.search-footer {
position: static !important;
}
/* Fil des tickets : auteur et date des suivis affichés aussi sur téléphone */
.timeline-header .creator > .badge.d-none {
display: flex !important;
font-size: 0.75rem;
}
/* Barre d'actions des tickets (Répondre…) : compacte et à la largeur de l'écran */
.itil-footer {
left: 0 !important;
right: 0 !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.itil-footer .buttons-bar {
align-items: center !important;
padding-top: 0.35rem !important;
padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
}
.itil-footer .buttons-bar .btn {
min-height: 38px;
height: auto !important;
align-self: center;
}
.itil-footer .timeline-buttons {
align-items: center;
}
.itil-footer .timeline-buttons {
flex: 1 1 auto;
min-width: 0;
padding-left: 0.5rem !important;
}
.itil-footer .form-buttons {
flex: 0 0 auto;
padding-right: 0.5rem !important;
}
.itil-footer .filter-timeline {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
white-space: nowrap;
}
.timeline-header .creator > .badge {
color: #4a4a4a !important;
}
/* Champs des formulaires GLPI 11 : libellé au-dessus du champ (il était écrasé à côté, texte superposé) */
.form-field.row > .col-form-label,
.form-field.row > .field-container {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.form-field.row > .col-form-label {
text-align: left !important;
padding-bottom: 0.15rem;
}
/* Champs de recherche en ligne (ex. base de connaissances) et champs précédés d'une case
(ex. adresses e-mail des préférences) : à la largeur de l'écran */
.page-body form.d-flex > input.form-control,
.field-container .d-flex > input.form-control {
min-width: 0;
width: auto !important;
flex: 1 1 auto;
}
/* Interface simplifiée (restaurants) — en-tête du catalogue de services : titre, puis tri et recherche
(tout était serré sur une ligne : « Trier par » contre le titre, recherche hors de l'écran) */
.page-header h1.page.title > .d-flex {
flex-wrap: wrap;
row-gap: 0.5rem;
align-items: center;
}
.page-header h1.page.title > .d-flex > .breadcrumb {
flex: 1 1 100%;
}
.page-header h1.page.title > .d-flex > .ms-auto {
margin-left: 0 !important;
}
.page-header h1.page.title > .d-flex > .input-icon {
flex: 1 1 auto;
min-width: 0;
}
.page-header h1.page.title > .d-flex > .input-icon input {
width: 100% !important;
}
/* Formulaires de création de ticket : le champ « pièce jointe » ne fait plus déborder la page */
.fileupload input[type=file] {
width: 100% !important;
max-width: 100%;
min-width: 0;
}
.form-renderer section {
min-width: 0;
}
/* Grilles placées dans un bloc flexible (ex. Préférences) : elles peuvent rétrécir à la largeur de l'écran */
.page-body .d-flex > .row {
min-width: 0;
}
/* Tableau de bord en une colonne : GLPI garde les positions du grand écran et empile des tuiles
au même endroit (tuiles cachées les unes sous les autres) ; elles s'affichent ici l'une après l'autre */
.grid-stack.gs-1 {
height: auto !important;
min-height: 0 !important;
display: flex;
flex-direction: column;
gap: 8px;
}
.grid-stack.gs-1 > .grid-stack-item {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
}
.grid-stack.gs-1 > .grid-stack-item > .grid-stack-item-content {
inset: 0 !important;
}
/* KFC Push > Diffuser un message : explication sous le bouton « Vérifier » */
#kfcpush-broadcast .text-muted.small.ms-2 {
display: block;
margin: 0.5rem 0 0 !important;
}
/* KFC Stock > Seuils d'alerte : bouton et explication l'un sous l'autre */
form[action*="/kfcstock/front/threshold.php"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.card {
border-radius: 10px !important;
}
/* Sélecteur d'onglets des fiches (remplace les onglets sur mobile) */
.card-tabs > select.form-select {
border: 1px solid var(--kfc-border) !important;
border-left: 5px solid var(--kfc-red) !important;
border-radius: 10px !important;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Listes et tableaux : défilement horizontal fluide au doigt */
.search-results,
.table-responsive,
.search-card .table-responsive-lg {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
table.table {
font-size: 13px;
}
/* Fenêtres modales en plein écran */
.modal-dialog {
margin: 0 !important;
max-width: 100% !important;
min-height: 100%;
}
.modal-content {
min-height: 100vh;
border-radius: 0 !important;
}
/* Fil du ticket sur toute la largeur */
.timeline-item {
max-width: 100% !important;
}
/* Tuiles de l'accueil helpdesk plus compactes */
.tiles-banner .card {
border-radius: 12px !important;
}
.helpdesk-home-container h1 {
font-size: 1.6rem !important;
}
}

/* Écrans tactiles : pas d'effets de survol qui restent « collés » */
@media (hover: none) {
.card:hover,
.tiles-banner .card:hover,
.grid-stack-item .card:hover,
.btn:hover {
transform: none !important;
}
}

/* Mode application (installé sur l'écran d'accueil) : respect des encoches */
@media (display-mode: standalone) {
aside.sidebar,
header.navbar {
padding-top: env(safe-area-inset-top, 0px) !important;
}
body {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}

/* ============================================================
Page de connexion — variante D « Service en cours » (charte KFC 2026)
Décor injecté par kfcbrand.js : emblème du Colonel avec vapeur,
métiers du support en orbite, ancien seau KFC à droite.
============================================================ */
.kfc-login-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.welcome-anonymous { background: radial-gradient(70% 60% at 20% 100%, #ffe3e8 0%, var(--kfc-bg) 70%) !important; }
.kfc-hero { --w: min(21vw, 34vh); position: absolute; left: 7vw; bottom: 9vh; width: var(--w); height: calc(var(--w) * 0.93); }
.kfc-hero .kfc-emblem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2;
  filter: drop-shadow(0 1.2vh 1.6vh rgba(0, 0, 0, .22)); animation: kfc-bob 2.8s ease-in-out infinite alternate; }
.kfc-hero .kfc-steam { position: absolute; z-index: 1; left: 50%; bottom: 88%; width: calc(var(--w) * .07); height: calc(var(--w) * .45); border-radius: 999px;
  margin-left: var(--ml); background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); filter: blur(4px);
  animation: kfc-steam 3.4s ease-out infinite; animation-delay: var(--dl); opacity: 0; }
.kfc-hero .kfc-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; animation: kfc-spin 26s linear infinite; }
.kfc-hero .kfc-chip { --r: calc(var(--w) * .92); position: absolute; width: calc(var(--w) * .26); height: calc(var(--w) * .26); translate: -50% -50%;
  left: calc(var(--x) * var(--r)); top: calc(var(--y) * var(--r)); border-radius: 50%; background: #ffffff; color: var(--kfc-red);
  display: grid; place-items: center; box-shadow: 0 .8vh 1.8vh rgba(0, 0, 0, .14); animation: kfc-spin 26s linear infinite reverse; }
.kfc-hero .kfc-chip svg { width: 50%; height: 50%; }
.kfc-old-bucket { position: absolute; right: -3vw; top: -6vh; width: min(17vw, 27vh); opacity: .75; rotate: 10deg;
  filter: drop-shadow(0 1vh 1.4vh rgba(26, 28, 27, .16)); animation: kfc-float-b 9s ease-in-out infinite alternate; }
@keyframes kfc-bob { to { translate: 0 -1.2vh; rotate: 2deg; } }
@keyframes kfc-steam { 0% { opacity: 0; translate: 0 2vh; scale: .6; } 30% { opacity: .9; } 100% { opacity: 0; translate: 1.2vw -9vh; scale: 1.4; } }
@keyframes kfc-spin { to { rotate: 360deg; } }

/* Pied de page « © KFC Sénégal » : pastille claire, lisible devant le décor */
#kfcbrand-footer { display: inline-block; color: var(--kfc-red-dark) !important; background: rgba(255, 255, 255, .94);
  border-radius: 999px; padding: .35rem 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }

/* Écrans moyens : décor plus discret ; téléphones : emblème seul, en filigrane */
@media (max-width: 1199.98px) { .kfc-hero { left: 2vw; opacity: .55; } .kfc-old-bucket { opacity: .45; } }
@media (max-width: 767.98px) { .kfc-hero { --w: 42vw; left: -8vw; bottom: 2vh; opacity: .28; } .kfc-hero .kfc-orbit, .kfc-hero .kfc-steam { display: none; } .kfc-old-bucket { width: 30vw; opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .kfc-login-decor *, .kfc-login-decor { animation: none !important; } }

/* ------------------------------------------------------------------------------------------
   Plateforme « vivante » : pastilles icône + mot en couleur (KFC Stock, KFC Signatures…)
   Une couleur = une signification, toujours la même : on la reconnaît sans lire.
   ------------------------------------------------------------------------------------------ */
/* Une seule forme : carré arrondi teinté, icône au trait, mot dessous ; couleurs de la charte uniquement */
.kfc-pill { --kfc-c: var(--kfc-slate); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; vertical-align: middle; }
.kfc-pill-ico { --kfc-c: var(--kfc-slate); width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--kfc-c); background: color-mix(in srgb, var(--kfc-c) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--kfc-c) 28%, #fff); transition: transform .15s ease, background .15s ease, color .15s ease; }
.kfc-pill .kfc-pill-ico { --kfc-c: inherit; }
.kfc-pill-ico-lg { width: 46px; height: 46px; border-radius: 12px; font-size: 24px; flex: none; }
.kfc-pill-txt { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--kfc-c); line-height: 1.1; text-align: center; }
.kfc-tag { --kfc-c: var(--kfc-slate); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 6px; font-weight: 600;
  font-size: .9em; color: var(--kfc-c); background: color-mix(in srgb, var(--kfc-c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--kfc-c) 22%, #fff); white-space: nowrap; }
.kfc-tag .ti { font-size: 1.1em; }
.kfc-tag.kfc-cat { --kfc-c: var(--kfc-dark); }
.kfc-tag.kfc-cat > .ti { color: var(--kfc-red); }

/* Tableaux à pastilles : lignes serrées, filet gris fin entre les lignes, survol avec filet rouge à gauche */
table:has(.kfc-pill) > tbody > tr > td, table:has(.kfc-pill) > thead > tr > th { vertical-align: middle; }
table:has(.kfc-pill) > tbody > tr > td { padding-top: .3rem; padding-bottom: .3rem; line-height: 1.3;
  border-bottom: 1px solid #ececec; background-color: #fff; --bs-table-accent-bg: transparent; --bs-table-striped-bg: transparent; }
table:has(.kfc-pill) > tbody > tr { transition: background-color .15s ease, box-shadow .15s ease; }
table:has(.kfc-pill) > tbody > tr:hover > td { background-color: #fbf7f8; }
table:has(.kfc-pill) > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--kfc-red); }
table:has(.kfc-pill) > tbody > tr:hover .kfc-pill-ico { transform: scale(1.08); }
table:has(.kfc-pill) > tbody > tr > td a { font-weight: 600; }
/* Lieux : « Magasin · Siège » au lieu de « KFC Sénégal > Siège > Magasin » */
.kfc-place { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.kfc-place > .ti { color: var(--kfc-red, #F5002B); align-self: center; font-size: 1em; }
.kfc-place > b { font-weight: 600; }
.kfc-place > small { color: #8a8f98; font-size: .8em; }
.kfc-place > small::before { content: "· "; }
/* Pastilles GLPI d'arborescence (entités, lieux) : « KFC Sénégal ▸ KFC First Lady » devient « 📍 KFC First Lady »
   (le chemin complet reste dans l'info-bulle) */
.glpi-badge[title^="KFC Sénégal >"] > span:first-child,
.glpi-badge[title^="KFC Sénégal >"] > span:first-child + i.ti-caret-right-filled { display: none; }
.glpi-badge[title^="KFC Sénégal >"]::before { content: "\eae8"; font-family: "tabler-icons"; margin-right: .25rem; opacity: .75; }
.glpi-badge[title^="KFC Sénégal >"] { display: inline-flex; align-items: center; white-space: nowrap; }
/* Pastilles cliquables (actions rapides du stock) */
.kfc-pill-link .kfc-pill-ico { cursor: pointer; }
.kfc-pill-link:hover .kfc-pill-ico, .kfc-pill-link:focus-visible .kfc-pill-ico { transform: scale(1.15); background: var(--kfc-c); color: #fff; }
.kfc-pill-link:focus-visible { outline: 2px solid var(--kfc-red, #F5002B); outline-offset: 3px; border-radius: 8px; }
/* Compteurs de tableau de bord aux couleurs de la charte : texte net (classes posées par kfcbrand.js) */
.dashboard .card.big-number.kfc-on-dark, .dashboard .card.big-number.kfc-on-dark * { color: #fff !important; }
.dashboard .card.big-number.kfc-on-light, .dashboard .card.big-number.kfc-on-light * { color: var(--kfc-ink) !important; }
.dashboard .card.big-number .ti, .dashboard .card.big-number i { opacity: .85; }
/* ------------------------------------------------------------------------------------------
   Typographie : Inter partout (police de GLPI), une seule échelle, gras sur l'essentiel
   ------------------------------------------------------------------------------------------ */
body { font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Corps des tableaux : 14 px partout (listes GLPI et pages KFC) */
.table > tbody > tr > td, table.search-results > tbody > tr > td, table:has(.kfc-pill) > tbody > tr > td { font-size: 14px; }
/* En-têtes de colonnes : petites capitales espacées, en gras */
.table > thead > tr > th, table.search-results > thead > tr > th { font-size: 11px; font-weight: 700; letter-spacing: .05em; }
/* L'essentiel en gras : titres de tickets, noms d'articles, liens des listes */
table.search-results > tbody > tr > td a:not(.btn):not(.kfc-pill-link), .table > tbody > tr > td > a:not(.btn) { font-weight: 600; }
/* Chiffres alignés : dates, quantités, numéros */
table.search-results td, .table td, .fs-1, .fs-2, .h1, .h2, .kfc-tag { font-variant-numeric: tabular-nums; }
/* Titres */
h1, .h1, h2, .h2 { font-weight: 800; letter-spacing: -.02em; }
h3, .h3, .card-title { font-weight: 700; letter-spacing: -.01em; }
.card-title { font-size: 15px; }
/* Pastilles et étiquettes : même corps partout */
.kfc-tag { font-size: 12.5px; }
.badge { font-weight: 600; letter-spacing: .01em; }
/* ------------------------------------------------------------------------------------------
   Typographie (2.10.0) : Inter seule, comme SediDesk. Les fichiers Barlow Condensed restent dans fonts/ (inutilisés).
   ------------------------------------------------------------------------------------------ */
/* Variable gardée pour les pages des autres plugins KFC qui s'en servent */
:root { --kfc-font-titles: var(--tblr-font-sans-serif, Inter, -apple-system, "Segoe UI", sans-serif); }

/* Titres de pages et de cadres */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, .card-title, .modal-title, .page-title {
  font-family: var(--kfc-font-titles); font-weight: 700; letter-spacing: -.01em; }
h1, .h1 { font-size: 26px; } h2, .h2 { font-size: 22px; } h3, .h3 { font-size: 18px; }
.card-title, .modal-title { font-size: 15px; }
/* Titres de sections des formulaires KFC (1. Quoi ?, 2. Pour qui ?…) */
tr.tab_bg_2 > th .fs-4 { font-family: var(--kfc-font-titles); font-size: 16px !important; font-weight: 700; }
/* En-têtes de colonnes */
.table > thead > tr > th, table.search-results > thead > tr > th { font-family: var(--kfc-font-titles); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
/* Mots des pastilles */
.kfc-pill-txt { font-family: var(--kfc-font-titles); font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
/* Compteurs pastel (kfcbrand.js) : chiffres et libellé foncés, icône dans la teinte soutenue de la tuile, reflet discret */
.dashboard .card.big-number.kfc-pastel { border: 1px solid rgba(28, 28, 28, .06) !important; box-shadow: 0 1px 2px rgba(28, 28, 28, .05) !important; }
.dashboard .card.big-number.kfc-pastel::before { background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); }
.dashboard .card.big-number.kfc-pastel .ti, .dashboard .card.big-number.kfc-pastel i { color: var(--kfc-tile-accent) !important; opacity: 1; }
.dashboard .card.big-number.kfc-pastel .label { font-weight: 600; }
/* Grands chiffres : compteurs, tuiles, indicateurs */
/* Chiffres des tuiles et indicateurs : police classique (Inter, celle de GLPI), en gras ; la police condensée reste aux titres */
.dashboard .card.big-number .formatted-number, .dashboard .card.big-number .big-number, .fs-1:not(.ti), .h1.mb-0, .display-5,
.card .card-body .h1:not(.ti), .card .card-body .h2:not(.ti), .card .card-body .fs-2:not(.ti) {
  font-family: var(--tblr-font-sans-serif, Inter, -apple-system, "Segoe UI", sans-serif) !important; font-weight: 700; letter-spacing: -.01em; }

/* Listes : corps masqué le temps de la mise en forme (quelques ms) ; réaffiché de toute façon après 0,8 s */
@keyframes kfc-reveal { to { opacity: 1; } }
table.search-results:not(.kfc-done) > tbody { opacity: 0; animation: kfc-reveal .01s linear .8s forwards; }
table.search-results.kfc-done > tbody { opacity: 1; }

/* ------------------------------------------------------------------------------------------
   Mobile (moins de 768 px)
   ------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Accueil : deux compteurs par ligne, plus bas ; graphiques sur toute la largeur ; ordre des thèmes (kfcbrand.js) */
  .dashboard:not(.mini) .grid-stack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: auto !important; min-height: 0 !important; }
  .dashboard:not(.mini) .grid-stack > .grid-stack-item { position: relative !important; top: auto !important; left: auto !important; width: auto !important;
    height: 78px !important; min-height: 0 !important; margin: 0 !important; transform: none !important; }
  .dashboard:not(.mini) .grid-stack > .grid-stack-item > .grid-stack-item-content { position: absolute !important; inset: 0 !important; }
  .dashboard:not(.mini) .grid-stack > .grid-stack-item:has(.g-chart) { grid-column: 1 / -1; height: 290px !important; }
  .dashboard .card.big-number .formatted-number { font-size: 22px !important; line-height: 1.1; }
  .dashboard .card.big-number .formatted-number .number, .dashboard .card.big-number .formatted-number .suffix { font-size: 1em !important; }
  .dashboard .card.big-number .label { font-size: 12px !important; }
  /* Liste des tickets : colonnes secondaires masquées (kfcbrand.js) */
  table.search-results .kfc-hide-mobile { display: none !important; }
}
/* ==========================================================================================
   2.11.0 — Thème clair, sur le modèle de SediDesk : barre du haut grise en aplat, menu latéral blanc,
   boutons et onglets sans relief, tuiles et graphiques pastel. Le rouge KFC remplace le jaune SEDIMA
   comme couleur d'accent. Fond : emblème du Colonel en filigrane (pas de photo).
   Placé en fin de fichier : remplace les réglages sombres et brillants plus haut.
   ========================================================================================== */
:root {
  --kfc-dark: #434c53;            /* Gris des bandeaux et en-têtes (comme SediDesk) */
  --kfc-slate-dark: #30373c;      /* Survol des fonds gris */
  --kfc-sidebar: #ffffff;         /* Menu latéral blanc */
  --kfc-border: #d9dde0;
  /* Dégradés « brillants » ramenés à des aplats : tous les éléments qui s'en servent deviennent plats */
  --gloss-slate: linear-gradient(#434c53, #434c53);
  --gloss-accent: linear-gradient(#f5002b, #f5002b);
  --gloss-red: linear-gradient(#f5002b, #f5002b);
  --gloss-green: linear-gradient(#2e9e4f, #2e9e4f);
  --gloss-green-btn: linear-gradient(#1f7a3a, #1f7a3a);
  --gloss-red-btn: linear-gradient(#c00022, #c00022);
  --relief: none;
  --relief-hover: 0 1px 3px rgba(26, 28, 27, 0.12);
}
/* Barre du haut et bandeau du logo : gris uni, bande rouge KFC en bas soulignée d'un filet blanc */
header.navbar,
aside.sidebar .navbar-brand {
  box-shadow: none !important;
}
/* Menu latéral : blanc, texte foncé, élément actif sur fond rose pâle avec barre rouge à gauche */
aside.sidebar,
#menu {
  background-color: #ffffff !important;
  border-right: 1px solid var(--kfc-border) !important;
}
#menu a,
aside.sidebar a,
aside.sidebar .nav-link,
aside.sidebar .nav-link .ti,
aside.sidebar .ti {
  color: var(--kfc-ink) !important;
}
aside.sidebar .navbar-brand,
aside.sidebar .navbar-brand a,
aside.sidebar .navbar-brand .ti {
  color: #ffffff !important;
}
aside.sidebar .nav-link .ti {
  color: #5b6770 !important;
}
aside.sidebar .nav-link:hover,
#menu a:hover,
.sidebar a:hover {
  background-color: var(--kfc-bg) !important;
  border-radius: 6px;
}
#menu .active > a,
.sidebar .active > a,
aside.sidebar .nav-link.active {
  background: var(--kfc-accent-pale) !important;
  color: var(--kfc-ink) !important;
  font-weight: 600;
  border-left: 4px solid var(--kfc-red) !important;
  border-radius: 0 6px 6px 0;
  box-shadow: none !important;
}
aside.sidebar .nav-link:hover .ti,
aside.sidebar .active > .nav-link .ti,
aside.sidebar .nav-link.active .ti {
  color: var(--kfc-red) !important;
}
/* Filigrane : emblème du Colonel en bas du menu latéral, fondu dans le blanc (ordinateur) */
@media (min-width: 992px) {
  aside.sidebar.navbar-vertical::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    height: 210px;
    pointer-events: none;
    z-index: 0;
    background: url("../pics/colonel-emblem.svg") center bottom / auto 100% no-repeat;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  }
  aside.sidebar.navbar-vertical > .container-fluid {
    position: relative;
    z-index: 1;
  }
}
/* Fond des pages : emblème du Colonel en grand filigrane, en bas à droite, derrière le contenu (ordinateur) */
@media (min-width: 992px) {
  body:not(.welcome-anonymous) .page-wrapper {
    isolation: isolate;
  }
  body:not(.welcome-anonymous) .page-wrapper::after {
    content: "";
    position: fixed;
    right: -70px;
    bottom: -90px;
    width: 440px;
    height: 440px;
    z-index: -1;
    pointer-events: none;
    background: url("../pics/colonel-emblem.svg") center / contain no-repeat;
    opacity: 0.06;
  }
}
/* Boutons : gris en aplat, texte blanc (succès vert, danger rouge) — comme SediDesk */
.btn-primary,
.btn.submit,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
body.welcome-anonymous .btn-primary {
  background: var(--kfc-dark) !important;
  border-color: #343b40 !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-primary:hover,
.btn.submit:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
body.welcome-anonymous .btn-primary:hover {
  background: var(--kfc-slate-dark) !important;
  color: #ffffff !important;
}
.btn-success {
  background: var(--kfc-green-dark) !important;
  box-shadow: none !important;
}
.btn-danger {
  background: var(--kfc-red-dark) !important;
  box-shadow: none !important;
}
/* Onglet actif : soulignement rouge en aplat */
.nav-tabs .nav-link.active {
  background-image: none !important;
  border-bottom: 3px solid var(--kfc-red) !important;
  color: var(--kfc-ink) !important;
  font-weight: 600;
}
/* Cartes et tuiles : coins adoucis, ombre légère, ni reflet, ni soulèvement, ni animation d'entrée */
.card {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.06) !important;
}
.grid-stack-item .card {
  animation: none !important;
  border-radius: 8px !important;
}
.grid-stack-item .card::before,
.dashboard .card.big-number.kfc-pastel::before {
  content: none !important;
}
.grid-stack-item .card:hover {
  transform: none !important;
}
/* Avertissement : jaune uni */
.badge.bg-warning {
  background-image: none !important;
}
/* Téléphones et tablettes : barre grise unie, menu ouvert sur fond blanc */
@media (max-width: 991.98px) {
  aside.sidebar {
    background: var(--kfc-dark) !important;
  }
  /* Bande grise du haut : texte et icônes en blanc (le menu ouvert, sur fond blanc, garde le texte foncé) */
  aside.sidebar a:not(#navbar-menu a),
  aside.sidebar .nav-link:not(#navbar-menu .nav-link),
  aside.sidebar .ti:not(#navbar-menu .ti),
  aside.sidebar .navbar-toggler {
    color: #ffffff !important;
  }
  /* Élément actif (fond rose pâle) : texte foncé, icône rouge */
  aside.sidebar .nav-link.active:not(#navbar-menu .nav-link) {
    color: var(--kfc-ink) !important;
  }
  aside.sidebar .nav-link.active:not(#navbar-menu .nav-link) .ti {
    color: var(--kfc-red) !important;
  }
  aside.sidebar.navbar-vertical::after {
    content: none;
  }
  aside.sidebar #navbar-menu {
    background-color: #ffffff !important;
  }
  aside.sidebar #navbar-menu a,
  aside.sidebar #navbar-menu .ti {
    color: var(--kfc-ink) !important;
  }
  aside.sidebar #navbar-menu .dropdown-menu {
    background-color: var(--kfc-bg) !important;
  }
  aside.sidebar #navbar-menu .dropdown-menu a,
  aside.sidebar #navbar-menu .dropdown-menu .dropdown-item,
  aside.sidebar #navbar-menu .dropdown-menu .dropdown-header,
  aside.sidebar #navbar-menu .dropdown-menu .ti {
    color: var(--kfc-ink) !important;
  }
  aside.sidebar #navbar-menu .dropdown-menu .dropdown-item:hover {
    background-color: #e9ecef !important;
  }
  aside.sidebar #navbar-menu .dropdown-menu .dropdown-item.active {
    background: var(--kfc-accent-pale) !important;
    color: var(--kfc-ink) !important;
  }
}
/* 2.11.2 : compteurs sans gras (chiffres et libellés en graisse normale, comme SediDesk) */
.dashboard .card.big-number.kfc-pastel .formatted-number,
.dashboard .card.big-number.kfc-pastel .formatted-number *,
.dashboard .card.big-number.kfc-pastel .big-number,
.dashboard .card.big-number.kfc-pastel .label {
  font-weight: 400 !important;
}
/* ==========================================================================================
   2.12.0 — Bandeau d'accueil « Bonjour <prénom> » (kfcbrand.js), sur le modèle de SediDesk :
   blanc vers rose pâle, bande rouge KFC en haut, rayures du seau et emblème du Colonel à droite.
   ========================================================================================== */
.kfc-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 108px;
  margin: 0.25rem 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  border-top: 6px solid var(--kfc-red);
  background:
    repeating-linear-gradient(90deg, rgba(245, 0, 43, 0.10) 0 26px, transparent 26px 52px) right / 38% 100% no-repeat,
    linear-gradient(90deg, #ffffff 0%, #fff7f8 55%, var(--kfc-accent-pale) 100%);
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.06), 0 8px 24px rgba(67, 76, 83, 0.10);
}
.kfc-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0) 75%);
}
.kfc-banner .kfc-banner-text {
  position: relative;
  padding: 1.25rem 1.75rem;
}
.kfc-banner h1 {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
  color: var(--kfc-ink);
}
.kfc-banner p {
  margin: 0;
  color: #5b6770;
}
.kfc-banner p b {
  color: var(--kfc-red-dark);
}
.kfc-banner .kfc-banner-emblem {
  position: relative;
  margin-left: auto;
  margin-right: 1.5rem;
  height: 86px;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(26, 28, 27, 0.18));
}
/* Accueil des restaurants : « Bonjour <prénom>, » au-dessus du titre */
.helpdesk-home-container .search-banner h1 .kfc-hello {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6em;
  font-weight: 600;
  color: #5b6770;
}
@media (max-width: 767.98px) {
  .kfc-banner { min-height: 0; }
  .kfc-banner .kfc-banner-text { padding: 1rem; }
  .kfc-banner h1 { font-size: 1.3rem; }
  .kfc-banner .kfc-banner-emblem { height: 56px; margin-right: 0.75rem; }
}
/* ==========================================================================================
   2.13.0 — Tout le site en pastel : barre du haut et zone du logo rose pâle (logo en couleurs),
   boutons, en-têtes de tableaux, pastilles et onglets en teintes pastel lisibles (texte foncé).
   Accueil des restaurants : les grandes illustrations de GLPI sont remplacées par des formes pastel
   légères (CSS seul, aucune image à télécharger).
   ========================================================================================== */
:root {
  --kfc-pastel-red: #ff8a9e;      /* Accent : bandes, soulignements, élément actif */
  --kfc-pastel-pink: #fde8ec;     /* Barre du haut, zone du logo */
  --kfc-pastel-rose: #ffd9df;     /* Bouton principal */
  --kfc-pastel-grey: #eef1f4;     /* En-têtes de tableaux, boutons secondaires */
  --kfc-bg: #f7f7fa;
  --gloss-slate: linear-gradient(#fde8ec, #fde8ec);
  --gloss-accent: linear-gradient(#ff8a9e, #ff8a9e);
  --gloss-red: linear-gradient(#ff8a9e, #ff8a9e);
}
body {
  background-color: var(--kfc-bg) !important;
}
/* Barre du haut et zone du logo : rose pâle, bande rose soutenu en bas, texte foncé */
header.navbar,
aside.sidebar .navbar-brand {
  background: var(--kfc-pastel-pink) !important;
  border-top: 0 !important;
  border-bottom: 4px solid var(--kfc-pastel-red) !important;
  box-shadow: none !important;
}
header.navbar a,
header.navbar .nav-link,
header.navbar .navbar-brand,
header.navbar .btn-ghost-secondary,
header.navbar .ti,
header.navbar .breadcrumb a,
header.navbar .breadcrumb-item,
header.navbar .breadcrumb-item::before,
aside.sidebar .navbar-brand,
aside.sidebar .navbar-brand a,
aside.sidebar .navbar-brand .ti {
  color: var(--kfc-ink) !important;
}
header.navbar input,
header.navbar input[type="search"] {
  background-color: #ffffff !important;
  border: 1px solid #f3c7cf !important;
}
/* Logo en couleurs (fond clair) */
.page .glpi-logo {
  background: url("../pics/logo-positif.png") center / contain no-repeat !important;
}
/* Téléphones et tablettes : barre rose pâle, texte foncé */
@media (max-width: 991.98px) {
  aside.sidebar {
    background: var(--kfc-pastel-pink) !important;
    border-bottom: 4px solid var(--kfc-pastel-red) !important;
  }
  aside.sidebar a:not(#navbar-menu a),
  aside.sidebar .nav-link:not(#navbar-menu .nav-link),
  aside.sidebar .ti:not(#navbar-menu .ti),
  aside.sidebar .navbar-toggler {
    color: var(--kfc-ink) !important;
  }
}
/* Élément actif du menu, onglet actif : rose soutenu */
#menu .active > a,
.sidebar .active > a,
aside.sidebar .nav-link.active {
  border-left-color: var(--kfc-pastel-red) !important;
}
.nav-tabs .nav-link.active {
  border-bottom-color: var(--kfc-pastel-red) !important;
}
/* Boutons pastel, texte foncé */
.btn-primary,
.btn.submit,
body.welcome-anonymous .btn-primary {
  background: var(--kfc-pastel-rose) !important;
  border-color: #ffb3bf !important;
  color: #8a0018 !important;
}
.btn-primary:hover,
.btn.submit:hover,
body.welcome-anonymous .btn-primary:hover {
  background: #ffc4cd !important;
  color: #6e0013 !important;
}
.btn-primary .ti,
.btn.submit .ti {
  color: inherit !important;
}
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
  background: var(--kfc-pastel-grey) !important;
  border-color: #d9dde0 !important;
  color: var(--kfc-ink) !important;
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: #e2e7ec !important;
  color: var(--kfc-ink) !important;
}
.btn-secondary .ti,
.btn-outline-primary .ti,
.btn-outline-secondary .ti {
  color: inherit !important;
}
.btn-success {
  background: #d5f2dc !important;
  border-color: #b5e3c1 !important;
  color: #1f6b34 !important;
}
.btn-danger {
  background: #ffd9df !important;
  border-color: #ffb3bf !important;
  color: #a1001c !important;
}
/* En-têtes de tableaux : gris bleuté pâle, texte foncé */
th:where(:not(:is(.rich_text_container, .knowbaseitem-content, .fc, .tox) th)) {
  background-color: var(--kfc-pastel-grey) !important;
  color: var(--kfc-ink) !important;
}
.card-header {
  border-bottom: 2px solid var(--kfc-pastel-rose) !important;
}
/* Avatar à initiales : lavande pâle */
.avatar:not([style*="background-image"]) {
  background-color: #e9e6f5 !important;
  color: #55498f !important;
}
/* Pastilles : fond pastel, texte foncé de la même teinte */
.badge.bg-success, .badge.bg-success.text-white { background: #d5f2dc !important; color: #1f6b34 !important; }
.badge.bg-danger, .badge.bg-danger.text-white { background: #ffd9df !important; color: #a1001c !important; }
.badge.bg-warning, .badge.bg-warning.text-white { background: #fbf5c8 !important; color: #7a6a00 !important; }
.badge.bg-secondary, .badge.bg-secondary.text-white { background: #e3e8eb !important; color: #3d434b !important; }
.badge.bg-primary, .badge.bg-info, .badge.bg-primary.text-white, .badge.bg-info.text-white { background: #dbeafe !important; color: #1e4f8f !important; }
/* Bandeau « Bonjour » : bande rose soutenu */
.kfc-banner {
  border-top-color: var(--kfc-pastel-red) !important;
}
/* Page de connexion : titre de la carte en rose pâle */
body.welcome-anonymous .card-header {
  background: var(--kfc-pastel-pink) !important;
}
body.welcome-anonymous .card-header h2 {
  color: var(--kfc-ink) !important;
}
/* Accueil des restaurants : formes pastel légères à la place des grandes illustrations */
.helpdesk-home-container .search-banner .scene {
  display: none !important;
}
.helpdesk-home-container .search-banner {
  position: relative;
  background:
    radial-gradient(circle at 7% 32%, #ffd9df 0 70px, rgba(255, 217, 223, 0) 110px),
    radial-gradient(circle at 15% 78%, #e9e6f5 0 46px, rgba(233, 230, 245, 0) 80px),
    radial-gradient(circle at 93% 30%, #d9f0ea 0 64px, rgba(217, 240, 234, 0) 100px),
    radial-gradient(circle at 85% 80%, #fbf5c8 0 42px, rgba(251, 245, 200, 0) 74px),
    linear-gradient(180deg, #ffffff 0%, #fff7f8 100%) !important;
}
.helpdesk-home-container .home-search:focus {
  border-color: var(--kfc-pastel-red) !important;
  box-shadow: 0 0 0 4px rgba(255, 138, 158, 0.35) !important;
}
.tiles-banner .card::after {
  background: var(--kfc-pastel-red) !important;
}
@media (max-width: 767.98px) {
  .helpdesk-home-container .search-banner {
    background:
      radial-gradient(circle at 0% 0%, #ffd9df 0 50px, rgba(255, 217, 223, 0) 90px),
      radial-gradient(circle at 100% 100%, #d9f0ea 0 50px, rgba(217, 240, 234, 0) 90px),
      linear-gradient(180deg, #ffffff 0%, #fff7f8 100%) !important;
  }
}
/* ==========================================================================================
   2.14.0 — Sobre et lisible : plus de rose. Accent = rouge KFC atténué (#b8293b), fonds blancs
   ou gris chaud neutre, tuiles et graphiques pastel conservés (sans teinte rose).
   ========================================================================================== */
:root {
  --kfc-pastel-red: #b8293b;      /* Rouge KFC atténué : bandes, soulignements, élément actif */
  --kfc-red-soft-hover: #9e2232;
  --kfc-pastel-pink: #ffffff;     /* Barre du haut et zone du logo : blanc */
  --kfc-accent-pale: #f5f3f1;     /* Fonds d'accent : gris chaud neutre */
  --kfc-warm: #f5f3f1;
  --gloss-slate: linear-gradient(#ffffff, #ffffff);
  --gloss-accent: linear-gradient(#b8293b, #b8293b);
  --gloss-red: linear-gradient(#b8293b, #b8293b);
}
/* Barre du haut et zone du logo : blanc, filet rouge atténué */
header.navbar,
aside.sidebar .navbar-brand {
  background: #ffffff !important;
  border-bottom: 3px solid var(--kfc-pastel-red) !important;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.04) !important;
}
header.navbar input,
header.navbar input[type="search"] {
  background-color: var(--kfc-warm) !important;
  border: 1px solid #e3ded8 !important;
}
@media (max-width: 991.98px) {
  aside.sidebar {
    background: #ffffff !important;
    border-bottom: 3px solid var(--kfc-pastel-red) !important;
  }
}
/* Menu : élément actif sur gris chaud, barre et icône rouge atténué */
#menu .active > a,
.sidebar .active > a,
aside.sidebar .nav-link.active {
  background: var(--kfc-warm) !important;
  border-left-color: var(--kfc-pastel-red) !important;
}
aside.sidebar .nav-link:hover .ti,
aside.sidebar .active > .nav-link .ti,
aside.sidebar .nav-link.active .ti {
  color: var(--kfc-pastel-red) !important;
}
/* Bouton principal : rouge atténué, texte blanc (visible et efficace) */
.btn-primary,
.btn.submit,
body.welcome-anonymous .btn-primary {
  background: var(--kfc-pastel-red) !important;
  border-color: #a02334 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn.submit:hover,
body.welcome-anonymous .btn-primary:hover {
  background: var(--kfc-red-soft-hover) !important;
  color: #ffffff !important;
}
.btn-danger {
  background: #f3e7e5 !important;
  border-color: #e2c9c5 !important;
  color: #8e1f2c !important;
}
/* Pastilles « danger » : rouge atténué sur fond neutre */
.badge.bg-danger, .badge.bg-danger.text-white { background: #f3e7e5 !important; color: #8e1f2c !important; }
.card-header {
  border-bottom: 2px solid #ece8e3 !important;
}
.kfc-banner {
  border-top-color: var(--kfc-pastel-red) !important;
  background:
    repeating-linear-gradient(90deg, rgba(110, 95, 85, 0.07) 0 26px, transparent 26px 52px) right / 38% 100% no-repeat,
    linear-gradient(90deg, #ffffff 0%, #faf9f7 55%, var(--kfc-warm) 100%) !important;
}
.kfc-banner p b {
  color: var(--kfc-pastel-red) !important;
}
/* Page de connexion : titre de la carte blanc, souligné de rouge atténué */
body.welcome-anonymous .card-header {
  background: #ffffff !important;
  border-bottom: 3px solid var(--kfc-pastel-red) !important;
}
/* Accueil des restaurants : formes douces sans rose */
.helpdesk-home-container .search-banner {
  background:
    radial-gradient(circle at 7% 32%, #efe6dc 0 70px, rgba(239, 230, 220, 0) 110px),
    radial-gradient(circle at 15% 78%, #e9e6f5 0 46px, rgba(233, 230, 245, 0) 80px),
    radial-gradient(circle at 93% 30%, #d9f0ea 0 64px, rgba(217, 240, 234, 0) 100px),
    radial-gradient(circle at 85% 80%, #fbf5c8 0 42px, rgba(251, 245, 200, 0) 74px),
    linear-gradient(180deg, #ffffff 0%, #faf9f7 100%) !important;
}
.helpdesk-home-container .home-search:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--kfc-pastel-red) !important;
  box-shadow: 0 0 0 3px rgba(184, 41, 59, 0.18) !important;
}
::selection {
  background: rgba(184, 41, 59, 0.16);
}
/* ==========================================================================================
   2.15.0 — Illustrations dessinées (pics/illustrations, SVG légers) : thème KFC, restaurant,
   support et maintenance, avec une touche sénégalaise discrète (baobab, motifs wax).
   Accueil des restaurants : restaurant à gauche, agente du support à droite.
   Bandeau « Bonjour » : technicien de maintenance.
   ========================================================================================== */
.helpdesk-home-container .search-banner {
  background:
    url("../pics/illustrations/comptoir.svg") left 2% bottom 8px / auto 86% no-repeat,
    url("../pics/illustrations/assistance.svg") right 2% bottom 8px / auto 86% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #faf9f7 100%) !important;
}
@media (max-width: 1399.98px) {
  .helpdesk-home-container .search-banner {
    background:
      url("../pics/illustrations/comptoir.svg") left -40px bottom 8px / auto 62% no-repeat,
      url("../pics/illustrations/assistance.svg") right -40px bottom 8px / auto 62% no-repeat,
      linear-gradient(180deg, #ffffff 0%, #faf9f7 100%) !important;
  }
}
@media (max-width: 991.98px) {
  .helpdesk-home-container .search-banner {
    background:
      url("../pics/illustrations/assistance.svg") right -20px bottom 0 / auto 120px no-repeat,
      linear-gradient(180deg, #ffffff 0%, #faf9f7 100%) !important;
    padding-bottom: 110px !important;
  }
}
/* Bandeau « Bonjour » : le technicien remplace l'emblème */
.kfc-banner {
  min-height: 132px;
}
.kfc-banner .kfc-banner-emblem.kfc-banner-illus {
  height: 128px;
  margin-top: 4px;
  filter: none;
}
@media (max-width: 767.98px) {
  .kfc-banner .kfc-banner-emblem.kfc-banner-illus {
    height: 84px;
  }
}
/* ==========================================================================================
   2.16.0 — Barre du haut et menu de gauche aux couleurs KFC : rouge et noir.
   Barre du haut rouge KFC (#c8102e, un peu moins vif que le rouge de la charte), hauteur normale
   (56 px) ; menu de gauche et zone du logo noirs, logo blanc ; élément actif marqué de rouge.
   Bandeau « Bonjour » : noir et rouge, illustration conservée.
   ========================================================================================== */
:root {
  --kfc-top-red: #c8102e;
  --kfc-side-black: #161616;
}
/* Barre du haut : rouge, hauteur normale, texte blanc */
header.navbar {
  background: var(--kfc-top-red) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  min-height: 56px !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
header.navbar a,
header.navbar .nav-link,
header.navbar .navbar-brand,
header.navbar .btn-ghost-secondary,
header.navbar .ti,
header.navbar .breadcrumb a,
header.navbar .breadcrumb-item,
header.navbar .breadcrumb-item::before {
  color: #ffffff !important;
}
header.navbar .dropdown-menu a,
header.navbar .dropdown-menu .dropdown-item,
header.navbar .dropdown-menu .ti {
  color: var(--kfc-ink) !important;
}
header.navbar input,
header.navbar input[type="search"] {
  background-color: #ffffff !important;
  border: 0 !important;
  color: var(--kfc-ink) !important;
}
/* Menu de gauche : noir, texte blanc, élément actif rouge */
aside.sidebar,
#menu {
  background-color: var(--kfc-side-black) !important;
  border-right: 0 !important;
}
#menu a,
aside.sidebar a,
aside.sidebar .nav-link,
aside.sidebar .nav-link .ti,
aside.sidebar .ti {
  color: #f1f1f1 !important;
}
aside.sidebar .nav-link .ti {
  color: #bdbdbd !important;
}
aside.sidebar .nav-link:hover,
#menu a:hover,
.sidebar a:hover {
  background-color: #262626 !important;
}
#menu .active > a,
.sidebar .active > a,
aside.sidebar .nav-link.active {
  background: #262626 !important;
  color: #ffffff !important;
  border-left: 4px solid var(--kfc-top-red) !important;
}
aside.sidebar .nav-link:hover .ti,
aside.sidebar .active > .nav-link .ti,
aside.sidebar .nav-link.active .ti {
  color: #ff4d5e !important;
}
aside.sidebar .dropdown-menu a,
aside.sidebar .dropdown-menu .dropdown-item,
aside.sidebar .dropdown-menu .ti {
  color: var(--kfc-ink) !important;
}
/* Zone du logo : noire, même hauteur que la barre du haut, logo blanc */
aside.sidebar .navbar-brand {
  background: var(--kfc-side-black) !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 56px !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.page .glpi-logo {
  background: url("../pics/logo-negatif.png") center / contain no-repeat !important;
  width: 140px !important;
  height: 46px !important;
}
/* Filigrane du Colonel en bas du menu : discret sur le noir */
@media (min-width: 992px) {
  aside.sidebar.navbar-vertical::after {
    opacity: 0.08;
    filter: grayscale(1) invert(1);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  }
}
/* Téléphones et tablettes : barre noire, menu ouvert sur fond blanc */
@media (max-width: 991.98px) {
  aside.sidebar {
    background: var(--kfc-side-black) !important;
    border-bottom: 3px solid var(--kfc-top-red) !important;
  }
  aside.sidebar a:not(#navbar-menu a),
  aside.sidebar .nav-link:not(#navbar-menu .nav-link),
  aside.sidebar .ti:not(#navbar-menu .ti),
  aside.sidebar .navbar-toggler {
    color: #ffffff !important;
  }
  aside.sidebar #navbar-menu a,
  aside.sidebar #navbar-menu .nav-link,
  aside.sidebar #navbar-menu .ti {
    color: var(--kfc-ink) !important;
  }
  aside.sidebar #navbar-menu .nav-link.active {
    background: var(--kfc-warm) !important;
    color: var(--kfc-ink) !important;
  }
}
/* Bandeau « Bonjour » : noir, filet rouge, rayures du seau rouges discrètes à droite */
.kfc-banner {
  border-top: 5px solid var(--kfc-top-red) !important;
  background:
    repeating-linear-gradient(90deg, rgba(200, 16, 46, 0.22) 0 24px, transparent 24px 48px) right / 34% 100% no-repeat,
    linear-gradient(90deg, #161616 0%, #1f1f1f 60%, #2a2a2a 100%) !important;
}
.kfc-banner::before {
  background: linear-gradient(90deg, #161616 0%, rgba(22, 22, 22, 0.94) 50%, rgba(22, 22, 22, 0) 78%) !important;
}
.kfc-banner h1 {
  color: #ffffff !important;
}
.kfc-banner p {
  color: #c9c9c9 !important;
}
.kfc-banner p b {
  color: #ff6b78 !important;
}
.kfc-banner .kfc-banner-emblem.kfc-banner-illus {
  background: #ffffff;
  border-radius: 12px;
  padding: 4px 8px;
}
/* Écran étroit : élément actif lisible sur la barre noire */
@media (max-width: 991.98px) {
  aside.sidebar .nav-link.active:not(#navbar-menu .nav-link) {
    color: #ffffff !important;
  }
  aside.sidebar .nav-link.active:not(#navbar-menu .nav-link) .ti {
    color: #ff4d5e !important;
  }
}
/* ==========================================================================================
   2.16.3 — Lieux et entités simplifiés partout (kfcbrand.js) : valeur choisie et options des listes
   déroulantes, fiches, en-têtes. Sur une ligne dans les listes, lisibles sur l'option survolée.
   ========================================================================================== */
.select2-selection .kfc-place,
.select2-results__option .kfc-place,
.navbar .kfc-place { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
.select2-results__option--highlighted .kfc-place > .ti,
.select2-results__option--highlighted .kfc-place > small { color: inherit; opacity: .8; }
/* ==========================================================================================
   2.17.0 — Mascotte « Awa » (pics/awa, kfcbrand.js) : page de connexion et interface simplifiée
   des restaurants (envoi en cours, ticket créé, erreur, liste vide).
   ========================================================================================== */
.kfc-awa { display: block; height: auto; pointer-events: none; user-select: none; }
/* Connexion : Awa salue à droite du formulaire ; au-dessus sur tablette et téléphone */
body.welcome-anonymous .main-content-card { position: relative; }
.kfc-awa-login { position: absolute; left: calc(100% + 24px); bottom: 0; width: 220px; z-index: 2; animation: kfc-awa-hello .7s ease-out both; }
@media (max-width: 1199.98px) { .kfc-awa-login { position: static; width: 104px; margin: 12px auto 0; } }
@keyframes kfc-awa-hello { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Envoi d'un formulaire : visible seulement pendant le chargement du bouton « Envoyer » */
[data-glpi-form-renderer-actions] { align-items: center; }
.kfc-awa-reflexion { display: none; width: 72px; margin-left: 12px; }
[data-glpi-form-renderer-actions]:has(.btn-loading) .kfc-awa-reflexion { display: block; animation: kfc-awa-hello .3s ease-out both; }
/* Formulaire envoyé : Awa contente au-dessus de la confirmation */
.kfc-awa-succes { width: 150px; margin: 0 auto 8px; }
/* Messages d'erreur : petite Awa à gauche du texte */
.kfc-awa-toast { display: flex; align-items: flex-start; gap: 10px; }
.kfc-awa-erreur { flex: 0 0 52px; width: 52px; }
/* Listes vides : Awa à la place de l'icône d'information */
.kfc-awa-empty .alert-icon { display: none; }
.kfc-awa-empty .kfc-awa-vide { width: 72px; margin: -6px 0 -6px -4px; }