* {
	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 {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #fafafa;
	overflow-x: hidden;
}
:root[dir="ltr"] body {
    text-align: left;
}
:root[dir="rtl"] body {
	text-align: right;
}

.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: 35px;
	height: 35px;
	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;
}
:root[dir="ltr"] .nav-patients {
	left: 0;
}
:root[dir="rtl"] .nav-patients {
	right: 0;
}

.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;
	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;
}
:root[dir="ltr"] .sidebar-left {
    left: var(--nav-patients-width);
}
:root[dir="rtl"] .sidebar-left {
	right: var(--nav-patients-width);
}

:root[dir="ltr"] .sidebar-left.collapsed {
	transform: translateX(-100%);
}
:root[dir="rtl"] .sidebar-left.collapsed {
	transform: translateX(100%);
}

/* CORRECTION: Toggle externe à la sidebar */
.sidebar-toggle {
	position: fixed;
	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);
}
:root[dir="ltr"] .sidebar-toggle {
    left: calc(var(--nav-patients-width) + var(--sidebar-width) - 20px);
}
:root[dir="rtl"] .sidebar-toggle {
	right: calc(var(--nav-patients-width) + var(--sidebar-width) - 20px);
}
:root[dir="ltr"] .sidebar-toggle.collapsed {
	left: calc(var(--nav-patients-width) - 20px);
}
:root[dir="rtl"] .sidebar-toggle.collapsed {
	right: 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;
}

