:root{
	--primary-1: #667eea;
	--primary-2: #764ba2;
	--accent: #f5576c;
	--muted: #6c757d;
	--card-bg: #ffffff;
	--soft-shadow: 0 6px 18px rgba(34,41,47,0.09);
	--trans-fast: 0.12s;
	--trans: 0.18s;
	--trans-slow: 0.28s;
	--trans-ease: cubic-bezier(.2,.9,.2,1);
}

/* Theme overrides depending on logged user type */
body.theme-company{
	/* Pink / magenta gradient for companies */
	--primary-1: #f5576c;
	--primary-2: #f093fb;
	--accent: #ff7aa2;
}

body.theme-developer{
	/* Explicitly keep developer colors (blue/purple) */
	--primary-1: #667eea;
	--primary-2: #764ba2;
	--accent: #f5576c;
}

/* Body base */
body{
	background: #ffffff; /* fond uni pour éviter l'effet de grille en bas */
	color: #222;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Site-wide subtle transitions for smoother interactions */
a, button, input, select, textarea, .card, .list-group-item, .profile-card, .project-card, .login-select-card, .form-card, .profile-avatar, .company-line, .welcome-card, .welcome-hero{
	-webkit-transition: background-color var(--trans) var(--trans-ease),
						color var(--trans) var(--trans-ease),
						box-shadow var(--trans) var(--trans-ease),
						transform var(--trans) var(--trans-ease),
						border-color var(--trans) var(--trans-ease);
	transition: background-color var(--trans) var(--trans-ease),
				color var(--trans) var(--trans-ease),
				box-shadow var(--trans) var(--trans-ease),
				transform var(--trans) var(--trans-ease),
				border-color var(--trans) var(--trans-ease);
}

/* Disable transitions for the top navigation/header to keep it stable during page swaps */
.navbar, .navbar * {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Page enter/exit animations (used when navigating between pages) */
#page-wrapper{
	will-change: opacity, transform;
}
.page-enter{opacity:0; transform: translateY(8px);} 
.page-enter{opacity:0;}
.page-enter-active{opacity:1; transition: opacity 360ms var(--trans-ease);} 
.page-exit{opacity:0; transition: opacity 300ms var(--trans-ease); pointer-events:none}

/* Stagger reveal for items (project cards, list items) */
.stagger-item{ opacity:0; transform: translateY(12px); }
.stagger-item.stagger-show{ opacity:1; transform: translateY(0); transition: opacity 420ms var(--trans-ease), transform 420ms var(--trans-ease); }
.stagger-item.stagger-hide{ opacity:0; transform: translateY(-10px); transition: opacity 260ms var(--trans-ease), transform 260ms var(--trans-ease); }

/* Profile card */
.profile-card{
	border: none;
	border-radius: 12px;
	background: var(--card-bg);
	box-shadow: var(--soft-shadow);
	overflow: hidden;
}
/* tiny hover tilt for profile cards */
.profile-card:hover{ transform: translateY(-4px); }

.profile-header{
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1.5rem;
	background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
	color: #fff;
}

.profile-avatar{
	width: 96px;
	height: 96px;
	border-radius: 50%;
		background: rgba(255,255,255,0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 28px;
	color: #fff;
	box-shadow: 0 6px 18px rgba(34,41,47,0.08);
	border: 2px solid rgba(255,255,255,0.06);
}

.profile-avatar.small{
	width:48px;
	height:48px;
	font-size:18px;
	background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
	color: #fff;
	box-shadow: 0 6px 14px rgba(34,41,47,0.06);
	border: 2px solid rgba(255,255,255,0.06);
}

/* Developer list single-line item */
.dev-line{
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	box-shadow: 0 6px 18px rgba(34,41,47,0.04);
	margin-bottom: 0.6rem;
	position: relative;
}

.company-line{
	border-radius: 8px;
	padding: 0.55rem 0.8rem;
	box-shadow: 0 6px 18px rgba(34,41,47,0.04);
	margin-bottom: 0.6rem;
	position: relative;
}

.dev-name{
	font-weight:600;
	color: #222;
	font-size: 1rem;
}

.dev-line .stretched-link{z-index:1}
.dev-line .profile-avatar{z-index:2}
.dev-line .dev-name{z-index:2}
.company-line .stretched-link{z-index:1}
.company-line .profile-avatar{z-index:2}
.company-line .company-name{z-index:2}

.profile-meta{
	flex: 1;
}

.profile-meta h2{
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.2px;
}

.profile-meta p{
	margin: 0.25rem 0 0;
	color: rgba(255,255,255,0.9);
}

.profile-body{
	padding: 1.25rem 1.5rem;
}

.profile-body h6{
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
	color: var(--muted);
}

/* Tabs */
.nav-tabs .nav-link{
	border: 0;
	color: var(--muted);
	padding: 0.65rem 1rem;
}
.nav-tabs .nav-link.active{
	color: var(--primary-2);
	font-weight: 600;
	border-bottom: 3px solid var(--primary-2);
}

/* Projects cards */
.project-card{
	border: none;
	border-radius: 8px;
	box-shadow: 0 6px 22px rgba(100,110,140,0.08);
	transition: transform var(--trans) var(--trans-ease), box-shadow var(--trans) var(--trans-ease);
}
.project-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 12px 36px rgba(100,110,140,0.12);
}
.project-card .card-body{
	padding: 1rem;
}
.project-title{
	font-size: 1rem;
	font-weight: 600;
}
.project-meta{
	font-size: 0.875rem;
	color: var(--muted);
}

/* Colored header for project cards */
.project-card-header{
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	color: #fff;
	background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
}
.project-card-header .project-title{color:#fff;margin-bottom:0.25rem}
.project-card-header .project-meta{color: rgba(255,255,255,0.92); display:block}
.project-card .card-body{padding:0.85rem 1rem 1rem}
.project-card .badge{align-self:flex-start}

/* Softer badge colors for project visibility (Public / Privée) */
.project-card .badge.bg-success,
.profile-header .badge.bg-success{
	background-color: #d8f6e0 !important; /* very light green */
	color: #1f6f3a !important; /* darker green text for contrast */
	box-shadow: none !important;
}
.project-card .badge.bg-danger,
.profile-header .badge.bg-danger{
	background-color: #ffe6e6 !important; /* very light red/pink */
	color: #7a1f1f !important; /* darker red text for contrast */
	box-shadow: none !important;
}

/* Make the whole card clickable via Bootstrap stretched-link and keep buttons on top */
.project-card{position:relative}
.project-card .btn{position:relative;z-index:2}
.project-card .stretched-link{z-index:1}

/* Buttons */
.btn-primary{
	background: linear-gradient(90deg,var(--primary-1),var(--primary-2));
	border: none;
	box-shadow: none;
	transition: transform var(--trans-fast) var(--trans-ease), box-shadow var(--trans-fast) var(--trans-ease), filter var(--trans-fast) var(--trans-ease);
}


.btn-primary:hover{
    /* Pas de lift (le conteneur se soulève déjà). On applique un léger assombrissement */
    transform: none;
    box-shadow: none;
    filter: brightness(0.85);
}

/* Company-specific button used on the login selection */
.btn-company{
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: #fff;
	border: none;
	box-shadow: none;
}
.btn-company:hover{
	filter: brightness(0.96);
	transform: translateY(-1px);
}

/* Ensure company buttons inside forms match the sizing/padding of other form buttons */
.app-form .btn-company{
	padding: 0.65rem 1.1rem;
	border-radius: 8px;
}
.app-form .btn-company.btn-lg{
	padding: 0.75rem 1.2rem;
}
/* Responsive */
@media (max-width: 767px){
	.profile-header{flex-direction: column; align-items: flex-start}
	.profile-avatar{width:80px;height:80px}
}

/* Utility */
.text-truncate.multiline{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Small helpers for welcome mini form */
.card-header.bg-danger{background: linear-gradient(90deg,#f5576c,#f093fb)!important}

/* Login selection cards */
.login-select-card{
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.04);
	transition: transform var(--trans) var(--trans-ease), box-shadow var(--trans) var(--trans-ease), border-color var(--trans) var(--trans-ease);
}
.login-select-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(50,60,90,0.06);
}
.login-select-card .login-icon img{
	width: 84px;
	height: 84px;
	object-fit: contain;
}
.login-select-card .card-title{font-weight:600}
.login-select-card .card-text{color:var(--muted)}
.login-select-card .card-body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.login-select-card form,
.login-select-card a.btn{
	flex: 0 0 auto;
	width: 100%;
	margin-bottom: 0.75rem;
}

.login-select-card form:last-child,
.login-select-card a.btn:last-child{
	margin-bottom: 0;
}

.login-select-card form button,
.login-select-card a.btn{
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5rem !important;
	margin: 0 !important;
	line-height: 1;
}

/* Bouton 'Créer un compte' : fond transparent et contour gris */
.btn-create{
	background: transparent !important;
	border: 1px solid rgba(0,0,0,0.12) !important;
	color: var(--muted) !important;
}
.btn-create:hover{
	background: rgba(0,0,0,0.03) !important;
	filter: none;
}

@media (max-width: 576px){
	.login-select-card .login-icon img{width:72px;height:72px}
}

/* Login page centering */
.login-page-center{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Login form styling */
.login-page-center .form-label{
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.login-page-center .form-control{
	font-size: 1rem;
	padding: 0.65rem 1.5rem;
	border-radius: 8px;
	width: 100%;
	max-width: 100%;
}

.login-page-center .form-control:focus{
	border-color: var(--primary-2);
	box-shadow: 0 0 0 0.2rem rgba(118,75,162,0.15);
}

.login-page-center .mb-3{
	margin-bottom: 1.5rem !important;
}

/* Universal form styles applied site-wide */
.form-card{
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(34,41,47,0.06);
	border: none;
	overflow: hidden;
}

.form-card-header{
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
	color: #fff;
}

/* Force pink header for company creation page when not logged in */
.form-card-header.company-form{
	background: linear-gradient(90deg, #f093fb, #f5576c);
	color: #fff;
}

.form-card-header .form-icon{
	width:48px;
	height:48px;
	border-radius:50%;
	background: rgba(255,255,255,0.08);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
}

.form-card .card-body{
	padding: 1.25rem 1.5rem;
}

.app-form .form-label{
	font-weight: 600;
	color: #333;
}

.app-form .form-control,
.app-form .form-select,
.app-form textarea{
	padding: 0.75rem 1rem;
	border-radius: 8px;
	border: 1px solid rgba(34,41,47,0.08);
	transition: box-shadow var(--trans-fast) var(--trans-ease), border-color var(--trans-fast) var(--trans-ease), background-color var(--trans-fast) var(--trans-ease);
}

.app-form .form-control:focus,
.app-form .form-select:focus,
.app-form textarea:focus{
	border-color: var(--primary-2);
	box-shadow: 0 6px 20px rgba(118,75,162,0.08);
	outline: none;
}

.app-form .invalid-feedback.d-block{
	margin-top: 0.4rem;
	color: #b00020;
}

.app-form .btn-primary{
	padding: 0.65rem 1.1rem;
	border-radius: 8px;
}

.app-form .btn-secondary{
	padding: 0.6rem 1rem;
	border-radius: 8px;
}

.app-form .form-footer{
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	align-items: center;
	margin-top: 1rem;
}

.app-form .small-muted{
	color: var(--muted);
	font-size: 0.875rem;
}

@media (max-width: 576px){
	.app-form .form-footer{flex-direction:column-reverse; align-items:stretch}
}

/* Categories dropdown styling to match site look */
.category-dropdown-menu{
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(34,41,47,0.12);
	border: 0;
	padding: 0.6rem;
}
.category-dropdown-menu .form-check{
	padding: 0.35rem 0.5rem;
	margin: 0;
}
.category-dropdown-menu .form-check-label{
	margin-left: 0.35rem;
	font-weight: 600;
	color: #333;
}
.category-dropdown-menu .form-check-input{
	transform: scale(1.05);
	margin-top: 0.15rem;
}
.btn-category-toggle{
	background: linear-gradient(90deg,var(--primary-1),var(--primary-2));
	color: #fff;
	border: none;
}
.btn-category-toggle:hover{ filter: brightness(0.95); }

/* Icon-only action links */
.icon-action{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:8px;
	color: var(--muted);
	transition: background var(--trans-fast) var(--trans-ease), color var(--trans-fast) var(--trans-ease), transform var(--trans-fast) var(--trans-ease);
	text-decoration: none;
}
.icon-action:hover{
	background: rgba(0,0,0,0.04);
	color: var(--primary-2);
	text-decoration: none;
}
.icon-action.text-danger:hover{ color: #c82333; }


/* Highlight items that belong to the current logged-in user */
.my-self-developer{
	background: linear-gradient(90deg, rgba(102,126,234,0.14), rgba(118,75,162,0.08));
	border: 1px solid rgba(102,126,234,0.18);
	box-shadow: 0 6px 18px rgba(102,126,234,0.04);
}
.my-self-company{
	background: linear-gradient(90deg, rgba(245,87,108,0.14), rgba(240,147,251,0.08));
	border: 1px solid rgba(245,87,108,0.18);
	box-shadow: 0 6px 18px rgba(245,87,108,0.04);
}

/* Hover/active micro-interactions for list items */
.list-group-item:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.04); }


.my-self-developer .dev-name{ color: var(--primary-2); font-weight:700 }
.my-self-company .company-name{ color: #c81b67; font-weight:700 }