/* ============================================================
   CHARTE ANNUAIRE — LA VIE À WATTEN
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg:        #F5F3EE;
  --card:      #FBF7EE;
  --gold:      #E3B64B;
  --gold-dark: #B8872C;
  --text:      #111111;
  --muted:     #5C5C5C;
  --border:    #E3B64B;
  --blue:      #1A2F6B;
  --blue-dark: #0D1B3E;
  --shadow:    0 10px 25px rgba(0,0,0,0.12);
  --shadow-hover: 0 16px 34px rgba(0,0,0,0.18);
  --radius:    16px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:'Outfit','Segoe UI',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* HEADER */
#site-header { background:var(--blue-dark); padding:10px 16px; box-shadow:0 4px 10px rgba(0,0,0,.2); position:sticky; top:0; z-index:100; }
.header-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.header-inner img { max-width:120px; height:auto; display:block; }
.header-nav { display:flex; flex-wrap:wrap; gap:5px; }
.header-nav a { padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); color:var(--gold); font-weight:700; font-size:.82rem; text-decoration:none; font-family:'Raleway',sans-serif; transition:background .18s; }
.header-nav a:hover { background:var(--gold); color:var(--blue-dark); }
.header-nav a.active { background:var(--gold); color:var(--blue-dark); }
.burger { display:none; background:var(--gold); border:none; border-radius:8px; padding:7px 11px; font-size:1.1rem; cursor:pointer; }

/* PAGE HERO */
.page-hero { background:var(--blue-dark); padding:28px 16px 24px; text-align:center; border-bottom:3px solid var(--gold); }
.page-hero h1 { color:var(--gold); font-family:'Raleway',sans-serif; font-size:clamp(20px,3vw,34px); font-weight:800; margin:0 0 6px; }
.page-hero p { color:rgba(255,255,255,.8); margin:0; font-size:.95rem; }

/* SEARCH */
.search-wrap { max-width:700px; margin:24px auto 0; padding:0 16px; }
.search-box { display:flex; gap:0; background:#fff; border:2px solid var(--gold); border-radius:999px; overflow:hidden; box-shadow:var(--shadow); }
.search-box input { flex:1; border:none; outline:none; padding:12px 18px; font-size:.95rem; font-family:'Outfit',sans-serif; background:transparent; color:var(--text); }
.search-box button { background:var(--gold); border:none; padding:12px 20px; cursor:pointer; font-size:1.1rem; transition:background .18s; }
.search-box button:hover { background:var(--gold-dark); }

/* FILTRES CATS */
.cats-wrap { max-width:1100px; margin:20px auto 0; padding:0 16px; display:flex; flex-wrap:wrap; gap:8px; }
.cat-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:2px solid var(--border); background:var(--card); color:var(--text); font-family:'Raleway',sans-serif; font-weight:700; font-size:.82rem; cursor:pointer; transition:all .18s; }
.cat-btn:hover { background:var(--gold); border-color:var(--gold-dark); }
.cat-btn.active { background:var(--blue); border-color:var(--blue-dark); color:#fff; }

/* SECTION WRAP */
.section-wrap { max-width:1100px; margin:24px auto 60px; padding:0 16px; }
.section-title { font-family:'Raleway',sans-serif; font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--blue-dark); margin:28px 0 14px; display:flex; align-items:center; gap:10px; }
.section-title::after { content:''; flex:1; height:2px; background:var(--gold); opacity:.5; border-radius:4px; }

/* CARDS GRID */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

