:root{
  --ink:#fff; --border:rgba(255,255,255,.18);
  --panel:rgba(0,0,0,.35); --panel2:rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:'Bebas Neue',sans-serif;
  background:url("/blog/images/fond.png") center/cover fixed no-repeat;

  color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column;
  letter-spacing:.04em;
}

/* header */
header.site{
  max-width:1900px; margin:22px auto 0; padding:0 32px; text-align:center;
  text-shadow:0 6px 22px rgba(0,0,0,.45); letter-spacing:.08em; font-size:1.8rem;
}

/* layout */
.wrap{
  width:100%; max-width:1900px; margin:24px auto 40px; padding:0 32px;
  display:grid; gap:40px; grid-template-columns:1fr 1fr;
}
@media (max-width:900px){ .wrap{ grid-template-columns:1fr; padding:0 16px; } }

/* hero gauche */
.hero{
  background:var(--panel); border:1px solid var(--border); border-radius:24px;
  min-height:600px; display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.hero .tag{
  position:absolute; top:18px; left:18px;
  font-size:1.2rem; opacity:.9; padding:.25rem .6rem;
  border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.25);
}
.hero h1{ margin:0; font-size:clamp(4rem,12vw,10rem); letter-spacing:.06em; text-shadow:0 6px 22px rgba(0,0,0,.45); }

/* rail droite */
.rail{
  background:var(--panel2); border:1px solid var(--border); border-radius:20px;
  min-height:600px; overflow:auto; box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.rail header{
  position:sticky; top:0; z-index:1; background:var(--panel2);
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.rail h2{ margin:0; font-size:1.8rem; letter-spacing:.08em; }
.rail .year{ opacity:.9; font-size:1.2rem; }

.roll{ list-style:none; margin:0; padding:0; }
.roll li{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.roll a{ display:flex; gap:14px; align-items:baseline; color:#fff; text-decoration:none; }
.roll .date{ font-size:1.05rem; opacity:.9; min-width:78px; }
.roll .title{ font-size:1.35rem; letter-spacing:.05em; line-height:1.2; }
.roll a:hover .title{ text-decoration:underline; }

/* retour bas droite */
.footer-link{ position:fixed; right:90px; bottom:60px; z-index:20; }
.footer-link a{
  font-size:1.9rem; color:#fff; text-decoration:none; opacity:.95;
  text-shadow:0 0 10px rgba(255,255,255,.6),0 0 20px rgba(255,255,255,.4);
  transition:transform .25s, text-shadow .25s, opacity .25s;
  padding-left:1.5rem; position:relative; letter-spacing:.06em;
}
.footer-link a::before{
  content:"↷"; position:absolute; left:-0.8rem; top:50%;
  transform:translateY(-50%); font-size:2rem; opacity:.98;
  text-shadow:0 0 8px rgba(255,255,255,.7);
}
footer.page{ margin-top:auto; text-align:center; padding:22px 16px; opacity:.9; letter-spacing:.06em; }

/* message d’erreur */
.err{ padding:14px 16px; color:#ffb2b2; opacity:.95; }