* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary: #0A8CCB;
	--primary-light: #87ACD4;
	--primary-dark: #0177B6;
	--nav-patients-width: 80px;
	--sidebar-width: 250px;
	--sidebar-right-width: 280px;
	--header-height: 70px;
	--transition-speed: 0.3s;
}

body {
	text-align: <?php echo translate('left', $selectedLanguage); ?>;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #fafafa;
	overflow-x: hidden;
}

.form-group select {
	background: revert;
}
/* ===== HEADER STICKY ===== */
.header-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	background: white;
	border-bottom: 1px solid #dbdbdb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 1000;
}

.header-logo {
	display: flex;
	align-items: center;
	gap: 15px;
}

.header-logo img {
	height: 60px;
}

.header-center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

.patient-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px;
	background: #f8f9fa;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.2s;
}

.patient-info-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 6px;
	margin: 2px;
	background: #f8f9fa;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.2s;
}

.patient-info-header:hover {
	background: #e9ecef;
}

.patient-avatar-header {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--primary);
}
.patient-avatar-nav {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
}
.patient-avatar-nav.active {
	border: 3px solid var(--primary);
}

.patient-name-header {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.patient-age-header {
	font-size: 12px;
	color: #888;
}
	
/* Badges dans le menu navigation */
.patient-status-badge {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-block;
	margin-top: 2px;
	font-weight: 600;
}

.badge-action {
	background-color: #e3f2fd;
	color: #0A8CCB;
	border: 1px solid #b6e4f4;
	animation: pulse-blue 2s infinite;
}

.badge-wait {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
}

/* Icônes sur l'avatar (Desktop) */
.nav-status-icon {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	border: 1px solid white;
}
.status-received { background: #0A8CCB; color: white; }
.status-waiting { background: #ffc107; color: white; }

/* Icônes sur l'avatar (Mobile) */
.mobile-status-dot {
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
}
.bg-success { background-color: #28a745; }
.bg-warning { background-color: #ffc107; }

/* Animation pour attirer l'oeil sur les invitations reçues */
@keyframes pulse-blue {
0% { box-shadow: 0 0 0 0 rgba(10, 140, 203, 0.4); }
70% { box-shadow: 0 0 0 4px rgba(10, 140, 203, 0); }
100% { box-shadow: 0 0 0 0 rgba(10, 140, 203, 0); }
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}


.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: var(--radius-lg);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}

.btn-outline {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
}

.btn-outline:hover {
	background: var(--primary);
	color: white;
}

.btn-primary {
	background: var(--primary);
	color: white;
	box-shadow: 0 4px 15px rgba(10, 140, 203, 0.3);
}

.btn-primary:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(10, 140, 203, 0.4);
}

.btn-white {
	background: white;
	color: var(--primary);
}

.btn-white:hover {
	background: var(--bg-secondary);
	transform: translateY(-2px);
}

.btn-share-post {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 25px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	transition: all 0.3s;
	box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
	justify-content: center;
}

.btn-share-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(10, 140, 203, 0.4);
}

.user-menu-trigger {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid #dbdbdb;
	transition: all 0.2s;
}

.user-menu-trigger:hover {
	border-color: var(--primary);
	transform: scale(1.05);
}

/* ===== NAV PATIENTS (Fixed 80px) ===== */
.nav-patients {
	position: fixed;
	left: 0;
	top: var(--header-height);
	bottom: 0;
	width: var(--nav-patients-width);
	background: white;
	border-right: 1px solid #dbdbdb;
	display: flex;
	flex-direction: column;
	padding: 20px 0;
	z-index: 900;
	overflow-y: auto;
	overflow-x: hidden;
	transition: transform var(--transition-speed) ease;
}

.patient-switch-item {
	width: 60px;
	height: 60px;
	margin: 0 auto 12px;
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
}

.patient-info-nav.mobile-close {
	display: none;
}
.patient-switch-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid transparent;
	transition: all 0.2s;
}

.patient-switch-item.active .patient-switch-avatar {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(10, 140, 203, 0.2);
}
.patient-info-nav.mobile-close.active {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(10, 140, 203, 0.2);
	background: #eee;
}

.patient-switch-item:hover .patient-switch-avatar {
	transform: scale(1.05);
	border-color: #dbdbdb;
}

.patient-name-tooltip {
	position: absolute;
	left: 75px;
	top: 50%;
	transform: translateY(-50%);
	background: #262626;
	color: white;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 1100;
}

.patient-switch-item:hover .patient-name-tooltip {
	opacity: 1;
}

.btn-add-patient {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border: 2px dashed #dbdbdb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	color: #8e8e8e;
	font-size: 24px;
}

.btn-add-patient:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(10, 140, 203, 0.05);
}

/* ===== SIDEBAR LEFT (Extensible) ===== */
.sidebar-left {
	position: fixed;
	left: var(--nav-patients-width);
	top: var(--header-height);
	bottom: 0;
	width: var(--sidebar-width);
	background: white;
	border-right: 1px solid #dbdbdb;
	transition: transform var(--transition-speed) ease;
	z-index: 850;
	overflow-y: auto;
	overflow-x: hidden;
}

.sidebar-left.collapsed {
	transform: translateX(-100%);
}

/* CORRECTION: Toggle externe à la sidebar */
.sidebar-toggle {
	position: fixed;
	left: calc(var(--nav-patients-width) + var(--sidebar-width) - 20px);
	top: calc(var(--header-height) + 20px);
	width: 40px;
	height: 40px;
	background: white;
	border: 1px solid #dbdbdb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-speed);
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sidebar-toggle.collapsed {
	left: calc(var(--nav-patients-width) - 20px);
}

.sidebar-toggle:hover {
	background: var(--primary);
	color: white;
	border-color: var(--primary);
}

.sidebar-nav {
	padding: 24px 16px;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	color: #262626;
	margin-bottom: 4px;
}

.nav-item:hover,
.nav-item.active {
	background: #f8f9fa;
	color: var(--primary);
}

.nav-item i {
	width: 24px;
	font-size: 20px;
}

.nav-item-label {
	font-size: 15px;
	font-weight: 500;
}

/* ============================================================
MENU UTILISATEUR (HEADER)
============================================================ */

.user-menu-container {
position: relative;
display: inline-block;
}

/* Style du déclencheur (Avatar/Initiales) */
.user-menu-trigger {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
/* Assure que la taille est fixée si ce n'est pas déjà fait ailleurs */
width: 40px; 
height: 40px;
border-radius: 50%;
object-fit: cover;
}

.user-menu-trigger:hover {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.2); /* Petit halo bleu */
}

/* Style spécifique pour les initiales */
.initials-avatar {
background: #ddd;
color: #555;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
border: 2px solid white;
}

/* Le Menu Déroulant */
.user-dropdown {
display: none; /* Caché par défaut */
position: absolute;
top: 120%; /* Juste en dessous de l'avatar */
right: 0;
width: 220px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
border: 1px solid #f0f0f0;
z-index: 2000;
overflow: hidden;
animation: slideDownMenu 0.2s ease-out;
}

/* Classe ajoutée par JS pour afficher */
.user-dropdown.active {
display: block;
}

@keyframes slideDownMenu {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Contenu du menu */
.dropdown-header-info {
padding: 15px;
background: #f8f9fa;
display: flex;
flex-direction: column;
}

.dropdown-header-info strong {
color: #333;
font-size: 14px;
}

.dropdown-header-info small {
color: #888;
font-size: 11px;
text-transform: uppercase;
}

.user-dropdown hr {
margin: 0;
border: 0;
border-top: 1px solid #eee;
}

.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
color: #555;
text-decoration: none;
font-size: 14px;
transition: background 0.2s;
}

.dropdown-item:hover {
background: #f0f8ff; /* Bleu très pâle */
color: #0A8CCB;
}

.dropdown-item i {
width: 20px;
text-align: center;
}

/* Style spécial pour Déconnexion */
.dropdown-item.text-danger {
color: #dc3545;
}

.dropdown-item.text-danger:hover {
background: #fff5f5;
color: #a71d2a;
}

	/* ===== LOGIN SECTION ===== */
	.container-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(var(--header-height)) 10px;
		min-height: 100vh;
	}
	
	.auth-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(var(--header-height) + 40px) 20px 40px;
		min-height: 100vh;
	}
	
	.login-container {
		width: 100%;
		max-width: 600px;
	}
	
	.auth-card {
		background: white;
		border-radius: 16px;
		/* padding: 40px; */
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
		animation: fadeIn 0.5s ease;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* ===== FEED CENTRAL ===== */
	.feed-container {
		margin-left: calc(var(--nav-patients-width) + var(--sidebar-width));
		margin-right: var(--sidebar-right-width);
		margin-top: var(--header-height);
		padding: 30px;
		/*min-height: calc(100vh - var(--header-height));*/
		transition: margin-left var(--transition-speed) ease;
	}
	
	.feed-container.sidebar-collapsed {
		margin-left: var(--nav-patients-width);
	}
	
	.feed-content {
		max-width: 800px;
		margin: 0 auto;
	}
	
	/* Activity Card Instagram Style */
	.activity-card-insta {
		background: white;
		border: 1px solid #dbdbdb;
		border-radius: 8px;
		margin-bottom: 24px;
		width: 100%;
	}
			
	.activity-card-header {
		display: flex;
		align-items: center;
		padding: 14px 16px;
		gap: 12px;
	}
	
	.activity-avatar-insta {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid #f0f0f0;
	}
	
	.activity-author-info {
		flex: 1;
	}
	
	.activity-author-name {
		font-weight: 600;
		font-size: 14px;
		line-height: 1.2;
	}
	
	.activity-role-time {
		font-size: 12px;
		color: #8e8e8e;
	}
	
	.activity-more {
		cursor: pointer;
		padding: 8px;
	}
	
	.activity-media {
		max-width: 100%;
		max-height: 600px;
		object-fit: cover;
	}
	
	.activity-body {
		padding: 14px 16px;
	}
	
	.activity-actions-bar {
		display: flex;
		gap: 16px;
		margin-top: 12px;
		margin-bottom: 12px;
	}
	
	.action-icon-insta {
		font-size: 24px;
		cursor: pointer;
		transition: all 0.2s;
		color: #262626;
	}
	
	.action-icon-insta:hover {
		color: var(--primary);
		transform: scale(1.1);
	}
	
	.activity-score-insta {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}
	
	.score-emoji-large {
		font-size: 28px;
	}
	
	.score-text {
		font-weight: 600;
		font-size: 14px;
	}
	
	.activity-text-insta {
		font-size: 14px;
		line-height: 1.5;
		color: #262626;
	}
	
	.activity-text-insta .author-mention {
		font-weight: 600;
	}
	
	/* Private Notes */
	.private-notes-insta {
		margin-top: 12px;
		padding: 12px;
		background: linear-gradient(135deg, #ccc 0%, #333 100%);
		border-radius: 8px;
		position: relative;
		overflow: hidden;
	}
	
	.private-notes-insta::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -50%;
		width: 200%;
		height: 200%;
		background: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 10px,
			rgba(255,255,255,0.05) 10px,
			rgba(255,255,255,0.05) 20px
		);
		animation: stripe-move 20s linear infinite;
		pointer-events: none;
	}
	
	@keyframes stripe-move {
		0% { transform: translate(0, 0); }
		100% { transform: translate(50px, 50px); }
	}
	
	.private-notes-header-insta {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 8px;
		color: white;
		font-size: 12px;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}
	
	.private-notes-header-insta small {
		margin-left: auto;
		font-size: 10px;
		font-weight: 400;
		opacity: 0.9;
		background: rgba(255,255,255,0.2);
		padding: 2px 6px;
		border-radius: 8px;
	}
	
	.private-notes-content-insta {
		background: rgba(255, 255, 255, 0.95);
		padding: 10px 12px;
		border-radius: 6px;
		color: #333;
		font-size: 13px;
		line-height: 1.5;
		position: relative;
		z-index: 1;
		border-left: 3px solid #ffd700;
	}
	
	.private-notes-content-insta::before {
		content: '\f023';
		font-family: 'FontAwesome';
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		font-size: 40px;
		color: rgba(0, 0, 0, 0.03);
		pointer-events: none;
	}
	
	/* Activity Menu Dropdown */
	.activity-menu-dropdown {
		position: fixed;
		background: white;
		border: 1px solid #dbdbdb;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		z-index: 2100;
		min-width: 200px;
		display: none;
	}
	
	.activity-menu-dropdown.active {
		display: block;
	}
	
	.menu-option-item {
		padding: 12px 16px;
		cursor: pointer;
		transition: background 0.2s;
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 14px;
		color: #262626;
	}
	
	.menu-option-item:hover {
		background: #fafafa;
	}
	
	.menu-option-item i {
		width: 20px;
		color: #8e8e8e;
	}
	
	.menu-option-item.danger {
		color: #ed4956;
	}
	
	.menu-option-item.danger i {
		color: #ed4956;
	}
	
	/* =====  ===== */
