:root {
    color-scheme: dark;
    --ink: #e5edf5;
    --muted: #a9b8c9;
    --accent: #85d6b5;
    --accent-hover: #a0e5c9;
    --on-accent: #10271f;
    --line: #405264;
    --control-line: #677b88;
    --paper: #0f141c;
    --surface: #19222e;
    --raised: #283647;
    --field: #101720;
    --success-bg: #213e35;
    --success-ink: #b3ebd0;
    --error-bg: #38202a;
    --error-ink: #ffc4ca;
    --danger: #9f3442;
    --danger-hover: #b23c4c;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.55 system-ui,sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

header {
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:22px max(5vw,20px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:22px;
    font-weight:750;
}

.brand small {
    font-size:10px;
    letter-spacing:2px;
    color:var(--muted);
    margin-left:15px;
}

.mark {
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--accent);
    color:var(--on-accent);
    width:38px;
    height:38px;
}

nav,.row,.heading,.actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

nav form {
    margin:0;
}

main {
    max-width:1120px;
    margin:0 auto;
    padding:48px 24px;
    min-height:75vh;
}

h1 {
    font-size:clamp(28px,4vw,42px);
    line-height:1.2;
    letter-spacing:-1.4px;
    margin:10px 0 16px;
}

h2 {
    font-size:21px;
    line-height:1.3;
    margin:0 0 14px;
}

.heading {
    margin-bottom:32px;
}

.eyebrow {
    font-size:11px;
    font-weight:750;
    letter-spacing:2px;
    color:var(--accent);
    margin:0;
}

.muted {
    color:var(--muted);
}

.small {
    font-size:13px;
}

.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px;
}

.stats {
    display:flex;
    gap:18px;
    margin-bottom:30px;
}

.stats .panel {
    display:flex;
    gap:16px;
    align-items:center;
    flex:1;
}

.stats strong {
    font-size:32px;
}

.stats span {
    color:var(--muted);
}

.cards {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.event-card h2 {
    margin-top:24px;
    overflow-wrap:anywhere;
}

.date {
    font-size:13px;
    letter-spacing:1px;
}

.badge {
    display:inline-block;
    border-radius:99px;
    padding:4px 10px;
    font-size:12px;
    background:var(--raised);
    color:var(--muted);
}

.badge.active {
    background:var(--success-bg);
    color:var(--success-ink);
}

.text-link {
    font-weight:650;
    color:var(--accent);
    font-size:14px;
}

.empty {
    grid-column:1/-1;
    text-align:center;
    padding:60px 20px;
}

.empty-icon {
    font-size:60px;
    color:var(--accent);
}

button,.button {
    display:inline-block;
    border:0;
    border-radius:9px;
    padding:12px 18px;
    background:var(--accent);
    color:var(--on-accent);
    font:600 14px/1.4 system-ui;
    cursor:pointer;
    text-align:center;
}

.button:hover {
    text-decoration:none;
    background:var(--accent-hover);
}

button:hover {
    background:var(--accent-hover);
}

.quiet,.secondary {
    background:var(--raised);
    color:var(--ink);
}

.stack {
    display:flex;
    flex-direction:column;
    gap:20px;
}

.stack p {
    margin:0;
}

.stack>button {
    align-self:flex-start;
}

label {
    display:block;
    font-size:14px;
    font-weight:600;
}

input {
    display:block;
    width:100%;
    padding:12px 14px;
    border:1px solid var(--control-line);
    border-radius:8px;
    margin-top:8px;
    font:inherit;
    color:var(--ink);
    background:var(--surface);
}

input:focus-visible,button:focus-visible,a:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:3px;
}

.checkbox {
    display:flex;
    gap:10px;
    align-items:center;
}

.checkbox input {
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--accent);
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-panel {
    max-width:800px;
}

.actions {
    justify-content:flex-start;
}

.notice,.errors {
    padding:15px 18px;
    border-radius:10px;
    margin-bottom:24px;
    background:var(--success-bg);
    color:var(--success-ink);
    font-size:14px;
}

.errors {
    background:var(--error-bg);
    color:var(--error-ink);
}

