/* Styles communs aux démos web des projets — Mathieu Cuenca */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080c17;--bg2:#0c1220;--bg3:#101828;--bg4:#162035;
  --gold:#c8a84b;--gold2:#e0c06e;--gold-dim:rgba(200,168,75,.12);--gold-line:rgba(200,168,75,.28);
  --fg:#eeeae0;--fg2:rgba(238,234,224,.72);--fg3:rgba(238,234,224,.42);--line:rgba(238,234,224,.09);
  --ok:#52d4a8;--bad:#ff7a8a;--blue:#8b9fff;
}
html[data-theme="light"]{--bg:#f6f3ea;--bg2:#efeadc;--bg3:#fbf9f3;--bg4:#e7e0cd;--gold:#8a6d1c;--gold2:#a8861f;--gold-dim:rgba(138,109,28,.1);--gold-line:rgba(138,109,28,.32);--fg:#14182a;--fg2:rgba(20,24,42,.78);--fg3:rgba(20,24,42,.55);--line:rgba(20,24,42,.12);--ok:#12805f;--bad:#c0283e;--blue:#4a5fd6;color-scheme:light}
body{background:var(--bg);color:var(--fg);font-family:'DM Sans',system-ui,sans-serif;font-weight:300;line-height:1.6;min-height:100vh}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400}
a{color:var(--gold)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar a.back{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-weight:500}
.topbar .title{font-family:'Cormorant Garamond',serif;font-size:1.25rem}
.notice{margin:1rem auto 0;max-width:1100px;padding:.8rem 1.1rem;border:1px solid var(--gold-line);background:var(--gold-dim);font-size:.8rem;color:var(--fg2)}
.wrap{max-width:1100px;margin:0 auto;padding:1.25rem 1.5rem 4rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0}
.tab,.btn{font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.1rem;border:1px solid var(--line);background:transparent;color:var(--fg2);cursor:pointer;transition:.2s}
.tab:hover,.btn:hover{border-color:var(--gold-line);color:var(--gold)}
.tab.on,.btn.pri{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.btn.pri:hover{background:var(--gold2);color:var(--bg)}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:.35rem .7rem;font-size:.62rem}
.bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
input,select{font-family:inherit;font-size:.85rem;padding:.55rem .75rem;background:var(--bg3);color:var(--fg);border:1px solid var(--line);min-width:0}
input:focus,select:focus,.btn:focus-visible,.tab:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
table{width:100%;border-collapse:collapse;background:var(--bg3);border:1px solid var(--line)}
th{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--gold-line);font-weight:500}
td{padding:.7rem .9rem;border-bottom:1px solid var(--line);font-size:.86rem;vertical-align:middle}
tr:hover td{background:var(--gold-dim)}
.tbl-wrap{overflow-x:auto}
.empty{padding:2rem;text-align:center;color:var(--fg3)}
.pill{display:inline-block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border:1px solid var(--line);color:var(--fg2)}
.pill.ok{color:var(--ok);border-color:var(--ok)} .pill.bad{color:var(--bad);border-color:var(--bad)} .pill.gold{color:var(--gold);border-color:var(--gold-line)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{background:var(--bg3);border:1px solid var(--line);padding:1.1rem;transition:.2s}
.card:hover{border-color:var(--gold-line)}
.big{font-family:'Cormorant Garamond',serif;font-size:2.8rem;line-height:1;color:var(--gold)}
.lbl{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
dialog{background:var(--bg2);color:var(--fg);border:1px solid var(--gold-line);padding:1.5rem;width:min(440px,92vw);margin:auto}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{margin-bottom:1rem;font-size:1.5rem}
dialog label{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin:.7rem 0 .25rem}
dialog input,dialog select{width:100%}
.actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.25rem}
.meter{height:8px;background:var(--line);margin-top:.4rem}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--gold-line);padding:.6rem 1.2rem;font-size:.8rem;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1}
@media(max-width:640px){.wrap{padding:1rem}th,td{padding:.55rem .6rem}.topbar .title{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.theme-btn{font-size:1rem;line-height:1;width:36px;height:36px;border:1px solid var(--line);background:transparent;color:var(--gold);cursor:pointer;transition:.2s}
.theme-btn:hover{border-color:var(--gold-line);background:var(--gold-dim)}
.theme-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html{color-scheme:dark}