/* Activity Meta Instagram Style */
.activity-meta-insta {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 12px;
}

.activity-link-insta {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: linear-gradient(135deg, #e7f3ff 0%, #f0f8ff 100%);
border-radius: 8px;
border-left: 3px solid var(--primary);
cursor: pointer;
transition: all 0.3s;
margin-bottom: 8px;
}

.activity-link-insta:hover {
background: linear-gradient(135deg, #d1e9ff 0%, #e0f2ff 100%);
transform: translateX(4px);
}

.activity-link-insta i {
color: var(--primary);
font-size: 18px;
}

.activity-page-title {
font-weight: 600;
font-size: 14px;
color: #262626;
}

.activity-duration-insta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
padding: 6px 12px;
background: #f8f9fa;
border-radius: 6px;
width: fit-content;
}

.activity-duration-insta i {
color: var(--primary);
}

/* Milestones Details */
.milestones-details {
margin-top: 10px;
}

.milestones-details summary {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: #666;
transition: all 0.2s;
}

.milestones-details summary:hover {
background: #e9ecef;
}

.milestones-details summary i {
color: var(--primary);
}

.milestone-count {
margin-left: auto;
background: var(--primary);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
}

.timeline-insta {
display: flex;
gap: 8px;
padding: 12px;
overflow-x: auto;
background: #fafafa;
border-radius: 6px;
margin-top: 8px;
}

.milestone-mini {
flex: 0 0 auto;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}

.milestone-mini:hover {
transform: translateY(-4px);
}

.milestone-mini i {
font-size: 20px;
}

.milestone-date-mini {
font-size: 9px;
font-weight: 600;
color: rgba(0, 0, 0, 0.6);
}
.milestone-mini.non {
background: linear-gradient(135deg,#fee2e2 0%, #fecaca 100%); 
color: #ef4444;
}

.milestone-mini.todo {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
color: #ca8a04;
}

.milestone-mini.big-help {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
color: #f97316;
}

.milestone-mini.medium-help {
background: linear-gradient(135deg, #fff9e6 0%, #fff3d6 100%);
color: #fb923c;
}

.milestone-mini.small-help {
background: linear-gradient(135deg, #fff9e6 0%, #fff3d6 100%);
color: #eab308;
}

.milestone-mini.done {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
color: #22c55e;
}

/* Sharing Info Instagram Style */
.sharing-info-insta {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 12px;
}

.sharing-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #fff3cd;
border-radius: 8px;
border-left: 3px solid #ffc107;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #856404;
}

.sharing-summary i {
color: #ff9800;
}

.sharing-period {
flex: 1;
}

.problem-badge-insta {
background: #dc3545;
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
}

.sharing-content-insta {
padding: 12px;
background: #fafafa;
border-radius: 6px;
margin-top: 8px;
}

.problem-item {
margin-bottom: 12px;
padding: 10px;
background: white;
border-radius: 6px;
border-left: 3px solid #ff9800;
}

.problem-item:last-child {
margin-bottom: 0;
}

.problem-label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 12px;
color: #333;
margin-bottom: 6px;
}

.problem-label i {
color: #ff9800;
}

.problem-text {
font-size: 13px;
color: #666;
line-height: 1.5;
padding-left: 22px;
}

.no-problems {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #28a745;
margin: 0;
}

.no-problems i {
font-size: 16px;
}
	/* ===== SIDEBAR RIGHT ===== */
	.sidebar-right {
		position: fixed;
		right: 0;
		top: var(--header-height);
		bottom: 0;
		width: var(--sidebar-right-width);
		background: white;
		border-left: 1px solid #dbdbdb;
		padding: 24px 16px;
		overflow-y: auto;
		z-index: 900;
	}
	
	.sidebar-section {
		margin-bottom: 24px;
	}
	
	.sidebar-title {
		font-size: 14px;
		font-weight: 600;
		color: #8e8e8e;
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.team-member-mini {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.2s;
	}
	
	.team-member-mini:hover {
		background: #fafafa;
	}
	
	.team-avatar-mini {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
		position: relative;
	}
	
	.status-dot-mini {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 2px solid white;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	.status-online { background: #4caf50; }
	.status-offline { background: #bdbdbd; }
	.status-admin { 
		width: 16px;
		height: 16px;
		border: none;
	}
	.status-admin::before {
		content: "⚙️";  
	}
	.team-member-info {
		flex: 1;
	}
	
	.team-member-name {
		font-weight: 600;
		font-size: 14px;
		line-height: 1.2;
	}
	
	.team-member-role {
		font-size: 12px;
		color: #8e8e8e;
	}
	
	.quick-action-btn {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px;
		background: #fafafa;
		border: none;
		border-radius: 8px;
		width: 100%;
		cursor: pointer;
		transition: all 0.2s;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 500;
	}
	
	.quick-action-btn:hover {
		background: #f0f0f0;
	}
	
	.quick-action-btn i {
		width: 24px;
		text-align: center;
	}
	
	/* ===== MODALE DE PARTAGE ===== */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 2200;
	}
	
	.modal-overlay.active {
		display: flex;
	}
	
	.modal-content {
		background: white;
		border-radius: 12px;
		width: 90%;
		max-width: 600px;
		max-height: 90vh;
		overflow-y: auto;
	}
	
	.modal-header {
		padding: 20px;
		border-bottom: 1px solid #dbdbdb;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.modal-title {
		font-size: 18px;
		font-weight: 600;
	}
	
	.modal-close {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: #8e8e8e;
	}
	
	.modal-body {
		padding: 20px;
	}
	
	.post-textarea {
		width: 100%;
		border: 1px solid #dbdbdb;
		border-radius: 8px;
		padding: 12px;
		font-size: 14px;
		font-family: inherit;
		resize: vertical;
		min-height: 100px;
	}
	
	.attachments-bar {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin: 15px 0;
		padding: 15px;
		background: #f8f9fa;
		border-radius: 8px;
	}
	
	.attachment-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		cursor: pointer;
		padding: 8px;
		border-radius: 6px;
		transition: background 0.2s;
	}
	
	.attachment-btn:hover {
		background: #e9ecef;
	}
	
	.attachment-btn i {
		font-size: 24px;
		color: var(--primary);
	}
	
	.attachment-btn span {
		font-size: 10px;
		color: #666;
	}
	
	.attachment-btn input[type="file"] {
		display: none;
	}
	
	.privacy-select {
		width: 100%;
		padding: 10px;
		border: 1px solid #dbdbdb;
		border-radius: 8px;
		margin-bottom: 15px;
	}
	
	.btn-submit-post {
		width: 100%;
		padding: 14px;
		background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
		color: white;
		border: none;
		border-radius: 8px;
		font-weight: 600;
		cursor: pointer;
		font-size: 16px;
	}
	
	.btn-submit-post:hover {
		opacity: 0.9;
	}
	
	/* Empty State */
	.empty-state-feed {
		text-align: center;
		padding: 80px 20px;
		color: #8e8e8e;
	}
	
	/* .empty-state-feed i {
		font-size: 64px;
		margin-bottom: 20px;
		opacity: 0.3;
	} */
	
	/* ===== MOBILE NAV ===== */
	.mobile-top-nav {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 70px;
		background: white;
		border-bottom: 1px solid #dbdbdb;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		z-index: 1100;
	}
	
	.mobile-toggle-btn {
		width: 40px;
		height: 40px;
		border: none;
		background: none;
		font-size: 24px;
		cursor: pointer;
		color: #333;
	}
	
	.mobile-logo {
		height: 48px;
	}
	
	.mobile-bottom-nav {
		display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: white;
		border-top: 1px solid #dbdbdb;
		justify-content: space-around;
		align-items: center;
		z-index: 1000;
	}
	
	.mobile-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		color: #262626;
		font-size: 11px;
		cursor: pointer;
		padding: 8px;
	}
	
	.mobile-nav-item i {
		font-size: 24px;
	}
	
	.mobile-nav-item.active {
		color: var(--primary);
	}
	
.mobile-nav-icon-wrapper {
position: relative;
display: inline-block;
line-height: 0; /* Important pour ne pas décaler l'icône */
}

.mobile-badge-count {
position: absolute;
top: -8px;
right: -10px;
background-color: var(--primary-dark);
color: white;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
line-height: 18px; /* Centrage vertical */
text-align: center;
border-radius: 50%;
border: 2px solid white; /* Contour blanc pour détacher l'icône */
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 10;
}

/* Animation optionnelle pour attirer l'attention */
.mobile-badge-count.pulse {
background-color: #dc3545; /* Rouge alerte */
animation: pulse-red 2s infinite;
}

.access-person-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
margin: 5px 0;
background: #f8f9fa;
border-radius: 6px;
border-left: 3px solid #007bff;
}

.access-person-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}

.access-person-info {
flex: 1;
}

.access-person-name {
font-weight: 600;
color: #333;
}

.access-person-type {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: #007bff;
color: white;
margin-left: 5px;
}

.access-person-relationship {
font-size: 12px;
color: #666;
}

.modal-content-custom {
background: white;
padding: 30px;
border-radius: 8px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}

	.add-activity-btn {
		width: 100%;
		padding: 15px;
		background: linear-gradient(135deg, #87ACD4 0%, #0177B6 100%);
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		transition: transform 0.2s;
	}
	
	.add-activity-btn:hover {
		transform: scale(1.02);
	}
	
	.activity-btn {
		width: 47%;
		padding: 15px;
		background: linear-gradient(135deg, #87ACD4 0%, #0177B6 100%);
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 25px;
		align-items: center;
		justify-content: center;
		margin: 15px 1%;
		transition: transform 0.2s;
	}
	
	.activity-btn:hover {
		transform: scale(1.02);
	}
	
	/* Responsive 1280*/
	@media (max-width: 1046px) {
		.sidebar-right {
			/* display: none; */
			width: calc(var(--sidebar-right-width)/6*5);
		}
		.sidebar-left {
			/* display: none; */
			width: calc(var(--sidebar-width)/6*5);
		}
		.sidebar-toggle {
			left: calc(var(--nav-patients-width) + (var(--sidebar-width))/6*5 - 20px);
		}
		.feed-container {
			/*margin-right: 0;*/
			margin-top: var(--header-height);
			margin-left: calc(var(--nav-patients-width) + var(--sidebar-width)/6*5);
			margin-right: calc(var(--sidebar-right-width)/6*5);
		}
	}
	
	@media (max-width: 768px) {
		.sidebar-right {
			display: none;
		}
		.header-sticky {
			display: none;
		}
		
		.mobile-top-nav {
			display: flex;
		}
		
		.nav-patients {
			top: 60px;
			transform: translateX(-100%);
			z-index: 1050;
		}
		
		.nav-patients.mobile-open {
			transform: translateX(0);
			width: 200px
		}
		
		.sidebar-left {
			top: 60px;
			left: 0;
			transform: translateX(-100%);
			z-index: 1040;
		}
		
		.sidebar-left.mobile-open {
			transform: translateX(0);
		}
		.patient-switch-item.mobile-open {
			display: none;
		}
		.patient-info-nav.mobile-close {
			display: flex;
		}

		.sidebar-toggle {
			display: none;
		}
		
		.feed-container {
			margin-left: 0;
			margin-right: 0;
			margin-top: 60px;
			margin-bottom: 60px;
			padding: 15px;
		}
		
		.feed-container.sidebar-collapsed {
			margin-left: 0;
		}
		
		.mobile-bottom-nav {
			display: flex;
		}
		
		.header-center {
			display: none;
		}
	}
	
	/* Header */
	.objectives-header {
		background: white;
		border-bottom: 1px solid #dbdbdb;
		padding: 20px;
		position: sticky;
		top: 0;
		z-index: 100;
	}
	
	.header-content {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		align-items: stretch;
	}
	
	.header-left {
		display: flex;
		align-items: center;
		gap: 15px;
	}
	
	.back-btn {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: none;
		background: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.back-btn:hover {
		background: #e9ecef;
		transform: scale(1.05);
	}
	
	.header-title h1 {
		font-size: 24px;
		font-weight: 700;
		color: #262626;
		margin: 0;
	}
	
	.header-subtitle {
		font-size: 14px;
		color: #8e8e8e;
		margin-top: 4px;
	}
	
	.btn-add-objective {
		background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 25px;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		transition: all 0.3s;
		box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
	}
	
	.btn-add-objective:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(10, 140, 203, 0.4);
	}
	
	/* Container */
	.objectives-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 30px 20px;
	}
	
	@media (max-width: 1261px) {
		.header-content {
			max-width: 100%;
			/* flex-direction: column; */
		}
	}
	@media (max-width: 768px) {
		.objectives-header {
			padding: 15px;
		}
		
		.header-title h1 {
			font-size: 20px;
		}
		
		.btn-add-objective {
			padding: 10px 16px;
			font-size: 13px;
		}
		
		.objectives-container {
			padding: 20px 15px;
		}
		

	}

/* Grille Nom/Prénom */
.name-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

/* Privacy Panel Styles */
.privacy-panel {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e0e0e0;
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
	opacity: 0;
	transform: translateY(-10px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

.privacy-option-panel {
padding: 15px;
background: white;
border-radius: 6px;
margin-bottom: 10px;
}

.privacy-option-panel h5 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}

.privacy-option-panel .info-text,
.privacy-option-panel .warning-text {
font-size: 12px;
margin-bottom: 15px;
padding: 8px 12px;
border-radius: 6px;
}

.privacy-option-panel .info-text {
background: #e7f3ff;
color: #0056b3;
}

.privacy-option-panel .warning-text {
background: #fff5f5;
color: #dc3545;
}

.profession-list {
max-height: 300px;
overflow-y: auto;
}

.profession-group {
margin-bottom: 15px;
}

.profession-group label {
cursor: pointer;
user-select: none;
}

.exception-zone {
margin-left: 24px;
padding: 10px;
background: #f0f8ff;
border-radius: 6px;
border-left: 3px solid #28a745;
}

.privacy-checkboxes {
max-height: 400px;
overflow-y: auto;
}

.person-group {
margin-bottom: 20px;
}

.person-group h6 {
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid currentColor;
}

.privacy-select {
width: 100%;
padding: 12px 12px 12px 40px;
border: 1px solid #dbdbdb;
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
transition: border-color 0.2s;
}

.privacy-select:focus {
outline: none;
border-color: var(--primary);
}

/* Quick Actions Hero */
.quick-actions-hero {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid #e9ecef;
}

.hero-greeting {
margin-bottom: 25px;
}

.greeting-title {
font-size: 28px;
font-weight: 700;
color: #262626;
margin: 0 0 8px 0;
line-height: 1.2;
}

.greeting-subtitle {
font-size: 15px;
color: #666;
margin: 0;
line-height: 1.5;
}

.greeting-subtitle strong {
color: var(--primary);
font-weight: 600;
}

/* Action Cards Grid */
.action-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 16px;
margin-bottom: 20px;
}

.action-card {
background: white;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
}

.action-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
opacity: 0;
transition: opacity 0.3s;
}

.action-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.action-card:hover::before {
opacity: 1;
}

.action-card.primary {
border-color: rgba(10, 140, 203, 0.2);
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
}

.action-card.primary:hover {
border-color: var(--primary);
box-shadow: 0 12px 24px rgba(10, 140, 203, 0.25);
}

.action-card.secondary {
border-color: rgba(111, 66, 193, 0.2);
background: linear-gradient(135deg, #ffffff 0%, #f8f4ff 100%);
}

.action-card.secondary:hover {
border-color: #6f42c1;
box-shadow: 0 12px 24px rgba(111, 66, 193, 0.25);
}

.action-card.tertiary {
border-color: rgba(40, 167, 69, 0.2);
background: linear-gradient(135deg, #ffffff 0%, #f1f9f3 100%);
}

.action-card.tertiary:hover {
border-color: #28a745;
box-shadow: 0 12px 24px rgba(40, 167, 69, 0.25);
}

.card-icon-wrapper {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}

.gradient-blue {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
}

.gradient-purple {
background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.gradient-green {
background: linear-gradient(135deg, #28a745 0%, #20803a 100%);
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.gradient-orange {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.card-icon-wrapper i {
font-size: 26px;
color: white;
}

.card-content {
flex: 1;
position: relative;
z-index: 1;
}

.card-title {
font-size: 16px;
font-weight: 600;
color: #262626;
margin: 0 0 4px 0;
line-height: 1.3;
}

.card-description {
font-size: 13px;
color: #666;
margin: 0;
line-height: 1.4;
}

.card-arrow {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s;
position: relative;
z-index: 1;
}

.action-card:hover .card-arrow {
background: rgba(0, 0, 0, 0.1);
transform: translateX(4px);
}

.card-arrow i {
font-size: 14px;
color: #666;
}

/* Stats Row */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 12px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}

.stat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: white;
border-radius: 10px;
border: 1px solid #f0f0f0;
}

.stat-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.stat-icon i {
font-size: 20px;
color: var(--primary);
}

.emoji-large {
font-size: 24px;
}

.stat-info {
display: flex;
flex-direction: column;
gap: 2px;
}

.stat-label {
font-size: 11px;
color: #8e8e8e;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.stat-value {
font-size: 15px;
font-weight: 600;
color: #262626;
}

/* Feed Separator */
.feed-separator {
display: flex;
align-items: center;
margin: 30px 0 20px;
position: relative;
}

.feed-separator::before,
.feed-separator::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #dbdbdb, transparent);
}

.separator-text {
padding: 0 20px;
font-size: 13px;
font-weight: 600;
color: #8e8e8e;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 8px;
}

.separator-text i {
color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
.quick-actions-hero {
	padding: 20px;
	margin-bottom: 20px;
}

.greeting-title {
	font-size: 22px;
}

.greeting-subtitle {
	font-size: 14px;
}

.action-cards-grid {
	grid-template-columns: 1fr;
	gap: 12px;
}

.action-card {
	padding: 16px;
}

.card-icon-wrapper {
	width: 48px;
	height: 48px;
}

.card-icon-wrapper i {
	font-size: 22px;
}

.stats-row {
	/*grid-template-columns: 1fr;*/
	gap: 8px;
}
}

/* Animation d'entrée */
@keyframes fadeInUp {
from {
	opacity: 0;
	transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

.action-card {
animation: fadeInUp 0.5s ease-out backwards;
}

.action-card:nth-child(1) { animation-delay: 0.1s; }
.action-card:nth-child(2) { animation-delay: 0.2s; }
.action-card:nth-child(3) { animation-delay: 0.3s; }

.quick-actions-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2300;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}

.quick-actions-menu.active {
opacity: 1;
}

.quick-actions-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

.quick-actions-content {
position: relative;
background: white;
border-radius: 16px;
width: 90%;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.quick-actions-header {
padding: 20px;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}

.quick-actions-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
}

.quick-actions-header button {
background: none;
border: none;
font-size: 20px;
color: #8e8e8e;
cursor: pointer;
padding: 8px;
}

.quick-actions-list {
padding: 12px;
}

.quick-action-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 10px;
text-decoration: none;
color: #262626;
transition: all 0.2s;
margin-bottom: 8px;
}

.quick-action-item:hover {
background: #f8f9fa;
transform: translateX(4px);
}

.quick-action-item i {
width: 24px;
font-size: 20px;
color: var(--primary);
}

.quick-action-item span {
font-size: 15px;
font-weight: 500;
}

.share-type-cards {
display: flex;
flex-direction: column;
gap: 16px;
}

.share-type-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
}

.share-type-card:hover {
border-color: var(--primary);
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
}

.share-type-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.share-type-icon.quick {
background: linear-gradient(135deg, #28a745 0%, #20803a 100%);
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.share-type-icon.detailed {
background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.share-type-icon i {
font-size: 26px;
color: white;
}

.share-type-content {
flex: 1;
}

.share-type-content h4 {
margin: 0 0 6px 0;
font-size: 16px;
font-weight: 600;
color: #262626;
}

.share-type-content p {
margin: 0 0 8px 0;
font-size: 13px;
color: #666;
line-height: 1.4;
}

.time-estimate {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #8e8e8e;
background: rgba(0, 0, 0, 0.05);
padding: 4px 10px;
border-radius: 12px;
}

.share-type-card > .fa-chevron-right {
color: #ccc;
font-size: 18px;
transition: all 0.3s;
}

.share-type-card:hover > .fa-chevron-right {
color: var(--primary);
transform: translateX(4px);
}

/* Detailed Modal Styles */
.detailed-modal {
max-width: 700px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.detailed-modal .modal-body {
overflow-y: auto;
flex: 1;
}

/* Progress Steps */
.form-progress {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
position: relative;
}

.form-progress::before {
content: '';
position: absolute;
top: 50%;
left: 60px;
right: 60px;
height: 2px;
background: #e0e0e0;
z-index: 0;
}

.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
flex: 1;
}

.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 2px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
color: #8e8e8e;
transition: all 0.3s;
}

.progress-step span {
font-size: 11px;
color: #8e8e8e;
font-weight: 500;
text-align: center;
}

.progress-step.active .step-number {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-color: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
}

.progress-step.completed .step-number {
background: #28a745;
border-color: #28a745;
color: white;
}

.progress-step.completed .step-number::after {
content: '\f00c';
font-family: 'FontAwesome';
}

.progress-step.active span {
color: var(--primary);
font-weight: 600;
}

/* Form Steps */
.form-step {
display: none;
animation: fadeInStep 0.4s ease;
}

.form-step.active {
display: block;
}

@keyframes fadeInStep {
from {
	opacity: 0;
	transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

.step-header {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}

.step-header h4 {
font-size: 20px;
font-weight: 600;
color: #262626;
margin: 0 0 8px 0;
}

.step-header p {
font-size: 14px;
color: #666;
margin: 0;
}

/* Period Selection */
.period-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}

.period-card {
position: relative;
cursor: pointer;
}

.period-card input[type="radio"] {
position: absolute;
opacity: 0;
}

.period-content {
padding: 24px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
text-align: center;
transition: all 0.3s;
height: 100%;
}

.period-content i {
font-size: 36px;
color: var(--primary);
margin-bottom: 12px;
display: block;
}

.period-content h5 {
font-size: 15px;
font-weight: 600;
color: #262626;
margin: 0 0 6px 0;
}

.period-content p {
font-size: 12px;
color: #8e8e8e;
margin: 0;
}

.period-card:hover .period-content {
border-color: var(--primary);
background: #f0f8ff;
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(10, 140, 203, 0.15);
}

.period-card input:checked + .period-content {
border-color: var(--primary);
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
box-shadow: 0 8px 20px rgba(10, 140, 203, 0.2);
}

.period-card input:checked + .period-content::after {
content: '\f00c';
font-family: 'FontAwesome';
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

/* Mood Selection */
.mood-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30px, 17.9%));
gap: 12px;
}

.mood-card {
position: relative;
cursor: pointer;
}

.mood-card input[type="radio"] {
position: absolute;
opacity: 0;
}

.mood-card > div:first-of-type {
padding: 20px 12px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
text-align: center;
transition: all 0.3s;
}

.mood-emoji {
font-size: 48px;
margin-bottom: 10px;
}

.mood-card h5 {
font-size: 14px;
font-weight: 600;
color: #262626;
margin: 0 0 6px 0;
}

.mood-card p {
font-size: 11px;
color: #8e8e8e;
margin: 0;
line-height: 1.4;
}

.mood-card:hover > div:first-of-type {
border-color: var(--primary);
background: #f0f8ff;
transform: scale(1.05);
}

.mood-card input:checked + div {
border-color: var(--primary);
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
box-shadow: 0 8px 20px rgba(10, 140, 203, 0.2);
}

.mood-card input:checked + div .mood-emoji {
transform: scale(1.2);
}

/* Health Checks */
.health-checks {
display: flex;
flex-direction: column;
gap: 16px;
}

.check-card {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s;
}

.check-card:hover {
border-color: var(--primary-light);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.1);
}

.check-header {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
}

.check-toggle {
flex-shrink: 0;
position: relative;
cursor: pointer;
display: block;
}

.check-toggle input {
opacity: 0;
width: 0;
height: 0;
}

.toggle-slider {
display: block;
width: 50px;
height: 28px;
background: #ccc;
border-radius: 28px;
position: relative;
transition: all 0.3s;
}

.toggle-slider::before {
content: '';
position: absolute;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
top: 3px;
left: 3px;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.check-toggle input:checked + .toggle-slider {
background: var(--primary);
}

.check-toggle input:checked + .toggle-slider::before {
transform: translateX(22px);
}

.check-info {
flex: 1;
}

.check-info h5 {
font-size: 15px;
font-weight: 600;
color: #262626;
margin: 0 0 4px 0;
display: flex;
align-items: center;
gap: 8px;
}

.check-info h5 i {
color: var(--primary);
}

.check-info p {
font-size: 13px;
color: #666;
margin: 0;
}

.check-details {
padding: 0 16px 16px 16px;
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
	opacity: 0;
	max-height: 0;
}
to {
	opacity: 1;
	max-height: 200px;
}
}

.check-details textarea {
width: 100%;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
resize: vertical;
transition: border-color 0.3s;
}

.check-details textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
}

.checkbox-inline {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 20px;
cursor: pointer;
padding: 8px 12px;
border-radius: 8px;
transition: background 0.2s;
}

.checkbox-inline:hover {
background: #f8f9fa;
}

.checkbox-inline input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}

.checkbox-inline span {
font-size: 14px;
color: #262626;
}

/* Form Navigation */
.form-navigation {
display: flex;
gap: 12px;
margin-top: 30px;
padding-top: 20px;
border-top: 2px solid #f0f0f0;
}

.btn-nav {
flex: 1;
padding: 14px 24px;
border: 2px solid var(--primary);
background: white;
color: var(--primary);
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s;
}

.btn-nav:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
}