/* ============================================================
Annuaire
============================================================ */

    .directory-container {
		margin-top: var(--header-height) !important;
		min-height: calc(100vh - var(--header-height));

        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }

    /* BARRE DE RECHERCHE */
    .search-header {
        background: white;
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        margin-bottom: 30px;
        border: 1px solid #eee;
    }
    
    .search-form {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto; /* Layout responsive */
        gap: 15px;
        align-items: end;
    }
    
    .form-group label { display: block; font-size: 12px; font-weight: 600; color: #666; margin-bottom: 5px; }
    .form-control { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
    .form-control:focus { outline: none; border-color: var(--primary); }
    
    .btn-search {
        background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; height: 40px;
    }
    .btn-search:hover { background: var(--primary-dark); }

    /* CARTE PRO (Design défini précédemment) */
    .pro-card-directory {
        background: white;
        border-radius: 16px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        gap: 20px;
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    }

    .pro-card-directory:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-color: var(--primary);
    }

    .pro-identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90px;
        flex-shrink: 0;
    }

    .pro-avatar-large {
        width: 80px; height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        margin-bottom: 8px;
        background: #eee;
    }
    
    /* Fallback avatar avec initiales */
    .pro-avatar-initials {
        width: 80px; height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 28px; font-weight: bold;
        margin-bottom: 8px;
        border: 3px solid white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .verified-badge {
        background: #e8f5e9; color: #2e7d32;
        font-size: 10px; padding: 4px 8px; border-radius: 20px; font-weight: 700;
        display: flex; align-items: center; gap: 4px; white-space: nowrap;
    }

    .pro-details { flex: 1; }

    .pro-name { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px;}
    .pro-exp { font-size: 12px; font-weight: 400; color: #999; }
    .pro-job { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    
    .pro-bio { 
        font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 12px; 
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
    }

    .pro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
    .pro-tag { font-size: 11px; padding: 4px 10px; border-radius: 6px; background: #f5f5f5; color: #555; font-weight: 600; }
    .pro-tag.method { background: #e3f2fd; color: #1565c0; } 
    .pro-tag.place { background: #fff3e0; color: #ef6c00; }

    .pro-actions {
        display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
        min-width: 150px; border-left: 1px solid #f0f0f0; padding-left: 20px;
    }

    .availability-badge { font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; }
    .avail-available { background: #e8f5e9; color: #2e7d32; }
    .avail-waitlist { background: #fff3e0; color: #ef6c00; }
    .avail-full { background: #ffebee; color: #c62828; }

    .location-info { font-size: 12px; color: #888; text-align: right; margin-top: 5px; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
    .rate-info { font-size: 13px; font-weight: 700; color: #333; margin-top: 5px; text-align: right; }

    .btn-contact-pro {
        background: var(--primary); color: white; border: none; padding: 10px 0; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s; width: 100%; text-align: center; text-decoration: none; display: inline-block;
    }
    .btn-contact-pro:hover { background: var(--primary-dark); color: white; }

    /* Responsive */
    @media (max-width: 768px) {
        .search-form { grid-template-columns: 1fr; }
        .pro-card-directory { flex-direction: column; gap: 15px; }
        .pro-identity { flex-direction: row; width: 100%; gap: 15px; justify-content: flex-start; }
        .pro-avatar-large, .pro-avatar-initials { width: 60px; height: 60px; margin-bottom: 0; }
        .pro-actions { border-left: none; padding-left: 0; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid #f0f0f0; padding-top: 15px; }
        .btn-contact-pro { width: auto; padding: 8px 20px; }
        .location-info { text-align: left; }
    }

/* ============================================================
FAQ
============================================================ */

/* ========== FAQ CONTAINER ========== */
.faq-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 20px;
    color: white;
}

.faq-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: white;
}

.faq-header h1 i {
    font-size: 32px;
}

.faq-header p {
    font-size: 16px;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    color: white;
}

/* ========== SEARCH BAR ========== */
.faq-search-container {
    margin-bottom: 40px;
}

.faq-search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-box input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s;
    background: white;
}

.faq-search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.faq-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 20px;
    pointer-events: none;
}

.search-results-info {
    text-align: center;
    margin-top: 12px;
    color: #6b7280;
    font-size: 14px;
}

/* ========== PROFILE FILTER ========== */
.profile-filter {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

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

.filter-btn i {
    font-size: 16px;
}

/* ========== CATEGORIES ========== */
.faq-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.category-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.category-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.category-card.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--primary);
}

.category-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    transition: all 0.3s;
}

.category-card.active .category-icon {
    background: white;
    color: var(--primary);
}

.category-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111827;
}

.category-card.active h3 {
    color: white;
}

.category-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.category-card.active p {
    color: rgba(255, 255, 255, 0.9);
}

.category-count {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.category-card.active .category-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ========== FAQ ITEMS ========== */
.faq-section {
    margin-bottom: 40px;
}

.faq-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-section-title i {
    color: var(--primary);
    font-size: 28px;
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
}

.faq-question {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: white;
    transition: all 0.3s;
}

.faq-question:hover {
    background: #f9fafb;
}

.faq-item.active .faq-question {
    background: #f0f9ff;
}

.faq-question-text {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.faq-question mark {
    background: #fef08a;
    color: #854d0e;
    padding: 2px 4px;
    border-radius: 3px;
}

.faq-toggle-icon {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.3s;
    flex-shrink: 0;
}

.faq-item.active .faq-toggle-icon {
    background: var(--primary);
    color: white;
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer-content {
    padding: 0 24px 24px;
    color: #4b5563;
    line-height: 1.7;
    font-size: 15px;
}

.faq-answer-content mark {
    background: #fef08a;
    color: #854d0e;
    padding: 2px 4px;
    border-radius: 3px;
}

.faq-answer-content ul,
.faq-answer-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.faq-answer-content li {
    margin-bottom: 8px;
}

.faq-answer-content strong {
    color: #111827;
    font-weight: 600;
}

.faq-answer-content a {
    color: var(--primary);
    text-decoration: underline;
}

.faq-answer-content a:hover {
    color: var(--primary-dark);
}

/* Tags de profil */
.profile-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.profile-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.profile-tag i {
    font-size: 11px;
}

.profile-tag.parent {
    background: #dbeafe;
    color: #1e40af;
}

.profile-tag.pro {
    background: #fce7f3;
    color: #9f1239;
}

/* ========== HELP SECTION ========== */
.faq-help-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin-top: 60px;
}

.faq-help-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.faq-help-section p {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 24px;
}

.help-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.help-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

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

.help-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.help-btn-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

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

/* ========== EMPTY STATE ========== */
.faq-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.faq-empty-state i {
    font-size: 80px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.faq-empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 8px;
}

.faq-empty-state p {
    font-size: 15px;
    color: #9ca3af;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .faq-header h1 {
        font-size: 28px;
    }
    
    .faq-header p {
        font-size: 14px;
    }
    
    .faq-categories {
        grid-template-columns: 1fr;
    }
    
    .faq-section-title {
        font-size: 20px;
    }
    
    .faq-question-text {
        font-size: 14px;
    }
    
    .faq-answer-content {
        font-size: 14px;
    }
    
    .help-actions {
        flex-direction: column;
    }
    
    .help-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item {
    animation: fadeIn 0.3s ease-out;
}

/* Hide/Show classes for filtering */
.hidden {
    display: none !important;
}

/* ============================================================
HEADER + Tuto
============================================================ */

.welcome-modal-compact {
    max-width: 600px;
    width: 90%;
    border-radius: 24px;
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.welcome-header-compact {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 40px 32px 32px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.welcome-header-compact::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.welcome-icon-pulse {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
}

.welcome-icon-pulse i {
    font-size: 40px;
    color: white;
}

.welcome-header-compact h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.welcome-header-compact p {
    font-size: 15px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.welcome-quick-start {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-start-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.quick-start-card:hover {
    background: white;
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.card-content {
    flex: 1;
}

.card-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.card-content p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.card-arrow {
    color: #d1d5db;
    font-size: 18px;
    transition: all 0.3s;
}

.quick-start-card:hover .card-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

.welcome-video-section {
    padding: 0 24px 24px;
}

.video-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.video-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.play-button {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.play-button i {
    color: white;
    font-size: 20px;
    margin-left: 3px;
}

.video-info {
    color: white;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-footer-compact {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-text {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-text:hover {
    background: #f3f4f6;
    color: var(--primary);
}

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

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

.checkbox-label-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 20px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}

.checkbox-label-bottom input {
    cursor: pointer;
}

/* Video Modal */
.video-modal-large {
    max-width: 900px;
    width: 90%;
    padding: 0;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.modal-close-video {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-video:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: rotate(90deg);
}

.video-container-large {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container-large iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-modal-compact {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .welcome-header-compact {
        padding: 32px 20px 24px;
    }
    
    .welcome-header-compact h2 {
        font-size: 22px;
    }
    
    .quick-start-card {
        padding: 14px;
    }
    
    .card-content h4 {
        font-size: 14px;
    }
    
    .card-content p {
        font-size: 12px;
    }
    
    .welcome-footer-compact {
        flex-direction: column;
    }
    
    .btn-text {
        width: 100%;
        justify-content: center;
    }
}

.onboarding-overlay-new {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.spotlight-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    cursor: default;
}

.spotlight-border {
    position: absolute;
    border: 3px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.3),
                0 0 30px rgba(var(--primary-rgb), 0.6),
                inset 0 0 20px rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10001;
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.3),
                    0 0 30px rgba(var(--primary-rgb), 0.6),
                    inset 0 0 20px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.5),
                    0 0 50px rgba(var(--primary-rgb), 0.8),
                    inset 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

.onboarding-tooltip {
    position: fixed;
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10002;
    animation: tooltipAppear 0.3s ease-out;
    pointer-events: all; /* ✅ Tooltip cliquable */
}

/* Tous les éléments dans le tooltip sont cliquables */
.onboarding-tooltip * {
    pointer-events: all;
}

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

/* Mobile : tooltip plus compact */
@media (max-width: 768px) {
    .onboarding-tooltip {
        max-width: calc(100vw - 40px);
        padding: 20px;
        border-radius: 12px;
    }
}


.step-indicator {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.skip-tour {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.skip-tour:hover {
    background: #f3f4f6;
    color: #374151;
}

.tooltip-content {
    margin-bottom: 20px;
}

.tooltip-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.tooltip-icon i {
    color: white;
    font-size: 24px;
}

.tooltip-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.tooltip-content p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

.tooltip-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.tooltip-actions button {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Solution simple : juste changer le box-shadow */
.onboarding-spotlight {
    position: absolute;
    border: 3px solid var(--primary);
    border-radius: 12px;
    /* ANCIEN (foncé) :
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    */
    
    /* NOUVEAU (clair avec glow) : */
    box-shadow: 
        /* Glow interne pour éclaircir */
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        /* Glow externe coloré */
        0 0 0 4px rgba(var(--primary-rgb), 0.4),
        0 0 40px rgba(var(--primary-rgb), 0.6),
        /* Overlay sombre AUTOUR */
        0 0 0 9999px rgba(0, 0, 0, 0.7);
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 9999;
    
    /* CRUCIAL : rendre l'élément lui-même transparent/visible */
    background: transparent;
    
    /* Animation de pulsation */
    animation: spotlight-pulse 2s ease-in-out infinite;
}

@keyframes spotlight-pulse {
    0%, 100% {
        box-shadow: 
            inset 0 0 20px rgba(255, 255, 255, 0.3),
            0 0 0 4px rgba(var(--primary-rgb), 0.4),
            0 0 40px rgba(var(--primary-rgb), 0.6),
            0 0 0 9999px rgba(0, 0, 0, 0.7);
    }
    50% {
        box-shadow: 
            inset 0 0 30px rgba(255, 255, 255, 0.5),
            0 0 0 6px rgba(var(--primary-rgb), 0.6),
            0 0 60px rgba(var(--primary-rgb), 0.8),
            0 0 0 9999px rgba(0, 0, 0, 0.7);
    }
}

/* Assurer que l'overlay ne bloque pas la vue de l'élément */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    backdrop-filter: blur(2px);
    pointer-events: none; /* Important : ne pas bloquer les clics */
}

.help-section {
    margin-bottom: 16px;
}

.help-btn {
    width: 100%;
    padding: 12px 16px;
    background: white;
    color: var(--primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.help-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.help-menu {
    margin-top: 8px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

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

.help-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 1px solid #f3f4f6;
}

.help-menu-item:last-child {
    border-bottom: none;
}

.help-menu-item:hover {
    background: #f9fafb;
    color: var(--primary);
    padding-left: 20px;
}

.help-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}
@media (max-width: 768px) {
    .help-menu {
       position: fixed;
        top: 62px;
        right: 60px;
    }
}

.btn-help-tour {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: 1px solid var(--primary);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    z-index: 999;
}

.btn-help-tour:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

/* Sur desktop, positionner en bas à droite */
@media (min-width: 769px) {
    .btn-help-tour {
		position: fixed;
		right: 20px;
        bottom: 20px;
    }
}

/* ============================================================
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-top: var(--header-height);
		padding: 30px;
		/*min-height: calc(100vh - var(--header-height));*/
		transition: margin-left var(--transition-speed) ease;
	}
	
:root[dir="rtl"] .feed-container {
		margin-right: calc(var(--nav-patients-width) + var(--sidebar-width));
		margin-left: var(--sidebar-right-width);
	}
:root[dir="ltr"] .feed-container {
		margin-left: calc(var(--nav-patients-width) + var(--sidebar-width));
		margin-right: var(--sidebar-right-width);
	}
:root[dir="rtl"] .feed-container.sidebar-collapsed {
		margin-right: var(--nav-patients-width);
	}
:root[dir="ltr"] .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 TIMELINE - STYLES COMPLETS
   Design inspiré Instagram Stories + ABA
   ============================================ */

/* --- CONTENEUR PRINCIPAL --- */
.milestones-details {
    margin: 20px 0;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s;
}

.milestones-details[open] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- SUMMARY (HEADER CLIQUABLE) --- */
.milestones-details summary {
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
    position: relative;
}

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

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

.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.summary-left > i {
    color: var(--primary);
    font-size: 18px;
}

.summary-title {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.summary-count {
    background: linear-gradient(135deg, var(--primary), #667eea);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.summary-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 8px;
}

.stat-item i {
    color: var(--primary);
}

/* --- TIMELINE WRAPPER --- */
.milestones-timeline-wrapper {
    position: relative;
    padding: 20px;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}

/* --- TIMELINE CONTAINER (Instagram-style) --- */
.timeline-insta {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px 20px 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
}

.timeline-insta::-webkit-scrollbar {
    height: 8px;
}

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

.timeline-insta::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #ddd, #bbb);
    border-radius: 4px;
    transition: background 0.3s;
}

.timeline-insta::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #bbb, #999);
}

/* --- MILESTONE MINI CARDS --- */
.milestone-mini {
    min-width: 85px;
    max-width: 85px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.milestone-mini:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    border-color: var(--primary);
    z-index: 10;
}

.milestone-mini:active {
    transform: translateY(-2px) scale(1.02);
}

/* --- ICÔNE DE SCORE (Indicateur ABA) --- */
.milestone-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 3px solid currentColor;
    font-size: 18px;
    transition: all 0.3s;
    position: relative;
}

.milestone-mini:hover .milestone-icon {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Glow effect selon le statut */
.milestone-autonomous .milestone-icon {
    background: linear-gradient(135deg, #22c55e, #2ecc71);
    color: white !important;
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
}

.milestone-gesture_guidance .milestone-icon {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white !important;
    border-color: #eab308;
}

.milestone-verbal_guidance .milestone-icon {
    background: linear-gradient(135deg, #f1c40f, #fb923c);
    color: white !important;
    border-color: #fb923c;
}

.milestone-visual_guidance .milestone-icon {
    background: linear-gradient(135deg, #f97316, #e67e22);
    color: white !important;
    border-color: #f97316;
}

.milestone-full_guidance .milestone-icon {
    background: linear-gradient(135deg, #ca8a04, #d35400);
    color: white !important;
    border-color: #ca8a04;
}

.milestone-not_validated .milestone-icon {
    background: linear-gradient(135deg, #ef4444, #c0392b);
    color: white !important;
    border-color: #ef4444;
}

/* --- DATE --- */
.milestone-date {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-align: center;
    letter-spacing: 0.3px;
}
.milestone-who {
	position: unset;
    font-size: clamp(0.55em, 3vw, 0.75em);
    margin-bottom: 2px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333;
    font-weight: 600;
    width: 100%;
    max-width: 120px;
    text-align: center;
    pointer-events: none;
    padding: 4px 6px;
}

/* --- INDICATEURS (commentaire, média, renforçateurs) --- */
.milestone-indicators {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2px;
}

.milestone-indicators i {
    font-size: 10px;
    padding: 3px 5px;
    border-radius: 6px;
    background: #f0f0f0;
    color: #666;
    transition: all 0.2s;
}

.indicator-comment {
    background: #e3f2fd;
    color: #2196f3;
}

.indicator-media {
    background: #fce4ec;
    color: #e91e63;
}

.indicator-reinforcer {
    background: #fff3e0;
    color: #ff9800;
}

.milestone-mini:hover .milestone-indicators i {
    transform: scale(1.15);
}

/* --- BOUTONS DE SCROLL (si beaucoup de milestones) --- */
.timeline-scroll-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5;
}

.scroll-btn {
    pointer-events: all;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.scroll-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
}

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

.scroll-left {
    margin-left: -18px;
}

.scroll-right {
    margin-right: -18px;
}

/* --- ANIMATIONS D'APPARITION --- */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.milestone-mini {
    animation: fadeInSlideUp 0.4s ease-out backwards;
}

/* Cascade animation pour chaque milestone */
.milestone-mini:nth-child(1) { animation-delay: 0.05s; }
.milestone-mini:nth-child(2) { animation-delay: 0.1s; }
.milestone-mini:nth-child(3) { animation-delay: 0.15s; }
.milestone-mini:nth-child(4) { animation-delay: 0.2s; }
.milestone-mini:nth-child(5) { animation-delay: 0.25s; }
.milestone-mini:nth-child(n+6) { animation-delay: 0.3s; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .milestones-details summary {
        padding: 14px 16px;
    }
    
    .summary-title {
        font-size: 14px;
    }
    
    .summary-stats {
        display: none; /* Cache les stats sur mobile pour gagner de l'espace */
    }
    
    .milestones-timeline-wrapper {
        padding: 15px 10px;
    }
    
    .timeline-insta {
        gap: 10px;
        padding: 8px 5px 15px 5px;
    }
    
    .milestone-mini {
        min-width: 75px;
        max-width: 75px;
        padding: 10px 6px;
    }
    
    .milestone-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .milestone-date {
        font-size: 10px;
    }
    
    .scroll-btn {
        width: 32px;
        height: 32px;
    }
}

/* --- ÉTAT VIDE (pas de milestones) --- */
.milestones-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.milestones-empty i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 12px;
}

.milestones-empty p {
    margin: 0;
    font-size: 14px;
}

/* --- ACCESSIBILITÉ --- */
.milestone-mini:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Réduire les animations pour les utilisateurs qui les désactivent */
@media (prefers-reduced-motion: reduce) {
    .milestone-mini,
    .milestone-icon,
    .scroll-btn {
        animation: none;
        transition: none;
    }
}

/* ============================================
   MODAL DÉTAILS MILESTONE
   ============================================ */

/* --- OVERLAY MODAL --- */
.milestone-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: fadeIn 0.3s ease-out forwards;
}


@keyframes fadeIn {
    to { opacity: 1; }
}

/* --- CONTENU MODAL --- */
.milestone-detail-content {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: scale(0.9) translateY(20px);
    animation: modalSlideUp 0.3s ease-out forwards;
}

@keyframes modalSlideUp {
    to {
        transform: scale(1) translateY(0);
    }
}

/* --- HEADER MODAL --- */
.milestone-detail-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(to bottom, #f8f9fa, white);
}

.milestone-detail-modal .header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.score-badge-large {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 2px solid currentColor;
}

.milestone-detail-modal .modal-title {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.milestone-detail-modal .modal-date {
    margin: 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.milestone-detail-modal .modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.milestone-detail-modal .modal-close:hover {
    background: #e74c3c;
    color: white;
    transform: rotate(90deg);
}

/* --- BODY MODAL (scrollable) --- */
.milestone-detail-modal .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.milestone-detail-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

.milestone-detail-modal .modal-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

/* --- AUTEUR SECTION --- */
.milestone-author-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
}

.author-avatar-wrapper {
    flex-shrink: 0;
}

.author-avatar {
    width: 48px;
    height: 48px;
    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: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #667eea);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.author-info {
    flex: 1;
}

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

.author-role {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- MÉTRIQUES --- */
.milestone-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

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

.metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 2px;
}

.metric-value {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- RENFORÇATEURS --- */
.milestone-reinforcers {
    padding: 20px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 2px solid #ffb74d;
}

.milestone-reinforcers h4 {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #e65100;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reinforcers-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.reinforcer-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #e65100;
    border: 1px solid #ffb74d;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.reinforcer-tag i {
    font-size: 14px;
}

.reinforcer-notes {
    margin: 14px 0 0 0;
    padding: 12px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    border-left: 3px solid #ff9800;
}

.reinforcer-notes i {
    color: #ff9800;
    margin-right: 6px;
}

/* --- COMMENTAIRE --- */
.milestone-comment {
    padding: 20px;
    background: #e3f2fd;
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 4px solid #2196f3;
}

.milestone-comment h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.milestone-comment p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

/* --- NOTES PRIVÉES --- */
.milestone-private-notes {
    padding: 20px;
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 2px dashed #9c27b0;
}

.milestone-private-notes h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #7b1fa2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.private-badge {
    font-size: 11px;
    background: linear-gradient(135deg, var(--primary), #667eea);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: auto;
}

.private-badge i {
	color: white !important;
}

.milestone-private-notes p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

/* --- MÉDIA --- */
.milestone-media {
    margin-bottom: 20px;
}

.milestone-media img,
.milestone-media video {
    width: 100%;
    border-radius: 12px;
    max-height: 400px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.milestone-media audio {
    width: 100%;
    border-radius: 8px;
}

.milestone-media .pdf-preview {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    text-align: center;
    border: 2px dashed #ccc;
}

.milestone-media .pdf-preview i {
    font-size: 48px;
    color: #e74c3c;
    margin-bottom: 12px;
}

/* --- FOOTER MODAL --- */
.milestone-detail-modal .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: #f8f9fa;
}

.milestone-detail-modal .modal-footer button {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-secondary {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .milestone-detail-modal {
        padding: 10px;
        align-items: flex-end;
    }
    
    .milestone-detail-content {
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
    }
    
    .milestone-detail-modal .modal-header {
        padding: 16px;
    }
    
    .score-badge-large {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .milestone-detail-modal .modal-title {
        font-size: 18px;
    }
    
    .milestone-detail-modal .modal-body {
        padding: 16px;
    }
    
    .milestone-metrics {
        grid-template-columns: 1fr;
    }
    
    .milestone-author-section {
        padding: 12px;
    }
    
    .milestone-detail-modal .modal-footer {
        padding: 16px;
        flex-direction: column;
    }
    
    .milestone-detail-modal .modal-footer button {
        width: 100%;
    }
}

/* 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;
		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;
	}
:root[dir="ltr"] .sidebar-right {
	right: 0;
}
:root[dir="rtl"] .sidebar-right {
	left: 0;
}

	.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: var(--header-height);
		z-index: 100;
	}
	
	.header-content {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		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: 18px;
		}
		
		.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: 98vh;
	max-height: 98vh;
	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;
	}
:root[dir="ltr"] .footer-brand p,
:root[dir="ltr"] .footer-title {
    display: flex;
	direction: ltr;
}
:root[dir="rtl"] .footer-brand p,
:root[dir="rtl"] .footer-title {
	display: flex;
	direction: rtl;
}

	/* ========== 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: 5px 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);
}

.grecaptcha-badge { 
    bottom:60px !important; 
    right: 0px; 
    z-index:10;
}

/* ============================================================
   AJOUTS POUR BILAN, LEGAL & DASHBOARD (Consolidation)
   ============================================================ */

/* --- TYPOGRAPHIE & PAGE LEGALE --- */
.legal-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.legal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 40px;
}
.legal-section h3 { color: var(--primary); margin-top: 30px; font-weight: 600; font-size: 1.2rem; }
.accordion-section { border: 1px solid #e0e0e0; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.accordion-header { background: white; cursor: pointer; padding: 20px; display: flex; justify-content: space-between; font-weight: 600; transition: background 0.2s; }
.accordion-header:hover { background: #f8fbfd; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content.active { max-height: 5000px; }
.accordion-body { padding: 0 32px 32px; color: #4A5568; line-height: 1.6; }

/* --- DASHBOARD / KPI --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}
.kpi-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 80px;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: var(--primary); }
.kpi-value { font-size: 24px; font-weight: 800; color: #333; line-height: 1.2; margin-bottom: 4px; }
.kpi-label { font-size: 11px; color: #666; text-transform: uppercase; font-weight: 600; line-height: 1.3; }

/* --- OBJECTIFS & CARTES --- */
.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.objective-card {
    background: white; border-radius: 16px; border: 1px solid #e9ecef;
    overflow: hidden; transition: all 0.3s; cursor: pointer;
}
.objective-card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.objective-header { padding: 20px; border-bottom: 1px solid #f0f0f0; }
.objective-body { padding: 20px; }
.objective-footer { padding: 16px 20px; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }

/* --- PROGRESS BARS --- */
.progress-bar-container {
    height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; margin: 10px 0;
}
.progress-bar {
    height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 4px; transition: width 0.6s ease;
}

/* --- FORM ELEMENTS (Unification) --- */
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 12px 16px;
    border: 2px solid #e0e0e0; border-radius: 8px;
    font-size: 14px; font-family: inherit; transition: all 0.3s;
    background: white;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
}
.btn-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10, 140, 203, 0.4); }

/* --- COMPOSANTS SPÉCIFIQUES --- */
.badge-type {
    padding: 4px 12px; background: #e7f3ff; color: var(--primary);
    border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}

.chart-section-title {
    font-size: 14px; font-weight: 700; color: #333;
    margin-bottom: 5px; display: flex; align-items: center; gap: 8px;
}

/* --- BILAN PAGE (Layout) --- */
.bilan-wrapper {
    display: flex; height: calc(100vh - var(--header-height));
    margin-left: calc(var(--nav-patients-width) + var(--sidebar-width));
    margin-top: var(--header-height); transition: margin-left 0.3s ease;
}
.bilan-wrapper.sidebar-collapsed { margin-left: var(--nav-patients-width); }
.col-data { flex: 1; overflow-y: auto; padding: 24px; padding-bottom: 100px; }
.col-editor { width: 50%; background: white; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.05); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .bilan-wrapper { flex-direction: column; margin-left: 0; height: auto; }
    .col-editor { width: 100%; height: 600px; min-height: 600px; }
    .objectives-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GARDEN & GAMIFICATION (Jardin de Progrès)
   ============================================================ */

/* --- BARRE DE PROGRESSION (Header) --- */
.garden-progress-wrapper {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.garden-progress-bar {
    height: 100%;
    background: rgba(255,255,255,0.9);
    border-radius: 3px;
    transition: width 1s ease-out;
}

.garden-next-step {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.9;
    font-weight: 500;
    display: block;
}

/* --- LISTE DES NIVEAUX (Modale) --- */
.garden-levels-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.garden-level-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fafafa;
    position: relative;
    transition: all 0.2s;
}

.garden-level-item.current {
    border: 2px solid var(--primary);
    background: #e1f5fe;
}

.gli-icon { 
    font-size: 24px; 
    width: 40px; 
    text-align: center;
}

.gli-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

.gli-content strong { 
    font-size: 14px; 
    color: #333; 
    margin-bottom: 2px;
}

.gli-desc { 
    font-size: 11px; 
    color: #666; 
    line-height: 1.3;
}

.gli-time-badge {
    font-size: 11px;
    background: #eee;
    padding: 2px 8px;
    border-radius: 10px;
    color: #666;
    font-weight: 600;
}

/* Animation pour la barre de progression */
@keyframes fillProgress {
    from {
        width: 0%;
    }
}

.garden-level-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.garden-level-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.garden-level-item.current {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
    }
    50% {
        box-shadow: 0 6px 20px rgba(10, 140, 203, 0.3);
    }
}

/* Bouton d'action dans le tooltip du tour */
.btn-tour-action {
    margin-top: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.btn-tour-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

.btn-tour-action i {
    font-size: 12px;
}

/* Version mobile */
.btn-tour-action-mobile {
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Animation de highlight */
.tour-highlight {
    animation: tourHighlight 2s ease-in-out infinite;
}

@keyframes tourHighlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(var(--primary-rgb), 0.6);
    }
}

.level-info {
font-size: 14px; opacity: 0.8; cursor: pointer;
}
/* --- GARDEN TIMELINE (Points et Lignes) --- */
.garden-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 15px;
    padding: 0 5px;
}

/* Le Point (Step) */
.timeline-step {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); /* Fond par défaut (Locked) */
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

/* État : Verrouillé */
.timeline-step.locked {
    opacity: 0.6;
    filter: grayscale(1);
    transform: scale(0.9);
}

/* État : Passé (Validé) */
.timeline-step.passed {
    background: white;
    border-color: white;
    color: #333;
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* État : Actuel (Le focus) */
.timeline-step.current {
    background: white;
    border-color: white;
    transform: scale(1.2); /* Plus gros */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 3;
    cursor: pointer;
}

/* Animation de pulsation pour le niveau actuel */
.step-pulse {
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* La Ligne (Connecteur) */
.timeline-connector {
    flex: 1; /* Prend tout l'espace disponible entre les points */
    height: 4px;
    background: rgba(0, 0, 0, 0.1); /* Fond de la ligne (gris foncé transparent) */
    margin: 0 4px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* Le remplissage de la ligne */
.connector-fill {
    height: 100%;
    background: white; /* Couleur de progression */
    width: 0%; /* Sera modifié par le PHP inline style */
    border-radius: 2px;
    transition: width 1s ease-out;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
/* ============================================================
   STYLES POUR OBJECTIF.PHP
   ============================================================ */
        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e9ecef;
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            font-size: 24px;
        }
        
        .stat-icon.blue {
            background: linear-gradient(135deg, #e7f3ff 0%, #d1e9ff 100%);
            color: var(--primary);
        }
        
        .stat-icon.green {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            color: var(--success);
        }
        
        .stat-icon.orange {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            color: var(--warning);
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: #262626;
            line-height: 1;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 13px;
            color: #8e8e8e;
            font-weight: 500;
        }
        
        /* Objectives Grid */
        .objectives-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 24px;
        }
        
        .objective-card {
            background: white;
            border-radius: 16px;
            border: 1px solid #e9ecef;
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .objective-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }
        
        .objective-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .objective-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .objective-type {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: #e7f3ff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .objective-menu-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #8e8e8e;
            transition: all 0.2s;
        }
        
        .objective-menu-btn:hover {
            background: #f8f9fa;
            color: #262626;
        }
        
        .objective-title {
            font-size: 18px;
            font-weight: 700;
            color: #262626;
            margin: 0 0 8px 0;
            line-height: 1.3;
        }
        
        .objective-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: auto;
        }
        
        .objective-body {
            padding: 20px;
        }
        
        .objective-progress {
            margin-bottom: 20px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .progress-label {
            font-size: 13px;
            font-weight: 600;
            color: #666;
        }
        
        .progress-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .progress-bar-container {
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 4px;
            transition: width 0.6s ease;
        }
        
        .objective-stats {
            display: flex;
            gap: 16px;
        }
        
        .objective-stat {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .objective-stat i {
            font-size: 18px;
            color: var(--primary);
        }
        
        .objective-stat-content {
            flex: 1;
        }
        
        .objective-stat-value {
            font-size: 16px;
            font-weight: 700;
            color: #262626;
            line-height: 1;
        }
        
        .objective-stat-label {
            font-size: 11px;
            color: #8e8e8e;
            margin-top: 2px;
        }
        
        .objective-footer {
            padding: 16px 20px;
            background: #fafafa;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .objective-author {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-size: 13px;
            color: #666;
        }
        
        .objective-date {
            font-size: 12px;
            color: #8e8e8e;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 16px;
            border: 2px dashed #e0e0e0;
        }
        
        .empty-state i {
            font-size: 64px;
            color: #e0e0e0;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            font-size: 20px;
            color: #262626;
            margin: 0 0 8px 0;
        }
        
        .empty-state p {
            font-size: 14px;
            color: #8e8e8e;
            margin: 0 0 24px 0;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
        }
        
        .form-input,
        .form-textarea,
        .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s;
        }
        
        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(10, 140, 203, 0.1);
        }
        
        .form-textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .btn-submit {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(10, 140, 203, 0.4);
        }
        
        /* Responsive */
        @media (max-width: 768px) {            
            .objectives-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
        
/* Recent Attempts - Style identique aux milestones */
.recent-attempts-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

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

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

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

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

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

.recent-attempts-details summary i {
    color: var(--primary);
    font-size: 14px;
}

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

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

/* Timeline scrollable */
.attempts-timeline {
    display: flex;
    gap: 8px;
    padding: 12px 8px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fafafa;
    border-radius: 6px;
    margin-top: 8px;
    scroll-behavior: smooth;
    position: relative;
}

.attempts-timeline::-webkit-scrollbar {
    height: 6px;
}

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

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

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

/* Attempt mini card */
.attempt-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: all 0.3s;
    cursor: pointer;
    position: relative;
}

.attempt-mini:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.attempt-date-mini {
    font-size: 9px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}

.attempt-mini.non {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: #ef4444;
}

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

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

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

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

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

/* Fade gradient à droite pour indiquer qu'il y a plus de contenu */
.recent-attempts-details[open] .attempts-timeline::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 6px;
    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 tentative */
.recent-attempts-details[open] .attempt-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);
    }
}

/* Activity Timeline Details */
.activity-timeline-details {
    margin-top: 8px;
}

.activity-timeline-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(10, 140, 203, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    transition: all 0.2s;
    list-style: none;
}

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

.activity-timeline-details summary::before {
    content: '\f078';
    font-family: 'FontAwesome';
    font-size: 9px;
    transition: transform 0.3s;
}

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

.activity-timeline-details summary:hover {
    background: rgba(10, 140, 203, 0.15);
}

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

.timeline-count {
    padding: 2px 8px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

/* Timeline scrollable */
.activity-attempts-timeline {
    display: flex;
    gap: 6px;
    padding: 8px 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(10, 140, 203, 0.05);
    border-radius: 6px;
    margin-top: 6px;
    scroll-behavior: smooth;
    position: relative;
}

.activity-attempts-timeline::-webkit-scrollbar {
    height: 4px;
}

.activity-attempts-timeline::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
}

.activity-attempts-timeline::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
}

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

/* Fade gradient à droite */
.activity-timeline-details[open] .activity-attempts-timeline::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 4px;
    width: 20px;
    background: linear-gradient(to left, rgba(10, 140, 203, 0.05) 0%, transparent 100%);
    pointer-events: none;
}

/* Animation auto-scroll et highlight */
.activity-timeline-details[open] .attempt-mini:last-child {
    animation: highlightLast 1.5s ease;
}

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

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

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

/* Objective Body - Restructuré */
.objective-body {
    padding: 20px;
}

/* Progress Section */
.objective-progress-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.progress-info {
    flex: 1;
}

.progress-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 4px;
}

.progress-label i {
    color: var(--primary);
}

.progress-help {
    font-size: 12px;
    color: #8e8e8e;
}

.progress-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.progress-bar-container {
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 5px;
    transition: width 0.6s ease;
}

/* Activities Section */
.objective-activities {
    margin-top: 20px;
}

.activities-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.activities-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin: 0;
}

.activities-header i {
    color: var(--primary);
}

.activities-count {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

/* Activities List */
.activities-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px; /* Touch-friendly pour tablette */
    padding: 16px; /* Au lieu de 12px */
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.activity-item:hover {
    background: #fff;
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(10, 140, 203, 0.15);
}

.activity-item.mastered {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border-color: #c8e6c9;
}

.activity-item.mastered:hover {
    border-color: #4caf50;
}

/* Activity Icon */
.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.activity-icon i {
    font-size: 16px;
    color: #ccc;
}

.activity-item.mastered .activity-icon {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
}

.activity-item.mastered .activity-icon i {
    color: white;
}
.activity-item.stagnation .activity-icon {
    background: linear-gradient(135deg, #ef6c00 0%, #ef6c00 100%);
}

.activity-item.stagnation .activity-icon i {
    color: white;
}

.activity-item.alert .activity-icon {
    background: linear-gradient(135deg, #f44336 0%, #f44336 100%);
}

.activity-item.alert .activity-icon i {
    color: white;
}

/* Activity Content */
.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #8e8e8e;
}

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

.activity-meta i {
    font-size: 10px;
}

.activity-new {
    color: #ff9800;
    font-weight: 600;
}

/* Mini Timeline dans l'activité */
.activity-mini-timeline {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.mini-score {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: help;
    transition: transform 0.2s;
}

.mini-score:hover {
    transform: scale(1.2);
}

.mini-score i {
    font-size: 10px;
}

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

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

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

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

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

/* Activity Arrow */
.activity-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10, 140, 203, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

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

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

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

/* View All Button */
.view-all-activities {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.view-all-activities:hover {
    background: #f8f9fa;
    border-color: var(--primary);
    color: var(--primary);
}

/* No Activities State */
.no-activities {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px dashed #e0e0e0;
}

.no-activities i {
    font-size: 36px;
    color: #e0e0e0;
    margin-bottom: 12px;
}

.no-activities p {
    font-size: 13px;
    color: #8e8e8e;
    margin: 0 0 16px 0;
}

.btn-create-activity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

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

/* Responsive */
@media (max-width: 768px) {
    .activity-title {
        font-size: 13px;
    }
    
    .activity-meta {
        font-size: 10px;
        gap: 8px;
    }
    
    .activity-mini-timeline {
        gap: 3px;
    }
    
    .mini-score {
        width: 20px;
        height: 20px;
    }
}

/* Ajustements pour la nouvelle structure */
.objective-progress-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.activities-header {
    margin-bottom: 8px;
}

/* Assurer que la card ne devient pas trop haute */
.objective-card {
    max-height: none;
    margin-bottom: 30px; /* Au lieu de 20px */
    padding: 30px; /* Au lieu de 20px */
}

.objective-body {
    padding: 16px;
}

/* Progress Section - Version encourageante */
.objective-progress-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

/* Celebration (avec progrès) */
.progress-celebration {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d6 100%);
    border-radius: 12px;
    border-left: 4px solid #ffc107;
    margin-bottom: 12px;
}

.celebration-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.celebration-icon i {
    font-size: 24px;
    color: white;
}

.celebration-content {
    flex: 1;
}

.celebration-title {
    font-size: 15px;
    font-weight: 700;
    color: #f57c00;
    margin-bottom: 4px;
}

.celebration-text {
    font-size: 13px;
    color: #666;
}

.celebration-text strong {
    color: #f57c00;
    font-size: 16px;
}

.celebration-progress {
    flex-shrink: 0;
}

/* Circular Progress */
.circular-progress {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(
        #ffc107 0deg,
        #ffc107 calc(var(--progress) * 3.6deg),
        #f0f0f0 calc(var(--progress) * 3.6deg)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circular-progress::before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
}

.circular-progress span {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    color: #f57c00;
}

/* Progress Message */
.progress-message {
    margin-top: 12px;
    padding: 10px 12px;
    background: #e3f2fd;
    border-radius: 8px;
    font-size: 13px;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-message i {
    color: #1976d2;
}

.progress-message strong {
    color: #0d47a1;
}

/* Objective Completed */
.objective-completed {
    padding: 16px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 12px;
    border-left: 4px solid #4caf50;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.objective-completed i {
    font-size: 24px;
    color: #4caf50;
}

/* Encouragement (tentatives sans maîtrise) */
.progress-encouragement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 12px;
    border-left: 4px solid #2196f3;
}

.encouragement-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.encouragement-icon i {
    font-size: 24px;
    color: white;
}

.encouragement-content {
    flex: 1;
}

.encouragement-title {
    font-size: 15px;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 4px;
}

.encouragement-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.encouragement-text strong {
    color: #1565c0;
    font-size: 16px;
}

.encouragement-tip {
    font-size: 12px;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
}

.encouragement-tip i {
    font-size: 11px;
}

/* Start (aucune tentative) */
.progress-start {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-radius: 12px;
    border-left: 4px solid #9c27b0;
}

.start-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.start-icon i {
    font-size: 24px;
    color: white;
}

.start-content {
    flex: 1;
}

.start-title {
    font-size: 15px;
    font-weight: 700;
    color: #6a1b9a;
    margin-bottom: 4px;
}

.start-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.start-text strong {
    color: #6a1b9a;
    font-size: 16px;
}

.start-tip {
    font-size: 12px;
    color: #7b1fa2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    margin-top: 6px;
}

.start-tip i {
    font-size: 11px;
}

/* Progress Bar (quand il y a des progrès) */
.progress-bar-container {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
    border-radius: 4px;
    transition: width 0.8s ease;
    position: relative;
    overflow: hidden;
}

/* Animation pour la barre de progression */
.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive */
@media (max-width: 768px) {
    .progress-celebration,
    .progress-encouragement,
    .progress-start {
        flex-direction: column;
        text-align: center;
    }
    
    .celebration-progress {
        margin-top: 12px;
    }
}

/* Modal Attempt Details */
.attempt-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: 2500;
    animation: fadeIn 0.3s ease;
}

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

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

.attempt-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 450px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

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

.attempt-modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attempt-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.attempt-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.attempt-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.attempt-modal-body {
    padding: 24px;
}

.attempt-score-display {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.attempt-score-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

.attempt-score-label {
    font-size: 20px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 8px;
}

.attempt-score-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.attempt-info-section {
    margin-bottom: 20px;
}

.attempt-info-item {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
}

.attempt-info-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.attempt-info-content {
    flex: 1;
}

.attempt-info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8e8e8e;
    margin-bottom: 4px;
}

.attempt-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
}

.score-legend {
    background: #f0f8ff;
    border-radius: 8px;
    padding: 16px;
    border-left: 3px solid var(--primary);
}

.score-legend-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
}

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

.score-legend-text {
    color: #666;
}

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

/* Amélioration visuelle pour attempt-mini */
.attempt-mini {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.attempt-mini:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.attempt-mini::after {
    content: '\f06e';
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: rgba(255, 255, 255, 0);
    transition: all 0.3s;
    pointer-events: none;
}

.attempt-mini:hover::after {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Story Modal */
.story-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    animation: fadeIn 0.3s ease;
}

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

.story-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.4s ease;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

.story-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.story-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.story-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.story-date-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.story-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.story-body {
    padding: 30px;
}

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

.story-author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.story-author-info {
    flex: 1;
}

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

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

.story-score-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.story-score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.story-score-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.story-score-label {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 12px;
}

.story-details-section {
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.story-detail-title {
    font-size: 14px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.story-detail-item {
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: start;
    gap: 12px;
}

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

.story-detail-icon {
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.story-detail-content {
    flex: 1;
}

.story-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8e8e8e;
    margin-bottom: 4px;
}

.story-detail-value {
    font-size: 14px;
    color: #262626;
    line-height: 1.5;
}

/* Media Section */
.story-media {
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.story-media img,
.story-media video {
    max-width: 100%;
    display: block;
    justify-self: center;
}

@media (max-width: 768px) {
    .story-modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }
    
    .story-header {
        padding: 20px;
    }
    
    .story-title {
        font-size: 20px;
    }
    
    .story-body {
        padding: 20px;
    }
}

/* Style du sélecteur de templates */
.template-selector-container {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
}

.template-category-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin: 20px 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.template-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

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

.template-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}

.template-card p {
    font-size: 12px;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-card .badge-type {
    position: absolute;
    top: 0;
    right: 0;
    background: #f0f0f0;
    color: #888;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 0 6px;
}

.btn-custom-objective {
    width: 100%;
    padding: 15px;
    background: #f8f9fa;
    border: 2px dashed #ccc;
    border-radius: 12px;
    color: #666;
    font-weight: 600;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-custom-objective:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0f9ff;
}

.back-to-templates {
    background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}
.back-to-templates:hover { color: var(--primary); }

/* ============================================
   TEMPLATE PICKER - UX OPTIMISÉ NEURODÉVELOPPEMENT
   ============================================ */

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

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   VUE 1: TEMPLATE SELECTOR
   ============================================ */

#view-templates {
    padding: 28px 32px;
}

/* Bouton Objectif Vide */
.btn-custom-objective {
    width: 100%;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 3px dashed #cbd5e0;
    border-radius: 16px;
    color: #4a5568;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.btn-custom-objective::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(10, 140, 203, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-custom-objective:hover::before {
    left: 100%;
}

.btn-custom-objective:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 140, 203, 0.15);
}

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

/* Barre de Recherche et Filtres */
.template-search-section {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px solid #e9ecef;
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.search-input-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8e8e8e;
    font-size: 16px;
}

#filterTemplates {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s;
    background: white;
}

#filterTemplates:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(10, 140, 203, 0.1);
}

/* Pills de Filtrage Rapide */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-pill {
    padding: 10px 18px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-pill i {
    font-size: 14px;
}

.filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0f9ff;
    transform: translateY(-2px);
}

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

.filter-pill.active i {
    animation: bounceIcon 0.5s ease;
}

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

/* Template Container */
.template-selector-container {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* Scrollbar Custom */
.template-selector-container::-webkit-scrollbar {
    width: 8px;
}

.template-selector-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.template-selector-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
}

.template-selector-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Catégorie Title */
.template-category-section {
    margin-bottom: 32px;
    animation: fadeInSection 0.5s ease;
}

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

.template-category-title {
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.template-category-title i {
    font-size: 18px;
    color: var(--primary);
}

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

/* Template Cards Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Template Card */
.template-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.template-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.template-card:hover::before {
    transform: scaleX(1);
}

.template-card:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(10, 140, 203, 0.2);
}

.template-card:active {
    transform: translateY(-4px) scale(0.98);
}

/* Badge Type */
.badge-type {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    color: #666;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Template Content */
.template-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 10px 0;
    line-height: 1.4;
    padding-right: 80px;
}

.template-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Difficulty Badge */
.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.difficulty-badge.level-1 {
    background: #e8f5e9;
    color: #2e7d32;
}

.difficulty-badge.level-2 {
    background: #fff3e0;
    color: #ef6c00;
}

.difficulty-badge.level-3 {
    background: #ffebee;
    color: #c62828;
}

.difficulty-badge i {
    font-size: 11px;
}

/* Empty State */
.templates-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8e8e8e;
}

.templates-empty-state i {
    font-size: 64px;
    color: #e0e0e0;
    margin-bottom: 16px;
}

.templates-empty-state h4 {
    font-size: 18px;
    color: #666;
    margin: 0 0 8px 0;
}

.templates-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* Loader */
#templates-loader {
    text-align: center;
    padding: 60px 20px;
    color: var(--primary);
}

#templates-loader i {
    font-size: 48px;
    margin-bottom: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#templates-loader p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* ============================================
   VUE 2: FORMULAIRE D'ÉDITION
   ============================================ */

#view-form {
    padding: 28px 32px;
}

.back-to-templates {
    background: transparent;
    border: none;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.back-to-templates:hover {
    background: #f8f9fa;
    color: var(--primary);
    transform: translateX(-4px);
}

.back-to-templates i {
    transition: transform 0.3s;
}

.back-to-templates:hover i {
    transform: translateX(-4px);
}

/* Form Groups */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.form-label-required {
    color: #f44336;
    margin-left: 4px;
}

.form-help {
	position: relative !important;
    display: block;
    font-size: 13px;
    color: #8e8e8e;
    margin-top: 6px;
    display: flex;
    align-items: start;
    gap: 8px;
    line-height: 1.5;
}

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

/* Form Inputs */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s;
    background: white;
}

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

.form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Character Counter */
.char-counter {
    text-align: right;
    font-size: 12px;
    color: #8e8e8e;
    margin-top: 6px;
}

.char-counter.warning {
    color: #ff9800;
    font-weight: 600;
}

.char-counter.danger {
    color: #f44336;
    font-weight: 700;
}

/* Template Info Badge */
.template-info-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #2196f3;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: start;
    gap: 16px;
}

.template-info-badge i {
    color: #2196f3;
    font-size: 24px;
    margin-top: 2px;
}

.template-info-content h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1565c0;
    margin: 0 0 6px 0;
}

.template-info-content p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(10, 140, 203, 0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10, 140, 203, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
}

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

/* Loading State */
.btn-submit.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-submit.loading i {
    animation: spin 1s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    #view-templates,
    #view-form {
        padding: 20px;
    }
    
    .templates-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .quick-filters {
        gap: 8px;
    }
    
    .filter-pill {
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .template-selector-container {
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .btn-custom-objective {
        font-size: 14px;
        padding: 16px 20px;
    }
    
    .template-card {
        padding: 16px;
    }
    
    .template-card h4 {
        font-size: 15px;
    }
    
    .template-card p {
        font-size: 13px;
    }
}

/* ============================================
   ANIMATIONS ACCESSIBILITÉ
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   STYLES POUR view_activity.PHP
   ============================================================ */

.activity-view-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Breadcrumb */
.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
}

.activity-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.activity-breadcrumb a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.activity-breadcrumb i {
    font-size: 12px;
}

/* Objective Banner */
.objective-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.objective-banner::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;
}

.objective-banner-content {
    position: relative;
    z-index: 1;
}

.objective-banner-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.objective-banner-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.objective-banner-description {
	color: white;
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.95;
    margin: 0;
}

/* Activity Header */
.activity-header-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activity-header-card h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 20px 0;
}

.activity-header-card h1 i {
    color: var(--primary);
}

/* Content Blocks */
.content-blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
    background: white;
}

/*
.content-block {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9ecef;
}
*/

.content-block.title h3 {
    font-size: 22px;
    font-weight: 700;
    color: #262626;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.content-block.text p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

.content-block.image {
    padding: 0;
    overflow: hidden;
}

.content-block.image img {
    width: 100%;
    display: block;
    border-radius: 16px;
}

.content-block.video {
    padding: 0;
}

/* Milestones Timeline */
.milestones-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.milestones-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 20px 0;
}

.milestones-card h3 i {
    color: var(--primary);
}

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

.milestones-timeline::-webkit-scrollbar {
    height: 6px;
}

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

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

/* Evaluation Section */
.evaluation-section {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.evaluation-header {
    text-align: center;
    margin-bottom: 30px;
}

.evaluation-header h2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 12px 0;
}

.evaluation-header h2 i {
    color: var(--primary);
}

.evaluation-subtitle {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* Duration Input */
.duration-section {
    margin-bottom: 30px;
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
}

.duration-section > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 16px;
}

.duration-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.duration-number-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s;
}

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

.duration-number-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    width: 80px;
    background: transparent;
}

.duration-number-input input::-webkit-inner-spin-button,
.duration-number-input input::-webkit-outer-spin-button {
    opacity: 1;
    height: 40px;
}

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

.duration-presets {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    gap: 8px;
}

.preset-btn {
    cursor: pointer;
    
    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:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-4px);
}

.preset-btn.active {
    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);
}

.preset-btn i {
    margin-right: 6px;
}

/* Score Grid */
.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.score-option {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
}

.score-option:hover {
    transform: translateY(-4px);
}

.score-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.score-card {
    padding: 24px;
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.score-option input:checked + .score-card::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
}

.score-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.score-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 8px 0;
}

.score-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Score Colors */
.score-option:nth-child(1) .score-icon { color: #ef4444; }
.score-option:nth-child(2) .score-icon { color: #ca8a04; }
.score-option:nth-child(3) .score-icon { color: #f97316; }
.score-option:nth-child(4) .score-icon { color: #fb923c; }
.score-option:nth-child(5) .score-icon { color: #eab308; }
.score-option:nth-child(6) .score-icon { color: #22c55e; }

/* Comments Section */
.comments-section {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 8px;
}

.form-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s;
}

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

/* Media */
.media-preview {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 12px;
}

/* Privacy Section */
.privacy-section {
    margin-bottom: 24px;
}

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

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

/* Private Notes Toggle */
.private-notes-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff3cd 0%, #fff8dc 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.private-notes-toggle:hover {
    background: linear-gradient(135deg, #ffe69c 0%, #fff3cd 100%);
}

.toggle-label {
    flex: 1;
}

.toggle-label strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 4px;
}

.toggle-label p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.toggle-switch {
    position: relative;
    width: 56px;
    height: 30px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 30px;
    transition: 0.4s;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

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

.private-notes-content {
    display: none;
    animation: slideDown 0.3s ease;
}

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

/* Custom Evaluation Fields */
.custom-eval-section {
    background: linear-gradient(135deg, #f0f8ff 0%, #e7f3ff 100%);
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 32px;
    border: 2px solid var(--primary);
}

.custom-eval-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(10, 140, 203, 0.2);
}

.custom-eval-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.custom-eval-header h3 i {
    font-size: 24px;
}

.custom-eval-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-eval-field {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    transition: all 0.3s;
}

.custom-eval-field:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
}

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

.custom-eval-label i {
    color: var(--primary);
}

.custom-eval-label .required-mark {
    color: #dc3545;
    margin-left: 4px;
}

.custom-eval-input,
.custom-eval-textarea,
.custom-eval-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s;
    background: white;
}

.custom-eval-input:focus,
.custom-eval-textarea:focus,
.custom-eval-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(10, 140, 203, 0.1);
}

.custom-eval-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Radio and Checkbox Options */
.custom-eval-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-eval-option {
    position: relative;
    cursor: pointer;
}

.custom-eval-option input[type="radio"],
.custom-eval-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.3s;
    cursor: pointer;
}

.custom-option-label:hover {
    background: #f0f8ff;
    border-color: var(--primary);
}

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

.custom-option-icon {
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.custom-eval-option input[type="checkbox"] + .custom-option-label .custom-option-icon {
    border-radius: 6px;
}

.custom-eval-option input:checked + .custom-option-label .custom-option-icon {
    background: var(--primary);
    border-color: var(--primary);
}

.custom-option-icon i {
    font-size: 12px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-eval-option input:checked + .custom-option-label .custom-option-icon i {
    opacity: 1;
}

.custom-option-text {
    flex: 1;
    font-size: 15px;
    color: #262626;
    font-weight: 500;
}

/* Submit Button */
.submit-section {
    text-align: center;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

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

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

.btn-submit i {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-view-container {
        padding: 15px;
    }
    
    .objective-banner {
        padding: 20px;
    }
    
    .objective-banner-title {
        font-size: 20px;
    }
    
    .activity-header-card {
        padding: 20px;
    }
    
    .activity-header-card h1 {
        font-size: 22px;
    }
    
    .score-grid {
        grid-template-columns: 1fr;
    }
        
    .duration-input-group {
        flex-direction: column;
    }
    
    .duration-display {
        width: 100%;
    }
}

/* Reward Mode Button */
.reward-mode-banner {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    text-align: center;
    border: 3px solid #ffc107;
    position: relative;
    overflow: hidden;
}

.reward-mode-banner::before {
    content: '⭐';
    position: absolute;
    font-size: 100px;
    opacity: 0.1;
    top: -20px;
    right: -20px;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.reward-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: white;
    color: #d97706;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reward-mode-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Style par défaut (Desktop) : Tableau normal */
.table-responsive table {
    width: 100%;
    border-collapse: collapse;
}

/* Style Mobile : Transformation en Cartes */
@media (max-width: 768px) {
    /* 1. On cache l'en-tête du tableau car inutile en mode carte 
    .table-responsive thead {
        display: none;
    }*/

    /* 2. Chaque ligne (TR) devient un bloc (carte)
    .table-responsive tr.mobile-card-row {
        display: block;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        padding: 12px;
        position: relative;
    } */

    /* 3. Chaque cellule (TD) devient une ligne flexible 
    .table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
        text-align: right !important; 
    }

    .table-responsive td:last-child {
        border-bottom: none;
    }*/

    /* 4. MAGIE : On affiche le titre de la colonne à gauche via data-label
    .table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 13px;
        color: #888;
        text-transform: uppercase;
        margin-right: 15px;
        text-align: left;
    } */
    
    /* === STYLES SPÉCIFIQUES POUR RENDRE CELA JOLI === */
    
    /* La date en gros en haut de la carte
    .table-responsive td.date-cell {
        background: #f8f9fa;
        margin: -12px -12px 10px -12px; 
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 12px 12px 0 0;
        flex-direction: row-reverse; 
        justify-content: space-between;
    } */
    
    /* On cache le label "Date" car c'est évident
    .table-responsive td.date-cell::before {
        display: none;
    } */
}

/* ============================================================
   STYLES POUR page_activity_ai.php
   ============================================================ */

.activity-creator-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* Breadcrumb */
.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
}

.activity-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.activity-breadcrumb a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.activity-breadcrumb i {
    font-size: 12px;
}

/* Objective Context Banner */
.objective-context-banner {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.objective-context-banner::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;
}

.objective-context-content {
    position: relative;
    z-index: 1;
}

.objective-label {
	color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.objective-context-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.objective-context-description {
	color: white;
    font-size: 15px;
    opacity: 0.95;
    margin: 0;
}

/* Main Card */
.activity-creator-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.creator-header {
    text-align: center;
    margin-bottom: 40px;
}

.creator-header h1 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 12px 0;
}

.creator-header h1 i {
    color: var(--primary);
}

.creator-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* Content Blocks Area */
.content-blocks-wrapper {
    margin-bottom: 32px;
}

.content-blocks-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.content-blocks-label h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    margin: 0;
}

.content-blocks-label h3 i {
    color: var(--primary);
}

.blocks-count {
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

#content-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100px;
}

/* Content Block
.content-block {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.3s;
    cursor: move;
}

.content-block:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
}

.content-block.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
} */

.block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.block-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.block-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 8px;
    color: #666;
    cursor: grab;
    transition: all 0.2s;
}

.block-drag-handle:hover {
    background: var(--primary);
    color: white;
}

.block-drag-handle:active {
    cursor: grabbing;
}

.remove-block {
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: #fff5f5;
    color: #dc3545;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s;
}

.remove-block:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.1);
}

/* Form Elements in Blocks */
.block-input,
.block-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s;
    background: white;
}

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

.block-textarea {
    resize: vertical;
    min-height: 120px;
}

.block-file-input {
    display: none;
}

.block-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: white;
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
    font-weight: 600;
}

