@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Special+Elite&display=swap');

*{box-sizing:border-box; margin:0; padding:0; cursor:url("souris.png") 20 12, auto;}

html.js-cursor, html.js-cursor *{cursor:none !important;}

:root{
  --bg:#150d0a;
  --bg2:#1c1310;
  --paper:#e8ddd0;
  --brass:#d4682a;
  --copper:#8a3a1e;
  --rust:#4a2515;
  --warn:#d4451c;
  --text:#d6c4b0;
  --text-dim:#a08268;
  --line:#3a281c;
  --on-accent:#1a120c;
  --card-bg:#241a14;
  --paper-fixed:#e8ddd0;
  --bg-image:url("bg_dark.png");
  --scrim-a:rgba(10,7,5,0.72);
  --scrim-b:rgba(10,7,5,0.85);
}

:root[data-theme="light"]{
  --bg:#f2ece0;
  --bg2:#e8dcc4;
  --paper:#241a12;
  --text:#3a2c1e;
  --text-dim:#7a6650;
  --line:#cdbc9c;
  --card-bg:#faf5ea;
  --bg-image:url("bg_light.png");
  --scrim-a:rgba(244,240,230,0.68);
  --scrim-b:rgba(244,240,230,0.85);
}

html{scroll-behavior:smooth; font-size:18px;}

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--scrim-a), var(--scrim-b)),
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--copper) 12%, transparent), transparent 55%),
    var(--bg-image);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:center, center, center, center;
  background-size:auto, auto, auto, cover;
  background-attachment:scroll, scroll, scroll, fixed;
  color:var(--text);
  font-family:'Special Elite', monospace;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.lang-fr .en{display:none !important;}
.lang-en .fr{display:none !important;}

a{color:var(--copper);}

.hazard{
  height:8px;
  width:100%;
  background:repeating-linear-gradient(45deg, var(--warn) 0 10px, #0f0906 10px 20px);
  opacity:0.85;
}

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  background:var(--bg2);
  border-bottom:3px solid var(--brass);
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  position:sticky; top:0;
  z-index:100;
}

.header-left{display:flex; align-items:center; gap:28px;}
.header-right{display:flex; align-items:center; gap:12px;}

.logo-plate{
  background:transparent;
  padding:0;
}
header img{
  height:81px; width:auto;
  display:block;
}

nav.links{display:flex; gap:22px;}
nav.links a{
  font-family:'Staatliches', sans-serif;
  font-size:2.2rem;
  letter-spacing:0.12em;
  color:var(--text-dim);
  text-decoration:none;
}
nav.links a:hover{color:var(--brass);}
nav.links a.current{color:var(--brass);}

.nav-toggle{
  display:none;
  background:none; border:2px solid var(--brass);
  border-radius:2px;
  color:var(--text-dim);
  font-size:1.3rem; line-height:1;
  padding:6px 10px;
}

.lang-toggle, .theme-toggle{
  display:flex; border:2px solid var(--brass);
  border-radius:2px; overflow:hidden;
  font-family:'Staatliches', sans-serif;
  font-size:0.85rem;
}
.lang-toggle button, .theme-toggle button{
  background:var(--bg); color:var(--text-dim);
  border:none; padding:6px 14px;
  letter-spacing:0.08em; font-family:inherit;
}
.lang-toggle button.active, .theme-toggle button.active{background:var(--brass); color:var(--on-accent); font-weight:700;}

footer{
  margin-top:auto;
  padding:24px 24px;
  text-align:center;
  font-family:'Staatliches', sans-serif;
  font-size:0.72rem;
  color:var(--text-dim);
  letter-spacing:0.1em;
  background:var(--bg2);
  border-top:3px solid var(--brass);
  position:sticky;
  bottom:0;
  z-index:100;
}

@media (max-width:640px){
  .header-left{gap:12px;}
  .nav-toggle{display:block;}
  nav.links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    gap:0;
    background:var(--bg2);
    border-bottom:3px solid var(--brass);
    padding:4px 20px 16px;
  }
  nav.links.open{display:flex;}
  nav.links a{
    font-size:1.4rem;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
}