.btn-nav.btn-prev {
border-color: #e0e0e0;
color: #666;
}

.btn-nav.btn-prev:hover {
background: #f8f9fa;
color: #262626;
border-color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
.detailed-modal {
	max-width: 100%;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
}

.form-progress {
	padding: 15px 10px;
}

.progress-step span {
	font-size: 9px;
}

.step-number {
	width: 32px;
	height: 32px;
	font-size: 14px;
}

.period-selection,
.mood-selection {
	grid-template-columns: 1fr;
}

.mood-selection {
	grid-template-columns: repeat(2, 1fr);
}

.form-navigation {
	position: sticky;
	bottom: 0;
	background: white;
	border-top: 1px solid #e0e0e0;
}
}
/* */
/* Unified Share Modal */
.unified-share-modal {
max-width: 650px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.unified-share-modal .modal-body {
overflow-y: auto;
flex: 1;
}

/* Form Sections */
.form-section {
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #f0f0f0;
}

.form-section:last-child {
border-bottom: none;
}

.form-section.always-visible {
background: linear-gradient(to bottom, transparent, rgba(10, 140, 203, 0.02));
/*padding: 20px;*/
border-radius: 12px;
border-bottom: 2px solid #e9ecef;
}

.section-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #262626;
margin-bottom: 12px;
}