.block-file-label:hover {
    border-color: var(--primary);
    background: #f0f8ff;
    color: var(--primary);
}

.block-file-label i {
    font-size: 24px;
}

/* Preview Areas */
.image-preview,
.pdf-preview,
.video-preview {
    margin-top: 16px;
    border-radius: 10px;
    overflow: hidden;
}

.image-preview img {
    max-width: 100%;
    border-radius: 10px;
}

.pdf-preview embed {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}

.video-preview iframe {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}

/* Add Block Buttons */
.add-blocks-section {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 32px;
}

.add-blocks-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 16px;
}

.add-blocks-label i {
    color: var(--primary);
}

.add-blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.add-block-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    color: #666;
}

.add-block-btn:hover {
    border-color: var(--primary);
    background: #f0f8ff;
    color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.2);
}

.add-block-btn i {
    font-size: 32px;
}

.add-block-btn span {
    font-size: 13px;
}

/* Submit Section */
.submit-section {
    display: flex;
    gap: 16px;
    padding-top: 32px;
    border-top: 2px solid #f0f0f0;
}

.btn-preview {
    flex: 1;
    padding: 16px 32px;
    background: white;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.btn-preview:hover {
    background: #f0f8ff;
    transform: translateY(-2px);
}

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

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

/* Empty State */
.empty-blocks-state {
    text-align: center;
    padding: 60px 20px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
}

.empty-blocks-state i {
    font-size: 64px;
    color: #e0e0e0;
    margin-bottom: 16px;
}

.empty-blocks-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: #666;
    margin: 0 0 8px 0;
}