/* PRO CARD */
.pro-card { background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; gap:10px; }
.pro-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.pro-card .badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--blue-dark); color:var(--gold); font-family:'Raleway',sans-serif; font-weight:700; font-size:.75rem; width:fit-content; }
.pro-card h3 { font-family:'Raleway',sans-serif; font-size:1.05rem; font-weight:800; margin:0; }
.pro-card .sub { font-size:.82rem; color:var(--muted); margin:-6px 0 0; }
.pro-card .info-row { display:flex; align-items:flex-start; gap:8px; font-size:.85rem; }
.pro-card .info-row span:first-child { flex-shrink:0; width:18px; text-align:center; }
.pro-card .btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.pro-card .btn { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:999px; background:var(--blue); color:#fff; font-family:'Raleway',sans-serif; font-weight:700; font-size:.78rem; text-decoration:none; transition:background .18s; }
.pro-card .btn:hover { background:var(--blue-dark); }
.pro-card .btn.gold { background:var(--gold); color:var(--blue-dark); }
.pro-card .btn.gold:hover { background:var(--gold-dark); color:#fff; }
.pro-card .btn-call { background:#27AE60; }
.pro-card .btn-call:hover { background:#1A8A4A; }

/* FICHE DETAIL */
.fiche-card { background:var(--card); border:2px solid var(--border); border-radius:calc(var(--radius)+2px); padding:26px; box-shadow:var(--shadow); }
.fiche-card .badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:var(--blue-dark); color:var(--gold); font-family:'Raleway',sans-serif; font-weight:700; font-size:.85rem; margin-bottom:12px; }
.fiche-card h1 { font-family:'Raleway',sans-serif; font-size:1.6rem; font-weight:800; margin:0 0 4px; }
.fiche-card .sub { font-size:.9rem; color:var(--muted); font-style:italic; margin:0 0 16px; }
.fiche-row { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:10px 0; border-top:1px solid rgba(0,0,0,.08); align-items:start; }
.fiche-row:first-of-type { border-top:none; padding-top:0; }
.fiche-lbl { font-size:.78rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:0 0 2px; }
.fiche-val { font-weight:600; font-size:.92rem; }
.fiche-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fiche-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px; background:var(--blue); color:#fff; font-family:'Raleway',sans-serif; font-weight:700; font-size:.88rem; text-decoration:none; transition:background .18s,transform .15s; }
.fiche-btn:hover { background:var(--blue-dark); transform:translateY(-1px); }
.fiche-btn.gold { background:var(--gold); color:var(--blue-dark); }
.fiche-btn.gold:hover { background:var(--gold-dark); color:#fff; }
.fiche-btn.green { background:#27AE60; }
.fiche-btn.green:hover { background:#1A8A4A; }

/* BACK BTN */
.back-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:var(--card); border:2px solid var(--border); color:var(--text); font-family:'Raleway',sans-serif; font-weight:700; font-size:.85rem; text-decoration:none; margin-bottom:16px; transition:background .18s; }
.back-btn:hover { background:var(--gold); }

/* MODIF BOX */
.modif-box { background:rgba(227,182,75,.1); border:2px solid var(--gold); border-radius:14px; padding:14px 16px; margin-top:4px; }
.modif-box h3 { font-family:'Raleway',sans-serif; font-size:.9rem; font-weight:800; margin:0 0 6px; }
.modif-box p { margin:0; font-size:.85rem; color:var(--muted); }
.modif-box a { color:var(--gold-dark); font-weight:700; }

/* NOTE */
.note-box { background:rgba(227,182,75,.08); border-left:4px solid var(--gold); padding:10px 14px; border-radius:10px; font-size:.85rem; color:var(--muted); }

/* HERO CATS */
.hero-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:24px; }
.hero-cat { background:var(--card); border:2px solid var(--border); border-radius:var(--radius); padding:18px; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:14px; transition:transform .2s,box-shadow .2s; box-shadow:var(--shadow); }
.hero-cat:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.hero-cat .icon { font-size:2rem; flex-shrink:0; }
.hero-cat .label { font-family:'Raleway',sans-serif; font-weight:800; font-size:1rem; }
.hero-cat .count { font-size:.8rem; color:var(--muted); margin-top:2px; }

/* FOOTER */
.site-footer { text-align:center; padding:18px 16px 28px; color:var(--muted); font-size:.85rem; background:rgba(255,255,255,.5); border-top:2px solid rgba(0,0,0,.08); margin-top:24px; }
.site-footer a { color:var(--gold-dark); font-weight:700; }

/* RESPONSIVE */
@media(max-width:768px) {
  .burger { display:block; }
  .header-nav { display:none; flex-direction:column; width:100%; padding:8px 0; gap:4px; }
  .header-nav.open { display:flex; }
  .header-nav a { border-radius:10px; }
}