.section-label i {
color: var(--primary);
font-size: 16px;
}

.optional-badge {
margin-left: auto;
font-size: 11px;
font-weight: 500;
color: #8e8e8e;
background: #f0f0f0;
padding: 3px 10px;
border-radius: 12px;
}

/* Mood Selection Compact */
.mood-selection-compact {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.mood-option {
flex: 1;
min-width: 80px;
cursor: pointer;
}

.mood-option input[type="radio"] {
display: none;
}

.mood-bubble {
padding: 12px 8px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 10px;
text-align: center;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}

.mood-bubble .mood-emoji {
font-size: 32px;
}

.mood-bubble .mood-label {
font-size: 12px;
font-weight: 500;
color: #666;
}

.mood-option:hover .mood-bubble {
border-color: var(--primary);
background: #f0f8ff;
transform: translateY(-2px);
}

.mood-option input:checked + .mood-bubble {
border-color: var(--primary);
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.2);
}

.mood-option input:checked + .mood-bubble .mood-emoji {
transform: scale(1.1);
}

.mood-option input:checked + .mood-bubble .mood-label {
color: var(--primary);
font-weight: 600;
}

/* Privacy Select Unified */
.privacy-select {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
transition: all 0.3s;
font-family: inherit;
}

.privacy-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
}

.privacy-select option {
padding: 10px;
}

/* Privacy Person Label */
.privacy-person-label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
margin-bottom: 6px;
}

.privacy-person-label:hover {
background: #f8f9fa;
border-color: #e0e0e0;
}

.privacy-person-label input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}

.privacy-person-label.exclude:hover {
background: #fff5f5;
border-color: #ffcdd2;
}

.person-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.person-avatar:not(img) {
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
color: #666;
}

/* Expand Toggle */
.expand-toggle {
display: block;
cursor: pointer;
padding: 16px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
border: 2px dashed #ccc;
transition: all 0.3s;
}

.expand-toggle:hover {
border-color: var(--primary);
background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
}

.expand-toggle input[type="checkbox"] {
display: none;
}

.toggle-content {
display: flex;
align-items: center;
gap: 12px;
}

.toggle-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s;
}

.toggle-icon i {
font-size: 16px;
color: var(--primary);
transition: transform 0.3s;
}

.expand-toggle input:checked ~ .toggle-content .toggle-icon {
background: var(--primary);
}