.empty-blocks-state p {
    font-size: 14px;
    color: #8e8e8e;
    margin: 0;
}


/* Evaluation Section
.evaluation-section {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d6 100%);
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 32px;
    border: 2px solid #ffc107;
}

.evaluation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
} */

.evaluation-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #f57c00;
    margin: 0;
}

.evaluation-header h3 i {
    font-size: 24px;
}

.evaluation-toggle {
    margin-left: auto;
}

.toggle-switch-eval {
    position: relative;
    width: 60px;
    height: 32px;
}

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

.toggle-slider-eval {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 32px;
    transition: 0.4s;
}

.toggle-slider-eval::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch-eval input:checked + .toggle-slider-eval {
    background: #ffc107;
}

.toggle-switch-eval input:checked + .toggle-slider-eval::before {
    transform: translateX(28px);
}

.evaluation-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

.evaluation-content {
    display: none;
}

.evaluation-content.active {
    display: block;
    animation: slideDown 0.4s ease;
}

.evaluation-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eval-field {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    position: relative;
}

.eval-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.eval-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #262626;
}

.eval-field-label i {
    color: #ffc107;
}

.eval-field-type {
    padding: 4px 10px;
    background: #ffc107;
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.remove-eval-field {
    width: 28px;
    height: 28px;
    background: #fff5f5;
    color: #dc3545;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.remove-eval-field:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.1);
}

.eval-field-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.eval-field-input:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.eval-options-container {
    margin-top: 12px;
}

.eval-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.eval-option-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
}

