/* ---- Studio Ren AOI – Styles de base ---- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e0e11;
  --card:#15151b;
  --text:#e9e9ee;
  --muted:#b9b9c9;
  --line:#242434;
  --accent:#7aa2ff;
}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0b0b0e, var(--bg));
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrapper{max-width:1100px;margin:0 auto;padding:24px}
header{position:sticky;top:0;background:rgba(11,11,14,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{display:flex;gap:12px;align-items:center}
.brand-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#7aa2ff,#a07bff)}
.brand-name{font-weight:700;letter-spacing:.5px}
nav ul{display:flex;gap:18px;list-style:none}
nav a{color:var(--text);opacity:.9}
.mobile-toggle{display:none}
.hero{padding:64px 24px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin-bottom:14px}
.hero p{color:var(--muted);max-width:780px}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)}
.btn.primary{background:linear-gradient(135deg,#7aa2ff33,#a07bff33);border-color:#39406a}
.section{padding:40px 24px;border-bottom:1px solid var(--line)}
.section h2{font-size:22px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card img{display:block;width:100%;height:220px;object-fit:cover}
.card .pad{padding:14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gallery a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gallery img{width:100%;height:220px;object-fit:cover;display:block}
footer{padding:28px 24px;color:var(--muted)}
form{display:grid;gap:12px;max-width:520px}
input,textarea{background:#0f0f14;border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--text)}
.small{font-size:12px;color:var(--muted)}
@media (max-width:820px){
  .card{grid-column:span 6}
}
@media (max-width:560px){
  nav ul{display:none}
  .mobile-toggle{display:block}
}