.expand-toggle input:checked ~ .toggle-content .toggle-icon i {
color: white;
transform: rotate(90deg);
}

.toggle-text {
flex: 1;
}

.toggle-text strong {
display: block;
font-size: 15px;
color: #262626;
margin-bottom: 3px;
}

.toggle-text p {
font-size: 12px;
color: #666;
margin: 0;
}

/* Detailed Section */
.detailed-section {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border-left: 4px solid var(--primary);
animation: slideDown 0.4s ease;
}

@keyframes slideDown {
from {
	opacity: 0;
	max-height: 0;
	transform: translateY(-20px);
}
to {
	opacity: 1;
	max-height: 2000px;
	transform: translateY(0);
}
}

/* Period Selection Compact */
.period-selection-compact {
display: flex;
gap: 10px;
}

.period-option {
flex: 1;
cursor: pointer;
}

.period-option input[type="radio"] {
display: none;
}

.period-bubble {
padding: 14px 10px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 10px;
text-align: center;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.period-bubble i {
font-size: 24px;
color: var(--primary);
}

.period-bubble span {
font-size: 13px;
font-weight: 500;
color: #666;
}

.period-option:hover .period-bubble {
border-color: var(--primary);
background: #f0f8ff;
transform: translateY(-2px);
}

.period-option input:checked + .period-bubble {
border-color: var(--primary);
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.2);
}

.period-option input:checked + .period-bubble i {
transform: scale(1.1);
}

/* Health Checks Compact */
.health-checks-compact {
display: flex;
flex-direction: column;
gap: 12px;
}

.check-item {
background: white;
border-radius: 10px;
padding: 12px;
border: 2px solid #e9ecef;
transition: all 0.3s;
}

.check-item:hover {
border-color: var(--primary-light);
}

.check-toggle-inline {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}

.check-toggle-inline input[type="checkbox"] {
display: none;
}

.toggle-slider-inline {
width: 44px;
height: 24px;
background: #ccc;
border-radius: 24px;
position: relative;
transition: all 0.3s;
flex-shrink: 0;
}

.toggle-slider-inline::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
top: 3px;
left: 3px;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.check-toggle-inline input:checked + .toggle-slider-inline {
background: var(--primary);
}

.check-toggle-inline input:checked + .toggle-slider-inline::before {
transform: translateX(20px);
}

.check-label {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}

.check-label i {
color: var(--primary);
font-size: 16px;
}

.check-label span {
font-size: 14px;
font-weight: 500;
color: #262626;
}

.check-details-inline {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
animation: slideDownSmall 0.3s ease;
}

@keyframes slideDownSmall {
from {
	opacity: 0;
	max-height: 0;
}
to {
	opacity: 1;
	max-height: 150px;
}
}

.check-details-inline textarea {
width: 100%;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
resize: vertical;
}

.check-details-inline textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
}

.checkbox-inline-small {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 6px 12px;
border-radius: 6px;
background: #f8f9fa;
transition: background 0.2s;
}

.checkbox-inline-small:hover {
background: #e9ecef;
}

.checkbox-inline-small input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}

.checkbox-inline-small span {
font-size: 13px;
color: #262626;
}

/* Responsive */
@media (max-width: 768px) {
.unified-share-modal {
	max-width: 100%;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
}

.mood-selection-compact {
	flex-direction: column;
}

.mood-option {
	min-width: auto;
}

.period-selection-compact {
	flex-direction: column;
}

/* .form-section.always-visible {
	padding: 15px;
}*/
}


/* Duration Compact for Pros */
.duration-compact {
display: flex;
flex-direction: column;
gap: 12px;
}

.duration-display {
display: flex;
align-items: center;
gap: 12px;
}

.duration-input {
width: 90px;
padding: 10px 14px;
font-size: 20px;
font-weight: 700;
border: 2px solid #e0e0e0;
border-radius: 8px;
text-align: center;
background: white;
color: var(--primary);
transition: all 0.3s;
}

.duration-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
}

.duration-unit {
font-weight: 600;
font-size: 14px;
color: #666;
}

.duration-presets {
display: flex;
gap: 6px;
}

.preset-btn-mini {
flex: 1;
padding: 8px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
background: white;
color: #666;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: all 0.3s;
}

.preset-btn-mini:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}

.preset-btn-mini.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(10, 140, 203, 0.3);
}

/* Mood option special (séance familiale) */
.mood-option.special {
flex-basis: 100%;
max-width: 100%;
}

.mood-bubble.family {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-color: #6c757d;
}

.mood-option.special input:checked + .mood-bubble.family {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
}

.mood-option.special input:checked + .mood-bubble.family .mood-emoji {
transform: scale(1.1);
}

.mood-option.special input:checked + .mood-bubble.family .mood-label {
color: white;
}

.mood-hint {
display: flex;
align-items: flex-start;
gap: 8px;
}

.mood-hint i {
color: var(--primary);
margin-top: 2px;
}


/* Language Selector */
.language-selector {
position: relative;
}
.language-selector::after {
content: '';
}

.language-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
font-weight: 500;
color: #262626;
}

.language-trigger:hover {
border-color: var(--primary);
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.language-trigger .fi {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-name {
display: inline-block;
}

.language-trigger i.fa-chevron-down {
font-size: 12px;
color: #666;
transition: transform 0.3s;
}

.language-selector.open .language-trigger i.fa-chevron-down {
transform: rotate(180deg);
}

.language-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s;
z-index: 2000;
overflow: hidden;
}

.language-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.language-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
text-decoration: none;
color: #262626;
transition: all 0.2s;
border-bottom: 1px solid #f0f0f0;
}

.language-option:last-child {
border-bottom: none;
}

.language-option:hover {
background: #f8f9fa;
}

.language-option.active {
background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
color: var(--primary);
font-weight: 600;
}

.language-option .fi {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}

.language-option span:not(.fi) {
flex: 1;
font-size: 14px;
}

.language-option i.fa-check {
color: var(--primary);
font-size: 14px;
}

/* Animation hover */
.language-option::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary);
transform: scaleY(0);
transition: transform 0.3s;
}

.language-option.active::before {
transform: scaleY(1);
}

/* Responsive */
@media (max-width: 768px) {
/*.language-name {
	display: none;
}*/

.language-trigger {
	padding: 8px 10px;
}

.language-trigger .fi {
	width: 24px;
	height: 24px;
}

.language-dropdown {
	right: -10px;
}
}

/* Version compacte pour mobile bottom nav */
.mobile-language-selector {
position: relative;
}

.mobile-language-trigger {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #262626;
font-size: 11px;
cursor: pointer;
padding: 8px;
border: none;
background: none;
}

.mobile-language-trigger .fi {
font-size: 24px;
width: 24px;
height: 24px;
border-radius: 50%;
}

.mobile-language-trigger.active {
color: var(--primary);
}

/* Mobile Language Modal */
.mobile-language-modal {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2500;
transition: bottom 0.3s ease;
display: none;
}

.mobile-language-modal.active {
display: block;
bottom: 0;
}

.mobile-language-content {
background: white;
border-radius: 20px 20px 0 0;
padding: 0;
margin-top: auto;
animation: slideUpMobile 0.3s ease;
}

@keyframes slideUpMobile {
from {
	transform: translateY(100%);
}
to {
	transform: translateY(0);
}
}

.mobile-language-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #e0e0e0;
}

.mobile-language-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
}

.mobile-language-header button {
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 5px;
}

.mobile-language-list {
padding: 10px;
max-height: 60vh;
overflow-y: auto;
}

.mobile-language-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
text-decoration: none;
color: #262626;
border-radius: 12px;
margin-bottom: 5px;
transition: all 0.2s;
}

.mobile-language-item:hover {
background: #f8f9fa;
}

.mobile-language-item.active {
background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
color: var(--primary);
font-weight: 600;
}

.mobile-language-item .fi {
width: 32px;
height: 32px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-language-item span:not(.fi) {
flex: 1;
font-size: 16px;
}

.mobile-language-item i.fa-check {
color: var(--primary);
}

/* Content Block Types */
.content-block.title h3 {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary);
border-bottom: 2px solid var(--primary);
padding-bottom: 10px;
}

.content-block.subtitle h4 {
color: #333;
/*    margin: 15px 0 10px 0;*/
}

.content-block.text {
/*    background: #fafafa;*/
}

.content-block.image {
padding: 10px;
background: transparent;
border: none;
text-align: -webkit-center;
}

.content-block.image img {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: 8px;
}

.modal-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
}

.video-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--primary);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s;
}

.video-link:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}

.modal-pdf {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-pdf embed {
border: none;
}

/* TikTok embed responsive */
.tiktok-embed {
max-width: 100%;
}


/* Activity Modal */
.activity-modal-content {
max-width: 800px;
max-height: 90vh;
}

.activity-modal-content .modal-body {
max-height: calc(90vh - 80px);
overflow-y: auto;
}

.page-content-section {
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 20px;
line-height: 1.6;
}

.page-blocks {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}

.content-block {
padding: 5px 20px;
/*    background: white;
border-radius: 12px;
border: 1px solid #e0e0e0;*/
}

.content-block h3 {
margin: 0 0 10px 0;
font-size: 20px;
font-weight: 600;
color: #262626;
}

.content-block h4 {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
color: #333;
}

.content-block p {
margin: 0;
line-height: 1.6;
color: #666;
}

.content-block img {
width: 100%;
border-radius: 8px;
margin: 10px 0;
}

.content-block video {
width: 100%;
border-radius: 8px;
margin: 10px 0;
}

.pdf-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s;
}

.pdf-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.milestones-section {
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 20px;
}

.btn-do-activity {
padding: 16px 32px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
}

.btn-do-activity:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(10, 140, 203, 0.4);
}

.btn-do-activity i {
font-size: 18px;
}

/* Timeline in modal (reuse existing styles) */
.activity-modal-content .timeline-row {
margin: 0;
}

.activity-modal-content .timeline {
min-height: 120px;
height: auto;
}

/* Responsive */
@media (max-width: 768px) {
.activity-modal-content {
	max-width: 100%;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
}

.activity-modal-content .modal-body {
	max-height: calc(100vh - 70px);
}

.content-block {
	padding: 15px;
}

.btn-do-activity {
	width: 100%;
	justify-content: center;
}
}


/* Milestone Detail Modal */
.milestone-detail-modal .modal-content {
max-width: 600px;
}

.milestone-detail-content .modal-body {
max-height: calc(90vh - 80px);
overflow-y: auto;
}

.milestone-author {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
margin-bottom: 20px;
}

.author-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-avatar-placeholder {
width: 56px;
height: 56px;
border-radius: 50%;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
color: #666;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-info {
flex: 1;
}

