:root{
  --gold:#C2B083;
  --black:#060606;
  --bg:#E7E2CE;    /* fond doré léger du site */
  --white:#ffffff;
  --border:#d6d0bb;
}

/* Reset basique */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--black);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* ===== HEADER FULL WIDTH ===== */
header{
  width:100%;
  background:var(--white);
  border-bottom:2px solid var(--gold);
}
.header-inner{
  max-width:1320px;
  width:95vw;
  margin:0 auto;
  padding:clamp(12px,2vw,20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand-logo{
  max-width:240px;
  width:clamp(160px,25vw,240px);
  height:auto; display:block;
}
.header-text{
  text-align:right;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--black);
  letter-spacing:.02em;
}

/* ===== CONTENT WRAPPER ===== */
.wrap{
  max-width:1320px;
  width:95vw;
  margin:0 auto;
  padding:clamp(14px,2vw,24px);
}
.reader-card{
  margin-top:clamp(14px,2vw,22px);
  background:var(--white);
  border-radius:16px;
  padding:clamp(12px,2vw,18px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--border);
  padding:8px 0 14px;
  margin-bottom:14px;
}
.head h2{ margin:0; font-size:clamp(18px,2.2vw,22px); font-weight:700; }
.tools{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  appearance:none; border:2px solid var(--gold);
  background:var(--gold); color:#fff;
  padding:10px 16px; border-radius:10px;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  transition:transform .06s ease, filter .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(0.95); }
.btn.outline{ background:transparent; color:var(--black); }

.iframe-wrap{
  position:relative; width:100%; max-width:1200px; margin:0 auto;
  border-radius:12px; overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--border);
  background:#fafafa;
}
@supports not (aspect-ratio:16/9){
  .iframe-wrap{ padding-top:56.25%; height:0; }
  .iframe-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }
}
.iframe-wrap iframe{ width:100%; height:100%; border:0; }

/* ===== FOOTER ===== */
footer{
  width:100%;
  border-top:1px solid var(--border);
  padding:18px 0 28px;
  text-align:center; color:#444; margin-top:20px;
  background:var(--white);
}
footer nav{ margin-top:8px; }
footer a{ color:var(--black); text-decoration:none; margin:0 8px; font-size:14px; }
footer a:hover{ text-decoration:underline; }

/* ===== POPIN (index) ===== */
.mx-popin-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  z-index:9999;
}
.mx-popin-backdrop.show{ display:flex; }
.mx-popin{
  width:min(680px,92vw);
  background:#fff; color:#060606;
  border:2px solid var(--gold); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden;
}
.mx-popin header{
  padding:14px 18px; background:#FFF; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mx-popin header h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; }
.mx-popin .mx-close{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; padding:6px; border-radius:8px;
}
.mx-popin .mx-close:hover{ background:#f3f3f3; }
.mx-body{ padding:18px; }
.mx-body p{ margin:0 0 12px 0; }

.mx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mx-grid .full{ grid-column:1 / -1; }
.mx-field{ display:flex; flex-direction:column; gap:6px; }
.mx-field label{ font-size:13px; font-weight:700; }
.mx-input, .mx-select, .mx-multi{
  padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none;
}
.mx-input:focus, .mx-select:focus, .mx-multi:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,176,131,.25);
}
.mx-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.mx-btn{
  appearance:none; border:2px solid var(--gold); background:var(--gold); color:#fff;
  padding:10px 16px; border-radius:10px; font-weight:800; cursor:pointer;
}
.mx-btn.outline{ background:#fff; color:#060606; }
.mx-success{
  display:none; padding:14px; border:1px solid #d9efd8; background:#f0fbef; border-radius:10px; color:#215e21; margin-top:10px;
}
.mx-error{
  display:none; padding:14px; border:1px solid #ffd4d4; background:#fff3f3; border-radius:10px; color:#8a1f1f; margin-top:10px;
}
@media (max-width:680px){
  .mx-grid{ grid-template-columns:1fr; }
  .mx-actions{ flex-direction:column-reverse; align-items:stretch; }
}

/* ===== PAGES SIMPLES (mentions / confidentialité) ===== */
.page-simple{
  max-width:920px; width:92vw; margin:40px auto;
  background:#fff; padding:28px; border-radius:14px; border:1px solid var(--border);
}
.page-simple h1{ font-size:24px; margin:0 0 18px 0; }
.page-simple h2{ font-size:18px; margin-top:26px; }
.page-simple a{ color:#2b6cb0; }