/* ============================================================ Thèmes : sombre (par défaut, identité de marque) et clair, CROISÉS avec une couleur identitaire par espace : Organisation (rouge, couleur de marque historique), Pilote (bleu), Encadrant (ambre). Pilotés respectivement par [data-theme] et [data-role] sur — [data-theme] en JS (préférence mémorisée), [data-role] côté serveur selon la section du site (voir header.php). Chaque couleur de rôle a DEUX nuances distinctes, nécessaires pour respecter le contraste RGAA/WCAG AA (4.5:1) simultanément dans les deux usages suivants : - --accent-role : liens et titres, sur le fond de page (souvent presque noir en thème sombre) — nuance plus CLAIRE/vive. - --accent-role-btn : fond de bouton avec texte blanc dessus — nuance plus SOMBRE, sinon le texte blanc devient illisible. Une seule nuance suffisait à l'œil mais échouait au calcul de contraste exact (ex. l'ambre du bouton encadrant ne faisait que 2.15:1 avec du texte blanc avant cette correction). ============================================================ */ :root, [data-theme="dark"] { --bg-body: #0d0d0d; --bg-panel: #1a1a1a; --bg-panel-2: #212121; --border-soft: #2a2a2a; --text-main: #f2f2f2; --text-muted: #9a9a9a; --accent-red: #e30613; --accent-red-dark: #a80510; --silver: #c9c9c9; --navbar-bg: #000000; --navbar-text: #ffffff; --thead-bg: #000000; --thead-text: #c9c9c9; --link-hover: #ffffff; --accent-role: #ee2b3b; --accent-role-btn: #e30613; --accent-role-btn-dark: #a80510; --accent-role-glow: rgba(238, 43, 59, 0.25); } [data-theme="light"] { --bg-body: #f4f4f5; --bg-panel: #ffffff; --bg-panel-2: #f0f0f1; --border-soft: #dcdcdc; --text-main: #1a1a1a; --text-muted: #5a5a5a; --accent-red: #c8101c; --accent-red-dark: #a00c16; --silver: #4a4a4a; --navbar-bg: #ffffff; --navbar-text: #1a1a1a; --thead-bg: #1a1a1a; --thead-text: #f4f4f5; --link-hover: #000000; --accent-role: #c8101c; --accent-role-btn: #c8101c; --accent-role-btn-dark: #a00c16; --accent-role-glow: rgba(200, 16, 28, 0.20); } /* --- Couleur identitaire : espace Organisation (rouge, par défaut) --- */ [data-theme="dark"][data-role="organisation"] { --accent-role: #ee2b3b; --accent-role-btn: #e30613; --accent-role-btn-dark: #a80510; --accent-role-glow: rgba(238, 43, 59, 0.25); } [data-theme="light"][data-role="organisation"] { --accent-role: #c8101c; --accent-role-btn: #c8101c; --accent-role-btn-dark: #a00c16; --accent-role-glow: rgba(200, 16, 28, 0.20); } /* --- Couleur identitaire : espace Pilote (bleu) --- */ [data-theme="dark"][data-role="pilote"] { --accent-role: #1d81c9; --accent-role-btn: #135686; --accent-role-btn-dark: #0d3f63; --accent-role-glow: rgba(29, 129, 201, 0.25); } [data-theme="light"][data-role="pilote"] { --accent-role: #1c5f9e; --accent-role-btn: #1c5f9e; --accent-role-btn-dark: #144a7d; --accent-role-glow: rgba(28, 95, 158, 0.20); } /* --- Couleur identitaire : espace Encadrant (ambre) --- */ [data-theme="dark"][data-role="encadrant"] { --accent-role: #c2750a; --accent-role-btn: #915808; --accent-role-btn-dark: #6e4306; --accent-role-glow: rgba(194, 117, 10, 0.25); } [data-theme="light"][data-role="encadrant"] { --accent-role: #915808; --accent-role-btn: #915808; --accent-role-btn-dark: #6e4306; --accent-role-glow: rgba(145, 88, 8, 0.20); } body { background-color: var(--bg-body); color: var(--text-main); font-family: 'Segoe UI', Arial, sans-serif; transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3, h4, h5, .navbar-brand { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-main); } h2 { border-left: 4px solid var(--accent-role); padding-left: 12px; font-style: italic; font-size: 1.3rem; color: var(--silver); } /* --- Navbar --- */ .navbar { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--border-soft); padding-top: 0.75rem; padding-bottom: 0.75rem; } .navbar-brand { color: var(--navbar-text) !important; font-size: 1.3rem; } .navbar-brand span.accent { color: var(--accent-role); } .navbar-nav { gap: 0.15rem; } .nav-link { color: var(--silver) !important; padding: 0.55rem 0.9rem !important; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; } .nav-link:hover { color: var(--navbar-text) !important; background-color: var(--bg-panel-2); } .nav-item.active > .nav-link, .nav-link.active { color: var(--navbar-text) !important; background-color: var(--bg-panel-2); } #themeToggle { color: var(--navbar-text); border-color: var(--border-soft); } #themeToggle:hover { background-color: var(--bg-panel-2); } /* --- Dropdowns de la navbar --- */ .dropdown-menu { background-color: var(--navbar-bg); border: 1px solid var(--border-soft); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); padding: 0.4rem; margin-top: 0.35rem !important; } .dropdown-item { color: var(--silver); border-radius: 5px; padding: 0.5rem 0.8rem; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-panel-2); color: var(--navbar-text); } .dropdown-divider { border-color: var(--border-soft); margin: 0.3rem 0; } .nav-link.dropdown-toggle::after { vertical-align: middle; } .dropdown-header-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--silver); padding: 0.3rem 0.8rem; opacity: 0.75; } #compteMenu { border: 1px solid var(--border-soft); border-radius: 20px; padding: 0.4rem 1rem !important; } #compteMenu:hover { background-color: var(--bg-panel-2); } /* --- Pied de page --- */ .pk22-footer { margin-top: 3rem; padding: 1.25rem 0; background-color: var(--accent-role-btn); color: #ffffff; font-size: 0.85rem; } .pk22-footer a { color: #ffffff; text-decoration: underline; } .pk22-footer a:hover { color: #ffffff; opacity: 0.85; } /* --- Lien d'évitement (accessibilité clavier) --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--accent-role-btn); color: #ffffff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0; text-decoration: none; font-weight: 500; } .skip-link:focus { left: 0; } /* --- Cards --- */ .card { background-color: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text-main); } /* Bootstrap force flex-direction:column sur .card. Combiné avec .row (utilisé dans toute l'application pour des formulaires compacts en carte), ça casse la disposition en grille : les champs se retrouvent empilés et poussés d'un côté au lieu de s'aligner horizontalement. Cette règle plus spécifique (deux classes) restaure le bon comportement sans avoir à changer la structure HTML de chaque formulaire concerné. */ .card.row { flex-direction: row; } .card-title { color: var(--text-main); font-weight: 700; } .text-muted { color: var(--text-muted) !important; } /* --- Buttons --- */ .btn-primary { background-color: var(--accent-role-btn); border-color: var(--accent-role-btn); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; } .btn-primary:hover { background-color: var(--accent-role-btn-dark); border-color: var(--accent-role-btn-dark); } .btn-outline-secondary { color: var(--silver); border-color: var(--border-soft); } .btn-outline-secondary:hover { background-color: var(--bg-panel-2); color: var(--text-main); border-color: var(--silver); } /* --- Forms --- */ .form-control, .form-select { background-color: var(--bg-panel-2); border: 1px solid var(--border-soft); color: var(--text-main); border-radius: 8px; } .form-control:focus, .form-select:focus { background-color: var(--bg-panel-2); color: var(--text-main); border-color: var(--accent-role); box-shadow: 0 0 0 0.2rem var(--accent-role-glow); } .form-control::placeholder { color: var(--text-muted); } .form-label { color: var(--silver); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.02em; } /* Champs désactivés / lecture seule : Bootstrap impose sinon un fond clair par défaut, illisible avec le thème sombre (texte clair sur fond clair). */ .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--bg-panel) !important; color: var(--text-muted) !important; opacity: 1 !important; border-color: var(--border-soft) !important; } /* --- Tables --- */ .table { color: var(--text-main); background-color: var(--bg-panel); border-radius: 10px; overflow: hidden; } .table thead { background-color: var(--thead-bg); color: var(--thead-text); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg-panel-2); color: var(--text-main); } .table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--bg-panel); color: var(--text-main); } .table td, .table th { border-color: var(--border-soft); vertical-align: middle; } /* --- Badges (couleurs volontairement stables entre les deux thèmes : ce sont des pastilles autoporteuses, contraste déjà garanti) --- */ .badge { text-transform: uppercase; font-weight: 600; letter-spacing: 0.02em; } .bg-success { background-color: #1f8f3d !important; color: #fff !important; } .bg-warning { background-color: #d99a1f !important; color: #1a1a1a !important; } .bg-danger { background-color: var(--accent-red) !important; color: #fff !important; } .bg-secondary { background-color: #6b6b6b !important; color: #fff !important; } .bg-info { background-color: #2f8fbf !important; color: #fff !important; } /* --- Alerts --- */ .alert-danger { background-color: rgba(227,6,19,0.12); color: var(--accent-red-dark); border-color: var(--accent-red); } .alert-success { background-color: rgba(31,143,61,0.12); color: #1f8f3d; border-color: #1f8f3d; } .alert-warning { background-color: rgba(217,154,31,0.15); color: #8a5f00; border-color: #d99a1f; } [data-theme="dark"] .alert-danger { color: #ff6b6b; } [data-theme="dark"] .alert-success { color: #7be29a; } [data-theme="dark"] .alert-warning { color: #f0c778; } /* --- Misc --- */ a { color: var(--accent-role); text-decoration: none; } a:hover { color: var(--link-hover); } .list-group-item { background-color: var(--bg-panel); border-color: var(--border-soft); color: var(--text-main); } .list-group-item-action:hover { background-color: var(--bg-panel-2); color: var(--text-main); } .logo-shield { display: block; margin: 0 auto; } /* --- Bulles de messagerie (fils de discussion encadrant/pilote) --- Remplacent bg-light / bg-primary Bootstrap, dont les couleurs fixes ne s'adaptaient pas au thème sombre (texte clair devenu illisible sur un fond bg-light resté clair). */ .bulle-autre { background-color: var(--bg-panel-2); color: var(--text-main); border: 1px solid var(--border-soft); } .bulle-autre small { color: var(--text-muted); } .bulle-moi { background-color: var(--accent-role-btn); color: #fff; } .bulle-moi small { color: rgba(255,255,255,0.75); } /* --- Aperçu des couleurs d'espace sur la page d'accueil publique --- Ces pages ne sont dans aucun dossier pilotes/officiels/admin, donc [data-role] reste sur sa valeur par défaut (organisation/rouge) — ces classes permettent malgré tout d'annoncer les 3 couleurs d'identité (mêmes valeurs que [data-role] dans les espaces respectifs une fois connecté), pour donner un avant-goût cohérent dès l'accueil. */ [data-theme="dark"] .text-pilote { color: #1d81c9; } [data-theme="dark"] .text-encadrant { color: #c2750a; } [data-theme="dark"] .text-organisation { color: #ee2b3b; } [data-theme="light"] .text-pilote { color: #1c5f9e; } [data-theme="light"] .text-encadrant { color: #915808; } [data-theme="light"] .text-organisation { color: #c8101c; } /* --- Impression (toujours claire, indépendamment du thème actif) --- */ @media print { .navbar, .pk22-footer, form, .btn, .btn-primary, .btn-outline-secondary, a.btn, .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } .card, .table { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; } .table thead { background: #eee !important; color: #000 !important; } .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped > tbody > tr:nth-of-type(even) > * { background: #fff !important; color: #000 !important; } a { color: #000 !important; text-decoration: none !important; } }