.author-name {
font-size: 18px;
font-weight: 600;
color: #262626;
margin-bottom: 4px;
}

.author-role {
font-size: 14px;
color: #666;
font-weight: 500;
}

.milestone-score-detail {
padding: 30px;
border-radius: 12px;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.milestone-score-detail.todo {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.milestone-score-detail.big-help {
background: linear-gradient(135deg, #ffb347 0%, #ff9800 100%);
}

.milestone-score-detail.medium-help {
background: linear-gradient(135deg, #ffd580 0%, #ffc107 100%);
}

.milestone-score-detail.small-help {
background: linear-gradient(135deg, #f0c100 0%, #e0b000 100%);
}

.milestone-score-detail.done {
background: linear-gradient(135deg, #6bcb77 0%, #4caf50 100%);
}

.score-emoji-huge {
font-size: 80px;
margin-bottom: 15px;
}

.score-label-detail {
font-size: 24px;
font-weight: 700;
color: white;
}

.milestone-score-detail.medium-help .score-label-detail,
.milestone-score-detail.small-help .score-label-detail {
color: #333;
}

.milestone-info-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
color: #666;
}

.milestone-info-item i {
color: var(--primary);
font-size: 18px;
}

.milestone-text {
padding: 20px;
background: white;
border-radius: 12px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
}

.milestone-text h4 {
font-size: 15px;
font-weight: 600;
color: #262626;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}

.milestone-text h4 i {
color: var(--primary);
}

.milestone-text p {
margin: 0;
line-height: 1.6;
color: #666;
}

.milestone-private-notes {
padding: 20px;
background: linear-gradient(135deg, #ccc 0%, #333 100%);
border-radius: 12px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
}

.milestone-private-notes::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: repeating-linear-gradient(
	45deg,
	transparent,
	transparent 10px,
	rgba(255,255,255,0.05) 10px,
	rgba(255,255,255,0.05) 20px
);
animation: stripe-move 20s linear infinite;
pointer-events: none;
}

.milestone-private-notes h4 {
font-size: 15px;
font-weight: 600;
color: white;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}

.milestone-private-notes p {
margin: 0;
line-height: 1.6;
color: white;
background: rgba(255, 255, 255, 0.95);
padding: 12px;
border-radius: 8px;
color: #333;
position: relative;
z-index: 1;
}

.milestone-media {
padding: 20px;
background: #fafafa;
border-radius: 12px;
justify-self: center;
}

.milestone-media img,
.milestone-media video {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Make milestone clickable */
.milestone-mini {
cursor: pointer;
transition: all 0.3s;
}

.milestone-mini:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.milestone-mini::after {
content: '\f06e';
font-family: 'FontAwesome';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.3s;
}

.milestone-mini:hover::after {
opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
.milestone-detail-content {
	max-width: 100%;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
}

.score-emoji-huge {
	font-size: 60px;
}

.score-label-detail {
	font-size: 20px;
}
}

/* Assurer que le scroll est smooth */
.timeline-insta {
scroll-behavior: smooth;
}

/* Fade gradient à droite pour indiquer qu'il y a plus de contenu */
.milestones-details[open] .timeline-insta::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background: linear-gradient(to left, rgba(250, 250, 250, 1) 0%, transparent 100%);
pointer-events: none;
animation: fadeInGradient 0.5s ease;
}

@keyframes fadeInGradient {
from { opacity: 0; }
to { opacity: 1; }
}

/* Animation pour la dernière milestone */
.milestones-details[open] .milestone-mini:last-child {
animation: highlightLast 1.5s ease;
}

@keyframes highlightLast {
0%, 100% {
	transform: scale(1);
}
50% {
	transform: scale(1.15);
	box-shadow: 0 6px 20px rgba(10, 140, 203, 0.4);
}
}


/* Milestones dans le modal cliquables */
.milestones-section .milestone {
cursor: pointer;
position: relative;
transition: all 0.3s;
}

.milestones-section .milestone::before {
content: '\f06e';
font-family: 'FontAwesome';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: rgba(255, 255, 255, 0);
transition: all 0.3s;
pointer-events: none;
z-index: 10;
}

.milestones-section .milestone:hover {
transform: translateY(-8px) scale(1.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 100;
}

.milestones-section .milestone:hover::before {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.milestones-section .milestone:hover .milestone-who,
.milestones-section .milestone:hover .milestone-date {
opacity: 0.7;
}

/* Animation au scroll vers la fin */
.milestones-section .milestone:last-child {
animation: pulseLastMilestone 2s ease-in-out;
}

@keyframes pulseLastMilestone {
0%, 100% {
	transform: scale(1);
}
50% {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(10, 140, 203, 0.4);
}
}

/* Privacy Badge Compact */
.privacy-badge-compact {
transition: all 0.3s ease;
}

.privacy-badge-compact:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
filter: brightness(1.1);
}

.privacy-badge-compact:active {
transform: translateY(0) scale(0.98);
}

.privacy-badge-compact i.fa-chevron-down {
transition: transform 0.3s;
}

.privacy-badge-compact:hover i.fa-chevron-down {
transform: translateY(2px);
}


/* Activity Meta - Version améliorée */
.activity-meta-insta {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 12px;
}

/* Carte Objectif */
.activity-objective-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
border-radius: 12px;
border-left: 4px solid var(--primary);
cursor: pointer;
transition: all 0.3s;
margin-bottom: 12px;
}

.activity-objective-card:hover {
background: linear-gradient(135deg, #e0f2ff 0%, #d1e9ff 100%);
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
}

.objective-icon {
width: 48px;
height: 48px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.objective-icon i {
font-size: 24px;
color: var(--primary);
}

.objective-info {
flex: 1;
}

.objective-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary);
margin-bottom: 4px;
}

.objective-title {
font-size: 15px;
font-weight: 600;
color: #262626;
line-height: 1.3;
}

.objective-arrow {
width: 32px;
height: 32px;
background: rgba(10, 140, 203, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s;
}

.activity-objective-card:hover .objective-arrow {
background: var(--primary);
transform: translateX(4px);
}

.activity-objective-card:hover .objective-arrow i {
color: white;
}

.objective-arrow i {
font-size: 14px;
color: var(--primary);
transition: color 0.3s;
}

/* Stats de session */
.session-stats {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}

.stat-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f8f9fa;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #666;
border: 1px solid #e9ecef;
}

.stat-badge i {
font-size: 14px;
color: var(--primary);
}

.stat-badge.progress-badge {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-color: #81c784;
color: #2e7d32;
}

.stat-badge.progress-badge i {
color: #4caf50;
}

.stat-label {
font-size: 11px;
opacity: 0.8;
margin-left: 2px;
}

/* Milestones Details - Amélioré */
.milestones-details {
margin-top: 10px;
}

.milestones-details summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #fafafa;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #555;
transition: all 0.2s;
list-style: none;
}

.milestones-details summary::-webkit-details-marker {
display: none;
}

.milestones-details summary::before {
content: '\f078';
font-family: 'FontAwesome';
font-size: 12px;
color: var(--primary);
transition: transform 0.3s;
}

.milestones-details[open] summary::before {
transform: rotate(180deg);
}

.milestones-details summary:hover {
background: #f0f0f0;
}

.milestones-details summary i {
color: var(--primary);
font-size: 16px;
}

.milestones-details summary span:first-of-type {
flex: 1;
}

.milestone-count {
margin-left: auto;
padding: 4px 12px;
background: var(--primary);
color: white;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}

/* Timeline scrollbar styling */
.timeline-insta::-webkit-scrollbar {
height: 6px;
}

.timeline-insta::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 3px;
}

.timeline-insta::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
}

.timeline-insta::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}

/* Animation d'ouverture */
@keyframes slideDownFade {
from {
	opacity: 0;
	max-height: 0;
	transform: translateY(-10px);
}
to {
	opacity: 1;
	max-height: 200px;
	transform: translateY(0);
}
}

.milestones-details[open] .timeline-insta {
animation: slideDownFade 0.4s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
.activity-objective-card {
	padding: 12px;
}

.objective-icon {
	width: 40px;
	height: 40px;
}

.objective-icon i {
	font-size: 20px;
}

.objective-title {
	font-size: 14px;
}

.session-stats {
	gap: 6px;
}

.stat-badge {
	padding: 6px 12px;
	font-size: 12px;
}
}


/* Activity Meta - Version épurée */
.activity-meta-insta {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 0 16px 12px;
background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
border-radius: 10px;
border-left: 3px solid var(--primary);
cursor: pointer;
transition: all 0.3s;
}

.activity-meta-insta:hover {
background: linear-gradient(135deg, #e0f2ff 0%, #d1e9ff 100%);
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(10, 140, 203, 0.15);
}

.activity-meta-insta > i:first-child {
font-size: 24px;
color: var(--primary);
flex-shrink: 0;
}

.activity-meta-insta > i:last-child {
font-size: 14px;
color: var(--primary);
opacity: 0.6;
flex-shrink: 0;
transition: all 0.3s;
}

.activity-meta-insta:hover > i:last-child {
opacity: 1;
transform: translateX(4px);
}

.meta-content {
flex: 1;
min-width: 0;
}

.meta-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary);
opacity: 0.8;
margin-bottom: 2px;
}

.meta-title {
display: block;
font-size: 14px;
font-weight: 600;
color: #262626;
line-height: 1.3;
margin-bottom: 6px;
}

.meta-stats {
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 12px;
color: #666;
}

.meta-stats span {
display: flex;
align-items: center;
gap: 4px;
}

.meta-stats i {
font-size: 11px;
color: var(--primary);
}

/* Milestones Details - Simplifié */
.milestones-details {
margin: 0 16px 12px;
}

.milestones-details summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #fafafa;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #666;
transition: background 0.2s;
list-style: none;
}

.milestones-details summary::-webkit-details-marker {
display: none;
}

.milestones-details summary::after {
content: '\f078';
font-family: 'FontAwesome';
font-size: 10px;
color: var(--primary);
transition: transform 0.3s;
}

.milestones-details[open] summary::after {
transform: rotate(180deg);
}

.milestones-details summary:hover {
background: #f0f0f0;
}

.timeline-insta {
padding: 12px 8px 8px;
}

.milestone-mini span {
font-size: 9px;
}

/* Responsive */
@media (max-width: 768px) {
.activity-meta-insta {
	padding: 10px 12px;
	margin: 0 12px 10px;
}

.activity-meta-insta > i:first-child {
	font-size: 20px;
}

.meta-title {
	font-size: 13px;
}

.meta-stats {
	font-size: 11px;
	gap: 8px;
}
}


/* Activity Actions Bar */
.activity-actions-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 12px;
gap: 12px;
}

