:root{
  --bg:#0b0f14;
  --bg-elev:#111824;
  --panel:#0f1622;
  --text:#e6edf3;
  --muted:#98a6b3;
  --brand:#f43f5e; /* rose/rouge moderne */
  --brand-2:#22c55e; /* vert accent */
  --line:#1f2a38;
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Layout helpers */
.container{width:min(1120px, 92%); margin:0 auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(8,12,18,.9), rgba(8,12,18,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0;}
.brand img{height:44px; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.main-nav{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.nav-link{
  color:var(--text); text-decoration:none; padding:.45rem .8rem; border-radius:999px;
  transition:all .15s ease; opacity:.9;
}
.nav-link:hover{background:var(--bg-elev); opacity:1}
.nav-link.cta{background:var(--brand); color:white; box-shadow:var(--shadow)}
.nav-link.cta:hover{transform:translateY(-1px);}

/* HERO */
.hero{
  position:relative; isolation:isolate;
  min-height:38vh;
  background: #0b0f14;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--hero, none);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(1.1) contrast(1.1) brightness(.75);
  transform:scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(80% 90% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.65));
}
.hero-inner{padding:5.2rem 0 2.2rem}
.hero h1, .hero-title{
  margin:0; font-size:clamp(28px, 4.2vw, 46px); letter-spacing:.5px; font-weight:800;
  text-shadow:0 8px 30px rgba(0,0,0,.6);
}

/* Panels / cards */
.card{
  background:linear-gradient(180deg, var(--panel), #0d1520);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-body{padding:1rem 1.1rem}
.card-title{margin:.2rem 0 .5rem; font-weight:700; font-size:1.05rem}
.card-muted{color:var(--muted); font-size:.92rem}

/* Example cards with image */
.example-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
}
.example{
  position:relative; display:block; color:inherit; text-decoration:none;
  overflow:hidden; border-radius:var(--radius); background:var(--bg-elev);
  border:1px solid var(--line);
}
.example .thumb{
  aspect-ratio:16/10; width:100%; object-fit:cover; display:block;
  filter:contrast(1.05) saturate(1.05);
}
.example .info{
  padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.example .tag{font-size:.78rem; color:var(--muted)}
.example .name{font-weight:700}
.example .btn{
  background:var(--brand); color:white; border:0; border-radius:10px;
  padding:.45rem .7rem; cursor:pointer; text-decoration:none;
}
.example:hover{transform:translateY(-1px)}
.example:hover .btn{filter:brightness(1.03)}

/* Latest list (discrète, une ligne par item) */
.latest{
  margin-top:10px; border-top:1px dashed var(--line); padding-top:10px;
}
.latest h3{margin:.2rem 0 .6rem; font-size:1rem; color:var(--muted)}
.latest-list{display:flex; flex-direction:column; gap:.25rem; font-size:.95rem}
.latest-list a{
  color:var(--text); text-decoration:none; opacity:.85;
}
.latest-list a:hover{opacity:1; text-decoration:underline}

/* Tables (account) */
table{border-collapse:collapse; width:100%; background:var(--panel); border-radius:var(--radius); overflow:hidden}
th,td{border:1px solid var(--line); padding:.6rem .7rem}
th{background:#0f1a2a; text-align:left}
tr:nth-child(even){background:#0d1624}

/* Flashes */
.flashes{margin:12px 0; display:flex; flex-direction:column; gap:8px}
.flash{padding:.6rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-elev)}
.flash.success{border-color:#1f8f4d33; background:linear-gradient(180deg, #0f1f17, #0b1510)}
.flash.error{border-color:#8f1f1f33; background:linear-gradient(180deg, #1f1010, #140b0b)}
.flash.info{border-color:#1f3b8f33; background:linear-gradient(180deg, #0e1424, #0b0f1a)}

/* Footer */
.site-footer{border-top:1px solid var(--line); margin-top:36px; padding:26px 0; color:var(--muted)}