.errors ul {
    margin-bottom:0;
}

.login {
    max-width:450px;
    margin:35px auto;
}

.login .panel {
    margin-top:25px;
}

.login button {
    width:100%;
}

.access {
    margin-top:22px;
}

.copy-row {
    display:flex;
    gap:12px;
    align-items:center;
}

.copy-row input {
    font-size:13px;
    margin:8px 0;
}

.danger-zone {
    margin-top:26px;
    border-color:#915460;
}

.danger-zone form {
    max-width:450px;
}

.danger {
    background:var(--danger);
    color:#fff;
}

.pagination {
    margin-top:28px;
    justify-content:center;
    font-size:14px;
}

footer {
    text-align:center;
    padding:25px;
    color:var(--muted);
    font-size:12px;
}

@media(max-width:640px) {
    header {
        padding:16px;
    }

    .brand small {
        display:none;
    }

    nav {
        gap:10px;
        font-size:13px;
    }

    main {
        padding:30px 18px;
    }

    .heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .cards,.form-grid {
        grid-template-columns:1fr;
    }

    .stats {
        gap:10px;
    }

    .stats .panel {
        padding:16px;
        display:block;
    }

    .stats span {
        display:block;
        font-size:12px;
    }

    .panel {
        padding:22px;
    }

    .copy-row {
        align-items:stretch;
        flex-direction:column;
        gap:2px;
    }

    .copy-row button {
        align-self:flex-end;
    }

    .actions {
        flex-wrap:wrap;
    }

}


.qr-section { margin-bottom: 26px; }
.qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qr-card { text-align: center; min-width: 0; }
.qr-card h3 { font-size: 16px; min-height: 48px; }
.qr-card img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 16px; background: white; }
@media (max-width: 760px) { .qr-grid { grid-template-columns: 1fr; } .qr-card { padding: 18px 0; } }

.information-remove { margin-top: 24px; }
.information-preview-container { margin: 16px 0 24px; }
.information-thumbnail { display: block; width: 160px; max-width: 100%; height: 100px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #111; cursor: zoom-in; }
.information-thumbnail:hover { filter: none; }
.information-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.information-preview-container p { margin: 8px 0 0; }
.information-hover-preview { display: none; position: fixed; top: 10vh; left: 10vw; width: 80vw; height: 80vh; z-index: 1000; pointer-events: none; background: #111; border-radius: 12px; box-shadow: 0 12px 60px #0009; overflow: hidden; }
.information-hover-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
    .information-thumbnail:hover + .information-hover-preview { display: block; }
}
.information-image-dialog { width: 80vw; height: 80vh; max-width: 80vw; max-height: 80vh; padding: 0; border: 0; border-radius: 12px; background: #111; overflow: hidden; }
.information-image-dialog::backdrop { background: #0009; }
.information-image-dialog > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.information-preview-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--raised); color: var(--ink); box-shadow: 0 2px 8px #0006; }

/* États interactifs communs : contrastes conservés au survol et au clavier. */
input, textarea, select { background: var(--field); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[readonly] { background: var(--surface); }
a:not(.button):hover { color: var(--accent-hover); }
.quiet:hover, .secondary:hover, .button.secondary:hover,
.information-preview-close:hover { background: #364a60; color: var(--ink); }
.danger:hover, .button.danger:hover { background: var(--danger-hover); color: #fff; }
.information-thumbnail:hover { background: #111; }
button:disabled, .button[aria-disabled="true"] { background: var(--raised); color: var(--muted); opacity: 1; cursor: not-allowed; }
summary:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input::file-selector-button { background: var(--raised); color: var(--ink); border: 1px solid var(--control-line); padding: 8px 12px; border-radius: 6px; margin-right: 12px; cursor: pointer; }
input::file-selector-button:hover { background: #364a60; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--field) inset; caret-color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }

a[data-photo-zoom] { display: block; cursor: zoom-in; }

select { display: block; width: 100%; padding: 12px 14px; margin-top: 8px; border: 1px solid var(--control-line); border-radius: 8px; font: inherit; }

#information-design[hidden] { display: none; }