.action-left {
display: flex;
gap: 16px;
}

.action-btn {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
font-size: 22px;
color: #262626;
transition: all 0.2s;
padding: 4px;
}

.action-btn:hover {
transform: scale(1.1);
}

.action-btn:active {
transform: scale(0.95);
}

.like-btn.liked i {
color: #ed4956;
animation: likeAnimation 0.4s ease;
}

@keyframes likeAnimation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}

.like-count,
.comment-count {
font-size: 14px;
font-weight: 600;
color: #262626;
}

/* Likes Preview */
.likes-preview {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 8px;
border-radius: 12px;
transition: background 0.2s;
}

.likes-preview:hover {
background: #f8f9fa;
}

.likes-avatars {
display: flex;
margin-left: -4px;
}

.like-avatar,
.like-avatar-placeholder {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid white;
margin-left: -8px;
object-fit: cover;
}

.like-avatar:first-child,
.like-avatar-placeholder:first-child {
margin-left: 0;
}

.like-avatar-placeholder {
background: #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: bold;
color: #666;
}

.likes-text {
font-size: 13px;
color: #262626;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}

/* Modal likes list */
.likes-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 2300;
}

.likes-modal.active {
display: flex;
}

.likes-modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 400px;
max-height: 500px;
overflow: hidden;
display: flex;
flex-direction: column;
}

.likes-modal-header {
padding: 16px;
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: space-between;
align-items: center;
}

.likes-modal-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}

.likes-modal-body {
padding: 12px;
overflow-y: auto;
flex: 1;
}

.like-person-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: 8px;
transition: background 0.2s;
margin-bottom: 4px;
}

.like-person-item:hover {
background: #f8f9fa;
}

.like-person-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.like-person-info {
flex: 1;
}

.like-person-name {
font-weight: 600;
font-size: 14px;
color: #262626;
}

.like-person-role {
font-size: 12px;
color: #8e8e8e;
}

.like-emoji {
font-size: 24px;
}

/* Responsive */
@media (max-width: 768px) {
.likes-text {
	max-width: 120px;
}

.likes-modal-content {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 16px 16px 0 0;
	margin-top: auto;
}
}

/* Reaction Wrapper */
.reaction-wrapper {
position: relative;
}

.reaction-btn {
position: relative;
}

.reaction-btn.reacted .user-emoji {
font-size: 22px;
display: block;
animation: reactionPop 0.4s ease;
}

@keyframes reactionPop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}

/* Reaction Menu */
.reaction-menu {
position: absolute;
bottom: calc(100% + 8px);
left: 11%;
transform: translateX(-11%);
background: white;
border-radius: 30px;
padding: 8px 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
display: flex;
gap: 4px;
z-index: 1000;
animation: reactionMenuSlide 0.3s ease;
}

@keyframes reactionMenuSlide {
from {
	opacity: 0;
	transform: translateX(-50%) translateY(10px);
}
to {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
}

.reaction-menu::before {
content: '';
position: absolute;
bottom: -6px;
left: 11%;
transform: translateX(-11%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
}

.reaction-option {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
padding: 6px;
border-radius: 50%;
transition: all 0.2s;
line-height: 1;
}

.reaction-option:hover {
transform: scale(1.3);
background: #f0f0f0;
}

.reaction-option:active {
transform: scale(1.1);
}

/* Reactions Preview */
.reactions-preview {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 8px;
border-radius: 12px;
transition: background 0.2s;
}

.reactions-preview:hover {
background: #f8f9fa;
}

.reactions-summary {
display: flex;
gap: 2px;
align-items: center;
}

.reaction-emoji-small {
font-size: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
margin-left: -4px;
}

.reaction-emoji-small:first-child {
margin-left: 0;
}

.reactions-text {
font-size: 13px;
color: #262626;
font-weight: 500;
}

/* Modal réactions */
.reactions-modal-body {
padding: 12px;
overflow-y: auto;
flex: 1;
}

.reaction-group {
margin-bottom: 20px;
}

.reaction-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 8px;
}

.reaction-group-emoji {
font-size: 24px;
}

.reaction-group-count {
font-weight: 600;
color: #262626;
}

.reaction-person-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
transition: background 0.2s;
margin-bottom: 4px;
}

.reaction-person-item:hover {
background: #f8f9fa;
}

/* Comments Preview */
.comments-preview {
padding: 0 16px 8px;
}

.view-all-comments {
background: none;
border: none;
color: #8e8e8e;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 4px 0;
margin-bottom: 8px;
transition: color 0.2s;
}

.view-all-comments:hover {
color: #262626;
}

.comment-item-inline {
margin-bottom: 6px;
font-size: 14px;
line-height: 1.5;
}

.comment-author {
font-weight: 600;
color: #262626;
margin-right: 6px;
}

.comment-author a {
color: #262626;
text-decoration: none;
}

.comment-author a:hover {
text-decoration: underline;
}

.comment-text {
color: #262626;
}

/* Add Comment Form */
.add-comment-form {
padding: 12px 16px;
border-top: 1px solid #efefef;
}

.add-comment-form form {
display: flex;
align-items: center;
gap: 10px;
}

.comment-avatar-small {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.comment-avatar-placeholder {
background: #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
color: #666;
}

.comment-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
padding: 4px;
background: #eee;
}

.comment-input::placeholder {
color: #8e8e8e;
}

.comment-submit-btn {
background: none;
border: none;
color: var(--primary);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
opacity: 0.5;
transition: all 0.2s;
}

.comment-input:focus ~ .comment-submit-btn,
.comment-input:valid ~ .comment-submit-btn {
opacity: 1;
}

.comment-submit-btn:hover {
transform: scale(1.1);
}

/* Comments Modal */
.comments-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 2400;
}

.comments-modal.active {
display: flex;
}

.comments-modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.comments-modal-header {
padding: 16px;
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: space-between;
align-items: center;
}

.comments-modal-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}

.comments-modal-body {
padding: 16px;
overflow-y: auto;
flex: 1;
}

.comment-item-full {
display: flex;
gap: 12px;
margin-bottom: 20px;
}

.comment-avatar-full {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.comment-content {
flex: 1;
}

.comment-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}

.comment-user-name {
font-weight: 600;
font-size: 14px;
color: #262626;
text-decoration: none;
}

.comment-user-name:hover {
text-decoration: underline;
}

.comment-user-role {
font-size: 12px;
color: #8e8e8e;
}

.comment-time {
font-size: 12px;
color: #8e8e8e;
margin-left: auto;
}

.comment-message {
font-size: 14px;
color: #262626;
line-height: 1.5;
margin: 0;
word-wrap: break-word;
}

.comment-actions {
display: flex;
gap: 16px;
margin-top: 8px;
}

.comment-action-btn {
background: none;
border: none;
font-size: 12px;
font-weight: 600;
color: #8e8e8e;
cursor: pointer;
padding: 0;
transition: color 0.2s;
}

.comment-action-btn:hover {
color: #262626;
}

.comment-action-btn.delete {
color: #ed4956;
}

.comment-action-btn.edit {
color: #6c757d; /* Gris */
}
.comment-action-btn.edit:hover {
color: #007bff; /* Bleu au survol */
}
.comment-action-btn.delete:hover {
color: #dc3545; /* Rouge au survol */
}

.no-comments {
text-align: center;
padding: 40px 20px;
color: #8e8e8e;
}

.no-comments i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
}

/* Comments Modal Footer (form) */
.comments-modal-footer {
padding: 16px;
border-top: 1px solid #dbdbdb;
}

.comments-modal-footer form {
display: flex;
align-items: center;
gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
.comments-modal-content {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 16px 16px 0 0;
	margin-top: auto;
}
}

	/* ========== FOOTER ========== */
	.footer {
		background: white;
		color: var(--text-primary);
		padding: 60px 5% 30px;
	}
