/* Feuille de style globale. Deux thèmes seulement, jour et nuit, portés par l'attribut data-theme posé sur . Couleur secondaire imposée par le cahier des charges : #41AB34. */ :root, :root[data-theme="clair"] { color-scheme: light; --accent: #41AB34; --accent-bg: #2f7d25; --accent-fg: #ffffff; --accent-soft: #eef7ec; --text: #1b1b1b; --text-muted: #5c5c5c; --background: #ffffff; --surface: #f4f5f4; --surface-alt: #fafafa; --border: #d5d5d5; --danger: #b00020; --danger-soft: #fdeef1; --warning-soft: #fdf3e0; } :root[data-theme="sombre"] { color-scheme: dark; --accent: #41AB34; --accent-bg: #41AB34; --accent-fg: #0f1f0c; --accent-soft: #1d2c1a; --text: #e9e9e9; --text-muted: #a7a7a7; --background: #16181a; --surface: #1f2225; --surface-alt: #1b1e20; --border: #3a3f45; --danger: #ff7b8d; --danger-soft: #331c21; --warning-soft: #33291a; } :root { --space: 1rem; --max-width: 76rem; --radius: 4px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--text); background: var(--background); } a { color: var(--accent-bg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Lien d'évitement, visible seulement au clavier */ .skip-link { position: absolute; left: -999px; } .skip-link:focus { position: static; display: inline-block; padding: 0.4rem 0.75rem; background: var(--accent-bg); color: var(--accent-fg); } /* En-tête et navigation */ .site-header { border-bottom: 1px solid var(--border); background: var(--surface); } .header-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space); padding: 0.6rem var(--space); } .site-title { font-weight: 600; text-decoration: none; color: inherit; border-left: 4px solid var(--accent); padding-left: 0.5rem; } .site-user { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .site-user form { margin: 0; } .user-name { color: var(--text-muted); } .site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 var(--space); } .nav-link { padding: 0.4rem 0.7rem; text-decoration: none; color: inherit; border-bottom: 3px solid transparent; } .nav-link:hover { background: var(--accent-soft); } .nav-link-active { font-weight: 600; border-bottom-color: var(--accent); } /* Sélecteur d'édition active, visible en permanence */ .edition-picker { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); } .edition-picker form { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .edition-picker label { font-weight: 600; white-space: nowrap; } /* Recherche globale : présente dans l'en-tête de toutes les pages connectées. */ .header-search { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .header-search label { font-weight: 600; white-space: nowrap; } .header-search input[type="search"] { min-width: 14rem; } .edition-picker select { width: auto; } .edition-picker-closed { border-color: var(--danger); } /* Bandeau d'édition clôturée */ .banner { margin: 0; padding: 0.5rem var(--space); text-align: center; font-weight: 600; } .banner-closed { background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid var(--danger); } .banner-closed a { color: inherit; } /* Pastilles d'état */ .badge { display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; white-space: nowrap; } .badge-closed { border-color: var(--danger); color: var(--danger); } .badge-ok, .badge-open { border-color: var(--accent); color: var(--accent-bg); } .row-closed { color: var(--text-muted); } .hint { color: var(--text-muted); } /* Contenu */ .site-main { max-width: var(--max-width); margin: 0 auto; padding: calc(var(--space) * 1.5) var(--space); } .site-footer { max-width: var(--max-width); margin: 0 auto; padding: var(--space); color: var(--text-muted); } h1 { margin-top: 0; font-size: 1.5rem; } h2 { font-size: 1.15rem; margin-top: calc(var(--space) * 1.5); } /* Messages, erreurs et aides de saisie */ .messages { list-style: none; margin: 0 0 var(--space); padding: 0; } .message { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); margin-bottom: 0.5rem; background: var(--surface); } .message-success { border-left-color: var(--accent); background: var(--accent-soft); } .message-warning { background: var(--warning-soft); } .message-error { border-left-color: var(--danger); background: var(--danger-soft); } .form-error, .errorlist { color: var(--danger); } .errorlist { list-style: none; margin: 0.15rem 0 0; padding: 0; font-size: 0.9rem; } .helptext { display: block; font-size: 0.85rem; color: var(--text-muted); } /* Formulaires compacts */ form p { margin: 0 0 0.7rem; } label { display: block; font-weight: 600; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], textarea, select { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: inherit; background: var(--background); } .form-login { max-width: 22rem; } .form-shooter, .form-narrow { max-width: 32rem; } fieldset { max-width: 32rem; margin: 0 0 var(--space); border: 1px solid var(--border); border-radius: var(--radius); } legend { font-weight: 600; } fieldset ul { list-style: none; margin: 0; padding: 0; } fieldset li label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; } fieldset input[disabled] + span, fieldset li:has(input[disabled]) { color: var(--text-muted); } /* Boutons */ .button { padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: inherit; font: inherit; text-decoration: none; display: inline-block; cursor: pointer; } .button:hover { background: var(--accent-soft); border-color: var(--accent); } /* Action secondaire : contour accentué. Action principale : bouton plein. */ a.button { border-color: var(--accent-bg); color: var(--accent-bg); font-weight: 600; } button[type="submit"].button:not(.button-link) { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-fg); font-weight: 600; } button[type="submit"].button:not(.button-link):hover { background: var(--accent); } .button[disabled] { opacity: 0.5; cursor: not-allowed; } .button-link { border: none; background: none; padding: 0; color: var(--accent-bg); font-weight: 400; text-decoration: underline; } .button-link:hover { background: none; } .button-theme { white-space: nowrap; } /* Tableaux */ table { width: 100%; border-collapse: collapse; } th, td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; } thead th { border-bottom: 2px solid var(--accent); white-space: nowrap; } tbody tr:nth-child(even) { background: var(--surface-alt); } tbody tr:hover { background: var(--accent-soft); } td.actions { display: flex; align-items: center; gap: 0.75rem; } td.actions form { margin: 0; } /* Barre d'outils : recherche à gauche, action principale à droite */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space); margin-bottom: var(--space); } .search { display: flex; align-items: center; gap: 0.5rem; } .search input[type="search"] { width: 18rem; } .search label { white-space: nowrap; } .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* Inscription : liste des tirs et totaux */ table.totals { max-width: 32rem; margin-bottom: var(--space); } table.totals tfoot th { border-top: 2px solid var(--border); } /* Journal : barre de filtres */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--space); } .filters label { font-weight: 600; white-space: nowrap; } .filters select, .filters input[type="date"] { width: auto; } .pagination { display: flex; gap: 0.75rem; align-items: center; } /* Chiffres clés en bandeau */ .figures { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--space); padding: 0; } .figures > div { flex: 1 1 9rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); } .figures dt { font-size: 0.85rem; color: var(--text-muted); } .figures dd { margin: 0; font-size: 1.2rem; font-weight: 600; } /* Paiements : cases Payé et TWINT */ .payment-cells form { display: flex; align-items: center; gap: 0.75rem; margin: 0; } .payment-cells label { display: flex; align-items: center; gap: 0.3rem; font-weight: 400; white-space: nowrap; } /* Inscription : encaissement rapide, dans la barre d'actions */ .payment-quick { display: flex; align-items: center; gap: 0.75rem; margin: 0; } .payment-quick label { display: flex; align-items: center; gap: 0.3rem; font-weight: 400; white-space: nowrap; } .payment-method { color: var(--accent); white-space: nowrap; } /* Classements : les onze boutons */ .ranking-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.5rem; list-style: none; margin: 0 0 var(--space); padding: 0; } .ranking-buttons li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .ranking-buttons .button { flex: 1; } table.ranking td:first-child, table.ranking th:first-child { width: 4rem; } /* Saisie des résultats : un bloc par tir sportif */ .result-block { padding: 0.5rem 1rem; } .result-block input[type="number"] { max-width: 9rem; } /* Fiches : couples libellé / valeur */ .summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 var(--space); } .summary dt { font-weight: 600; } .summary dd { margin: 0; } table.parameters { max-width: 34rem; } table.parameters input { max-width: 8rem; } /* Couleur de passe : le sélecteur reste compact, la valeur HEX l'accompagne. */ table.parameters input[type="color"] { max-width: 3rem; height: 2rem; padding: 0.1rem; } .color-cell { white-space: nowrap; } .color-value { font-family: ui-monospace, monospace; margin-left: 0.4rem; } /* Accueil : accès rapides */ .quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space); padding: 0; } /* Écrans étroits : priorité reste à l'ordinateur */ @media (max-width: 48rem) { .header-top { gap: 0.5rem; } .site-user { margin-left: 0; } .search input[type="search"] { width: 100%; } .site-main { overflow-x: auto; } } /* Impression : seules les données comptent */ @media print { .site-header, .site-footer, .toolbar, .actions-row, .skip-link { display: none; } .site-main { max-width: none; padding: 0; } }