/* =========================================================
   Thème & variables
   ========================================================= */
:root{
  --bg:#0b1020; --bg-2:#10162b; --card:rgba(255,255,255,0.06);
  --text:#e8ecf5; --muted:#b8c0d4; --accent:#6ea8fe;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Quiz */
  --panel:#121318; --border:#242735; --chip:#1c1f29;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --bg-2:#ffffff; --card:rgba(10,20,40,.04);
    --text:#0c1326; --muted:#41507a; --accent:#3b6df6;
    --shadow:0 10px 30px rgba(0,0,0,.08);

    --panel:#ffffff; --border:#e6e8f0; --chip:#f3f5f9;
  }
}

/* =========================================================
   Reset de base
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(110,168,254,.12), transparent),
    radial-gradient(1000px 700px at 90% 110%, rgba(59,109,246,.12), transparent),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* =========================================================
   Composants génériques
   ========================================================= */
.wrap-center{
  min-height:100svh;
  padding:clamp(16px,3vw,40px);
  display:grid;
  place-items:center;
}

.card{
  width:min(960px,100%);
  border-radius:24px;
  background:var(--card);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);
  padding:clamp(20px,3.2vw,44px);
}

/* =========================================================
   Header de marque (logo + texte)
   ========================================================= */
.header-brand{
  display:flex;
  align-items:flex-start;   /* top-align */
  gap:16px;
  margin-bottom:clamp(16px,2.2vw,24px);
}

.logo-box{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  align-self:flex-start;    /* avoid grid/flex stretch feedback */
  height:auto;              /* will be set via JS to .brand height */
  width:auto;
  overflow:visible;         /* no cropping */
  position:relative;
  flex:0 0 auto;
}

.logo-box img{
  display:block;
  height:100%;              /* fills the computed height */
  width:auto;               /* keep aspect ratio */
  object-fit:contain;
}

.logo-fallback{
  display:none;
  height:100%;
  width:auto;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:clamp(18px,3.5vw,28px);
  color:var(--text);
  letter-spacing:.5px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand h1{margin:0; font-size:clamp(24px,4.2vw,40px); line-height:1.1; letter-spacing:-.02em}
.brand .tagline{margin:0; color:var(--muted); font-size:clamp(14px,2.5vw,18px)}

/* Tag */
.tag{
  display:inline-flex; gap:6px; align-items:center;
  border:1px solid var(--border); background:var(--chip);
  padding:5px 10px; border-radius:999px; font-size:12px;
}

/* Bouton */
.btn{
  all:unset; cursor:pointer;
  background:var(--accent); color:#fff;
  padding:10px 14px; border-radius:10px;
  font-weight:600; box-shadow:var(--shadow);
  text-align:center; display:inline-block;
}
.btn.secondary{background:#2b2f3c; color:var(--text)}
.btn.ghost{background:transparent; border:1px solid var(--border)}
a.btn{text-decoration:none}

/* Pastille statut */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  padding:10px 14px; border-radius:999px;
  font-size:clamp(13px,2.4vw,16px); color:var(--muted);
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(110,168,254,.7);
  animation:ping 1.4s infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(110,168,254,.7)}
  70%{box-shadow:0 0 0 8px rgba(110,168,254,0)}
  100%{box-shadow:0 0 0 0 rgba(110,168,254,0)}
}

/* Pied de page */
.foot{
  margin-top:clamp(18px,3vw,24px); color:var(--muted);
  font-size:clamp(12px,2.2vw,14px); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Liens */
a.link, .contact-link{color:var(--accent); text-decoration:none; font-weight:500}

/* Motion/typo */
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }
@media (max-width:520px){
  .header-brand{gap:12px}
  .brand h1{font-size:clamp(22px,7vw,30px)}
  .logo-box{max-width:140px}
}

/* =========================================================
   QUIZ VIEWER (golf.html) — inchangé
   ========================================================= */