.footer::before {
background: rgba(0, 0, 0, 0) linear-gradient(to right, #ffffff 0%, #2fa7cd 50%, #ffffff 100%) repeat scroll 0 0;
content: "";
height: 5px;
position: absolute;
width: 100%;
/* margin-top: -60px;*/
left: 0;
}

	.footer-content {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		gap: 10px;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.footer-brand img {
		height: 60px;
	}
	
	.footer-brand p {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.7);
		line-height: 1.7;
		max-width: 500px;
	}
	
	.footer-title {
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 20px;
	}
	
	.footer-links {
		list-style: none;
	}
	
	.footer-links li {
		margin-bottom: 12px;
	}
	
	.footer-links a {
		color: rgba(0, 0, 0, 0.7);
		text-decoration: none;
		font-size: 14px;
		transition: color 0.3s ease;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	.footer-links a:hover {
		color: var(--primary-light);
	}
	
	.footer-social {
		display: flex;
		gap: 12px;
		margin-top: 20px;
	}
	
	.footer-social a {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		transition: all 0.3s ease;
	}
	
	.footer-social a:hover {
		background: var(--primary);
		transform: translateY(-3px);
	}
	
	.footer-bottom {
		padding-top: 30px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		display: flex;
		justify-content: center; /* space-between */
		gap: 10px;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.footer-bottom p {
		font-size: 13px;
		color: rgba(0, 0, 0, 0.5);
	}
	
	.footer-bottom img {
		height: 25px;
		opacity: 0.7;
		max-width: fit-content;
	}
	/* ========== MOBILE RESPONSIVE ========== */
	@media (max-width: 992px) {
		.footer-content {
			grid-template-columns: 1fr;
			text-align: center;
		}
		.footer-brand img {
			justify-self: center;
		}
		.footer-brand p { max-width: 100%; margin: 0 auto; }
		.footer-social { justify-content: center; }
		/*.footer-bottom { flex-direction: column; gap: 15px; }*/
		.form-row { grid-template-columns: 1fr; }
	}
	
.link-event-wrapper select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

/* Style optionnel pour l'option suggérée */
.link-event-wrapper option[selected] {
font-weight: bold;
background-color: #f0f8ff;
}

/* Style pour l'option active dans le menu */
.reaction-option.active {
background-color: #e3f2fd;
border-radius: 50%;
transform: scale(1.1);
box-shadow: 0 0 0 2px var(--primary);
}

/* Style spécifique pour les alertes */
.reaction-option.warning:hover { background-color: #fff3cd; }
.reaction-option.attention:hover { background-color: #f8d7da; }

.hope-card {
	background: white;
	border-radius: 16px;
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
	border: 1px solid rgba(0,0,0,0.05);
}

/* En-tête coloré dynamique */
.hope-header {
	padding: 20px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hope-level-info {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	justify-content: center;
	align-items: stretch;
}

.hope-icon {
	font-size: 40px;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
	animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.hope-titles h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.hope-titles span {
	font-size: 13px;
	opacity: 0.9;
	font-weight: 500;
	color: #262626;
}

.hope-body {
	padding: 25px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	text-align: center;
}

.hope-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	transition: transform 0.2s;
}

.hope-stat-item:hover {
	transform: translateY(-3px);
}

.hope-value {
	font-size: 22px;
	font-weight: 800;
	color: #333;
}

.hope-label {
	font-size: 12px;
	color: #888;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hope-icon-sub {
	font-size: 18px;
	margin-bottom: 5px;
	opacity: 0.8;
}

.hope-footer {
	background: #fcfcfc;
	padding: 12px 25px;
	border-top: 1px solid #f0f0f0;
	font-size: 13px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 10px;
	font-style: italic;
}

/* Badge Victoire */
.victory-badge {
	background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%);
	color: #856404;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 2px 10px rgba(255, 193, 7, 0.3);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Indicateur de période */
.hope-period-context {
	text-align: center;
	background: #fafafa;
	padding: 8px 0;
	font-size: 11px;
	color: #888;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Responsive */
@media (max-width: 600px) {
	.hope-body {
		grid-template-columns: 1fr 1fr;
	}
	/*.hope-stat-item:last-child {
		grid-column: span 2;
		border-top: 1px solid #f0f0f0;
		padding-top: 15px;
		margin-top: 5px;
	}*/
}

/* Couleur Rose/Rouge chaleureux */
.bg-love { background: #ffebee; color: #e91e63; }

/* Animation "Cœur battant" */
.bg-love i {
	animation: heartBeat 1.5s infinite;
}

@keyframes heartBeat {
	0% { transform: scale(1); }
	14% { transform: scale(1.1); }
	28% { transform: scale(1); }
	42% { transform: scale(1.1); }
	70% { transform: scale(1); }
}

/* Conteneur des mini-réactions */
.reactions-breakdown {
	background: #ffebee; color: #e91e63;
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-top: 6px;
	background: #fafafa;
	padding: 4px 8px;
	border-radius: 12px;
	border: 1px solid #f0f0f0;
}

.mini-reaction {
	font-size: 14px;
	line-height: 1;
}

.mini-reaction-plus {
	font-size: 10px;
	color: #888;
	align-self: center;
}

.hope-footer.static-message {
	cursor: default; /* On enlève la main cliquable */
	background: linear-gradient(to right, #ffffff, #fdfbff);
	padding: 15px 25px;
	display: flex;
	align-items: center;
	gap: 15px;
	border-top: 1px solid #f0f0f0;
}

.message-icon-wrapper {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff0f3; /* Fond rose très pâle */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.message-icon-wrapper i {
	color: #e91e63; /* Rose bienveillant */
	font-size: 14px;
}

.message-content {
	flex: 1;
}

.message-text {
	font-size: 13px;
	font-style: italic;
	color: #555;
	line-height: 1.4;
	display: block;
}

/* Petit effet d'apparition pour attirer l'oeil doucement */
.hope-footer {
	animation: fadeInText 1s ease-out;
}

@keyframes fadeInText {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Style spécifique pour le footer Pro */
.hope-footer.pro-footer {
	background: linear-gradient(to right, #f8fbfd, #ffffff);
	border-top: 1px solid #e3f2fd;
}

/* Fond de l'icône (Bleu très pâle) */
.bg-pro-light {
	background: #e3f2fd; 
}

/* Couleur de l'icône (Bleu Pro) */
.bg-pro-light i {
	color: #1976d2; 
}

/* Label "Rappel Bonnes Pratiques" */
.tip-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #1976d2;
	letter-spacing: 0.5px;
	display: block;
	margin-bottom: 2px;
}

/* Badge de notification rouge */
.notification-badge {
    background-color: #dc3545; /* Rouge alerte */
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

/* Animation de pulsation pour attirer l'attention */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.pulse-animation {
    animation: pulse-red 2s infinite;
}

/* ============================================================
   STYLES PAGE JOIN.PHP
   ============================================================ */

/* Carte principale */
.join-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #f0f0f0;
}

.join-card-body {
    padding: 30px;
}

/* Utilitaires de texte et alignement */
.join-text-center {
    text-align: center;
}

.join-text-primary {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.join-text-secondary {
    font-size: 12px;
    color: #999;
    margin-top: 20px;
}

/* Alertes spécifiques */
.join-alert-info {
    background: #e3f2fd;
    color: #0c5460;
    border: 1px solid #bee5eb;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.join-alert-danger {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    background: #ffebee;
    color: #c62828;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.join-alert-connected {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #c8e6c9;
}

/* Boutons */
.join-btn-home {
    margin-top: 20px;
    display: block;
    padding: 12px;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    background: var(--primary);
    color: white;
    font-weight: 600;
    transition: background 0.3s;
}

.join-btn-home:hover {
    background: var(--primary-dark);
}

.join-btn-verify {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    font-weight: 600;
    border-radius: 8px;
    background: #0A8CCB;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* Badge Code */
.join-badge-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.join-code-badge {
    background: #f0f0f0;
    color: #666;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.join-link-reset {
    color: #dc3545;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* Avatar Patient */
.join-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.join-patient-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.join-patient-title {
    margin: 15px 0 5px;
    color: #333;
    font-size: 20px;
    font-weight: 700;
}

/* Grille de choix (Login/Register) */
.join-options-grid {
    display: grid;
    gap: 15px;
}

.join-btn-option {
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.join-btn-outline {
    border: 2px solid #0A8CCB;
    background: white;
    color: #0A8CCB;
}

.join-btn-outline:hover {
    background: #f0f9ff;
}

.join-btn-fill {
    background: #0A8CCB;
    color: white;
    box-shadow: 0 4px 10px rgba(10, 140, 203, 0.3);
}

.join-btn-fill:hover {
    background: #0177B6;
}

/* Blocs Rôles (Pro/Famille) */
.join-role-block {
    text-align: center;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.join-role-block.pro {
    border: 2px solid #0A8CCB;
    background: #f0f9ff;
}

.join-role-block.family {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.join-role-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 10px rgba(10, 140, 203, 0.2);
}

.join-role-icon i {
    font-size: 30px;
    color: #0A8CCB;
}

.join-role-title {
    margin: 0 0 5px 0;
    color: #0056b3;
    font-size: 16px;
    font-weight: 700;
}

.join-role-desc {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Liens Switch */
.join-switch-container {
    text-align: center;
    margin-bottom: 20px;
}

.join-switch-btn {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
}

.join-switch-btn.grey { color: #666; }
.join-switch-btn.blue { color: #0A8CCB; }

/* Bouton Submit Final */
.join-submit-final {
    width: 100%;
    padding: 15px;
    background: #0A8CCB;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.join-submit-final:hover {
    background: #0177B6;
}

.join-logout-link {
    font-size: 13px;
    color: #999;
    text-decoration: none;
}

/* ============================================================
   MENU MOBILE PROFIL (Bottom Sheet)
   ============================================================ */

/* Avatar dans la barre du bas */
.mobile-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
}

.mobile-nav-item.active .mobile-nav-avatar {
    border-color: #0A8CCB;
}

/* Le fond sombre (Overlay) */
.mobile-menu-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: none; /* Caché par défaut */
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.mobile-menu-modal.active {
    display: flex;
    opacity: 1;
}

/* Le contenu qui glisse du bas */
.mobile-menu-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    margin-top: auto; /* Pousse vers le bas */
    border-radius: 20px 20px 0 0;
    padding-bottom: 30px; /* Espace pour la safe area iPhone */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
}

.mobile-menu-modal.active .mobile-menu-content {
    transform: translateY(0);
}

/* Barre poignée */
.menu-handle-bar {
    width: 40px;
    height: 5px;
    background: #e0e0e0;
    border-radius: 10px;
    margin: 12px auto;
    cursor: pointer;
}

/* Header du menu */
.mobile-menu-header {
    padding: 10px 20px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.menu-big-avatar {
    width: 50px; height: 50px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.menu-big-initials {
    width: 50px; height: 50px;
    border-radius: 50%; background: #0A8CCB; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
}

.menu-user-info h4 { margin: 0; font-size: 16px; color: #333; }
.menu-user-info span { font-size: 12px; color: #888; }

.close-menu-btn {
    margin-left: auto;
    background: none; border: none;
    font-size: 24px; color: #999;
}

/* Liens */
.mobile-menu-links { padding: 10px 0; }

.menu-link-item {
    display: flex; align-items: center; gap: 15px;
    padding: 15px 25px;
    text-decoration: none; color: #333;
    font-size: 15px; font-weight: 500;
    transition: background 0.2s;
}

.menu-link-item:active { background: #f5f5f5; }
.menu-link-item i { width: 20px; text-align: center; font-size: 18px; }
.menu-link-item .arrow { margin-left: auto; font-size: 12px; color: #ccc; }

.menu-link-item.text-danger { color: #dc3545; }
.menu-link-item.text-danger i { color: #dc3545; }

/* Styles du Modal de Crop */
/* ============================================================
   MODAL DE RECADRAGE (CROP)
   ============================================================ */

.crop-modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.crop-modal.active {
    display: flex;
}

.crop-modal-content {
    background-color: white;
    border-radius: 12px;
    width: 95%;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn { 
    from { transform: scale(0.95); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

.crop-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crop-header h3 { 
    margin: 0; 
    font-size: 16px; 
    color: #333; 
    font-weight: 600;
}

.close-crop { 
    font-size: 28px; 
    cursor: pointer; 
    color: #999; 
    line-height: 20px;
    transition: color 0.2s;
}

.close-crop:hover { color: #dc3545; }

.crop-body {
    padding: 20px;
    text-align: center;
    background: #222; /* Fond sombre pour mieux voir l'image */
}

.crop-area-wrapper {
    height: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
}

.crop-area-wrapper:active { cursor: grabbing; }

canvas#cropCanvas {
    max-width: 100%;
    max-height: 100%;
}

.crop-controls {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.zoom-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zoom-control i { color: #666; font-size: 12px; }

input[type=range] { 
    width: 100%; 
    accent-color: var(--primary);
}

.rotate-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.rotate-btn:hover {
    background: #f0f0f0;
    color: var(--primary);
    border-color: var(--primary);
}

.crop-footer {
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-crop-cancel {
    padding: 10px 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    font-weight: 500;
}

.btn-crop-apply {
    padding: 10px 25px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(10, 140, 203, 0.3);
}

.btn-crop-apply:hover { background: var(--primary-dark); }

.btn-find-pro:hover {
    background: #e1f5fe !important;
    border-style: solid !important;
    transform: translateY(-2px);
}