:root { --green: #39a962; --green-dark: #0d2115; --green-panel: #153b25; --paper: #101512; --panel: #18211b; --panel-raised: #202c24; --ink: #f4f8f3; --muted: #c3cec5; --line: #728477; --focus: #ffdc4d; color-scheme: dark; font-family: system-ui, sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.site-header { position: sticky; z-index: 2000; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; color: #fff; background: var(--green-dark); border-bottom: 1px solid #4f6e59; }.project-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: #fff; text-decoration: none; }.project-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-title-plus { color: #ff8a1f; }.project-logo { height: 2.35rem; }.menu-button { min-height: 2.4rem; padding: .4rem .65rem; color: #fff; background: transparent; border: 1px solid #718578; }.menu-button:hover, .menu-button:focus-visible { color: #07150b; background: #72dc8f; }
.page-layout { max-width: 72rem; margin: auto; padding: 1rem 1rem 6rem; display: grid; gap: 1rem; }
.intro h1 { margin: 0 0 .25rem; color: #fff; font-size: clamp(1.7rem, 7vw, 2.4rem); }.intro p { margin: 0; color: var(--muted); }
.map-panel, .form-panel { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); box-shadow: 0 2px 10px #0008; }
#map { height: min(42svh, 24rem); margin-top: .75rem; border-radius: .55rem; overflow: hidden; border: 1px solid #5a7160; }
.address-search label, #proposal-form > label, fieldset { display: grid; gap: .45rem; margin-bottom: 1rem; color: #fff; font-weight: 700; }.address-search > div { display: flex; gap: .5rem; }
input, select, textarea { width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 2px solid var(--line); border-radius: .45rem; background: #0f1511; color: #fff; } input::placeholder, textarea::placeholder { color: #b7c3b9; opacity: 1; } textarea { min-height: 7rem; resize: vertical; }
button { min-height: 3rem; padding: .65rem 1rem; border: 0; border-radius: .45rem; color: #07150b; background: var(--green); font-weight: 800; } button:hover, button:focus-visible { background: #72dc8f; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.address-results { display: grid; gap: .25rem; }.address-results button { text-align: left; color: #fff; background: var(--green-panel); }
.map-actions { display: grid; gap: .55rem; margin-top: .75rem; } output { color: var(--muted); font-size: .92rem; }
fieldset { border: 0; padding: 0; } legend { margin-bottom: .55rem; }.objective-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.objective { display: block; position: relative; min-width: 0; cursor: pointer; }.objective input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }.objective-tile { display: grid; justify-items: center; gap: .45rem; min-height: 7.4rem; padding: .8rem .4rem; border: 2px solid var(--line); border-radius: .65rem; background: var(--panel-raised); color: #fff; text-align: center; font-weight: 750; transition: border-color .15s, background .15s, transform .15s; }.objective-icon { display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%; background: var(--green-panel); font-size: 1.6rem; line-height: 1; }.objective:hover .objective-tile { border-color: var(--green); transform: translateY(-2px); }.objective input:checked + .objective-tile { border-color: #78e598; background: #1f5331; box-shadow: 0 0 0 2px #78e59866; }.objective input:checked + .objective-tile .objective-icon { background: #246b3d; }.objective input:focus-visible + .objective-tile { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-previews { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 1rem; }.photo-previews img { width: 5rem; height: 5rem; object-fit: cover; border-radius: .4rem; }.form-message { min-height: 1.4rem; color: var(--muted); font-weight: 650; }.form-message.error { color: #ff9d9d; }.form-message.success { color: #87eba2; }.submit-button { width: 100%; font-size: 1.1rem; }
.photo-fieldset { margin-bottom: .65rem; }.photo-inputs { display: grid; gap: .6rem; }.photo-inputs label { display: grid; gap: .35rem; font-weight: 700; }
.proposal-marker { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 3px solid #fff3d6; border-radius: 50%; color: #301400; background: #ff8a1f; box-shadow: 0 2px 10px #0009; font-size: 1.25rem; font-weight: 900; }.proposal-marker--rejected { background: #d94343; border-color: #ffe1e1; color: #300000; }.proposal-marker--validated { background: #2db55d; border-color: #ddffe6; color: #062b13; }.proposal-marker--planted { background: #18723b; border-color: #dfffe8; color: #fff; font-size: 1.55rem; }.toast { position: fixed; z-index: 50; left: 50%; bottom: 5.5rem; width: min(24rem, calc(100% - 2rem)); transform: translateX(-50%); padding: 1rem 1.15rem; border: 1px solid #8cf2aa; border-radius: .7rem; color: #fff; background: #1d6c38; box-shadow: 0 6px 20px #000a; font-weight: 750; }.toast.error { border-color: #ffb4b4; background: #802525; }
.proposal-marker--cross { inline-size: 2.2rem; block-size: 2.2rem; border: 0; border-radius: 0; color: #ff8a1f; background: transparent; box-shadow: 0 2px 8px #000b; font-family: Arial, sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #000; }.proposal-marker--cross.proposal-marker--rejected { color: #ff5a5a; background: transparent; }.proposal-marker--cross.proposal-marker--validated, .proposal-marker--cross.proposal-marker--planted { color: #43d878; background: transparent; }
.proposal-marker--cross.proposal-marker--planted { position: relative; font-size: 0; }.proposal-marker--cross.proposal-marker--planted::before { content: '🌳'; font-size: 1.7rem; line-height: 1; }.proposal-marker--cross.proposal-marker--planted::after { content: '+'; position: absolute; right: -.55rem; bottom: -.65rem; color: #43d878; font-family: Arial, sans-serif; font-size: 1.55rem; font-weight: 900; text-shadow: 0 1px 2px #000; }
.map-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .75rem; color: var(--muted); font-size: .9rem; }.map-legend strong { color: var(--ink); }.map-legend span { display: inline-flex; align-items: center; gap: .35rem; }.legend-marker { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; color: #301400; background: #ff8a1f; font-style: normal; font-size: .9rem; }.legend-marker--rejected { color: #300000; background: #d94343; }.legend-marker--validated { color: #062b13; background: #2db55d; }.legend-marker--planted { color: #fff; background: #18723b; font-size: .82rem; }
.map-legend--trees .legend-marker { width: 1.15rem; height: 1.15rem; border-radius: 0; color: #ff8a1f; background: transparent; font-family: Arial, sans-serif; font-size: 1.7rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #000; }.map-legend--trees .legend-marker--rejected { color: #ff5a5a; background: transparent; }.map-legend--trees .legend-marker--validated, .map-legend--trees .legend-marker--planted { color: #43d878; background: transparent; }
.map-legend--trees .legend-marker--tree-planted { position: relative; font-family: inherit; font-size: 1.1rem; }.map-legend--trees .legend-marker--tree-planted::after { content: '+'; position: absolute; right: -.42rem; bottom: -.48rem; color: #43d878; font-family: Arial, sans-serif; font-size: 1rem; font-weight: 900; text-shadow: 0 1px 2px #000; }
.basemap-control-button { position: relative; display: grid; place-items: center; width: 2.35rem !important; height: 2.35rem !important; min-height: 0; padding: 0; border: 2px solid #fff; border-radius: .35rem; color: #1768c6; background: #fff; line-height: 1; box-shadow: 0 1px 4px #0007; }.basemap-control-button:hover, .basemap-control-button:focus-visible { background: #d8ffe3; }.basemap-control-layers { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.basemap-control-count { position: absolute; top: -.45rem; right: -.45rem; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--green); font-size: .68rem; font-weight: 900; line-height: 1; }.basemap-popup { display: grid; grid-template-columns: repeat(2, minmax(7.2rem, 1fr)); gap: .55rem; min-width: 16rem; color: #1d2a20; }.basemap-popup > strong { grid-column: 1 / -1; }.basemap-tile { position: relative; display: block; cursor: pointer; }.basemap-tile input { position: absolute; opacity: 0; }.basemap-tile-preview { display: grid; align-items: end; min-height: 6.6rem; overflow: hidden; border: 3px solid #809487; border-radius: .5rem; background-color: #d8e4dc; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px #0004; }.basemap-tile-title { padding: .4rem; color: #fff; background: #102219d9; font-size: .8rem; font-weight: 800; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px #000; }.basemap-tile:hover .basemap-tile-preview { border-color: #39a962; }.basemap-tile input:checked + .basemap-tile-preview { border-color: #39a962; box-shadow: 0 0 0 2px #39a962, inset 0 0 0 1px #0004; }.basemap-tile input:focus-visible + .basemap-tile-preview { outline: 3px solid #ffdc4d; outline-offset: 2px; }.basemap-leaflet-popup .leaflet-popup-content-wrapper, .basemap-leaflet-popup .leaflet-popup-tip { background: #f8fff8; }
@media (max-width: 47.99rem) { .page-layout { padding: .75rem; }.map-panel, .form-panel { padding: .8rem; }.address-search > div { display: grid; grid-template-columns: 1fr auto; }.objective-tile { min-height: 6.8rem; font-size: .92rem; }.submit-button { position: static; width: 100%; min-height: 3.5rem; margin-top: .5rem; box-shadow: 0 4px 18px #0008; } }
@media (min-width: 48rem) { .page-layout { grid-template-columns: 1.1fr .9fr; align-items: start; padding-bottom: 2rem; }.intro { grid-column: 1 / -1; }.submit-button { position: sticky; bottom: 1rem; } }
.auth-page { width: min(32rem, calc(100% - 2rem)); margin: 8vh auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }.auth-page form { display: grid; gap: 1rem; }.auth-page label { display: grid; gap: .4rem; font-weight: 700; }.auth-page a { color: #8cf2aa; }.users-table { width: 100%; border-collapse: collapse; }.users-table th, .users-table td { padding: .65rem; border-bottom: 1px solid var(--line); text-align: left; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1rem; color: var(--muted); background: var(--green-dark); border-top: 1px solid #4f6e59; font-size: .9rem; }.logout-form { display: inline; }.site-navigation { display: flex; align-items: center; gap: .4rem; }.site-navigation a.menu-button { text-decoration: none; }.site-navigation .menu-button.menu-current { color: #07150b; background: var(--green); border-color: var(--green); }.user-menu { font-weight: 700; }
.site-footer a, .site-footer a:visited { color: #fff; }.site-footer a:hover, .site-footer a:focus-visible { color: #d8ffe3; }
.menu-toggle { display: none; }
@media (max-width: 47.99rem) { .site-header { position: sticky; align-items: center; gap: .65rem; min-height: 5.4rem; padding: .65rem .8rem; }.project-brand { flex: 1 1 auto; align-items: center; gap: .7rem; }.project-brand .project-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.1; text-overflow: clip; }.project-logo { flex: 0 0 auto; height: clamp(3.1rem, 14vw, 4rem); max-width: 4rem; object-fit: contain; }.menu-toggle { display: grid; flex: 0 0 3rem; place-content: center; gap: .32rem; min-width: 3rem; min-height: 3rem; padding: .55rem; border: 1px solid #718578; border-radius: .55rem; color: #fff; background: transparent; }.menu-toggle span { display: block; width: 1.35rem; height: .14rem; border-radius: 1rem; background: currentColor; }.menu-toggle:hover, .menu-toggle:focus-visible { color: #07150b; background: #72dc8f; }.site-navigation { position: absolute; z-index: 2001; top: calc(100% + .35rem); right: .7rem; left: .7rem; display: none; grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-items: stretch; gap: .65rem; padding: .9rem .7rem; border: 1px solid #547260; border-radius: .7rem; background: #153b25; box-shadow: 0 .7rem 1.5rem #000b; }.site-navigation.is-open { display: grid; }.site-navigation .logout-form { width: 100%; text-align: center; }.site-navigation .menu-button, .site-navigation .logout-form .menu-button { width: 94%; max-width: 34rem; margin-inline: auto; }.site-navigation .menu-button { display: flex; justify-content: center; align-items: center; min-height: 3.35rem; text-decoration: none; }.site-navigation .user-menu { display: flex; justify-self: center; justify-content: center; align-items: center; width: 94%; max-width: 34rem; min-height: 2.2rem; margin-inline: auto; padding: .25rem .75rem; text-align: center; font-size: 1.05rem; }.logout-form { display: block; } }
.account-page, .admin-page { width: min(96rem, calc(100% - 2rem)); }.contribution-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }.contribution-counts span, .proposal-admin-card { padding: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel-raised); font-weight: 700; }.account-map { height: 38rem; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: .55rem; overflow: hidden; }.inline-actions { display: flex; flex-wrap: wrap; gap: .4rem; }.inline-actions form { margin: 0; }.proposal-admin-list { display: grid; gap: 1rem; }.proposal-admin-card { display: grid; gap: .75rem; }.proposal-admin-card[hidden] { display: none; }.proposal-admin-card h2, .proposal-admin-card p { margin: 0; }.coordinate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }.coordinate-fields label { display: grid; gap: .4rem; } @media (max-width: 47.99rem) { .site-navigation { flex-wrap: wrap; justify-content: end; }.contribution-counts, .coordinate-fields { grid-template-columns: 1fr; }.users-table { display: block; overflow-x: auto; } }
.account-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; }.account-tabs a { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); text-decoration: none; font-weight: 750; }.account-tabs a.active, .account-tabs a:hover { color: #07150b; background: var(--green); border-color: var(--green); }.users-table td:last-child { display: flex; gap: .4rem; align-items: center; }.users-table td:last-child form { margin: 0; }.user-icon-button { display: grid; place-items: center; min-width: 2.45rem; min-height: 2.45rem; padding: .35rem; border: 1px solid #77af87; border-radius: .45rem; color: #fff; background: #1b4a2c; font-size: 1.15rem; line-height: 1; }.user-icon-button:hover, .user-icon-button:focus-visible { color: #07150b; background: #72dc8f; }.user-icon-button--delete { background: #7e3131; border-color: #db8585; }.user-icon-button--delete:hover, .user-icon-button--delete:focus-visible { color: #fff; background: #bd4545; }
.proposal-form-actions { display: flex; flex-wrap: wrap; gap: .65rem; }.proposal-form-actions > button { flex: 1 1 10rem; }.secondary-button { color: #fff; background: #33463a; border: 1px solid #78907e; }.secondary-button:hover, .secondary-button:focus-visible { color: #07150b; background: #b7c9ba; }
.proposal-contributor { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }.proposal-contributor h5, .proposal-contributor p { margin: 0; }.proposal-contributor h5 { margin-bottom: .35rem; }
.statistics-section { margin: 1.4rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel-raised); }.statistics-section h3 { margin-top: 0; }.statistics-table-wrap { overflow-x: auto; border: 1px solid #486554; border-radius: .5rem; }.statistics-table { width: 100%; min-width: 42rem; border-collapse: separate; border-spacing: 0; }.statistics-table th, .statistics-table td { padding: .7rem .8rem; border-bottom: 1px solid #385243; text-align: center; white-space: nowrap; }.statistics-table thead th { color: #fff; background: #153b25; font-size: .87rem; }.statistics-table thead th:first-child, .statistics-table tbody th, .statistics-table tfoot th { position: sticky; z-index: 1; left: 0; text-align: left; }.statistics-table thead th:first-child { z-index: 2; background: #0b2817; }.statistics-table tbody th { color: #fff; background: #183f28; }.statistics-table tbody tr:nth-child(even) td { background: #12311f; }.statistics-table tbody tr:hover td, .statistics-table tbody tr:hover th { background: #245b38; }.statistics-table td:last-child, .statistics-table thead th:last-child { font-weight: 850; background: #214b31; }.statistics-table tfoot { color: #07150b; font-weight: 850; }.statistics-table tfoot th, .statistics-table tfoot td { border-bottom: 0; background: #72dc8f; }.statistics-chart { display: grid; gap: .8rem; }.statistics-chart-row { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(12rem, 1fr); gap: .7rem; align-items: center; }.statistics-chart-bar { display: flex; min-height: 2rem; overflow: hidden; border-radius: .35rem; background: #0a1d10; }.statistics-segment { display: grid; min-width: 1.6rem; place-items: center; color: #07150b; font-size: .78rem; font-weight: 800; }.statistics-segment--a_valider { background: #f39b26; }.statistics-segment--refusee { background: #d9534f; color: #fff; }.statistics-segment--validee { background: #72dc8f; }.statistics-segment--arbre_plante { background: #3ea95d; color: #fff; }.statistics-legend { display: flex; flex-wrap: wrap; gap: .65rem 1rem; }.statistics-legend span { display: inline-flex; gap: .3rem; align-items: center; }.statistics-legend i { width: 1rem; height: 1rem; border-radius: .2rem; }.statistics-leaders { display: grid; gap: .55rem; padding-left: 1.5rem; } @media (max-width: 47.99rem) { .statistics-chart-row { grid-template-columns: 1fr; gap: .3rem; }.statistics-table { min-width: 38rem; }.statistics-table th, .statistics-table td { padding: .6rem; } }
.user-row.is-protected { cursor: not-allowed; opacity: .7; }.user-row.is-protected > * { pointer-events: none; }
.plantations-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40rem, 1.8fr); gap: 1rem; align-items: start; }.plantations-map-panel { position: sticky; top: 5rem; padding: .9rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel-raised); }.plantations-map-panel h3, .plantations-map-panel p { margin-top: 0; }.plantations-map-panel .account-map { margin-bottom: 0; } .admin-objectives { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-objectives .objective-tile { min-height: 5.5rem; font-size: .82rem; } .admin-objectives .objective-icon { inline-size: 2.2rem; block-size: 2.2rem; font-size: 1.25rem; } @media (max-width: 62rem) { .plantations-workspace { grid-template-columns: 1fr; }.plantations-map-panel { position: static; order: -1; } }
.proposal-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }.proposal-details h4 { margin: 0 0 .5rem; }.proposal-photo-gallery { display: flex; flex-wrap: wrap; gap: .55rem; }.proposal-photo-gallery p { margin: 0; }.proposal-photo-thumbnail { min-height: 0; padding: 0; overflow: hidden; border: 2px solid var(--line); border-radius: .45rem; background: transparent; }.proposal-photo-thumbnail:hover, .proposal-photo-thumbnail:focus-visible { border-color: var(--focus); }.proposal-photo-thumbnail img { display: block; width: 5.5rem; height: 5.5rem; object-fit: cover; }.photo-dialog { max-width: min(92vw, 70rem); max-height: 92vh; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }.photo-dialog::backdrop { background: #000b; }.photo-dialog img { display: block; max-width: min(86vw, 66rem); max-height: 80vh; }.dialog-close { display: block; margin: 0 0 .6rem auto; min-height: 2.25rem; padding: .25rem .65rem; font-size: 1.35rem; }
.create-user { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel-raised); }.create-user h3, .create-user p { margin-top: 0; }.create-user form { display: grid; gap: .8rem; }
.export-form { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel-raised); }.export-form label { display: grid; gap: .4rem; font-weight: 700; }.export-help { color: var(--muted); font-size: .92rem; }
.privacy-consent { grid-template-columns: auto 1fr; align-items: start; color: var(--muted) !important; font-size: .9rem; font-weight: 500 !important; }.privacy-consent input { width: auto; min-height: auto; margin-top: .25rem; }.privacy-page { width: min(48rem, calc(100% - 2rem)); }.privacy-page h2 { margin-top: 1.7rem; font-size: 1.2rem; }.privacy-page p { line-height: 1.55; }
.role-options { display: flex; flex-wrap: wrap; gap: .8rem; }.role-options label, .role-toggle { display: flex; align-items: center; gap: .4rem; }.role-options input, .role-toggle input { width: auto; min-height: auto; }.user-row { cursor: pointer; }.user-row:hover td, .user-row.selected td { background: #275337; }