:root {
--cdc-primary: #016dc3;
--cdc-secondary: #ff207a;
--cdc-success: #10b981;
--cdc-warning: #f59e0b;
--cdc-danger: #ef4444;
--cdc-gray-light: #f3f4f6;
--cdc-gray: #6b7280;
--cdc-gray-dark: #374151;
--cdc-border: #e5e7eb;
--cdc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--cdc-radius: 6px;
} .cdc-liste-participants-wrapper {
max-width: 100%;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--cdc-gray-dark);
}
@media (max-width: 768px) {
.cdc-liste-participants-wrapper {
padding: 10px;
}
} .cdc-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: white;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
box-shadow: var(--cdc-shadow);
}
@media (max-width: 768px) {
.cdc-toolbar {
flex-direction: column;
align-items: stretch;
}
} .cdc-filters {
display: flex;
gap: 10px;
flex: 1;
align-items: center;
}
@media (max-width: 768px) {
.cdc-filters {
flex-direction: column;
width: 100%;
}
}
.cdc-filter-search {
flex: 1;
min-width: 200px;
}
.cdc-filter-search input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
font-size: 14px;
transition: border-color 0.2s;
}
.cdc-filter-search input:focus {
outline: none;
border-color: var(--cdc-primary);
box-shadow: 0 0 0 3px rgba(1, 109, 195, 0.1);
}
.cdc-filter-buttons {
display: flex;
gap: 10px;
align-items: center;
}
@media (max-width: 768px) {
.cdc-filter-buttons {
flex-wrap: wrap;
width: 100%;
}
}
.cdc-filter {
padding: 8px 12px;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
background: white;
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}
.cdc-filter:hover {
border-color: var(--cdc-gray);
}
.cdc-filter:focus {
outline: none;
border-color: var(--cdc-primary);
}
@media (max-width: 768px) {
.cdc-filter {
flex: 1;
min-width: calc(50% - 5px);
}
} .cdc-btn-secondary,
.cdc-export-btn {
padding: 8px 16px;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
background: white;
color: var(--cdc-gray-dark);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.cdc-btn-secondary:hover,
.cdc-export-btn:hover {
background: var(--cdc-gray-light);
border-color: var(--cdc-gray);
}
.cdc-export-btn {
background: var(--cdc-primary);
color: white;
border-color: var(--cdc-primary);
}
.cdc-export-btn:hover {
background: #0056a3;
border-color: #0056a3;
} .cdc-export-buttons {
display: flex;
gap: 10px;
}
@media (max-width: 768px) {
.cdc-export-buttons {
width: 100%;
justify-content: center;
}
} .cdc-results-count {
text-align: center;
padding: 10px;
margin-bottom: 20px;
background: var(--cdc-gray-light);
border-radius: var(--cdc-radius);
font-weight: 500;
}
#cdc-visible-count {
color: var(--cdc-primary);
font-weight: bold;
} .cdc-cours-section {
margin-bottom: 30px;
background: white;
border-radius: var(--cdc-radius);
box-shadow: var(--cdc-shadow);
overflow: hidden;
}
.cdc-cours-title {
margin: 0;
padding: 15px 20px;
background: var(--cdc-primary);
color: white;
font-size: 18px;
font-weight: 600;
} .cdc-niveau-section {
padding: 20px;
border-bottom: 1px solid var(--cdc-border);
}
.cdc-niveau-section:last-child {
border-bottom: none;
}
.cdc-niveau-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.cdc-niveau-header h4 {
margin: 0;
font-size: 16px;
color: var(--cdc-gray-dark);
}
.cdc-niveau-stats {
display: flex;
gap: 15px;
font-size: 14px;
}
.cdc-niveau-stats span {
padding: 4px 10px;
border-radius: 20px;
font-weight: 500;
}
.stat-leaders {
background: rgba(1, 109, 195, 0.1);
color: var(--cdc-primary);
}
.stat-followers {
background: rgba(255, 32, 122, 0.1);
color: var(--cdc-secondary);
}
.stat-total {
background: var(--cdc-gray-light);
color: var(--cdc-gray-dark);
} .cdc-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cdc-participants-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.cdc-participants-table thead {
background: var(--cdc-gray-light);
}
.cdc-participants-table th {
padding: 12px 8px;
text-align: left;
font-weight: 600;
color: var(--cdc-gray-dark);
white-space: nowrap;
border-bottom: 2px solid var(--cdc-border);
}
.cdc-participants-table td {
padding: 12px 8px;
border-bottom: 1px solid var(--cdc-border);
vertical-align: middle;
}
.cdc-participants-table tbody tr {
transition: background-color 0.2s;
}
.cdc-participants-table tbody tr:hover {
background: var(--cdc-gray-light);
} .col-id {
width: 50px;
text-align: center;
}
.col-prenom,
.col-nom {
min-width: 100px;
}
.col-role {
width: 60px;
text-align: center;
}
.col-s1,
.col-s2 {
width: 50px;
text-align: center;
}
.col-status {
width: 100px;
}
.col-payment {
width: 100px;
}
.col-presence {
width: 80px;
text-align: center;
} .role-badge {
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
text-align: center;
font-weight: bold;
color: white;
font-size: 12px;
}
.role-leader {
background: var(--cdc-primary);
}
.role-follower {
background: var(--cdc-secondary);
}
.status-badge,
.payment-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status-actif {
background: rgba(16, 185, 129, 0.1);
color: var(--cdc-success);
}
.status-passif {
background: rgba(107, 114, 128, 0.1);
color: var(--cdc-gray);
}
.status-staff {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.status-non {
background: rgba(239, 68, 68, 0.1);
color: var(--cdc-danger);
}
.payment-ok {
color: var(--cdc-success);
}
.payment-pending {
color: var(--cdc-warning);
} .presence-check {
width: 20px;
height: 20px;
cursor: pointer;
} .participant-card {
display: none;
}
.mobile-only {
display: none;
}
@media (max-width: 768px) { .cdc-table-wrapper {
display: none;
} .participant-card {
display: block;
margin-bottom: 15px;
background: white;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
box-shadow: var(--cdc-shadow);
overflow: hidden;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: var(--cdc-gray-light);
border-bottom: 1px solid var(--cdc-border);
}
.card-num {
font-weight: bold;
color: var(--cdc-gray);
}
.card-name {
font-weight: 600;
color: var(--cdc-gray-dark);
}
.card-body {
padding: 15px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.card-row:last-child {
margin-bottom: 0;
}
.card-row .label {
font-weight: 500;
color: var(--cdc-gray);
}
.card-row .role-badge {
margin-left: auto;
}
} .cdc-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
border: 1px solid var(--cdc-border);
border-radius: var(--cdc-radius);
padding: 20px;
text-align: center;
box-shadow: var(--cdc-shadow);
}
.stat-value {
font-size: 32px;
font-weight: bold;
color: var(--cdc-primary);
margin-bottom: 5px;
}
.stat-label {
color: var(--cdc-gray);
font-size: 14px;
}
.stat-bar {
width: 100%;
height: 8px;
background: var(--cdc-gray-light);
border-radius: 4px;
margin-top: 10px;
overflow: hidden;
}
.stat-bar-fill {
height: 100%;
transition: width 0.5s ease;
}
.stat-bar-fill.leaders {
background: var(--cdc-primary);
}
.stat-bar-fill.payment {
background: var(--cdc-success);
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.participant-row,
.participant-card {
animation: fadeIn 0.3s ease;
} .cdc-loading {
text-align: center;
padding: 40px;
color: var(--cdc-gray);
}
.cdc-loading::after {
content: "⌛ Chargement...";
} @media print {
.cdc-toolbar,
.cdc-results-count,
.col-presence,
.no-export {
display: none !important;
}
.cdc-cours-section {
page-break-inside: avoid;
page-break-after: auto;
}
.cdc-participants-table {
font-size: 11px;
}
.cdc-cours-title {
background: none !important;
color: black !important;
border-bottom: 2px solid black;
}
} .cdc-access-denied {
text-align: center;
padding: 60px 20px;
background: var(--cdc-gray-light);
border-radius: var(--cdc-radius);
}
.cdc-access-denied p {
font-size: 16px;
color: var(--cdc-gray-dark);
margin: 10px 0;
}
.cdc-access-denied a {
color: var(--cdc-primary);
text-decoration: none;
font-weight: 500;
}
.cdc-access-denied a:hover {
text-decoration: underline;
}