/* ========================================================================== Thème SifCompta — « Clair & coloré » (repris du projet compta) Fond gris bleuté, cartes blanches, accent indigo, dégradé indigo → cyan. Les couleurs MudBlazor sont fixées par le MudTheme (Components/Layout/ThemeSifCompta.cs) ; ce fichier ne surcharge MudBlazor que là où le thème ne suffit pas. Contrastes : textes courants >= 4,5:1 sur blanc et sur --fond. ========================================================================== */ :root { --fond: #f4f6fb; --carte: #fff; --texte: #1b2130; --doux: #5d6679; --bord: #e4e8f0; --rayon: 14px; --ombre: 0 1px 2px rgba(16, 24, 40, .05); --ombre-survol: 0 8px 24px rgba(16, 24, 40, .08); --accent: #4f46e5; --accent-clair: #6366f1; --accent-fonce: #4338ca; --accent-fond: #eef2ff; --accent-degrade: linear-gradient(135deg, #6366f1, #06b6d4); --menu-survol: #f2f4f7; --menu-texte: #344054; --entete-table: #f8fafc; --entete-table-texte: #475467; --ligne-survol: #f5f7ff; --vert: #16a34a; --vert-texte: #15803d; --vert-fond: #dcfce7; --vert-badge: #166534; --rouge: #dc2626; --rouge-fond: #fee2e2; --danger: #dc2626; --danger-texte: #b91c1c; --danger-fond: #fef2f2; --attention: #b45309; --attention-fond: #fffbeb; --info: #1d4ed8; --info-fond: #eff6ff; --police: "Segoe UI", system-ui, sans-serif; } html, body { font-family: var(--police); } body { margin: 0; color: var(--texte); background: var(--fond); } h1:focus { outline: none; } /* ---------- Marque : carré dégradé + nom ---------- */ .marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--texte); text-decoration: none; letter-spacing: -.01em; } .logo-carre { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-degrade); display: inline-grid; place-items: center; color: #fff; font-style: normal; font-size: 16px; font-weight: 700; flex: 0 0 30px; } /* ---------- Structure : barre d'application, menu latéral, contenu ---------- */ .mud-appbar.barre-app { border-bottom: 1px solid var(--bord); } .barre-app .bouton-barre { font-weight: 500; color: var(--menu-texte); } /* Nom dans la barre : seulement quand le menu latéral (qui porte le logo) est masqué ou en affichage étroit. */ .marque-barre { display: none; margin-left: 8px; } .marque-barre.marque-visible { display: inline-flex; } @media (max-width: 959.98px) { .marque-barre { display: inline-flex; } } /* Sélecteur d'exercice (Components/Layout/SelecteurExercice.razor), commun à toutes les pages. */ .selecteur-exercice { display: flex; align-items: center; gap: 4px; margin-right: 8px; } .selecteur-exercice .mud-select { width: 116px; flex: 0 0 auto; } .selecteur-exercice .mud-input-control { margin-top: 0; margin-bottom: 0; } .choix-exercice { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .choix-exercice .mud-icon-root { color: var(--vert-texte); } .puce-cloture.mud-chip { margin: 0; } .puce-section.mud-chip { margin: 0 12px 0 0; max-width: 220px; } .puce-section .mud-chip-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Écran étroit : logo et icônes seuls dans la barre, pour laisser la place au sélecteur d'exercice. */ @media (max-width: 599.98px) { .marque-barre .marque-texte, .barre-app .texte-barre, .texte-puce-cloture { display: none; } .barre-app .bouton-barre { min-width: 0; padding-left: 8px; padding-right: 8px; } .barre-app .bouton-barre .mud-button-icon-start { margin: 0; } .selecteur-exercice { margin-right: 0; } .puce-section.mud-chip { margin-right: 4px; max-width: 110px; } .selecteur-exercice .mud-select { width: 96px; } } .mud-drawer.menu-lateral { border-right: 1px solid var(--bord); } .mud-drawer-header.menu-entete { min-height: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8); padding: 12px 16px; align-items: center; } /* Menu groupé : libellés de groupe en capitales, lien actif sur fond accent. */ .menu-sif { padding: 0 12px 18px; } .menu-groupe { color: var(--doux); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 16px 8px 6px; } .menu-sif .menu-groupe:first-child { margin-top: 4px; } .menu-sif .mud-nav-link { border-radius: 8px; padding: 7px 10px; margin: 1px 0; color: var(--menu-texte); font-size: 14px; align-items: center; transition: background-color .2s, color .2s, transform .2s; } .menu-sif .mud-nav-link .mud-nav-link-icon { color: var(--doux); font-size: 20px; } .menu-sif .mud-nav-link .mud-nav-link-text { margin-left: 10px; margin-inline-start: 10px; } .menu-sif .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: var(--menu-survol); transform: translateX(2px); } /* Même spécificité que la règle MudBlazor (.mud-navmenu.mud-navmenu-default …), placée après : elle l'emporte. */ .mud-navmenu.menu-sif .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: var(--accent-fond); color: var(--accent-fonce); font-weight: 600 !important; /* !important : MudBlazor impose font-weight: 500 !important au lien actif. */ } .mud-navmenu.menu-sif .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--accent-fonce); } .menu-sif .mud-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mud-main-content.contenu-sif { padding: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8 + 22px) 28px 28px; } /* 1760 px : le tableau des adhérents (10 colonnes) tient sans défiler ; au-delà, les colonnes s'espacent trop sur un grand écran. */ .contenu-largeur { max-width: 1760px; margin: 0 auto; } @media (max-width: 599.98px) { .mud-main-content.contenu-sif { padding-left: 14px; padding-right: 14px; } } /* ---------- Titre de page (Components/Shared/TitrePage.razor) ---------- */ .entete-page { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .titre-page { font-size: 22px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; line-height: 1.3; color: var(--texte); } .titre-icone { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; flex: 0 0 34px; background: var(--accent-fond); color: var(--accent-fonce); } .entete-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ---------- Cartes et panneaux (tableau de bord à venir) ---------- */ .cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; } .carte, .panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; transition: transform .2s, box-shadow .2s; } .panneau { margin-bottom: 16px; } .carte { position: relative; overflow: hidden; } .carte:hover, .panneau:hover { box-shadow: var(--ombre-survol); } /* Élévation au survol limitée aux cartes compactes (un transform sur un grand panneau gênerait les popups). */ .carte:hover { transform: translateY(-2px); } .carte-titre { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: 13px; } .carte-valeur { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; } .carte-detail { color: var(--doux); font-size: 12px; margin-top: 2px; } .carte a.carte-lien { color: inherit; text-decoration: none; } .bande { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent-degrade); } .pastille-icone { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 17px; flex: 0 0 34px; background: var(--accent-fond); color: var(--accent-fonce); } /* Variantes de couleur : pastille et bande assorties. */ .c-indigo .pastille-icone { background: var(--accent-fond); color: var(--accent-fonce); } .c-indigo .bande { background: var(--accent); } .c-vert .pastille-icone { background: #dcfce7; color: #16a34a; } .c-vert .bande { background: #22c55e; } .c-orange .pastille-icone { background: #fff4e5; color: #ea580c; } .c-orange .bande { background: #f97316; } .c-violet .pastille-icone { background: #ede9fe; color: #7c3aed; } .c-violet .bande { background: #7c3aed; } .c-bleu .pastille-icone { background: #e0f2fe; color: #0284c7; } .c-bleu .bande { background: #0284c7; } .c-rose .pastille-icone { background: #fce7f3; color: #db2777; } .c-rose .bande { background: #db2777; } .c-rouge .pastille-icone { background: var(--rouge-fond); color: var(--danger-texte); } .c-rouge .bande { background: var(--rouge); } .negatif { color: var(--rouge); } .positif { color: var(--vert-texte); } .nombre { text-align: right; font-variant-numeric: tabular-nums; } .aide { color: var(--doux); font-size: 13px; } /* Ligne sélectionnée dans une grille (ex. section choisie sur la page Sections). */ /* Historique des versements (Components/Dialogues/HistoriqueDialogue.razor) : en-tête d'année, exercice choisi en couleur d'accent. */ .historique-annee { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 8px; background: var(--entete-table); color: var(--entete-table-texte); font-weight: 600; } .historique-annee-choisie { background: var(--accent-fond); color: var(--accent-fonce); } .historique-annee-total { margin-left: auto; font-variant-numeric: tabular-nums; } /* Seul le libellé bancaire revient à la ligne : il prend toute la largeur restante. */ .historique-table th, .historique-table td:not(.historique-libelle) { white-space: nowrap; } .historique-table .historique-libelle { width: 100%; } /* Icône Historique de la page Adhérents : cotisations reçues cette année (orange vif) ou aucune (rouge), bien distinctes. */ .mud-icon-button.historique-orange { color: #f59e0b; } .mud-icon-button.historique-rouge { color: #dc2626; } /* Apparition au chargement (fill-mode backwards : n'empêche pas l'élévation au survol ensuite). */ @keyframes apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .carte, .panneau { animation: apparition .5s ease backwards; } .cartes > :nth-child(2) { animation-delay: .06s; } .cartes > :nth-child(3) { animation-delay: .12s; } .cartes > :nth-child(n+4) { animation-delay: .18s; } /* ---------- Alertes (hors MudBlazor) ---------- */ .alerte { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; border: 1px solid transparent; } .alerte-danger { background: var(--danger-fond); color: var(--danger-texte); border-color: #fecaca; } .alerte-attention { background: var(--attention-fond); color: var(--attention); border-color: #fde68a; } .alerte-info { background: var(--info-fond); color: var(--info); border-color: #dbeafe; } /* ========================================================================== Surcharges MudBlazor (contenu principal uniquement, les dialogues et popovers gardent leur ombre). ========================================================================== */ /* Papiers et grilles : bord fin + ombre douce au lieu de l'élévation Material. */ .mud-main-content .mud-elevation-1 { box-shadow: var(--ombre); border: 1px solid var(--bord); border-radius: var(--rayon); } .mud-main-content .mud-paper-outlined { border-color: var(--bord); } .mud-main-content .mud-table.mud-elevation-1 { overflow: hidden; } .mud-main-content .mud-paper, .mud-main-content .mud-table { animation: apparition .4s ease backwards; } /* En-têtes de tableau (MudTable, MudDataGrid) : fond gris clair, texte semi-gras. Même spécificité que la règle « sticky header » de MudBlazor, placée après : elle l'emporte. */ .mud-table .mud-table-root .mud-table-head .mud-table-cell { background-color: var(--entete-table); color: var(--entete-table-texte); font-weight: 600; } .mud-simple-table table thead th { background-color: var(--entete-table); color: var(--entete-table-texte); font-weight: 600; } .mud-table-toolbar { border-bottom: 1px solid var(--bord); } /* Puces : texte semi-gras, plus arrondies. */ .mud-chip { font-weight: 600; border-radius: 20px; } /* Alertes MudBlazor (variante « Text » par défaut) : bord fin assorti, comme les alertes de compta. */ .mud-alert { border: 1px solid transparent; } .mud-alert-text-info { background-color: var(--info-fond); border-color: #dbeafe; } .mud-alert-text-warning { background-color: var(--attention-fond); border-color: #fde68a; } .mud-alert-text-error { background-color: var(--danger-fond); border-color: #fecaca; } .mud-alert-text-success { background-color: #f0fdf4; border-color: #bbf7d0; } /* Boutons pleins : pas d'ombre Material. */ .mud-button-filled { box-shadow: none; } .mud-button-filled-primary:hover { box-shadow: 0 2px 8px rgba(79, 70, 229, .25); } /* Dialogues : rayon des cartes. */ .mud-dialog { border-radius: var(--rayon); } @media (prefers-reduced-motion: reduce) { .carte, .panneau, .mud-main-content .mud-paper, .mud-main-content .mud-table { animation: none; } .carte, .panneau, .menu-sif .mud-nav-link { transition: none; } .carte:hover, .menu-sif .mud-nav-link:hover:not(.mud-nav-link-disabled) { transform: none; } } /* ========================================================================== Pages de compte (rendu statique + Bootstrap) : tout est limité à .compte (Components/Account/Shared/AccountLayout.razor). ========================================================================== */ .compte { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 32px; background: var(--fond); } .compte-carte { width: 100%; max-width: 440px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-survol); padding: 28px 30px 24px; animation: apparition .5s ease backwards; } .compte-marque { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 22px; color: var(--texte); } .compte-marque .logo-carre { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; font-size: 18px; } .compte h2 { font-size: 17px; font-weight: 600; color: var(--texte); margin-bottom: 14px; } .compte p { color: var(--doux); } .compte a, .compte .btn-link { color: var(--accent); text-decoration: none; font-weight: 500; } .compte a:hover, .compte .btn-link:hover { color: var(--accent-fonce); text-decoration: underline; } .compte .form-control { border: 1px solid #d0d5dd; /* plus marqué que --bord : contraste des champs */ border-radius: 10px; color: var(--texte); transition: border-color .15s, box-shadow .15s; } .compte .form-floating > label { color: var(--doux); } .compte .form-control:focus, .compte .form-check-input:focus { border-color: var(--accent-clair); box-shadow: 0 0 0 3px var(--accent-fond); outline: none; } .compte .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .compte .btn { border-radius: 10px; font-weight: 600; } .compte .btn-lg { font-size: 16px; padding: 10px 16px; } .compte .btn-primary { color: #fff; background-color: var(--accent); border-color: var(--accent); transition: background-color .15s, box-shadow .15s; } .compte .btn-primary:hover, .compte .btn-primary:active { color: #fff; background-color: var(--accent-fonce); border-color: var(--accent-fonce); } .compte .btn:focus-visible { box-shadow: 0 0 0 3px #c7d2fe; outline: none; } .compte .alert { border-radius: 10px; font-size: 14px; } .compte .alert-danger { background: var(--danger-fond); color: var(--danger-texte); border-color: #fecaca; } .compte .alert-success { background: #f0fdf4; color: var(--vert-texte); border-color: #bbf7d0; } .compte .text-danger { color: var(--danger-texte) !important; } /* !important : la classe utilitaire Bootstrap l'est déjà. */ .compte ul.text-danger { padding-left: 18px; font-size: 14px; } .compte .codes-secours { font-family: ui-monospace, monospace; font-size: 1.1rem; background: var(--entete-table); padding: 12px; border-radius: 6px; } .compte .qr-code svg { width: 200px; height: 200px; } @media (prefers-reduced-motion: reduce) { .compte-carte { animation: none; } .compte .form-control, .compte .btn-primary { transition: none; } } /* ---------- Bilan : tableaux mensuels ---------- */ .table-defilante { overflow-x: auto; } .table-bilan { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .table-bilan th, .table-bilan td { padding: 6px 8px; border-bottom: 1px solid var(--bord); white-space: nowrap; text-align: left; } .table-bilan thead th { background: var(--entete-table); color: var(--entete-table-texte); font-weight: 600; position: sticky; top: 0; } .table-bilan tbody th { font-weight: 600; } .table-bilan .ligne-compte td:first-child { padding-left: 24px; color: var(--doux); } .table-bilan .total { font-weight: 600; background: var(--ligne-survol); } .table-bilan .ligne-resultat th, .table-bilan .ligne-resultat td { border-top: 2px solid var(--bord); font-weight: 700; } .cellule-bouton { border: none; background: none; font: inherit; color: inherit; text-align: right; width: 100%; padding: 0; cursor: pointer; } .cellule-bouton:hover { text-decoration: underline; color: var(--accent-fonce); } .cellule-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---------- Accueil : liens en carte, alertes, filtres ---------- */ .lien-carte { text-decoration: none; color: inherit; display: block; } .lien-carte:hover .carte-titre { color: var(--accent-fonce); } .alertes { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; } .cartes-principales { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 14px; } .cartes-principales .carte-valeur { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; } .filtres { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; padding: 12px 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); } /* ========================================================================== Modèle Blazor (validation, erreurs) ========================================================================== */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* Libellés flottants : le texte indicatif (placeholder) reste invisible, sinon il s'affiche en double à côté du libellé (le modèle Blazor le montrait aligné à droite). Il ne sert qu'au mécanisme :placeholder-shown de Bootstrap. */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: transparent; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Affectation : frise des dates (en-tête par mois, jour affiché une fois, trait vertical entre les jours). */ .grille-frise .groupe-mois .mud-table-cell { background: var(--carte); border-bottom: none; padding-top: 18px; } .grille-frise .titre-mois { font-size: 1.1rem; font-weight: 600; color: var(--texte); margin-right: 8px; } .grille-frise .cellule-frise { position: relative; text-align: center; vertical-align: top; min-width: 56px; white-space: nowrap; } .grille-frise .cellule-frise::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; border-right: 2px solid var(--bord); } .grille-frise .frise-jour { display: block; font-weight: 700; font-size: 1rem; line-height: 1.1; color: var(--texte); } .grille-frise .frise-mois { display: block; font-size: .75rem; color: var(--doux); } /* Visionneuse des justificatifs : image ajustée à la fenêtre (clic : taille réelle), PDF dans le lecteur du navigateur. */ /* Centrage par marges automatiques (et non justify-content) : une image plus large que la fenêtre reste entièrement défilable. */ .visionneuse { height: 72vh; overflow: auto; display: flex; align-items: flex-start; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; } .visionneuse-image { margin: 0 auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; } .visionneuse-image.taille-reelle { max-width: none; max-height: none; cursor: zoom-out; } .visionneuse-pdf { width: 100%; height: 100%; border: none; } /* Tableau de bord : logo de l'association en bas de page, taille fixe quel que soit le fichier (Application:Logo). */ .logo-accueil { display: flex; justify-content: center; margin-top: 40px; } .logo-accueil img { width: 200px; height: 150px; object-fit: contain; } /* Petit logo téléversé (Paramètres › Application) : même place que le carré coloré, image entière, sans fond. */ img.logo-carre { background: transparent; object-fit: contain; } /* Paramètres › Application : aperçus. */ .apercu-petit-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; } .logo-accueil.apercu-logo { margin-top: 0; justify-content: flex-start; }