/* Direction artistique : mariage d'hiver — linge ivoire, vert sapin, pommes de pin, touches dorées, lueur de bougie */
@font-face{font-family:"MariageSerif";src:url(/fonts/serif-regular.woff) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"MariageSerif";src:url(/fonts/serif-italic.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --bg:#f6f2ea;--surface:#fffdf8;--fg:#25302a;--muted:#6e695f;--line:#e4dccd;
  --pine:#2f4a3b;--pine-deep:#1c3026;--gold:#a8844f;--gold-soft:#d8c199;--ivory:#fbf7ef;
  --accent:var(--pine);--on:#fbf7ef;--outline:var(--pine);--danger:#9c3b2e;
  --shadow:0 1px 2px rgba(40,34,20,.06),0 6px 18px rgba(40,34,20,.07);
  --serif:"MariageSerif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#121814;--surface:#1a221d;--fg:#ece6da;--muted:#a49e92;--line:#2d3731;
  --gold:#cfae74;--gold-soft:#8a7450;--accent:#cfae74;--on:#1b1609;--outline:#cfae74;--danger:#e3907f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);color-scheme:dark;
}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--sans);background:var(--bg);color:var(--fg);min-height:100vh}
header,main{max-width:1040px;margin:0 auto;padding:1.25rem 1rem}
header{display:flex;flex-wrap:wrap;gap:.9rem 1rem;align-items:center;justify-content:space-between;padding-top:1.75rem}
h1{font-family:var(--serif);font-weight:500;font-size:1.75rem;line-height:1.2;margin:0;letter-spacing:.01em}
.muted{color:var(--muted)}
a{color:var(--accent)}

/* ---------- Bannière ---------- */
.banner{position:relative;overflow:hidden;text-align:center;color:var(--ivory);
  background:radial-gradient(120% 90% at 50% 120%,rgba(255,196,112,.20),transparent 60%),radial-gradient(60% 80% at 50% 0%,rgba(255,255,255,.06),transparent 70%),var(--pine-deep);
  padding:3.1rem 1rem 2.2rem}
@media(prefers-color-scheme:dark){.banner{background:radial-gradient(120% 90% at 50% 120%,rgba(255,196,112,.16),transparent 60%),#0d1611}}
.banner p{margin:0;position:relative}
.banner .kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:#d8c199;padding-left:.42em}
.banner .names{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.1;margin-top:.45rem;letter-spacing:.01em}
.banner .names .amp{font-style:italic;color:#e2c48e;font-size:.8em;padding:0 .08em}
.banner .date{margin-top:.6rem;font-family:var(--serif);font-style:italic;color:#e9dcc3;font-size:1.05rem}
.banner .sprig{display:block;margin:.9rem auto 0;width:min(240px,66%);height:auto;color:#d6b781}
/* Guirlande lumineuse */
.lights{position:absolute;top:0;left:0;right:0;height:34px;pointer-events:none}
.lights svg{position:absolute;inset:0;width:100%;height:100%}
.lights i{position:absolute;width:7px;height:7px;margin:-2px 0 0 -3.5px;border-radius:50%;background:#ffe2a6;
  box-shadow:0 0 6px 2px rgba(255,204,120,.75),0 0 16px 6px rgba(255,190,100,.25);animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.lights i{animation:none}}

/* ---------- Boutons & champs ---------- */
.btn,button{font:500 .95rem/1.2 var(--sans);letter-spacing:.01em;border:1px solid var(--accent);background:var(--accent);color:var(--on);
  padding:.7rem 1.15rem;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.btn:hover,button:hover{box-shadow:0 2px 10px rgba(47,74,59,.18)}
.btn.alt,button.alt{background:transparent;color:var(--outline);border-color:var(--outline)}
.btn.alt:hover,button.alt:hover{background:color-mix(in srgb,var(--outline) 8%,transparent)}
button.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
button:disabled{opacity:.45;cursor:default;box-shadow:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input[type=text],input[type=password]{font:inherit;width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit}
input[type=text]:focus,input[type=password]:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
label{display:block;margin:1rem 0 .35rem;font-weight:500;font-size:.92rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.row.tight{margin:0}
[data-f][aria-pressed=true]{background:var(--accent);color:var(--on)}

/* Formulaires en carte (envoi, connexion) */
body[data-page=Envoyer] main,#login{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.5rem}
body[data-page=Envoyer] main{max-width:640px;margin:0 auto 2rem}
body[data-page=Envoyer] header{max-width:640px}
#login{max-width:420px;margin:0 auto}

/* ---------- Galeries ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
@media(min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}}
.tile{position:relative;aspect-ratio:1;background:var(--line);overflow:hidden;border-radius:8px;box-shadow:var(--shadow);cursor:pointer}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
@media(hover:hover){.tile:hover img,.tile:hover video{transform:scale(1.03)}}
.pub .tile img,.pub .tile video{pointer-events:none}
.tile .badge{position:absolute;top:6px;left:6px;background:#2f4a3b;color:#fbf7ef;font-size:.72rem;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.tile .badge.off{background:rgba(30,30,28,.7);color:#fff}
.tile .bar{position:absolute;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:4px;padding:18px 6px 6px;background:linear-gradient(transparent,rgba(12,20,15,.88) 40%)}
.tile .bar button{flex:1;padding:.35rem .4rem;font-size:.78rem}
.tile .bar button:not(.danger){background:#fbf7ef;border-color:#fbf7ef;color:#1c3026}
.tile .bar button.danger{color:#ffb3a6;border-color:#ffb3a6}
.tile .bar span{color:#fff;font-size:.75rem;flex:1 1 100%;padding:0 2px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tile .vid{position:absolute;bottom:6px;left:6px;color:#fff;font-size:.75rem;background:rgba(12,20,15,.6);border-radius:999px;padding:1px 8px;pointer-events:none}

/* Sélection multiple */
.tile .check{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.22);box-shadow:0 0 0 1px rgba(0,0,0,.25);display:none;pointer-events:none}
.selecting .tile .check{display:block}
.tile.on{box-shadow:0 0 0 3px var(--gold),var(--shadow)}
.tile.on .check{background:var(--gold);border-color:#fff}
.tile.on .check::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.selecting .tile.on img,.selecting .tile.on video{transform:scale(.9)}
.selbar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(40,34,20,.08)}
.selbar #selcount{font-family:var(--serif);font-size:1.1rem;margin-right:auto}
.selmsg{flex-basis:100%;margin:0;text-align:center;color:var(--muted);font-size:.9rem}
.selmsg:empty{display:none}
.selecting main{padding-bottom:2rem}

/* Visionneuse */
.box{position:fixed;inset:0;background:rgba(10,17,13,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;padding:1rem;color:#f3ecdf}
.box img,.box video{max-width:100%;max-height:80vh;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.box p{font-family:var(--serif);font-style:italic;font-size:1.1rem;margin:.9rem 0 0}
.box .row{justify-content:center}
.box .btn{background:#cfae74;border-color:#cfae74;color:#1b1609}
button.alt.light{color:#f3ecdf;border-color:rgba(243,236,223,.7)}

/* Messages */
.msg{padding:.75rem .9rem;border-radius:10px;margin:1rem 0;border:1px solid var(--line);background:var(--surface)}
.msg.err{border-color:var(--danger);color:var(--danger)}
progress{width:100%;accent-color:var(--gold);height:10px}
#e{font-family:var(--serif);font-style:italic;font-size:1.15rem;text-align:center;padding:2.5rem 0}