/* Charte graphique inspirée d'un site hospitalier institutionnel (bleu institutionnel, accents rouge/vert/orange, fond gris-bleu clair). La police propriétaire d'origine n'étant pas libre de droits, on utilise une pile de polices système proche en style (humaniste, lisible). */ :root { color-scheme: light; --bleu: #005490; --bleu-clair: #009fe3; --bleu-fonce: #003c68; --fond: #eff4f8; --surface: #ffffff; --alerte: #e2001a; --succes: #4caf50; --attention: #ff9800; --bordure: #d9d9d9; --texte: #333333; --texte-attenue: #808080; --ombre-header: rgba(0, 84, 144, 0.12); --ombre-focus: rgba(0, 159, 227, 0.3); --shift-jour-bg: #cfe8f7; --shift-nuit-bg: #005490; --shift-garde-bg: #ff9800; --shift-si-bg: #00897b; --shift-absence-bg: #fde3a7; --band-b-bg: #d7e6f2; --unit-jaune-bg: #fff3b0; --unit-vert-bg: #c8e6c9; --unit-bleu-bg: #bbdefb; --unit-rose-bg: #f8bbd0; --unit-orange-bg: #ffd8a8; --unit-violet-bg: #e1bee7; --unit-neutre-bg: #e0e0e0; --msg-success-bg: #e8f5e9; --msg-success-fg: #2e7d32; --msg-warning-bg: #fff3e0; --msg-warning-fg: #b26a00; --msg-error-bg: #fdecea; --msg-error-fg: #b3001b; --msg-info-bg: #e3f2fb; --msg-info-fg: #005490; --badge-brouillon-bg: #eee; --badge-brouillon-fg: #555; --avertissement-bg: #fdecea; --avertissement-fg: #7a0011; } /* Mode sombre (cf. demande explicite on/off/auto) : "dark" force le thème quel que soit le réglage de l'appareil ; "auto" (valeur par défaut) suit le réglage du système via prefers-color-scheme - cf. le contrôle rapide dans le bandeau (base.html) qui pose l'attribut data-theme sur . Toutes les couleurs de la charte passent par les variables ci-dessus : ce bloc n'a besoin de les redéfinir qu'une fois, sans dupliquer la feuille de style. */ :root[data-theme="dark"] { color-scheme: dark; --bleu: #6fbfef; --bleu-clair: #8fd3f8; --bleu-fonce: #eaf4fb; --fond: #12181f; --surface: #1c242e; --alerte: #ff8a8a; --succes: #7fd989; --attention: #ffb74d; --bordure: #3a4552; --texte: #e3ebf1; --texte-attenue: #9aabb8; --ombre-header: rgba(0, 0, 0, 0.4); --ombre-focus: rgba(111, 191, 239, 0.35); --shift-jour-bg: #234258; --shift-nuit-bg: #0d5f9e; --shift-garde-bg: #c26f00; --shift-si-bg: #0e6e63; --shift-absence-bg: #5a4620; --band-b-bg: #202c38; --unit-jaune-bg: #6b5b12; --unit-vert-bg: #2e5934; --unit-bleu-bg: #1f3a52; --unit-rose-bg: #6b3350; --unit-orange-bg: #6b4416; --unit-violet-bg: #4a2f5e; --unit-neutre-bg: #3a4552; --msg-success-bg: #17301c; --msg-success-fg: #8fe097; --msg-warning-bg: #3a2a10; --msg-warning-fg: #ffcf8a; --msg-error-bg: #3a1518; --msg-error-fg: #ff9d9d; --msg-info-bg: #17293a; --msg-info-fg: #8fc7ec; --badge-brouillon-bg: #2b333c; --badge-brouillon-fg: #c8d2da; --avertissement-bg: #3a1518; --avertissement-fg: #ffb3b3; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --bleu: #6fbfef; --bleu-clair: #8fd3f8; --bleu-fonce: #eaf4fb; --fond: #12181f; --surface: #1c242e; --alerte: #ff8a8a; --succes: #7fd989; --attention: #ffb74d; --bordure: #3a4552; --texte: #e3ebf1; --texte-attenue: #9aabb8; --ombre-header: rgba(0, 0, 0, 0.4); --ombre-focus: rgba(111, 191, 239, 0.35); --shift-jour-bg: #234258; --shift-nuit-bg: #0d5f9e; --shift-garde-bg: #c26f00; --shift-si-bg: #0e6e63; --shift-absence-bg: #5a4620; --band-b-bg: #202c38; --unit-jaune-bg: #6b5b12; --unit-vert-bg: #2e5934; --unit-bleu-bg: #1f3a52; --unit-rose-bg: #6b3350; --unit-orange-bg: #6b4416; --unit-violet-bg: #4a2f5e; --unit-neutre-bg: #3a4552; --msg-success-bg: #17301c; --msg-success-fg: #8fe097; --msg-warning-bg: #3a2a10; --msg-warning-fg: #ffcf8a; --msg-error-bg: #3a1518; --msg-error-fg: #ff9d9d; --badge-brouillon-bg: #2b333c; --badge-brouillon-fg: #c8d2da; --avertissement-bg: #3a1518; --avertissement-fg: #ffb3b3; } } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background: var(--fond); color: var(--texte); } a { color: var(--bleu); } strong { color: var(--bleu-fonce); } header.site { background: var(--surface); color: var(--texte); padding: 0.7rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--bleu); box-shadow: 0 4px 10px var(--ombre-header); flex-wrap: wrap; gap: 0.5rem; } header.site .header-left { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; } header.site .brand { display: flex; align-items: center; color: var(--bleu-fonce); text-decoration: none; font-weight: 600; font-size: 1.05rem; } /* Date du jour dans le bandeau principal (cf. demande explicite) - toujours visible, sur toute page, discrète pour ne pas concurrencer la marque. */ header.site .today-date { color: var(--texte-attenue); font-size: 0.85rem; text-transform: capitalize; } header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.9rem; } header.site nav a { color: var(--bleu); text-decoration: none; font-size: 0.92rem; } header.site nav a:hover { color: var(--bleu-clair); text-decoration: underline; } header.site nav span { color: var(--texte-attenue); font-size: 0.85rem; } /* Sous-menus du bandeau (cf. demande explicite d'ergonomie - regrouper des liens apparentés pour alléger l'affichage) :
/ natif, sans JavaScript, toujours refermé au chargement d'une page (pas d'état à synchroniser entre pages). */ header.site nav details.nav-dropdown { position: relative; } header.site nav details.nav-dropdown summary { color: var(--bleu); font-size: 0.92rem; cursor: pointer; list-style: none; } header.site nav details.nav-dropdown summary::-webkit-details-marker { display: none; } header.site nav details.nav-dropdown summary::after { content: " ▾"; font-size: 0.7rem; } header.site nav details.nav-dropdown summary:hover { color: var(--bleu-clair); text-decoration: underline; } header.site nav details.nav-dropdown[open] summary::after { content: " ▴"; } header.site nav .nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 0.4rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 180px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px; box-shadow: 0 4px 10px var(--ombre-header); z-index: 20; } header.site nav .nav-dropdown-menu a { white-space: nowrap; } /* Déconnexion : POST obligatoire depuis Django 5 (LogoutView) - le bouton du formulaire reprend l'apparence des liens du bandeau pour ne rien changer visuellement. */ header.site nav .btn-link-logout { background: none; border: none; padding: 0; color: var(--bleu); font-size: 0.92rem; font-family: inherit; cursor: pointer; } header.site nav .btn-link-logout:hover { color: var(--bleu-clair); text-decoration: underline; } /* Bascule clair/sombre/auto (cf. demande explicite) - contrôle compact, toujours accessible dans le bandeau sur toutes les pages, sans passer par « Mon compte ». */ .theme-toggle { display: inline-flex; gap: 0.2rem; } .theme-toggle .theme-btn { padding: 0.25rem 0.6rem; font-size: 0.8rem; border-radius: 20px; } /* Compteur de notifications non lues : discret (petit badge coloré), jamais de popup ni d'animation - cf. demande explicite "visuelles et non envahissantes". */ .notif-badge { display: inline-block; min-width: 1.1rem; padding: 0 0.35rem; border-radius: 999px; background: var(--alerte); color: white; font-size: 0.75rem; line-height: 1.3rem; text-align: center; } main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; } h1, h2, h3 { color: var(--bleu-fonce); } .messages { list-style: none; padding: 0; margin-bottom: 1rem; } .messages li { padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 0.5rem; font-size: 0.95rem; } .messages .success { background: var(--msg-success-bg); color: var(--msg-success-fg); border: 1px solid var(--succes); } .messages .warning { background: var(--msg-warning-bg); color: var(--msg-warning-fg); border: 1px solid var(--attention); } .messages .error { background: var(--msg-error-bg); color: var(--msg-error-fg); border: 1px solid var(--alerte); } .messages .info { background: var(--msg-info-bg); color: var(--msg-info-fg); border: 1px solid var(--bleu-clair); } /* Bandeau "message du manager" juste après connexion (cf. demande explicite) : mis en évidence par rapport aux autres messages flash, discrets. */ .messages .manager-message { border-width: 2px; font-weight: 600; } .messages .manager-message a { color: inherit; text-decoration: underline; } table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--surface); } th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--bordure); font-size: 0.95rem; } th { color: var(--bleu-fonce); font-weight: 600; background: var(--fond); } /* Tableaux hors grille de planning (listes CDC/semestres/échanges...) : on les rend défilables horizontalement plutôt que de laisser déborder toute la page (les colonnes de droite - statut, actions - resteraient sinon inaccessibles). Pas de media query : un tableau large peut déborder aussi bien sur tablette que sur mobile (ex. la liste des désidératas a 10 colonnes) - overflow-x:auto ne crée de barre de défilement que si le contenu dépasse réellement la largeur disponible. */ main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* La grille de planning gère déjà son propre défilement horizontal via .grid-scroll : on ne fait pas doublon avec un deuxième conteneur scrollable imbriqué. */ .grid-scroll table { display: table; white-space: normal; } .badge { padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.8rem; } .badge.brouillon { background: var(--badge-brouillon-bg); color: var(--badge-brouillon-fg); } .badge.soumis { background: var(--msg-success-bg); color: var(--msg-success-fg); } .badge.attente { background: var(--msg-warning-bg); color: var(--msg-warning-fg); } .badge.refuse { background: var(--msg-error-bg); color: var(--msg-error-fg); } .btn { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 40px; border: 1px solid var(--bleu); background: var(--surface); color: var(--bleu); cursor: pointer; text-decoration: none; font-size: 0.95rem; transition: all 0.15s ease; } .btn:hover { background: var(--fond); } .btn.primary { background: var(--bleu); color: white; } .btn.primary:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); } .btn.danger { border-color: var(--alerte); color: var(--alerte); } .btn.danger:hover { background: var(--msg-error-bg); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.active { background: var(--bleu-clair); color: white; border-color: var(--bleu-clair); } form p { margin: 0.8rem 0; } form label { display: block; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.9rem; color: var(--bleu-fonce); } /* Un label qui entoure une case à cocher/bouton radio (choix "Semaine en cours" etc.) doit garder l'input et son texte sur une même ligne, pas en pleine largeur comme les champs texte/select. */ form label:has(input[type="radio"]), form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; } form input[type="radio"], form input[type="checkbox"] { width: auto; flex-shrink: 0; } form input:not([type="radio"]):not([type="checkbox"]), form select { padding: 0.45rem 0.6rem; border: 1px solid var(--bordure); border-radius: 4px; width: 100%; max-width: 320px; font-family: inherit; background: var(--surface); color: var(--texte); } form input:focus, form select:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 2px var(--ombre-focus); } .actions { margin: 1rem 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .empty-state { color: var(--texte-attenue); font-style: italic; padding: 1rem 0; } /* Tableau d'équité (tableau de bord manager) : écart au-delà de l'optimum atteignable (±1 bloc, ±30 h) surligné discrètement - jamais de popup, cohérent avec les autres signaux visuels de l'application. */ td.ecart-eleve { color: var(--alerte); font-weight: 700; } /* Module Unités : distinction graphique visite (V) / contre-visite (CV) (cf. demande explicite) - deux couleurs nettement différentes, cohérentes avec le reste de la légende (jour/garde/nuit/repos/absence). */ .unit-slot { white-space: nowrap; font-size: 0.85rem; margin-bottom: 0.2rem; } .visit-badge { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; margin-left: 0.3rem; } .visit-badge.visit-v { background: var(--shift-jour-bg); } .visit-badge.visit-cv { background: var(--shift-garde-bg); color: white; } /* Couleur d'unité (cf. demande explicite) : attachée à l'unité elle-même (ClinicalUnit. color), pas à son libellé - reste affichée même si le manager renomme l'unité avec un intitulé personnalisé qui n'est plus un nom de couleur. */ .unit-color-jaune { background: var(--unit-jaune-bg); } .unit-color-vert { background: var(--unit-vert-bg); } .unit-color-bleu { background: var(--unit-bleu-bg); } .unit-color-rose { background: var(--unit-rose-bg); } .unit-color-orange { background: var(--unit-orange-bg); } .unit-color-violet { background: var(--unit-violet-bg); } .unit-color-neutre { background: var(--unit-neutre-bg); } /* Contrat d'accessibilité (demande du 10.07.2026) : le texte posé sur un fond unit-color-* garde le contraste dans les DEUX thèmes par construction - les variables --unit-*-bg basculent pastel clair (texte sombre du thème clair) / teinte foncée (texte clair du thème sombre) en même temps que la couleur de texte du corps. */ .unit-chip { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.85rem; } .unit-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid var(--bordure); vertical-align: middle; } /* Politique de confidentialité : page longue essentiellement textuelle - largeur de colonne limitée pour le confort de lecture, titres de section resserrés (les h2 par défaut écrasaient le texte), interligne des listes aéré. */ .privacy { max-width: 46rem; } /* Texte de licence (cf. license.html) : reproduction fidèle du fichier LICENSE - retours à la ligne préservés mais repliés à la largeur de lecture, jamais de défilement horizontal (y compris sur mobile). */ .license-text { white-space: pre-wrap; overflow-wrap: break-word; font-family: inherit; font-size: 0.95rem; line-height: 1.55; background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px; padding: 1rem 1.2rem; } .privacy h2 { font-size: 1.1rem; margin: 1.6rem 0 0.4rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--bordure); } .privacy p, .privacy ul { margin: 0.3rem 0 0.9rem; line-height: 1.55; } .privacy ul { padding-left: 1.3rem; } .privacy li { margin-bottom: 0.35rem; } .privacy .actions { margin-top: 1.5rem; } /* Grille de planning (module publication). Vue macroscopique (cf. audit UX) : la grille défile dans sa propre zone (hauteur bornée) avec les deux axes figés - la ligne d'en-tête (noms/dates) reste visible pendant le défilement vertical, la première colonne (dates/unités) pendant le défilement horizontal. Les cellules figées reçoivent un fond opaque explicite, sinon les cellules défilantes transparaîtraient dessous. */ main.wide { max-width: none; } .grid-scroll { overflow: auto; max-height: 80vh; } .grid-scroll table { min-width: 100%; margin-top: 0; } .grid-scroll th, .grid-scroll td { text-align: center; white-space: nowrap; padding: 0.4rem 0.6rem; } .grid-scroll td.datecol, .grid-scroll th.datecol { text-align: left; } .grid-scroll thead th { position: sticky; top: 0; z-index: 3; } .grid-scroll td.datecol { position: sticky; left: 0; z-index: 2; background: var(--surface); } .grid-scroll thead th.datecol { left: 0; z-index: 4; } .shift-jour { background: var(--shift-jour-bg); } .shift-garde { background: var(--shift-garde-bg); color: white; } .shift-nuit { background: var(--shift-nuit-bg); color: white; } .shift-si { background: var(--shift-si-bg); color: white; } .shift-ga { background: var(--unit-violet-bg); } .shift-repos { background: var(--fond); } .shift-absence { background: var(--shift-absence-bg); } .cell-changed { outline: 2px solid var(--alerte); outline-offset: -2px; position: relative; font-weight: 700; } .cell-changed::after { content: "●"; color: var(--alerte); font-size: 0.6rem; position: absolute; top: 1px; right: 2px; } /* Mode édition du planning (menu dédié depuis l'affichage du planning, manager uniquement) : planning publié et aperçu des modifications en cours côte à côte, pour comparer en direct sans jamais mélanger les deux dans une même grille. Empilé en colonne sur écran étroit. */ .plan-edit-columns { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; } .plan-edit-col { flex: 1 1 480px; min-width: 0; } .granularity-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .granularity-tabs a.active { background: var(--bleu-clair); color: white; border-color: var(--bleu-clair); } /* Navigation par date (précédent/suivant/aujourd'hui + choix direct d'une date) - cf. demande explicite d'intégrer précédent/suivant à ce nouveau bloc. */ .date-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .date-jump { display: inline-flex; } .date-jump label { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--bleu-fonce); } .date-jump input[type="date"] { width: auto; max-width: 160px; } .legend { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; font-size: 0.85rem; } .legend span { padding: 0.15rem 0.5rem; border-radius: 3px; border: 1px solid var(--bordure); cursor: help; } /* Distinguer les mois (vue semestre) ou les semaines (vue mois) plus aisément (cf. demande explicite) : léger contraste alterné sur la colonne date (jamais sur les cellules de service, pour ne pas brouiller la légende de couleurs) et séparateur plus marqué au début de chaque groupe. Sans effet en vue semaine (une seule semaine affichée). */ .grid-scroll td.datecol.band-b { background: var(--band-b-bg); } .grid-scroll tr.row-boundary td { border-top: 2px solid var(--bleu); } .grid-scroll tr.row-today td.datecol { font-weight: 700; color: var(--bleu-fonce); box-shadow: inset 3px 0 0 var(--attention); } /* Fériés surlignés (déploiement progressif, cf. PlatformSettings.holiday_highlight_enabled) : liseré + étiquette texte sur la colonne date - jamais la couleur seule (accessibilité), et jamais le fond des cellules de service (la légende des shifts garde ses couleurs). */ .grid-scroll tr.row-holiday td.datecol { box-shadow: inset 3px 0 0 var(--alerte); } .holiday-mark { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--msg-error-fg); background: var(--msg-error-bg); padding: 0.05rem 0.3rem; border-radius: 3px; margin-left: 0.3rem; } /* Consignes de remplissage des désidératas (module 1) : repliable pour ne pas alourdir l'affichage, mais ouverte par défaut à chaque chargement de page pour qu'elle reste difficile à manquer. */ .consignes { border: 1px solid var(--bleu-clair); border-radius: 6px; background: var(--fond); margin: 1rem 0; padding: 0 1rem; } .consignes summary { cursor: pointer; font-weight: 600; padding: 0.7rem 0; color: var(--bleu); list-style: none; } .consignes summary::-webkit-details-marker { display: none; } .consignes summary::before { content: "▸ "; } .consignes[open] summary::before { content: "▾ "; } .consignes .consignes-body { padding-bottom: 1rem; font-size: 0.95rem; } .consignes .lettre { white-space: pre-line; margin-bottom: 1rem; } .consignes ul { margin: 0; padding-left: 1.2rem; } .consignes li { margin-bottom: 0.3rem; } /* Avertissement obligatoire (ex. déclaration d'incapacité de travail) : contrairement aux consignes désidératas, toujours visible en entier, jamais repliable - ne doit pas pouvoir être manqué. */ .avertissement { border: 2px solid var(--alerte); border-radius: 6px; background: var(--avertissement-bg); color: var(--avertissement-fg); margin: 1rem 0; padding: 1rem; font-size: 0.95rem; } .avertissement strong { color: var(--avertissement-fg); } .avertissement a { color: var(--avertissement-fg); text-decoration: underline; } /* Avertissement de déconnexion automatique pour inactivité (cf. inactivity.js) : flottant au-dessus du contenu plutôt qu'inséré dans le flux, pour rester visible quelle que soit la page/le défilement en cours. */ .inactivity-warning { position: fixed; top: 1rem; right: 1rem; max-width: 360px; z-index: 1000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } /* Rappel discret (sur chaque page) que l'outil ne remplace pas les systèmes institutionnels officiels - cf. l'encart plus visible sur la page de connexion. Toujours présent mais volontairement en retrait (petit texte gris), non intrusif. */ .site-footer { max-width: 900px; margin: 2rem auto 1rem; padding: 1rem 1.5rem 0; border-top: 1px solid var(--bordure); color: var(--texte-attenue); font-size: 0.8rem; text-align: center; } .site-footer p { margin: 0 0 0.4rem; } main.wide + .site-footer { max-width: none; } /* Mention de paternité (cf. LICENSE) : volontairement discrète - plus petite et plus atténuée que le reste du pied de page, sans lien. */ .site-footer .copyright { font-size: 0.75rem; color: var(--texte-attenue); } /* Messagerie interne (cf. demande explicite) : dossiers façon onglets (réutilise le style des onglets de granularité du planning, pour rester cohérent). */ .folder-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; } .folder-tabs a.active { background: var(--bleu-clair); color: white; border-color: var(--bleu-clair); } .msg-unread td { font-weight: 700; } .msg-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .msg-row-actions form { display: inline; } .msg-body { white-space: pre-line; background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px; padding: 1rem; margin: 1rem 0; font-size: 0.95rem; } .msg-meta { color: var(--texte-attenue); font-size: 0.9rem; margin-bottom: 0.5rem; } /* État de la sauvegarde automatique du formulaire de désidérata (cf. desiderata_autosave) : microcopie discrète à côté des boutons, jamais de popup. */ .autosave-status { font-size: 0.85rem; } .autosave-status .autosave-ok { color: var(--succes); font-weight: 600; } .autosave-status .autosave-pending { color: var(--texte-attenue); font-style: italic; } /* Page « Mes services » (cf. audit UX - restitution mobile-first) : carte-héros de la prochaine garde + liste chronologique en cartes, mêmes couleurs de légende que la grille du planning pour que l'encodage reste constant d'un écran à l'autre. */ .hero-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.2rem; border-radius: 10px; border: 1px solid var(--bordure); margin: 1rem 0 1.2rem; } .hero-card .hero-kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } .hero-card .hero-main { font-size: 1.35rem; font-weight: 700; } .hero-card .hero-date { font-size: 0.95rem; text-transform: capitalize; } .week-heading { font-size: 1rem; margin: 1.4rem 0 0.5rem; } .shift-cards { list-style: none; margin: 0; padding: 0; } .shift-card { display: flex; align-items: center; gap: 0.8rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; padding: 0.55rem 0.9rem; margin-bottom: 0.45rem; } .shift-card-today { border-color: var(--attention); box-shadow: inset 3px 0 0 var(--attention); } .shift-card-date { min-width: 6.5rem; font-weight: 600; color: var(--bleu-fonce); text-transform: capitalize; } .shift-chip { display: inline-block; min-width: 2.4rem; text-align: center; padding: 0.2rem 0.45rem; border-radius: 5px; font-weight: 700; border: 1px solid var(--bordure); } .shift-card-label { color: var(--texte-attenue); font-size: 0.9rem; } /* URL d'abonnement calendrier (Mon compte) : sélectionnable d'un tap, jamais coupée en plein milieu sans indication. */ .ics-url { display: block; padding: 0.5rem 0.7rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: 4px; font-size: 0.8rem; word-break: break-all; user-select: all; } /* Saisie sur calendrier des désidératas (cf. audit UX) : distinction strict/souhait par triple encodage - couleur ET texture (aplat plein vs hachures) ET libellé - jamais la couleur seule (daltonisme, écrans mal calibrés). */ .cal-selection-chip { font-weight: 600; color: var(--bleu-fonce); } .cal-months { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; } .cal-month { flex: 0 0 auto; } .cal-month h2 { font-size: 1rem; margin: 0 0 0.4rem; text-transform: capitalize; } .cal-grid { display: grid; grid-template-columns: repeat(7, 2.6rem); } .cal-grid-head span { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--texte-attenue); padding-bottom: 0.2rem; } .cal-day { display: block; height: 2.6rem; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); font-size: 0.85rem; font-family: inherit; text-align: center; cursor: pointer; padding: 0; } .cal-day.cal-out { background: var(--fond); color: var(--texte-attenue); cursor: default; opacity: 0.45; } .cal-day.cal-strict { background: var(--shift-jour-bg); font-weight: 700; } .cal-day.cal-souhait { background: repeating-linear-gradient( 45deg, var(--shift-jour-bg) 0 4px, var(--surface) 4px 8px ); } .cal-day.cal-selected { outline: 2px solid var(--attention); outline-offset: -2px; font-weight: 700; } .cal-legend-strict { background: var(--shift-jour-bg); } .cal-legend-souhait { background: repeating-linear-gradient( 45deg, var(--shift-jour-bg) 0 4px, var(--surface) 4px 8px ); } @media (max-width: 640px) { .cal-grid { grid-template-columns: repeat(7, minmax(2.6rem, 1fr)); } .cal-month { flex: 1 1 100%; } .cal-day { height: 2.9rem; } } /* ==================== Socle responsive (cf. audit UX multi-plateforme) ==================== Principe : en dessous d'un seuil, un composant dense n'est pas rétréci, il est remplacé par un équivalent qui porte la même donnée (table -> cartes, bandeau -> menu replié). Seuils guidés par le contenu : 640px (une colonne, saisie au pouce), 1024px (tablette). */ /* Bouton de menu mobile (case à cocher cachée, aucun JavaScript) : invisible au-delà de 640px, où le bandeau reste celui d'origine. */ .nav-toggle-box, .nav-toggle { display: none; } /* Infobulle tactile (cf. responsive.js) : les title= sont invisibles au toucher - au tap sur un élément porteur, son texte s'affiche dans un panneau fixé en bas d'écran. */ .touch-tooltip { position: fixed; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 1100; padding: 0.8rem 1rem; background: var(--surface); color: var(--texte); border: 1px solid var(--bleu-clair); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); font-size: 0.9rem; } /* Tablette (641-1024px, souvent paysage en transmission) : la grille semaine doit tenir entière - cellules resserrées, sans toucher à la lisibilité des codes de service. */ @media (min-width: 641px) and (max-width: 1024px) { .grid-scroll th, .grid-scroll td { padding: 0.35rem 0.45rem; font-size: 0.9rem; } } /* Mobile (≤640px) : une colonne, cibles tactiles ≥44px, menu replié, tables -> cartes. */ @media (max-width: 640px) { main { padding: 0 1rem; margin: 1.2rem auto; } h1 { font-size: 1.35rem; } header.site { padding: 0.6rem 1rem; } /* Cibles tactiles : boutons et champs plus hauts (≈44px), zone du pouce. */ .btn { padding: 0.65rem 1.15rem; } form input:not([type="radio"]):not([type="checkbox"]), form select { padding: 0.6rem 0.7rem; max-width: none; } /* Bandeau replié : le bouton « Menu » remplace la rangée de liens ; ouvert, le menu s'empile en colonne pleine largeur, et les sous-menus (Administration, Mon compte...) se déplient dans le flux plutôt qu'en surimpression. */ .nav-toggle { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--bleu); border-radius: 40px; color: var(--bleu); font-size: 0.9rem; cursor: pointer; } header.site nav { display: none; } .nav-toggle-box:checked ~ nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding-top: 0.4rem; } header.site nav a, header.site nav details.nav-dropdown summary, header.site nav .btn-link-logout { display: block; width: 100%; text-align: left; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--fond); font-size: 1rem; } header.site nav details.nav-dropdown { position: static; } header.site nav .nav-dropdown-menu { position: static; margin: 0; padding: 0 0 0 1rem; border: none; box-shadow: none; min-width: 0; gap: 0; } header.site nav .theme-toggle { padding: 0.4rem 0; } header.site nav span { padding: 0.5rem 0.2rem; } /* Tables « liste » (désidératas, échanges, incapacités) -> cartes empilées : une carte par ligne, chaque cellule précédée de son intitulé (data-label). Les en-têtes de colonnes disparaissent, l'information reste complète sans zoom ni défilement horizontal. Les grilles de planning, elles, gardent leur défilement (.grid-scroll). */ main table.stack-cards { display: block; white-space: normal; overflow: visible; } .stack-cards thead { display: none; } .stack-cards tbody { display: block; } .stack-cards tr { display: block; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); margin-bottom: 0.8rem; padding: 0.35rem 0.8rem; } .stack-cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--fond); padding: 0.5rem 0; font-size: 0.92rem; white-space: normal; } .stack-cards td:last-child { border-bottom: none; } .stack-cards td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--bleu-fonce); flex-shrink: 0; } .stack-cards td:empty { display: none; } .stack-cards td.card-actions { justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; } /* L'avertissement d'inactivité flottant ne doit pas couvrir tout l'écran mobile. */ .inactivity-warning { left: 1rem; right: 1rem; max-width: none; } } /* Lien d'aide contextuel vers la section correspondante de la page Aide (audit UX du 10.07.2026) - discret à côté du titre, hérite de la couleur du thème. */ .help-link { display: inline-block; margin-left: 0.35rem; width: 1.5rem; height: 1.5rem; line-height: 1.4rem; text-align: center; border-radius: 50%; border: 1px solid currentColor; font-size: 0.95rem; font-weight: normal; text-decoration: none; vertical-align: middle; opacity: 0.6; } .help-link:hover, .help-link:focus { opacity: 1; text-decoration: none; } /* ==================== Page d'accueil (home.html) ==================== Tableau de bord CDC/MA (décision du 11.07.2026 - variante "Dashboard" retenue après comparaison de 3 propositions). Toutes les couleurs passent par les variables de la charte définies plus haut : rien à redéfinir pour les thèmes clair/sombre/auto. */ .env-banner { background: var(--attention); color: #3a2400; text-align: center; font-weight: 600; font-size: 0.85rem; padding: 0.55rem 1rem; border-radius: 8px; margin-bottom: 1rem; } .home-hero { display: grid; grid-template-columns: 1fr 0.85fr; gap: 2rem; align-items: center; background: linear-gradient(135deg, var(--surface), var(--fond)); border: 1px solid var(--bordure); border-radius: 20px; padding: 2.6rem 3rem; margin: 1.2rem 0 2rem; box-shadow: 0 8px 24px var(--ombre-header); } .home-eyebrow { display: inline-block; background: var(--bleu-clair); color: white; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; margin-bottom: 0.9rem; } .home-hero h1 { font-size: 1.85rem; margin: 0 0 0.6rem; color: var(--bleu-fonce); line-height: 1.25; } .home-lead { color: var(--texte-attenue); margin: 0 0 1.4rem; max-width: 38ch; } .home-hero .btn.primary { padding: 0.7rem 1.7rem; box-shadow: 0 4px 14px var(--ombre-header); transition: transform 0.15s ease, box-shadow 0.15s ease; } .home-hero .btn.primary:hover { transform: translateY(-2px); } .home-illustration svg { width: 100%; max-width: 300px; display: block; margin: 0 auto; } .home-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-auto-rows: auto; gap: 1.2rem; margin-bottom: 2.5rem; } .home-status-hero { grid-row: span 2; /* --bleu et --bleu-fonce s'inversent volontairement en mode sombre (couleurs de TEXTE claires sur fond sombre, cf. règles :root[data-theme="dark"]) - un dégradé entre les deux y ferait un coin presque blanc sous un texte blanc. --shift-nuit-bg reste un bleu foncé dans LES DEUX thèmes (conçu pour porter du texte blanc en permanence, cf. .shift-nuit) : seul jeton sûr en fond plein pour ce panneau. */ background: var(--shift-nuit-bg); color: white; border-radius: 16px; padding: 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; } .home-status-kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; } .home-status-value { font-size: 1.5rem; font-weight: 700; margin: 0.4rem 0; } .home-status-sub { font-size: 0.9rem; opacity: 0.9; } .home-status-pill { display: inline-block; align-self: flex-start; background: rgba(255, 255, 255, 0.18); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.85rem; } .home-card { background: var(--surface); border-radius: 14px; border: 1px solid var(--bordure); padding: 1.2rem 1.3rem; text-decoration: none; color: var(--texte); display: flex; align-items: center; gap: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .home-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px var(--ombre-header); border-color: var(--bleu-clair); } .home-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ombre-focus); border-color: var(--bleu-clair); } .home-card-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--fond); } .home-card-icon svg { width: 24px; height: 24px; stroke: var(--bleu); } .home-card h3 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--bleu-fonce); } .home-card p { margin: 0; font-size: 0.85rem; color: var(--texte-attenue); } /* Tablette portrait et en dessous (≤1024px, cf. socle responsive - un composant dense n'est pas rétréci, il passe en une colonne). */ @media (max-width: 1024px) { .home-hero { grid-template-columns: 1fr; text-align: center; padding: 2.2rem 1.8rem; } .home-illustration { order: -1; } .home-grid { grid-template-columns: 1fr; } .home-status-hero { grid-row: auto; } } /* Mobile (≤640px) : l'illustration décorative cède la place au contenu actionnable (cf. principe « la complétude prime », audit UX) - gain de hauteur d'écran précieux. */ @media (max-width: 640px) { .home-hero { padding: 1.6rem 1.2rem; border-radius: 14px; } .home-illustration { display: none; } .home-hero h1 { font-size: 1.4rem; } .home-status-hero { padding: 1.3rem 1.4rem; } }