.btn-remove-option {
    width: 32px;
    height: 32px;
    background: #fff5f5;
    color: #dc3545;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.btn-remove-option:hover {
    background: #dc3545;
    color: white;
}

.btn-add-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8f9fa;
    border: 1px dashed #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.btn-add-option:hover {
    background: #e9ecef;
    border-color: #ffc107;
    color: #f57c00;
}

.add-eval-field-section {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 2px dashed #ffc107;
}

.add-eval-field-label {
    font-size: 14px;
    font-weight: 600;
    color: #f57c00;
    margin-bottom: 12px;
}

.add-eval-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.add-eval-field-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.add-eval-field-btn:hover {
    border-color: #ffc107;
    color: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.add-eval-field-btn i {
    font-size: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-creator-container {
        padding: 15px;
    }
    
    .activity-creator-card {
        padding: 20px;
    }
    
    .creator-header h1 {
        font-size: 24px;
    }
    
    .add-blocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .submit-section {
        flex-direction: column;
    }
    
    .evaluation-section {
        padding: 20px;
    }
    
    .add-eval-field-grid {
        grid-template-columns: 1fr;
    }

}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-block {
    animation: fadeIn 0.3s ease;
}

/* Styles pour la prévisualisation */
.preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.btn-use-template {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-use-template:hover { background: var(--primary-dark); transform: translateY(-2px); }

.template-preview-card {
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.tp-header {
    background: white;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.tp-badge {
    background: #e3f2fd;
    color: var(--primary);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.tp-header h2 { margin: 10px 0 5px; font-size: 20px; color: #333; }
.tp-header p { margin: 0; font-size: 14px; color: #666; font-style: italic; }

.tp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e0e0e0; /* Crée les bordures entre colonnes */
}

.tp-column {
    background: #fdfdfd;
    padding: 20px;
}

.tp-column h4 {
    font-size: 14px;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
}

.tp-list { display: flex; flex-direction: column; gap: 10px; }

/* Mini carte pour un bloc/critère */
.tp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: white;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 13px;
}

.tp-icon {
    color: #aaa;
    width: 20px;
    text-align: center;
    margin-top: 2px;
}

.tp-content strong { display: block; color: #444; margin-bottom: 2px; }
.tp-content div { color: #777; font-size: 12px; }

@media (max-width: 768px) {
    .tp-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   STYLES POUR team.php
   ============================================================ */

.code-display-box {
    background: #f8f9fa;
    border: 2px dashed #0A8CCB;
    padding: 15px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.code-display-box:hover {
    background: #e3f2fd;
    transform: scale(1.02);
}
.code-display-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #0A8CCB;
    opacity: 0.6;
}

.team-header{
	display:flex; 
	justify-content:space-between; 
	align-items:center; 
	margin-bottom:20px;
}

/* Grille des boutons */
.share-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 10px;
}

.btn-share-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #eee;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    color: #555;
}
.btn-share-icon:hover { background: #f8f9fa; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.btn-share-icon i { font-size: 24px; margin-bottom: 5px; }

/* Couleurs spécifiques */
.btn-share-icon.whatsapp i { color: #25D366; }
.btn-share-icon.email i { color: #EA4335; }
.btn-share-icon.sms i { color: #34B7F1; }
.btn-share-icon.print i { color: #333; }

.mobile-only { display: none; }
@media (max-width: 768px) {
    .mobile-only { display: flex; }
    .share-buttons-grid { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
    .team-header {flex-direction: column;}
}

/* IMPRESSION */
@media print {
    body * { visibility: hidden; }
    #printableArea, #printableArea * { visibility: visible; }
    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none !important; /* Pas de pointillés à l'impression finale */
    }
    /* Cacher le reste */
    .modal-overlay, .header-sticky, .sidebar-left { display: none !important; }
}

/* Badges légers (Light) pour les statuts */
.badge-info-light {
    background-color: #e3f2fd; /* Bleu très clair */
    color: #0c5460;            /* Bleu foncé */
    border: 1px solid #b6effb;
}

.badge-warning-light {
    background-color: #fff3cd;
    color: #856404 !important;
    border: 1px solid #ffeeba;
}

.badge-secondary-light {
    background-color: #f8f9fa;
    color: #6c757d !important;
    border: 1px solid #e9ecef;
}

/* Pour compléter si vous ajoutez d'autres statuts plus tard */
.badge-success-light {
    background-color: #d4edda;
    color: #155724 !important;
    border: 1px solid #c3e6cb;
}

.badge-danger-light {
    background-color: #f8d7da;
    color: #721c24 !important;
    border: 1px solid #f5c6cb;
}

/* Style général des badges dans la liste */
.list-group-item .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px; /* Coins légèrement arrondis */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   STYLES POUR schedule.php
   ============================================================ */

    /* Styles spécifiques à l'agenda */
    .fc-event {
        cursor: pointer;
        border: none;
        padding: 2px 4px;
        font-size: 0.85em;
        border-radius: 4px;
        transition: opacity 0.2s;
    }
    .fc-event:hover {
        opacity: 0.8;
    }
    .fc-day-today {
        background-color: rgba(10, 140, 203, 0.05) !important;
    }
    .fc-toolbar {
		flex-direction: column;
	}
    /* Légende */
    .agenda-legend {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding: 15px;
        background: white;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #666;
        font-weight: 500;
    }
    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    /* Modals Custom */
    .custom-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .custom-modal.show {
        display: flex;
        opacity: 1;
    }
    .custom-modal-content {
        background-color: #fff;
        padding: 0;
        border-radius: 12px;
        width: 90%;
        max-width: 550px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }
    .custom-modal.show .custom-modal-content {
        transform: translateY(0);
    }
    
    .modal-header-custom {
        padding: 20px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 1px solid #dee2e6;
        border-radius: 12px 12px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .modal-body-custom {
        padding: 20px;
        overflow-y: auto;
    }
    .modal-footer-custom {
        padding: 15px 20px;
        border-top: 1px solid #dee2e6;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        background: #f8f9fa;
        border-radius: 0 0 12px 12px;
    }
    
    .close-modal-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    
    /* Commentaires */
    .comments-list {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
        max-height: 200px;
        overflow-y: auto;
    }
    .comment-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9ecef;
    }
    .comment-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

/* ============================================================
   PAGE MON PROFIL (profil.php)
   ============================================================ */

.profile-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
}

.profile-header {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

.profile-body {
    padding: 30px;
}

/* Avatar spécifique profil */
.profile-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    cursor: pointer;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: filter 0.2s;
}

.profile-avatar-wrapper:hover .profile-avatar-img {
    filter: brightness(0.9);
}

.profile-avatar-edit-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 34px;
    height: 34px;
    background: #0A8CCB;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Sections du formulaire */
.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #0A8CCB;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* Boutons d'action */
.btn-save-profile {
    background: #0A8CCB;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-save-profile:hover {
    background: #0177B6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.2);
}

/* Section Mot de passe (Distincte) */
.password-section {
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 25px;
    margin-top: 40px;
}

.password-section h3 {
    color: #e65100;
    font-size: 16px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-save-password {
    background: #ef6c00;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-save-password:hover {
    background: #e65100;
}

/* Container grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

/* Base card style */
.checkbox-card {
    position: relative;
    cursor: pointer;
    display: block; /* Ensure label behaves like a block container */
}

/* Hide default checkbox */
.checkbox-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Content wrapper (similar to .role-content) */
.checkbox-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    height: -webkit-fill-available; /* Match height if grid rows differ */
}

/* Icon style inside span */
.checkbox-card span i {
    font-size: 18px;
    transition: color 0.3s;
}

/* HOVER STATE */
.checkbox-card:hover span {
    border-color: var(--primary);
    background: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.1);
}

.checkbox-card:hover span i {
    color: var(--primary); /* Uses your primary color variable */
}

/* CHECKED STATE */
.checkbox-card input:checked + span {
    border-color: var(--primary);
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    box-shadow: 0 6px 15px rgba(10, 140, 203, 0.15);
    color: var(--primary); 
    font-weight: 600;
}
.checkbox-card input:checked + span i {
    color: var(--primary); 
}

/* Checkmark badge (The green/primary circle with check icon) */
.checkbox-card input:checked + span::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free'; /* Ensure FontAwesome font family is correct */
    font-weight: 900;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    border: 2px solid white; /* Adds a nice white border around the checkmark */
}

.radio-inline { cursor: pointer; flex: 1; }
.radio-inline input { display: none; }
.radio-tile {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px; border: 1px solid #ddd; border-radius: 8px;
	color: #666; font-size: 13px; transition: all 0.2s; background: white;
}
.radio-inline input:checked + .radio-tile {
	border-color: #0A8CCB; background: #e3f2fd; color: #0056b3; font-weight: 600;
}

#pro-fields {
	width: 100%;
	margin-bottom: 25px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 10px;
	border-left: 3px solid #0A8CCB;
	animation: slideDown 0.3s ease-out;
}

    .onboarding-container { max-width: 800px; margin: 60px auto; background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
    .step-progress { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; }
    .step-dot { width: 10px; height: 10px; border-radius: 50%; background: #eee; }
    .step-dot.active { background: #0A8CCB; }
    
    h1 { color: #0A8CCB; text-align: center; margin-bottom: 10px; }
    p.subtitle { text-align: center; color: #666; margin-bottom: 30px; }
        
    .btn-submit { background: #0A8CCB; color: white; width: 100%; padding: 15px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; }
    .btn-submit:hover { background: #0077b6; }
    .skip-link { display: block; text-align: center; margin-top: 15px; color: #999; font-size: 13px; text-decoration: underline; }
    
/* ============================================================
   UX MOT DE PASSE AVANCÉE
   ============================================================ */

/* Le toggle (Oeil) doit être cliquable et bien placé */
.toggle-password {
    cursor: pointer;
    pointer-events: auto !important; /* Force le clic */
    z-index: 10;
}

/* Conteneur du feedback (caché si vide, ou toujours visible selon préférence) */
.password-feedback {
    margin-top: -10px;
    margin-bottom: 25px;
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 15px;
    display: none; /* Caché par défaut, affiché au focus */
    animation: slideDown 0.3s ease-out;
}

.password-feedback.active {
    display: block;
}

/* Barre de force */
.password-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

/* Texte de force */
.strength-text {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-align: right;
    margin-bottom: 10px;
}

/* Liste des critères */
.password-criteria {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 8px;
}

.password-criteria li {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.password-criteria li i {
    font-size: 10px;
}

/* État Valide */
.password-criteria li.valid {
    color: #28a745; /* Vert */
}
.password-criteria li.valid i::before {
    content: "\f00c"; /* Icone Check FontAwesome */
    font-weight: 900;
}

/* Couleurs de la jauge */
.strength-weak { background-color: #dc3545; width: 33%; }
.strength-medium { background-color: #ffc107; width: 66%; }
.strength-strong { background-color: #28a745; width: 100%; }

/* ============================================================
   STYLES POUR reset_password.php
   ============================================================ */

    .password-feedback { display: none; margin-top: 10px; margin-bottom: 20px; animation: slideDown 0.3s; }
    .password-feedback.active { display: block; }
    .password-strength-bar { height: 4px; background: #e0e0e0; border-radius: 2px; margin-bottom: 5px; overflow: hidden; }
    .strength-fill { height: 100%; width: 0%; transition: width 0.3s, background 0.3s; }
    .strength-text { font-size: 11px; text-align: right; color: #888; font-weight: 600; margin-bottom: 10px; }
    .password-criteria { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .password-criteria li { font-size: 11px; color: #999; display: flex; align-items: center; gap: 5px; }
    .password-criteria li.valid { color: #28a745; }
    .password-criteria li.valid i::before { content: "\f00c"; font-weight: 900; }
    
    /* Couleurs Jauge */
    .weak { background: #dc3545; width: 33%; }
    .medium { background: #ffc107; width: 66%; }
    .strong { background: #28a745; width: 100%; }

/* ============================================================
   STYLES POUR profil_pro.php
   ============================================================ */

    .profile-container {
		margin-top: var(--header-height) !important;
		min-height: calc(100vh - var(--header-height));

        max-width: 1000px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    /* --- HEADER (Bannière + Identité) --- */
    .profile-header-card {
        background: white;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        overflow: hidden;
        margin-bottom: 30px;
        border: 1px solid #e0e0e0;
        border-top: none;
    }

    .header-banner {
        height: 180px;
        background: linear-gradient(135deg, var(--primary) 0%, #005f8a 100%);
        position: relative;
    }

    .profil-header-content {
        padding: 0 30px 25px 30px;
        display: flex;
        align-items: flex-end;
        margin-top: -60px; /* Remonte le contenu sur la bannière */
        gap: 25px;
        flex-wrap: wrap;
    }

    .profile-avatar-wrapper {
        position: relative;
        flex-shrink: 0;
    }

    .profile-avatar {
        width: 140px; height: 140px;
        border-radius: 50%;
        border: 5px solid white;
        object-fit: cover;
        background: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .profile-initials {
        width: 140px; height: 140px;
        border-radius: 50%;
        border: 5px solid white;
        background: #eee;
        display: flex; align-items: center; justify-content: center;
        font-size: 40px; font-weight: bold; color: #888;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .profile-main-info {
        flex: 1;
        padding-top: 65px; /* Pour compenser le margin-top négatif */
        min-width: 300px;
    }

    .profile-name {
        font-size: 28px;
        font-weight: 800;
        color: #333;
        margin: 0;
        line-height: 1.2;
        text-align: unset;
    }

    .profile-job {
        font-size: 16px;
        color: var(--primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .badges-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .badge-pill {
        font-size: 12px;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-flex; align-items: center; gap: 6px;
    }
    
    .badge-verified { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
    .badge-supervised { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
    .badge-exp { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }

    /* --- LAYOUT GRID (Contenu + Sidebar) --- */
    .profile-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .content-section {
        background: white;
        border-radius: 16px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        border: 1px solid #eee;
    }

    .section-title {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
        display: flex; align-items: center; gap: 10px;
    }
    .section-title i { color: var(--primary); }

    .bio-text {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
        white-space: pre-line; /* Respecte les sauts de ligne */
    }

    /* Tags (Méthodes, etc.) */
    .tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag-large {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        background: #f8f9fa;
        color: #555;
        border: 1px solid #eee;
    }
    .tag-method { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
    .tag-pop { background: #f3e5f5; color: #7b1fa2; border-color: #e1bee7; }

    /* --- SIDEBAR --- */
    .sidebar-card {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        border: 1px solid #eee;
    }

    .contact-card {
        border-top: 4px solid var(--primary);
        position: sticky;
        top: 20px; /* Le bloc suit le scroll */
    }

    .info-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
    }
    .info-list-item:last-child { border-bottom: none; }
    
    .info-label { color: #888; display: flex; align-items: center; gap: 8px; }
    .info-value { font-weight: 600; color: #333; text-align: right; }

    .btn-action {
        display: block;
        width: 100%;
        height: auto;
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        font-weight: 700;
        margin-top: 15px;
        text-decoration: none;
        transition: transform 0.2s;
        border: none;
        cursor: pointer;
    }
    
    .btn-primary-action {
        background: var(--primary); color: white;
        box-shadow: 0 4px 10px rgba(10, 140, 203, 0.3);
    }
    .btn-primary-action:hover { background: #0177B6; transform: translateY(-2px); }

    .availability-box {
        text-align: center;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 15px;
        font-weight: 700;
        font-size: 14px;
    }
    .stat-avail { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
    .stat-wait { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }
    .stat-full { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }

    /* Responsive */
    @media (max-width: 768px) {
        .profil-header-content { flex-direction: column; align-items: center; text-align: center; margin-top: -70px; }
        .profile-main-info { padding-top: 10px; }
        .badges-row { justify-content: center; }
        .profile-grid { grid-template-columns: 1fr; }
        .contact-card { position: static; }
    }

/* ============================================================
   PAGE PROFIL (onboarding.php)
   ============================================================ */

.greeting-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333; /* Darker grey for better contrast than the blue h1 */
    margin-bottom: 25px; /* Space between greeting and progress bar */
    line-height: 1.4;
}

/* Optional: Add a subtle highlight to the user's name */
.greeting-title strong {
    color: #0A8CCB;
}

	/* ============================================================
   PAGE REGISTER CHILD (registerchild.php)
   ============================================================ */

.register-child-wrapper {
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.child-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.child-header {
    background: linear-gradient(135deg, #0A8CCB 0%, #0177B6 100%);
    padding: 25px;
    text-align: center;
    color: white;
}

.child-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.child-body {
    padding: 30px;
}

/* Upload Avatar */
.avatar-upload-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.avatar-upload-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f0f9ff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.avatar-upload-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.avatar-upload-wrapper:hover .avatar-preview {
    filter: brightness(0.9);
}

.avatar-upload-wrapper:hover .avatar-upload-icon {
    transform: scale(1.1);
}

/* Selecteur Genre */
.gender-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

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

.gender-option input {
    display: none;
}

.gender-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
    color: #666;
}

.gender-card i {
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
}

.gender-option:hover .gender-card {
    background: #f8f9fa;
    border-color: #dee2e6;
}

/* Active States */
.gender-option input:checked + .gender-card.male {
    border-color: #0A8CCB;
    background: #e3f2fd;
    color: #0A8CCB;
}

.gender-option input:checked + .gender-card.female {
    border-color: #e91e63;
    background: #fce4ec;
    color: #e91e63;
}

/* Formulaire */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.child-btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

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

.child-btn-cancel {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #999;
    text-decoration: none;
    font-size: 14px;
}

.child-btn-cancel:hover {
    color: #666;
}

/* Styles du Modal de Crop */
.crop-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-modal-content {
    background-color: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    animation: zoomIn 0.3s;
}

@keyframes zoomIn { from { transform: scale(0.9); 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; }
.close-crop { font-size: 24px; cursor: pointer; color: #999; }

.crop-body {
    padding: 20px;
    text-align: center;
}

.crop-area-wrapper {
    max-height: 400px;
    overflow: hidden;
    background: #333;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.crop-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.btn-control {
    background: #f0f0f0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #555;
    transition: background 0.2s;
}
.btn-control:hover { background: #e0e0e0; }

input[type=range] { width: 150px; }

.crop-footer {
    padding: 15px 20px;
    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;
}

.btn-crop-apply {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/*
 * 
*/
.register-child-wrapper {
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.child-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    width: 100%;
    max-width: none;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.child-header {
    background: linear-gradient(135deg, #0A8CCB 0%, #0177B6 100%);
    padding: 25px;
    text-align: center;
    color: white;
}

.child-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.child-body {
    padding: 30px;
}

/* Upload Avatar */
.avatar-upload-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.avatar-upload-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f0f9ff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.avatar-upload-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.avatar-upload-wrapper:hover .avatar-preview {
    filter: brightness(0.9);
}

.avatar-upload-wrapper:hover .avatar-upload-icon {
    transform: scale(1.1);
}

/* Selecteur Genre */
.gender-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

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

.gender-option input {
    display: none;
}

.gender-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
    color: #666;
}

.gender-card i {
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
}

.gender-option:hover .gender-card {
    background: #f8f9fa;
    border-color: #dee2e6;
}

/* Active States */
.gender-option input:checked + .gender-card.male {
    border-color: #0A8CCB;
    background: #e3f2fd;
    color: #0A8CCB;
}

.gender-option input:checked + .gender-card.female {
    border-color: #e91e63;
    background: #fce4ec;
    color: #e91e63;
}

/* Formulaire */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.child-btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

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

.child-btn-cancel {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #999;
    text-decoration: none;
    font-size: 14px;
}

.child-btn-cancel:hover {
    color: #666;
}

	/* ============================================================
   PAGE INFORMATIONS ENFANT (basic-info.php)
   ============================================================ */

/* Wrapper spécifique pour ajuster le padding */
.basic-info-wrapper {
    padding-top: 20px;
    min-height: auto;
}

/* Alertes de notification */
.alert-box {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.alert-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Gestion de la photo */
.avatar-upload-wrapper.editable {
    cursor: pointer;
}

.avatar-upload-wrapper.readonly {
    cursor: default;
}

.photo-help-text {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 25px;
}

/* Champs en lecture seule (Non-Admin) */
.read-only-field {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    border: 1px solid #f0f0f0;
}

.age-meta {
    color: #888;
    font-size: 12px;
    margin-left: 10px;
}

/* Genre en lecture seule */
.gender-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    color: #555;
    font-size: 14px;
}

.gender-icon-male { color: #0A8CCB; }
.gender-icon-female { color: #e91e63; }

/* Section Code de Ralliement */
.invitation-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
}

.code-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.code-display-readonly {
    flex: 1;
    padding: 12px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 8px;
    color: #0d47a1;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}

.btn-copy-code {
    padding: 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.code-help-text {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* Actions Formulaire */
.form-actions {
    margin-top: 30px;
}

	/* ============================================================
   PAGE CONNEXION (login.php)
   ============================================================ */

    /* Layout Auth */
    .auth-container-custom {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .alert-info-custom {
        background: #e3f2fd;
        color: #0c5460;
        font-size: 13px;
        margin-top: 10px;
        border: 1px solid #b6effb;
        padding: 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Avatar Upload */
    .avatar-upload-container {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    .avatar-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .avatar-preview {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f0f0f0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: filter 0.3s;
    }

    .avatar-wrapper:hover .avatar-preview {
        filter: brightness(0.9);
    }

    .avatar-icon-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #0A8CCB;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        color: white;
        font-size: 14px;
    }

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

    /* Sélecteur de Rôle */
    .role-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin-bottom: 10px;
    }

    .role-selector-container {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .role-option {
        flex: 1;
        cursor: pointer;
        height: 130px;
    }

    .role-option input {
        display: none;
    }

    .role-box {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        background: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .role-box i {
        font-size: 24px;
        color: #b0b0b0;
        transition: color 0.3s;
    }

    .role-box div {
        font-weight: 600;
        font-size: 14px;
        color: #666;
        transition: color 0.3s;
    }

    /* États Rôle */
    .role-option:hover .role-box {
        border-color: #b3e5fc;
        background-color: #fafafa;
    }

    .role-option input:checked + .role-box {
        border-color: #0A8CCB;
        background-color: #f0f9ff;
        box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
    }

    .role-option input:checked + .role-box i {
        color: #0A8CCB;
    }

    .role-option input:checked + .role-box div {
        color: #0056b3;
    }

    /* Champs Pro */
    #pro-fields {
        display: none;
        margin-bottom: 25px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 10px;
        border-left: 3px solid #0A8CCB;
        animation: slideDown 0.3s ease-out;
    }

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

    /* CGU */
    .cgu-container {
        margin-bottom: 25px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .cgu-checkbox {
        margin-top: 4px;
        accent-color: #0A8CCB;
    }

    .cgu-label {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
    }

    /* --- MODAL CROP --- */
    .crop-modal {
        display: none;
        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;
    }

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

    .crop-modal-content {
        background-color: white;
        border-radius: 12px;
        width: 95%;
        max-width: 500px;
        overflow: hidden;
        animation: zoomIn 0.3s;
    }

    @keyframes zoomIn { from { transform: scale(0.9); 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-body { padding: 20px; text-align: center; background: #222; }
    
    .crop-area-wrapper {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

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

    .crop-controls {
        padding: 15px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .rotate-btn {
        width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid #ddd; background: white; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    
    .zoom-control { flex: 1; display: flex; align-items: center; gap: 5px; }
    input[type=range] { width: 100%; }

    .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;
    }

    .btn-crop-apply {
        padding: 10px 25px; background: #0A8CCB; color: white;
        border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
    }
    
        /* ===== ROLE SELECTION ===== */
        .role-selection {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
        }
        
        .role-card {
            position: relative;
            cursor: pointer;
            min-width: 135px;
        }
        
        .role-card input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        
        .role-content {
            padding: 20px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s;
            height: 100%;
        }
        
        .role-content i {
            font-size: 32px;
            color: var(--primary);
            margin-bottom: 10px;
            display: block;
        }
        
        .role-content h5 {
            font-size: 15px;
            font-weight: 600;
            color: #262626;
            margin: 0 0 4px 0;
        }
        
        .role-content p {
            font-size: 12px;
            color: #8e8e8e;
            margin: 0;
        }
        
        .role-card:hover .role-content {
            border-color: var(--primary);
            background: #f0f8ff;
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(10, 140, 203, 0.15);
        }
        
        .role-card input:checked + .role-content {
            border-color: var(--primary);
            background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
            box-shadow: 0 8px 20px rgba(10, 140, 203, 0.2);
        }
        
        .role-card input:checked + .role-content::after {
            content: '\f00c';
            font-family: 'FontAwesome';
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
/* ============================================================
   UX MOT DE PASSE AVANCÉE
   ============================================================ */

/* Le toggle (Oeil) doit être cliquable et bien placé */
.toggle-password {
    cursor: pointer;
    pointer-events: auto !important; /* Force le clic */
    z-index: 10;
}

/* Conteneur du feedback (caché si vide, ou toujours visible selon préférence) */
.password-feedback {
    margin-top: -10px;
    margin-bottom: 25px;
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 15px;
    display: none; /* Caché par défaut, affiché au focus */
    animation: slideDown 0.3s ease-out;
}

.password-feedback.active {
    display: block;
}

/* Barre de force */
.password-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

/* Texte de force */
.strength-text {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-align: right;
    margin-bottom: 10px;
}

/* Liste des critères */
.password-criteria {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 8px;
}

.password-criteria li {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.password-criteria li i {
    font-size: 10px;
}

/* État Valide */
.password-criteria li.valid {
    color: #28a745; /* Vert */
}
.password-criteria li.valid i::before {
    content: "\f00c"; /* Icone Check FontAwesome */
    font-weight: 900;
}

/* Couleurs de la jauge */
.strength-weak { background-color: #dc3545; width: 33%; }
.strength-medium { background-color: #ffc107; width: 66%; }
.strength-strong { background-color: #28a745; width: 100%; }

	.radio-inline { cursor: pointer; flex: 1; }
    .radio-inline input { display: none; }
    .radio-tile {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px; border: 1px solid #ddd; border-radius: 8px;
        color: #666; font-size: 13px; transition: all 0.2s; background: white;
    }
    .radio-inline input:checked + .radio-tile {
        border-color: #0A8CCB; background: #e3f2fd; color: #0056b3; font-weight: 600;
    }

	/* ============================================================
   PAGE INSCRIPTION (register.php)
   ============================================================ */

    /* Layout Auth */
    .auth-container-custom {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .alert-info-custom {
        background: #e3f2fd;
        color: #0c5460;
        font-size: 13px;
        margin-top: 10px;
        border: 1px solid #b6effb;
        padding: 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Avatar Upload */
    .avatar-upload-container {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    .avatar-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .avatar-preview {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f0f0f0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: filter 0.3s;
    }

    .avatar-wrapper:hover .avatar-preview {
        filter: brightness(0.9);
    }

    .avatar-icon-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #0A8CCB;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        color: white;
        font-size: 14px;
    }

    /* Sélecteur de Rôle */
    .role-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin-bottom: 10px;
    }

    .role-selector-container {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .role-option {
        flex: 1;
        cursor: pointer;
        height: 130px;
    }

    .role-option input {
        display: none;
    }

    .role-box {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        background: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .role-box i {
        font-size: 24px;
        color: #b0b0b0;
        transition: color 0.3s;
    }

    .role-box div {
        font-weight: 600;
        font-size: 14px;
        color: #666;
        transition: color 0.3s;
    }

    /* États Rôle */
    .role-option:hover .role-box {
        border-color: #b3e5fc;
        background-color: #fafafa;
    }

    .role-option input:checked + .role-box {
        border-color: #0A8CCB;
        background-color: #f0f9ff;
        box-shadow: 0 4px 12px rgba(10, 140, 203, 0.15);
    }

    .role-option input:checked + .role-box i {
        color: #0A8CCB;
    }

    .role-option input:checked + .role-box div {
        color: #0056b3;
    }

    /* Champs Pro */
    #pro-fields {
        display: none;
        margin-bottom: 25px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 10px;
        border-left: 3px solid #0A8CCB;
        animation: slideDown 0.3s ease-out;
    }

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

    /* CGU */
    .cgu-container {
        margin-bottom: 25px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .cgu-checkbox {
        margin-top: 4px;
        accent-color: #0A8CCB;
    }

    .cgu-label {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
    }

    /* --- MODAL CROP --- */
    .crop-modal {
        display: none;
        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;
    }

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

    .crop-modal-content {
        background-color: white;
        border-radius: 12px;
        width: 95%;
        max-width: 500px;
        overflow: hidden;
        animation: zoomIn 0.3s;
    }

    @keyframes zoomIn { from { transform: scale(0.9); 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-body { padding: 20px; text-align: center; background: #222; }
    
    .crop-area-wrapper {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

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

    .crop-controls {
        padding: 15px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .rotate-btn {
        width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid #ddd; background: white; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    
    .zoom-control { flex: 1; display: flex; align-items: center; gap: 5px; }
    input[type=range] { width: 100%; }

    .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;
    }

    .btn-crop-apply {
        padding: 10px 25px; background: #0A8CCB; color: white;
        border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
    }
    
        /* ===== ROLE SELECTION ===== */
        .role-selection {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
        }
        
        .role-card {
            position: relative;
            cursor: pointer;
            min-width: 135px;
        }
        
        .role-card input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        
        .role-content {
            padding: 20px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s;
            height: 100%;
        }
        
        .role-content i {
            font-size: 32px;
            color: var(--primary);
            margin-bottom: 10px;
            display: block;
        }
        
        .role-content h5 {
            font-size: 15px;
            font-weight: 600;
            color: #262626;
            margin: 0 0 4px 0;
        }
        
        .role-content p {
            font-size: 12px;
            color: #8e8e8e;
            margin: 0;
        }
        
        .role-card:hover .role-content {
            border-color: var(--primary);
            background: #f0f8ff;
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(10, 140, 203, 0.15);
        }
        
        .role-card input:checked + .role-content {
            border-color: var(--primary);
            background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
            box-shadow: 0 8px 20px rgba(10, 140, 203, 0.2);
        }
        
        .role-card input:checked + .role-content::after {
            content: '\f00c';
            font-family: 'FontAwesome';
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
/* ============================================================
   UX MOT DE PASSE AVANCÉE
   ============================================================ */

/* Le toggle (Oeil) doit être cliquable et bien placé */
.toggle-password {
    cursor: pointer;
    pointer-events: auto !important; /* Force le clic */
    z-index: 10;
}

/* Conteneur du feedback (caché si vide, ou toujours visible selon préférence) */
.password-feedback {
    margin-top: -10px;
    margin-bottom: 25px;
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 15px;
    display: none; /* Caché par défaut, affiché au focus */
    animation: slideDown 0.3s ease-out;
}

.password-feedback.active {
    display: block;
}

/* Barre de force */
.password-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

/* Texte de force */
.strength-text {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-align: right;
    margin-bottom: 10px;
}

/* Liste des critères */
.password-criteria {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 8px;
}

.password-criteria li {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.password-criteria li i {
    font-size: 10px;
}

/* État Valide */
.password-criteria li.valid {
    color: #28a745; /* Vert */
}
.password-criteria li.valid i::before {
    content: "\f00c"; /* Icone Check FontAwesome */
    font-weight: 900;
}

/* Couleurs de la jauge */
.strength-weak { background-color: #dc3545; width: 33%; }
.strength-medium { background-color: #ffc107; width: 66%; }
.strength-strong { background-color: #28a745; width: 100%; }

	.radio-inline { cursor: pointer; flex: 1; }
    .radio-inline input { display: none; }
    .radio-tile {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px; border: 1px solid #ddd; border-radius: 8px;
        color: #666; font-size: 13px; transition: all 0.2s; background: white;
    }
    .radio-inline input:checked + .radio-tile {
        border-color: #0A8CCB; background: #e3f2fd; color: #0056b3; font-weight: 600;
    }

/* ============================================================
   documents.php
   ============================================================ */
	
/* Header */
.documents-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.doc-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header-title h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.btn-add-document {
    background: white;
    color: #667eea;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-add-document:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Filtres et recherche */
.filters-bar {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filters-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border: 2px solid var(--light);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
}

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

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-600);
}

.filter-select {
    padding: 10px 16px;
    border: 2px solid var(--light);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

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

/* Catégories Pills */
.categories-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
}

.category-pill {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-pill.active {
    border-color: currentColor;
    transform: scale(1.05);
}

.category-pill:hover {
    transform: translateY(-2px);
}

/* Grille documents */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/* Card document */
.document-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    position: relative;
}

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

.document-header {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon-large {
    font-size: 64px;
    opacity: 0.3;
}

.document-category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.document-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.status-pending { background: var(--warning); }
.status-approved { background: var(--success); }
.status-rejected { background: var(--danger); }
.status-archived { background: var(--gray-600); }

.document-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-menu {
    position: absolute;
    bottom: 12px;
    right: 12px;
}

.btn-document-menu {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.btn-document-menu:hover {
    transform: scale(1.1);
    background: white;
}

.document-body {
    padding: 20px;
}

.document-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.document-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--gray-600);
    margin: 12px 0;
    flex-wrap: wrap;
}

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

.document-description {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-footer {
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    gap: 8px;
}

.btn-doc-action {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

.btn-download:hover {
    background: #2563eb;
}

.btn-share {
    background: var(--gray-100);
    color: var(--gray-900);
}

.btn-share:hover {
    background: var(--gray-200);
}

/* Modal moderne */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease;
}

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

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-close-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close-modal:hover {
    background: var(--gray-200);
}

.modal-body {
    padding: 24px;
}

/* Formulaire */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
}

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

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-file-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.form-file-zone:hover {
    border-color: var(--primary);
    background: rgba(10, 140, 203, 0.05);
}

.form-file-zone.drag-over {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.file-icon-upload {
    font-size: 48px;
    color: var(--gray-300);
    margin-bottom: 16px;
}

/* Admin validation */
.admin-section {
    background: var(--gray-50);
    padding: 16px;
    border-radius: 12px;
    margin: 20px 0;
}

.validation-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.btn-validate {
    flex: 1;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .documents-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        min-width: 100%;
    }
}

@keyframes pulse-sensitive {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.sensitive-badge {
    animation: pulse-sensitive 2s infinite;
}

/* Watermark sur preview si sensible */
.document-preview.sensitive::after {
    content: '⚠️ CONFIDENTIEL';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 32px;
    font-weight: 900;
    color: rgba(220, 53, 69, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

/* Modal de confirmation pour documents sensibles */
.sensitive-warning-modal {
    background: #fff5f5;
    border: 2px solid #dc3545;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    margin: 20px auto;
}

.sensitive-warning-modal h3 {
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.sensitive-warning-modal ul {
    margin: 16px 0;
    padding-left: 24px;
}

.sensitive-warning-modal ul li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* ============================================================
   legal
   ============================================================ */
.legal-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.legal-header {
    background: linear-gradient(135deg, #0A8CCB 0%, #0177B6 100%);
    color: white;
    padding: 60px 40px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 40px;
}

.legal-header h1 {
    font-size: 36px;
    color: white;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.legal-header .subtitle {
	color: white;
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

.last-update {
    text-align: center;
    color: #718096;
    font-size: 14px;
    margin-bottom: 32px;
}

/* Résumé en points clés */
.summary-box {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 40px;
}

.summary-box h2 {
    color: #0A8CCB;
    font-size: 24px;
    margin: 0 0 24px 0;
    text-align: center;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.summary-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-item .icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.summary-item h3 {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.summary-item p {
    color: #4A5568;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Sections accordéon */
.accordion-section {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.accordion-header {
    padding: 24px 32px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: #F8FBFD;
}

.accordion-header h2 {
    color: #1A1A1A;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.accordion-header .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #87ACD4 0%, #0A8CCB 100%);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.accordion-toggle {
    font-size: 24px;
    color: #0A8CCB;
    transition: transform 0.3s;
}

.accordion-section.active .accordion-toggle {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.active {
    max-height: 8000px;
    transition: max-height 0.5s ease-in;
}

.accordion-body {
    padding: 0 32px 32px 32px;
    color: #4A5568;
    line-height: 1.8;
}

.accordion-body h3 {
    color: #0A8CCB;
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 16px 0;
}

.accordion-body h4 {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 12px 0;
}

.accordion-body p {
    margin: 0 0 16px 0;
}

.accordion-body ul, .accordion-body ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.accordion-body li {
    margin-bottom: 8px;
}

/* Alertes */
.alert-box {
    background: #FFF9E6;
    border-left: 4px solid #FF9800;
    padding: 16px 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.alert-box strong {
    color: #663C00;
}

.warning-box {
    background: #FEF2F2;
    border: 1px solid #FEE2E2;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.warning-box strong {
    color: #DC2626;
}

.info-box {
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.info-box strong {
    color: #0C4A6E;
}

.success-box {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.success-box strong {
    color: #166534;
}

/* Contact box */
.contact-box {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 40px 0;
}

.contact-box h3 {
    color: #0A8CCB;
    font-size: 24px;
    margin: 0 0 16px 0;
}

.contact-box p {
    color: #4A5568;
    margin: 0 0 24px 0;
}

.contact-box .contact-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-box a {
    background: white;
    color: #0A8CCB;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-box a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-header {
        padding: 40px 24px;
    }
    
    .legal-header h1 {
        font-size: 28px;
    }
    
    .accordion-header, .accordion-body {
        padding: 20px;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   politique-cookies.php
   ============================================================ */

/* Contenu */
.content-box {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}

.content-box h2 {
    color: #0A8CCB;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.content-box h3 {
    color: #1A1A1A;
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 12px 0;
}

.content-box h4 {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 8px 0;
}

.content-box p {
    margin: 0 0 16px 0;
}

.content-box ul {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.content-box li {
    margin-bottom: 8px;
}

/* Tableaux simples */
.simple-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: #F8FBFD;
    border-radius: 8px;
    overflow: hidden;
}

.simple-table th {
    background: linear-gradient(135deg, #87ACD4 0%, #0A8CCB 100%);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

.simple-table td {
    padding: 12px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 14px;
}

.simple-table tbody tr:last-child td {
    border-bottom: none;
}

.simple-table tbody tr:hover {
    background: #EFF6FB;
}

/* Alertes */
.alert-critical {
    background: #FEF2F2;
    border-left: 4px solid #DC2626;
    padding: 16px 20px;
    border-radius: 8px;
    margin: 24px 0;
}

.alert-critical strong {
    color: #DC2626;
    font-size: 15px;
}

.alert-critical p {
    color: #991B1B;
    margin: 8px 0 0 0;
}

.alert-info {
    background: #F0F9FF;
    border-left: 4px solid #0A8CCB;
    padding: 16px 20px;
    border-radius: 8px;
    margin: 24px 0;
}

.alert-info strong {
    color: #0C4A6E;
}

.alert-info p {
    color: #0C4A6E;
    margin: 8px 0 0 0;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.badge-required {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-exempt {
    background: #D1FAE5;
    color: #065F46;
}

/* Bouton gérer cookies */
.manage-cookies-box {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 32px 0;
}

.manage-cookies-box h3 {
    color: #0A8CCB;
    font-size: 20px;
    margin: 0 0 12px 0;
}

.manage-cookies-box p {
    color: #4A5568;
    margin: 0 0 20px 0;
}

.btn-manage {
    background: linear-gradient(135deg, #0A8CCB 0%, #0177B6 100%);
    color: white !important;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.3);
    border: none;
    cursor: pointer;
    font-size: 16px;
}

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

/* Footer */
.links {
    background: #F8FBFD;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    margin-top: 40px;
}

.links p {
    color: #4A5568;
    font-size: 14px;
    margin: 0 0 12px 0;
}

.links a {
    color: #0A8CCB;
    text-decoration: none;
    font-weight: 600;
    margin: 0 12px;
}

.links a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .content-box {
        padding: 24px 20px;
    }
    
    .simple-table {
        font-size: 12px;
    }
    
    .simple-table th, .simple-table td {
        padding: 8px;
    }
}

/* ============================================================
   mention-legal.php
   ============================================================ */

/* Section simple */
.legal-box {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
}

.legal-box h2 {
    color: #0A8CCB;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.legal-box p {
    margin: 0 0 12px 0;
    font-size: 15px;
}

.legal-box p:last-child {
    margin: 0;
}

.legal-box strong {
    color: #1A1A1A;
}

/* HDS Badge */
.hds-badge {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin: 8px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-box {
        padding: 20px;
    }
}

/* ============================================
   REINFORCERS SECTION
   ============================================ */

.reinforcers-section {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border: 2px solid #ffd54f;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 25px;
}

.reinforcers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.reinforcer-option {
    cursor: pointer;
    position: relative;
    display: block;
}

.reinforcer-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reinforcer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    color: #333;
}

.reinforcer-card i {
    font-size: 20px;
    transition: transform 0.3s;
}

.reinforcer-option:hover .reinforcer-card {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(10, 140, 203, 0.1);
    transform: translateY(-2px);
}

.reinforcer-option input:checked + .reinforcer-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 6px 20px rgba(10, 140, 203, 0.3);
}

.reinforcer-option input:checked + .reinforcer-card i {
    transform: scale(1.2);
    color: white !important;
}

/* Effectiveness Rating */
.effectiveness-rating {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-option {
    cursor: pointer;
    position: relative;
}

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

.rating-star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.rating-star i {
    color: #ddd;
    font-size: 14px;
}

.rating-option:hover .rating-star {
    border-color: #ffc107;
    background: #fff9e6;
}

.rating-option input:checked + .rating-star {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border-color: #ffc107;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.rating-option input:checked + .rating-star i {
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .reinforcers-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .effectiveness-rating {
        flex-direction: column;
    }
    
    .rating-star {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   ACTION BUTTONS - VIEW ACTIVITY HEADER
   Design moderne et responsive
   ============================================ */

.action-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Bouton Modifier (Bleu - Primary) */
.action-buttons .btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: 2px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(10, 140, 203, 0.2);
    position: relative;
    overflow: hidden;
}

.action-buttons .btn-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.action-buttons .btn-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(10, 140, 203, 0.4);
}

.action-buttons .btn-preview:hover::before {
    left: 100%;
}

.action-buttons .btn-preview:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(10, 140, 203, 0.2);
}

.action-buttons .btn-preview i {
    font-size: 16px;
}

/* Bouton Supprimer (Rouge - Danger) */
.action-buttons button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #dc3545;
    border: 2px solid #dc3545;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.action-buttons button[type="submit"]:hover {
    background: #dc3545;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.action-buttons button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.action-buttons button[type="submit"] i {
    font-size: 16px;
    transition: transform 0.3s;
}

.action-buttons button[type="submit"]:hover i {
    transform: scale(1.1);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablettes */
@media (max-width: 768px) {
    .activity-header-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    .action-buttons {
        width: 100% !important;
        justify-content: flex-start;
    }
    
    .action-buttons .btn-preview,
    .action-buttons button[type="submit"] {
        flex: 1;
        justify-content: center;
        min-width: 140px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .action-buttons {
        flex-direction: column;
        width: 100% !important;
        gap: 10px;
    }
    
    .action-buttons .btn-preview,
    .action-buttons button[type="submit"] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   VARIANTES ALTERNATIVES (Optionnel)
   ============================================ */

/* Variante 1 : Boutons iconiques (compact) */
.action-buttons.compact .btn-preview,
.action-buttons.compact button[type="submit"] {
    padding: 8px 12px;
    font-size: 13px;
}

.action-buttons.compact .btn-preview i,
.action-buttons.compact button[type="submit"] i {
    font-size: 14px;
}

/* Variante 2 : Boutons outline (tous en outline) */
.action-buttons.outline .btn-preview {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

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

/* Variante 3 : Boutons avec dropdown (si besoin) */
.action-buttons .btn-group {
    position: relative;
    display: inline-flex;
}

.action-buttons .dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 1000;
}

.action-buttons .dropdown-menu.active {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

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

.action-buttons .dropdown-item:hover {
    background: #f8f9fa;
}

.action-buttons .dropdown-item i {
    width: 18px;
    color: #666;
}

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

/* ============================================
   ÉTATS SPÉCIAUX
   ============================================ */

/* Bouton désactivé */
.action-buttons .btn-preview:disabled,
.action-buttons button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading state */
.action-buttons .btn-preview.loading,
.action-buttons button[type="submit"].loading {
    pointer-events: none;
    position: relative;
}

.action-buttons .btn-preview.loading::after,
.action-buttons button[type="submit"].loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   ANIMATIONS AVANCÉES (Premium UX)
   ============================================ */

/* Effet ripple au clic */
.action-buttons .btn-preview,
.action-buttons button[type="submit"] {
    overflow: hidden;
    position: relative;
}

.action-buttons .btn-preview .ripple,
.action-buttons button[type="submit"] .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Badge de notification (ex: "Nouveau") */
.action-buttons .btn-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff5722;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   DARK MODE (Si implémenté)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .action-buttons .btn-preview {
        box-shadow: 0 2px 8px rgba(10, 140, 203, 0.4);
    }
    
    .action-buttons button[type="submit"] {
        background: #1e1e1e;
        border-color: #dc3545;
        color: #dc3545;
    }
    
    .action-buttons button[type="submit"]:hover {
        background: #dc3545;
        color: white;
    }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

/* Focus visible pour clavier */
.action-buttons .btn-preview:focus,
.action-buttons button[type="submit"]:focus {
    outline: 3px solid rgba(10, 140, 203, 0.4);
    outline-offset: 2px;
}

.action-buttons button[type="submit"]:focus {
    outline-color: rgba(220, 53, 69, 0.4);
}

/* Amélioration contraste pour malvoyants */
@media (prefers-contrast: high) {
    .action-buttons .btn-preview {
        border: 3px solid var(--primary-dark);
    }
    
    .action-buttons button[type="submit"] {
        border: 3px solid #dc3545;
    }
}

/* Bouton ajout tag */
.btn-add-tag {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-add-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Case à cocher en attente */
.checkbox-card.pending-validation {
    border: 2px dashed #ffc107;
    background: #fff8e1;
    position: relative;
}

.pending-icon {
    color: #ffc107;
    margin-left: 6px;
    font-size: 12px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Animations */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Styles modal améliorés */
.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

.btn-cancel {
    padding: 10px 20px;
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: #e9ecef;
}

/*.btn-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}*/

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Bloquer les clics sur le contenu de la modal pendant le tour */
.tour-modal-blocked #view-templates > * {
    pointer-events: none !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* SAUF les éléments que le tour met en avant */
body.onboarding-active .tour-modal-blocked .spotlight-border {
    pointer-events: none !important;
}

/* Garder le tooltip cliquable */
body.onboarding-active .onboarding-tooltip,
body.onboarding-active .onboarding-tooltip * {
    pointer-events: all !important;
}

/* Animation de pulsation sur l'élément en focus */
#view-templates.tour-highlight {
    animation: none; /* Pas d'animation sur le container global */
}

#createObjectiveBtn.tour-highlight,
#templates-container.tour-highlight {
    animation: tourHighlight 2s ease-in-out infinite;
    position: relative;
    z-index: 10001;
}

@keyframes tourHighlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(var(--primary-rgb), 0.6);
    }
}

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

.btn-tour-action-mobile:active {
    transform: scale(0.98);
}

/* Ajustements tooltip mobile */
@media (max-width: 768px) {
    .onboarding-tooltip {
        max-width: 90vw !important;
        padding: 16px;
    }
    
    .onboarding-tooltip .tooltip-title {
        font-size: 16px;
    }
    
    .onboarding-tooltip .tooltip-description {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .onboarding-tooltip ul {
        font-size: 12px;
    }
    
    /* Position topright sur mobile = centré en haut */
    .onboarding-tooltip.position-topright {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* ============================================
   WIDGET PROFIL RÉSUMÉ - SIDEBAR RIGHT
   ============================================ */

.widget-profile-summary {
    background: white;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.widget-profile-summary:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.widget-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.widget-header h4 {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header h4 i {
    font-size: 18px;
}

.widget-link {
    color: white;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    font-weight: 500;
}

.widget-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.quick-info {
    padding: 15px 18px;
}

.quick-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.quick-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.quick-item.alert {
    background: #fff5f5;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #feb2b2;
    border-bottom: 1px solid #feb2b2 !important;
}

.quick-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 6px;
}

.quick-item.alert .quick-label {
    color: #742a2a;
}

.quick-value {
    display: block;
    font-size: 14px;
    color: #2d3748;
    line-height: 1.5;
}

.quick-item.alert .quick-value {
    color: #c53030;
    font-weight: 500;
}

.btn-view-full-profile {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px 18px 18px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-view-full-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-view-full-profile:active {
    transform: translateY(0);
}

/* Variante compacte pour petits écrans */
@media (max-width: 1200px) {
    .widget-profile-summary {
        margin-bottom: 15px;
    }
    
    .widget-header {
        padding: 12px 15px;
    }
    
    .widget-header h4 {
        font-size: 14px;
    }
    
    .quick-info {
        padding: 12px 15px;
    }
    
    .quick-item {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .quick-label {
        font-size: 12px;
    }
    
    .quick-value {
        font-size: 13px;
    }
    
    .btn-view-full-profile {
        margin: 0 15px 15px 15px;
        width: calc(100% - 30px);
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Animation d'apparition */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.widget-profile-summary {
    animation: slideInRight 0.4s ease-out;
}

/* Badge de statut (optionnel) */
.profile-completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.profile-completion-badge.complete {
    background: rgba(72, 187, 120, 0.3);
}

.profile-completion-badge.incomplete {
    background: rgba(237, 137, 54, 0.3);
}

/* Icônes contextuelles */
.quick-item .fa,
.quick-item .fas {
    margin-right: 4px;
}

/* État vide (si profil non complété) */
.widget-empty-state {
    padding: 30px 20px;
    text-align: center;
    color: #a0aec0;
}

.widget-empty-state i {
    font-size: 40px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.widget-empty-state p {
    margin: 0 0 15px 0;
    font-size: 13px;
}

.btn-complete-profile {
    display: inline-block;
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-complete-profile:hover {
    background: #5568d3;
    transform: translateY(-2px);
    color: white;
}

/* Scroll interne si trop d'infos */
.quick-info {
    max-height: 350px;
    overflow-y: auto;
}

/* Scrollbar personnalisée */
.quick-info::-webkit-scrollbar {
    width: 6px;
}

.quick-info::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.quick-info::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.quick-info::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}