@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#222d2b; --muted:#6e7b77; --cream:#f7f5ef; --paper:#fffdf9; --green:#1f5a4d; --mint:#dcebe3; --gold:#c9964b; --line:#e5e2d9; --danger:#a84a43; }
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 85% 8%, #e8f1eb 0, transparent 32%), var(--cream); color:var(--ink); font-family:'DM Sans', sans-serif; }
.shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:34px 0 58px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:34px; } .topbar-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.brand { display:flex; align-items:center; gap:13px; color:var(--green); font-weight:700; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; font-family:'Playfair Display', serif; font-size:21px; }
.brand small { display:block; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
h1,h2 { font-family:'Playfair Display', serif; margin:0; font-weight:700; } h1 { font-size:clamp(32px, 5vw, 58px); line-height:1.04; } h2 { font-size:25px; }
.hero { position:relative; display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:30px; padding:34px 36px 32px; border:1px solid #e3e5db; border-radius:16px; overflow:hidden; background:linear-gradient(120deg, rgba(255,253,249,.98), rgba(239,245,237,.92)); box-shadow:0 18px 45px #304f3c0d; } .hero::after { content:'GJ'; position:absolute; right:36px; top:-34px; color:#dcebe3; font:700 170px/.9 'Playfair Display',serif; pointer-events:none; } .hero-copy { position:relative; z-index:1; } .hero-kicker { margin-bottom:10px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .hero-kicker span { color:var(--green); padding:0 4px; } .hero h1 { max-width:650px; font-size:clamp(38px, 5vw, 64px); letter-spacing:0; } .hero p { color:var(--muted); margin:14px 0 0; max-width:540px; line-height:1.65; } .hero > .button { position:relative; z-index:1; }
.actions { display:flex; flex-wrap:wrap; gap:10px; } .button { border:0; border-radius:7px; padding:12px 16px; font:600 14px 'DM Sans'; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .2s, box-shadow .2s; } .button:hover { transform:translateY(-1px); box-shadow:0 7px 18px #274f3d1a; }
.button-primary { color:white; background:var(--green); } .button-light { color:var(--green); background:white; border:1px solid var(--line); } .button-danger { color:var(--danger); background:#fff4f1; }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:24px; } .stat { position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); padding:20px 21px 18px; border-radius:10px; } .stat::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--green); } .stat:nth-child(2)::before { background:var(--gold); } .stat:nth-child(3)::before { background:#8aa99b; } .stat strong { display:block; font:700 31px/1 'Playfair Display',serif; color:var(--green); } .stat span { display:block; margin-top:7px; color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.panel { background:rgba(255,253,249,.94); border:1px solid var(--line); border-radius:12px; padding:25px; box-shadow:0 12px 35px #304f3c0a; } .panel-head { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.search-form { display:flex; gap:10px; align-items:end; margin-bottom:18px; } .search-form input { flex:1; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:600px; } th,td { padding:15px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; } td:first-child { font-weight:600; } .badge { display:inline-flex; padding:6px 9px; border-radius:999px; background:var(--mint); color:var(--green); font-size:12px; font-weight:600; } .badge.electronique { background:#f7ead5; color:#815c27; }
.row-number { width:48px; color:var(--green); font-weight:700; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; color:var(--muted); font-size:13px; } .pagination div { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .page-link { flex:0 0 32px; min-width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; color:var(--green); background:white; text-decoration:none; font-weight:600; } .page-link.active { color:white; background:var(--green); border-color:var(--green); } .page-gap { width:18px; text-align:center; color:var(--muted); }
.row-actions { display:flex; gap:7px; } .icon-button { border:1px solid var(--line); background:white; color:var(--muted); border-radius:6px; padding:7px 9px; text-decoration:none; font-size:13px; } .icon-button.delete { color:var(--danger); }
.form-panel { max-width:720px; margin:35px auto; } .form-intro { color:var(--muted); margin-top:8px; } .section-title { margin:25px 0 12px; font-size:20px; } .assignment-summary { display:flex; justify-content:space-between; gap:20px; margin:22px 0; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:#f5f8f3; } .assignment-summary div:last-child { text-align:right; } .assignment-summary strong { display:block; color:var(--green); font:700 22px/1.1 'Playfair Display',serif; } .assignment-summary span { display:block; margin-top:5px; color:var(--muted); font-size:13px; } .assignment-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; } .assignment-form label { grid-column:1/-1; margin-bottom:-4px; }
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; } label { display:block; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:7px; } input,select { width:100%; border:1px solid var(--line); border-radius:7px; padding:12px; background:white; color:var(--ink); font:inherit; } input:focus,select:focus { outline:2px solid #bad9c9; border-color:var(--green); } .full { grid-column:1/-1; } .form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.alert { padding:12px 15px; border-radius:7px; background:#edf6ef; color:var(--green); margin-bottom:18px; } .empty { padding:35px 10px; text-align:center; color:var(--muted); } .footer { color:var(--muted); text-align:center; font-size:12px; padding-top:24px; }

.rsvp-page { padding:24px 0 50px; }
.rsvp-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:stretch; }
.rsvp-photo-card, .rsvp-form-card { background:rgba(255,255,255,.95); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 18px 48px rgba(43,70,63,.08); }
.rsvp-photo-card { position:relative; min-height:720px; }
.rsvp-photo-card img { width:100%; height:100%; object-fit:cover; display:block; }
.rsvp-photo-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,25,28,.08), rgba(18,25,28,.60)); }
.rsvp-photo-badge { position:absolute; left:24px; right:24px; bottom:26px; z-index:1; background:rgba(255,255,255,.88); color:var(--green); padding:16px 18px; border-radius:14px; backdrop-filter:blur(6px); }
.rsvp-photo-badge strong { display:block; font-family:'Playfair Display', serif; font-size:28px; margin-bottom:6px; }
.rsvp-photo-badge span { color:var(--muted); font-weight:600; }
.rsvp-form-card { padding:32px 28px; }
.rsvp-form-card h1 { font-size:clamp(30px, 4vw, 50px); margin-bottom:12px; }
.rsvp-form-card .lead { color:var(--muted); line-height:1.7; margin-bottom:24px; }
.rsvp-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rsvp-grid .full { grid-column:1 / -1; }
.rsvp-choice { margin-top:18px; }
.rsvp-choice h3 { margin:0 0 12px; font-size:18px; }
.rsvp-checkboxes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.drink-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#f9faf6; font-size:14px; color:var(--ink); }
.drink-option input { width:18px; height:18px; accent-color:var(--green); }
.rsvp-actions { display:flex; justify-content:flex-end; margin-top:22px; }
.rsvp-success { padding:14px 16px; border-radius:10px; background:#edf7ee; color:var(--green); border:1px solid #cfe5d2; font-weight:600; margin-bottom:16px; }
.rsvp-error { padding:14px 16px; border-radius:10px; background:#fff1f0; color:var(--danger); border:1px solid #f6d0cd; font-weight:600; margin-bottom:16px; }

.rsvp-dashboard { padding-top:16px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.dashboard-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 18px; }
.dashboard-card strong { display:block; font-size:28px; font-family:'Playfair Display', serif; color:var(--green); margin-bottom:8px; }
.dashboard-card span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.dashboard-table { overflow:auto; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-oui { background:#edf7ee; color:#1a5d47; }
.status-non { background:#fff1f0; color:#9f433d; }
.status-peut_etre { background:#fff6df; color:#8b6519; }

@media (max-width:700px) { .shell { width:min(100% - 24px, 1180px); padding-top:20px; } .topbar,.hero { align-items:stretch; flex-direction:column; } .topbar { gap:14px; margin-bottom:25px; } .topbar-actions { flex-direction:column; } .topbar > .button, .topbar-actions .button, .hero > .button { justify-content:center; width:100%; } .hero { gap:22px; padding:26px 21px 23px; } .hero::after { right:-12px; top:8px; font-size:110px; } .hero h1 { font-size:clamp(36px, 11vw, 48px); } .hero p { max-width:95%; } .stats { grid-template-columns:1fr; gap:10px; } .stat { padding:15px 16px; } .panel { padding:17px 12px; } .panel-head { align-items:flex-start; flex-direction:column; gap:6px; } .search-form { align-items:stretch; flex-direction:column; } .search-form .button { justify-content:center; width:100%; } .table-wrap { margin:0 -4px; padding:0 4px 6px; overflow-x:auto; } table { min-width:760px; } th,td { padding:11px 9px; font-size:13px; } th { font-size:10px; } .pagination { align-items:center; flex-direction:column; gap:10px; } .pagination div { justify-content:center; max-width:100%; } .form-grid { grid-template-columns:1fr; } .full { grid-column:auto; } .form-actions { flex-wrap:wrap; } .form-actions .button { flex:1 1 140px; justify-content:center; } .assignment-summary { align-items:flex-start; flex-direction:column; } .assignment-summary div:last-child { text-align:left; } .assignment-form { grid-template-columns:1fr; } .assignment-form .button { width:100%; justify-content:center; } }