header#appHeader{
  position:sticky; top:0; z-index:40;
  background:rgba(10,12,18,.75);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
  transition:transform .28s ease;
}
header#appHeader.header-hidden{transform:translateY(-100%)}
header#appHeader .wrap{max-width:1200px; margin:0 auto; padding:16px 20px}
header#appHeader + main{max-width:1200px; margin:14px auto 60px; padding:0 20px}

.title-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
h1{margin:0; font-size:20px}

.controls{display:grid; grid-template-columns:1fr auto auto auto; gap:10px; margin-top:12px}
.control{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
  display:flex; align-items:center; gap:10px;
}
.control input[type="text"]{all:unset; flex:1; font-size:14px}

.drop{
  border:2px dashed var(--border); border-radius:14px;
  padding:14px; text-align:center; color:var(--muted);
}

.table-wrap{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  position:sticky; top:0; background:#11131a;
  color:var(--muted); text-align:left;
  font-weight:600; padding:10px; border-bottom:1px solid var(--border);
  cursor:pointer;
}
tbody td{padding:10px; border-top:1px solid var(--border); vertical-align:top}
tbody tr:hover{background:rgba(255,255,255,.02)}
.qid{font-weight:700}
.q{font-weight:600}
.correct{
  background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.35);
  color:#d1ffe2; padding:2px 6px; border-radius:8px; display:inline-block;
}

.pagination{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
select,input[type="number"]{
  background:#0f1220; border:1px solid var(--border);
  color:var(--text); padding:8px 10px; border-radius:10px; font-size:13px;
}
.muted{color:var(--muted)}

@media (prefers-color-scheme: light){
  header#appHeader{background:rgba(255,255,255,.82); border-bottom-color:var(--border)}
  .tag{background:var(--chip); border-color:var(--border)}
  .table-wrap{background:var(--panel); border-color:var(--border)}
  thead th{background:#f7f8fb; color:#5c6b8a; border-bottom-color:var(--border)}
  tbody td{border-top-color:var(--border)}
  tbody tr:hover{background:rgba(0,0,0,.03)}
  select,input[type="number"]{background:#fff; border-color:var(--border); color:var(--text)}
  .correct{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28); color:#166534}
  details summary{background:#fff; border:1px solid var(--border)}
  .drop{background:#fff; border-color:var(--border); color:#5c6b8a}
  .btn.secondary{background:#e9edf5; color:#0c1326}
}

/* =========================================================
   Responsive tableau (golf.html)
   ========================================================= */
@media(max-width:900px){
  .controls{grid-template-columns:1fr}
  .controls .btn,.controls label.btn{width:100%}
  thead{display:none}
  .table-wrap{border:none; background:transparent; box-shadow:none}
  table,tbody,tbody tr{display:block}
  tbody tr{
    margin:0 0 12px 0; border:1px solid var(--border);
    border-radius:12px; padding:8px 10px; background:var(--panel);
  }
  tbody td{display:block; border:none; padding:8px 0}
  tbody td::before{
    content:attr(data-label);
    display:block; font-weight:600; color:var(--muted); margin-bottom:6px;
  }
  details summary{
    list-style:none; cursor:pointer; user-select:none;
    padding:8px 10px; border:1px solid var(--border); border-radius:10px;
  }
  details[open] summary{margin-bottom:8px}
  .pagination{flex-direction:column; align-items:stretch; gap:8px}
  .pagination .left,.pagination .right{display:flex; justify-content:center; gap:8px}
  #goPage{width:100%}
}
@media (hover:none){
  .btn{padding:12px 16px}
  select,input[type="number"]{padding:12px}
  .control{padding:12px 14px}
}

/* Mobile-safe logo sizing */
.header-brand{display:flex; align-items:flex-start}
.logo-box{align-self:flex-start; height:auto; width:auto; overflow:visible; flex:0 0 auto}
.logo-box img{height:100%; width:auto; object-fit:contain; display:block; max-width:100%}

@media (max-width:520px){
  .logo-box{max-width:120px} /* tighter on small screens */
}