/* Base partagée : reset, polices, en-tête, filtres, boutons.
   Utilisée par index.php et admin.php. */
:root {
  --paper:#F3F4F1; --card:#FFFFFF; --ink:#1B1F22; --muted:#6B7280;
  --line:#E2E4E0; --accent:#A4243B; --ok:#2E7D5B; --off:#C9CCC7; --gold:#E9B44C;
}
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font:15px/1.5 'Archivo',system-ui,sans-serif; }
a { color:inherit; }

@keyframes fadeSlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeSlideUp   { from { opacity:0; transform:translateY(8px);  } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn        { from { opacity:0; } to { opacity:1; } }
@keyframes popIn         { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

/* En-tête */
header { background:var(--ink); color:#F3F4F1; padding:20px 28px; display:flex; flex-wrap:wrap; gap:24px; align-items:baseline; animation:fadeSlideDown .45s ease both; position:relative; z-index:50; }
header h1 { font-size:20px; font-weight:800; letter-spacing:.02em; font-stretch:80%; text-transform:uppercase; }
header h1 span { color:var(--gold); }
header a { color:#C9CCC7; font-size:13.5px; text-decoration:none; transition:color .15s ease; }
header a:hover { color:#fff; }
.stats { display:flex; gap:28px; flex-wrap:wrap; }
.stat b { font-size:19px; font-weight:800; }
.stat small { display:block; color:#9AA0A6; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.stat.opp b { color:var(--gold); }

/* Nav (partials/nav.php) : liens en ligne sur desktop, menu déroulant sur mobile */
.header-right { margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-toggle { display:none; }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:4px; width:26px; height:22px; cursor:pointer; }
.nav-burger span { display:block; width:100%; height:2px; background:#F3F4F1; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-links { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.nav-links a { position:relative; padding:4px 2px; }
.nav-links a.active { color:#fff; font-weight:700; }
.nav-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--gold); border-radius:2px; }

/* Filtres */
.filters { background:var(--card); border-bottom:1px solid var(--line); padding:14px 28px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; animation:fadeSlideDown .45s ease .05s both; transition:opacity .2s ease; }
.filters.is-loading { opacity:.6; }
.filters input[type=text], .filters select {
  font:inherit; font-size:13.5px; padding:8px 10px; border:1px solid var(--line);
  border-radius:6px; background:#FBFBFA; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.filters input[type=text]:hover, .filters select:hover { border-color:var(--muted); }
.filters input[type=text]:focus, .filters select:focus { border-color:var(--accent); }
.filters input[type=text] { min-width:220px; }
.filters label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; flex-direction:column; gap:3px; }

.btn { font:inherit; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:6px; border:none; cursor:pointer; text-decoration:none; display:inline-block; transition:background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#8a1e32; transform:translateY(-1px); box-shadow:0 4px 10px rgba(164,36,59,.25); }
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-primary:disabled { background:#C9CCC7; cursor:not-allowed; }
.btn-ghost { background:none; border:1px solid var(--line); color:var(--muted); }
.btn-ghost:hover { border-color:var(--muted); color:var(--ink); transform:translateY(-1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

@media (max-width:720px){
  header,.filters{padding-left:14px;padding-right:14px}
  header{gap:12px 20px}
  .filters{padding-top:12px;padding-bottom:12px}
  .filters input[type=text]{min-width:0; flex:1 1 100%}
  .filters label{flex:1 1 auto}
  .filters .btn{flex:1 1 auto; text-align:center}

  .stats{flex:0 0 100%}
  .header-right{margin-left:0; flex:0 0 100%; justify-content:flex-end}
  .nav-burger{display:flex}
  .nav-links{
    display:none; position:absolute; top:100%; right:14px; margin-top:8px; z-index:30;
    flex-direction:column; align-items:flex-start; gap:2px; background:#262B2F;
    border:1px solid #383D40; border-radius:10px; padding:8px; min-width:180px;
    box-shadow:0 10px 24px rgba(0,0,0,.28); animation:fadeSlideDown .18s ease both;
  }
  .nav-links a{width:100%; padding:9px 10px; border-radius:6px}
  .nav-links a:hover{background:#33393D}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:#33393D}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:480px){
  header h1{font-size:17px}
  .stats{gap:16px 20px}
  .stat b{font-size:16px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }