:root{
  --bg:#f2eee8; --surface:#fffdfa; --surface-2:#f7f3ec;
  --ink:#1c1a17; --muted:#6b6257; --line:#e2dacd;
  --accent:#9c7539; --accent-soft:#f3e8d4;
  --ok:#3d6b52; --ok-soft:#deeae2;
  --danger:#a33b32; --danger-soft:#f6dedb;
  --radius:10px;
  --shadow:0 1px 2px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.07);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.55}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; margin:0}
a{color:var(--accent)}

.top{background:#1a1815; padding:18px 20px}
.brand{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:4px;
  text-decoration:none; width:fit-content}
.brand:hover .mark{color:#e6cfa5}
.brand:focus-visible{outline:2px solid #c6aa7c; outline-offset:4px}
.mark{color:#fff; font-size:19px; letter-spacing:5px}
.sub{color:#c6aa7c; font-size:10px; letter-spacing:3px; text-transform:uppercase}

.wrap{max-width:820px; margin:0 auto; padding:26px 16px 50px}
h1{font-size:28px; margin-bottom:6px}
h2{font-size:21px}
.lead{color:var(--muted); margin:0 0 22px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.card > h2{margin-bottom:4px}
.card > .hint{margin-top:2px}
.hint{font-size:14px; color:var(--muted)}

label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); font-weight:600; margin-bottom:14px}
input,select,textarea{font:inherit; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:11px 12px; width:100%; text-transform:none; letter-spacing:0}
textarea{min-height:90px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px}

.btn{font:inherit; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-weight:600; border-radius:8px; padding:12px 20px}
.btn:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; color:var(--accent)}
.btn-small{padding:7px 12px; font-size:14px}
.btn-danger{background:transparent; color:var(--danger); border-color:var(--danger)}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.alert{padding:12px 15px; border-radius:8px; margin-bottom:18px; font-size:15px}
.alert.ok{background:var(--ok-soft); color:var(--ok)}
.alert.err{background:var(--danger-soft); color:var(--danger)}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tabs a{display:inline-block; padding:9px 15px; border-radius:8px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:15px}
.tabs a.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

.moment{border-top:1px solid var(--line); padding-top:16px; margin-top:16px}
.moment:first-of-type{border-top:none; padding-top:0; margin-top:0}
.moment h3{font-size:18px; margin-bottom:2px}
.moment .hint{margin-bottom:10px}

.fil{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;
  max-height:52vh; overflow-y:auto; padding:4px 2px; scroll-behavior:smooth}
.msg{max-width:82%; padding:11px 14px; border-radius:12px; font-size:15px}
.msg .qui{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; opacity:.7; margin-bottom:3px}
.msg.couple{align-self:flex-end; background:var(--accent-soft); color:#4d3a19}
.msg.dj{align-self:flex-start; background:var(--surface-2); border:1px solid var(--line)}
.msg.nouveau{border-left:3px solid var(--accent)}

table{border-collapse:collapse; width:100%; font-size:15px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding:9px 10px; border-bottom:1px solid var(--line)}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:none}

.pill{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.pill.on{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.pill.alerte{background:var(--danger-soft); color:var(--danger); border-color:transparent}

.code{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px;
  font-family:ui-monospace,Menlo,monospace; font-size:13px; overflow-x:auto; white-space:pre-wrap; word-break:break-all}
.steps{color:var(--muted); font-size:15px; padding-left:20px}
.steps li{margin-bottom:6px}
.grand{font-family:ui-monospace,Menlo,monospace; font-size:26px; letter-spacing:6px; text-align:center}
.foot{max-width:820px; margin:0 auto; padding:0 16px 40px; color:var(--muted); font-size:13px}
.foot-legal{margin-top:10px; line-height:1.6; font-size:12.5px; opacity:.85}
.foot-legal a{color:var(--muted); text-decoration:underline}

@media (max-width:640px){
  .row2,.row3{grid-template-columns:1fr}
  .wrap{padding:20px 14px 40px}
  .msg{max-width:92%}
}

/* photo du couple */
.photo-zone{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.photo-vue{width:150px; height:150px; flex:none; border-radius:12px; border:2px dashed var(--line);
  background:var(--surface-2) center/cover no-repeat; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:13px; color:var(--muted)}
.photo-vue.survol{border-color:var(--accent); background-color:var(--accent-soft)}
.cache{display:none}

/* case à cocher d'acceptation : du texte lisible, pas une étiquette de champ */
label.accord{flex-direction:row; align-items:flex-start; gap:10px; text-transform:none;
  letter-spacing:0; font-weight:400; font-size:14.5px; color:var(--ink); line-height:1.5}
label.accord input{width:auto; flex:none; margin-top:3px}
label.accord span{display:block}