/* ============================================================================ ACEDE — Thème principal de l'application Variables CSS, mode sombre, sidebar, topbar, skeleton loaders ============================================================================ */ :root { /* Couleurs institutionnelles ACEDE — surchargées par branding_styles() */ --acede-primaire: #0033a0; /* bleu */ --acede-primaire-fonce: #002270; --acede-primaire-clair: #e8eefb; --acede-secondaire: #ffd100; /* jaune */ --acede-accent: #ce1126; /* rouge */ --acede-primaire-rgb: 0, 51, 160; --acede-accent-rgb: 206, 17, 38; /* Surfaces et textes (mode clair) */ --surface-fond: #f4f6fb; --surface-carte: #ffffff; --surface-sidebar: #0b2a6b; --surface-topbar: #ffffff; --texte-principal: #1c2434; --texte-secondaire: #64748b; --bordure: #e2e8f0; --ombre: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06); --skeleton-base: #e5e9f0; --skeleton-brillance: #f5f7fa; --sidebar-largeur: 260px; --sidebar-largeur-reduite: 72px; --topbar-hauteur: 64px; --rayon: 12px; } /* Mode sombre : activé via */ [data-theme="dark"] { --surface-fond: #0f172a; --surface-carte: #1e293b; --surface-sidebar: #0b1121; --surface-topbar: #1e293b; --texte-principal: #e2e8f0; --texte-secondaire: #94a3b8; --bordure: #334155; --ombre: 0 1px 3px rgba(0, 0, 0, .4); --skeleton-base: #273449; --skeleton-brillance: #33445e; --acede-primaire-clair: #172554; } /* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ body { background-color: var(--surface-fond); color: var(--texte-principal); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: background-color .25s ease, color .25s ease; min-height: 100vh; } a { text-decoration: none; } /* --------------------------------------------------------------------------- Structure générale : sidebar + contenu --------------------------------------------------------------------------- */ .app-wrapper { display: flex; min-height: 100vh; } .app-sidebar { width: var(--sidebar-largeur); min-height: 100vh; background: linear-gradient(180deg, var(--surface-sidebar) 0%, var(--acede-primaire-fonce) 100%); color: #cbd5e1; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transition: width .25s ease, transform .25s ease; overflow-y: auto; overflow-x: hidden; } .app-contenu { flex: 1; margin-left: var(--sidebar-largeur); transition: margin-left .25s ease; display: flex; flex-direction: column; min-width: 0; } /* Sidebar réduite (desktop) */ body.sidebar-reduite .app-sidebar { width: var(--sidebar-largeur-reduite); } body.sidebar-reduite .app-contenu { margin-left: var(--sidebar-largeur-reduite); } body.sidebar-reduite .app-sidebar .libelle-menu, body.sidebar-reduite .app-sidebar .sidebar-marque-texte, body.sidebar-reduite .app-sidebar .sidebar-section-titre { display: none; } body.sidebar-reduite .app-sidebar .nav-link { justify-content: center; } /* Sidebar mobile : cachée par défaut, glisse en offcanvas */ @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); } .app-contenu { margin-left: 0 !important; } body.sidebar-mobile-ouverte .app-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); } .sidebar-voile { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1035; } body.sidebar-mobile-ouverte .sidebar-voile { display: block; } } /* Marque / logo dans la sidebar */ .sidebar-marque { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .sidebar-marque .logo-badge { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--acede-secondaire); color: var(--acede-primaire); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; } .sidebar-marque-texte { min-width: 0; } .sidebar-marque-texte .titre { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.1; } .sidebar-marque-texte .sous-titre { font-size: .68rem; color: #93a5cc; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-section-titre { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #7d90bd; padding: 16px 20px 6px; } .app-sidebar .nav-link { display: flex; align-items: center; gap: 12px; color: #cbd5e1; padding: 10px 16px; margin: 2px 10px; border-radius: 8px; font-size: .92rem; transition: background .15s ease, color .15s ease; white-space: nowrap; } .app-sidebar .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; } .app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; } .app-sidebar .nav-link.active { background: var(--acede-secondaire); color: var(--acede-primaire-fonce); font-weight: 600; } /* --------------------------------------------------------------------------- Topbar fixe --------------------------------------------------------------------------- */ .app-topbar { height: var(--topbar-hauteur); min-height: var(--topbar-hauteur); max-height: var(--topbar-hauteur); background: var(--surface-topbar); border-bottom: 1px solid var(--bordure); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 1030; transition: background-color .25s ease; overflow: hidden; } .app-topbar .ms-auto { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; max-width: 100%; } .app-topbar .dropdown > .btn { display: inline-flex !important; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; overflow: hidden; } .btn-icone { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--bordure); background: transparent; color: var(--texte-principal); font-size: 1.1rem; transition: background .15s ease; position: relative; } .btn-icone:hover { background: var(--acede-primaire-clair); color: var(--acede-primaire); } .recherche-globale { max-width: 420px; flex: 1; } .recherche-globale .form-control { background: var(--surface-fond); border-color: var(--bordure); color: var(--texte-principal); border-radius: 10px; } .recherche-globale .form-control::placeholder { color: var(--texte-secondaire); } /* Indicateur en ligne / hors ligne */ .indicateur-connexion { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--texte-secondaire); } .indicateur-connexion .point { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); transition: background .3s ease; } .indicateur-connexion.hors-ligne .point { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); } .badge-notification { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: .6rem; background: var(--acede-accent); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Menu profil / avatars — rond forcé (border-radius + clip-path) */ .avatar { --avatar-size: 38px; width: var(--avatar-size); height: var(--avatar-size); min-width: var(--avatar-size); min-height: var(--avatar-size); max-width: var(--avatar-size); max-height: var(--avatar-size); border-radius: 50% !important; -webkit-border-radius: 50%; background: var(--acede-primaire); color: #fff; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--avatar-size); overflow: hidden !important; vertical-align: middle; box-sizing: border-box; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } .avatar.avatar-photo { padding: 0; background: #e8eefb; } .avatar.avatar-photo img, .avatar img { width: var(--avatar-size) !important; height: var(--avatar-size) !important; min-width: var(--avatar-size) !important; min-height: var(--avatar-size) !important; max-width: var(--avatar-size) !important; max-height: var(--avatar-size) !important; object-fit: cover !important; object-position: center; display: block; border-radius: 50% !important; -webkit-border-radius: 50%; flex: none; border: 0; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } .avatar-preview { --avatar-size: 88px; width: var(--avatar-size); height: var(--avatar-size); min-width: var(--avatar-size); min-height: var(--avatar-size); max-width: var(--avatar-size); max-height: var(--avatar-size); border-radius: 50% !important; -webkit-border-radius: 50%; background: var(--acede-primaire-clair, #e8eefb); border: 2px solid var(--bordure); overflow: hidden !important; display: inline-flex; align-items: center; justify-content: center; color: var(--acede-primaire); font-size: 1.8rem; flex: 0 0 var(--avatar-size); box-sizing: border-box; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } .avatar-preview img { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center; display: block; border-radius: 50% !important; -webkit-border-radius: 50%; flex: none; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } .avatar.avatar-sm { --avatar-size: 34px; font-size: .75rem; flex-basis: 34px; } .profil-infos { line-height: 1.15; text-align: left; } .profil-infos .nom { font-size: .88rem; font-weight: 600; color: var(--texte-principal); } .profil-infos .role { font-size: .72rem; color: var(--texte-secondaire); } .dropdown-menu { background: var(--surface-carte); border-color: var(--bordure); box-shadow: var(--ombre); border-radius: var(--rayon); } .dropdown-menu .dropdown-item { color: var(--texte-principal); } .dropdown-menu .dropdown-item:hover { background: var(--acede-primaire-clair); color: var(--acede-primaire); } .dropdown-menu .dropdown-divider { border-color: var(--bordure); } /* --------------------------------------------------------------------------- Contenu principal, cartes, tableaux --------------------------------------------------------------------------- */ .app-main { padding: 24px; flex: 1; } .carte { background: var(--surface-carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); transition: background-color .25s ease, transform .15s ease; } .carte:hover { transform: translateY(-1px); } .carte-stat { padding: 18px; display: flex; align-items: center; gap: 14px; height: 100%; } .carte-stat .icone { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .carte-stat .valeur { font-size: 1.45rem; font-weight: 700; line-height: 1.1; } .carte-stat .libelle { font-size: .78rem; color: var(--texte-secondaire); } .table { color: var(--texte-principal); } .table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-secondaire); border-color: var(--bordure); } .table td { border-color: var(--bordure); vertical-align: middle; } [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--texte-principal); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--texte-principal); } .btn { border-radius: 10px; } .btn-primary { background: var(--acede-primaire); border-color: var(--acede-primaire); } .btn-primary:hover, .btn-primary:focus { background: var(--acede-primaire-fonce); border-color: var(--acede-primaire-fonce); } .badge-statut { font-size: .72rem; padding: .35em .7em; border-radius: 20px; color: #fff; } /* --------------------------------------------------------------------------- SKELETON LOADERS (effet shimmer animé) Ne jamais afficher un simple texte « Chargement... » --------------------------------------------------------------------------- */ @keyframes skeleton-brillance { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { display: block; background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-brillance) 50%, var(--skeleton-base) 75%); background-size: 800px 100%; animation: skeleton-brillance 1.4s ease-in-out infinite; border-radius: 6px; } .skeleton-text { height: 14px; margin-bottom: 8px; width: 100%; } .skeleton-text.court { width: 40%; } .skeleton-text.moyen { width: 65%; } .skeleton-avatar { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; } .skeleton-card { height: 84px; border-radius: var(--rayon); } .skeleton-chart { height: 280px; border-radius: var(--rayon); } .skeleton-table .skeleton-ligne { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bordure); } .skeleton-table .skeleton-ligne .skeleton { height: 14px; flex: 1; margin: 0; } /* --------------------------------------------------------------------------- LOADER GLOBAL (barre haute + voile AJAX) — le boot est dans templates/loader.php --------------------------------------------------------------------------- */ .acede-top-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20010; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--acede-primaire), var(--acede-secondaire), var(--acede-accent)); box-shadow: 0 0 12px rgba(var(--acede-primaire-rgb), .45); transition: opacity .15s ease; } .acede-top-loader.is-on { opacity: 1; animation: acede-top-progress 1.15s ease-in-out infinite; } @keyframes acede-top-progress { 0% { transform: scaleX(.08); } 50% { transform: scaleX(.72); } 100% { transform: scaleX(.96); } } .acede-ajax-veil { position: fixed; inset: 0; z-index: 19990; display: grid; place-items: center; background: rgba(11, 27, 58, .28); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } .acede-ajax-veil.is-on { opacity: 1; visibility: visible; pointer-events: auto; } .acede-ajax-veil__card { min-width: 180px; padding: 18px 22px; border-radius: 14px; background: var(--surface-carte); color: var(--texte-principal); box-shadow: 0 16px 40px rgba(15, 23, 42, .22); display: flex; flex-direction: column; align-items: center; gap: 12px; } .acede-ajax-veil__spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(var(--acede-primaire-rgb), .18); border-top-color: var(--acede-primaire); border-right-color: var(--acede-secondaire); animation: acede-spin .75s linear infinite; } .acede-ajax-veil__text { font-size: .85rem; font-weight: 600; color: var(--texte-secondaire); } @keyframes acede-spin { to { transform: rotate(360deg); } } html.acede-page-leaving .app-wrapper, html.acede-page-leaving .page-connexion { opacity: .55; transition: opacity .18s ease; } @media (prefers-reduced-motion: reduce) { .acede-boot__ring, .acede-boot__bar > span, .acede-top-loader.is-on, .acede-ajax-veil__spinner { animation: none !important; } .acede-top-loader.is-on { transform: scaleX(.6); } } /* --------------------------------------------------------------------------- Page de connexion --------------------------------------------------------------------------- */ .page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(1000px 500px at 85% -10%, color-mix(in srgb, var(--acede-secondaire) 18%, transparent), transparent 60%), radial-gradient(800px 500px at -10% 110%, color-mix(in srgb, var(--acede-accent) 15%, transparent), transparent 60%), linear-gradient(135deg, var(--acede-primaire-fonce) 0%, var(--acede-primaire) 60%, color-mix(in srgb, var(--acede-primaire) 70%, white) 100%); } .carte-connexion { width: 100%; max-width: 430px; background: var(--surface-carte); border-radius: 18px; box-shadow: 0 25px 60px rgba(2, 8, 40, .45); overflow: hidden; } .carte-connexion .entete { background: linear-gradient(135deg, var(--acede-primaire) 0%, var(--acede-primaire-fonce) 100%); padding: 30px 30px 24px; text-align: center; color: #fff; position: relative; } .carte-connexion .entete::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--acede-primaire) 33%, var(--acede-secondaire) 33% 66%, var(--acede-accent) 66%); } .carte-connexion .logo-rond { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: var(--acede-secondaire); color: var(--acede-primaire); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; } .carte-connexion .corps { padding: 28px 30px 30px; } .carte-connexion .form-control { border-radius: 10px; padding: .65rem .9rem; background: var(--surface-fond); border-color: var(--bordure); color: var(--texte-principal); } .carte-connexion .form-control:focus { border-color: var(--acede-primaire); box-shadow: 0 0 0 .2rem rgba(var(--acede-primaire-rgb, 0, 51, 160), .15); } .carte-connexion .input-group-text { background: var(--surface-fond); border-color: var(--bordure); color: var(--texte-secondaire); border-radius: 10px 0 0 10px; } /* --------------------------------------------------------------------------- Divers --------------------------------------------------------------------------- */ .titre-page { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; } .sous-titre-page { color: var(--texte-secondaire); font-size: .85rem; } /* --------------------------------------------------------------------------- Formulaire d'adhésion --------------------------------------------------------------------------- */ .formulaire-adhesion .formulaire-section-titre { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--bordure); } .formulaire-etape { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--acede-primaire); color: #fff; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .formulaire-separateur { border: 0; border-top: 1px dashed var(--bordure); margin: 1.1rem 0; } .formulaire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; position: sticky; bottom: 12px; z-index: 20; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--surface-carte) 92%, transparent); } .photo-upload { cursor: pointer; display: inline-block; margin: 0; } .photo-upload-apercu { width: 112px; height: 132px; border: 2px dashed var(--bordure); border-radius: 12px; background: var(--surface-fond); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; transition: border-color .15s ease, background .15s ease; } .photo-upload:hover .photo-upload-apercu { border-color: var(--acede-primaire); background: var(--acede-primaire-clair); } .photo-upload-apercu i { font-size: 1.6rem; } .photo-upload-aide { font-size: .68rem; color: var(--texte-secondaire); font-weight: 600; } .photo-upload-apercu.a-photo { border-style: solid; } .photo-upload-apercu img { width: 100%; height: 100%; object-fit: cover; } .milieu-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .milieu-option { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-fond); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; margin: 0; } .milieu-option i { font-size: 1.2rem; color: var(--acede-primaire); } .milieu-option span { font-weight: 600; font-size: .92rem; color: var(--texte-principal); } .milieu-option small { color: var(--texte-secondaire); font-size: .72rem; line-height: 1.3; } .btn-check:checked + .milieu-option { border-color: var(--acede-primaire); background: var(--acede-primaire-clair); box-shadow: 0 0 0 1px var(--acede-primaire); } @media (max-width: 575.98px) { .milieu-switch { grid-template-columns: 1fr; } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--bordure); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } @media (max-width: 575.98px) { .app-main { padding: 14px; } .recherche-globale { display: none; } .profil-infos { display: none !important; } .indicateur-connexion .texte { display: none; } .app-topbar { padding: 0 10px; gap: 6px; } .app-topbar .ms-auto { gap: 4px; } .app-topbar .dropdown > .btn { padding: 2px !important; } .app-topbar .avatar, .app-topbar .avatar.avatar-photo { --avatar-size: 34px; flex-basis: 34px; } .avatar-preview { --avatar-size: 72px; flex-basis: 72px; } } /* Bannière d'installation PWA */ .acede-pwa-install { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1080; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--acede-primaire, #0033a0), #001c58); color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } .acede-pwa-install__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .acede-pwa-install__text strong { font-size: .95rem; } .acede-pwa-install__text span { font-size: .78rem; opacity: .85; } .acede-pwa-install__actions { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 420px) { .acede-pwa-install { flex-direction: column; align-items: stretch; } .acede-pwa-install__actions { justify-content: flex-end; } }