/* Mordrun — le site. Une seule feuille, aucune dépendance, rien à compiler :
   on dépose le dossier sur un hébergement et c'est en ligne. */

:root {
  --bitume: #1C1F24;
  --bitume-clair: #262B31;
  --braise: #FF5A2B;
  --mousse: #4F7A3C;
  --beton: #9AA3AC;
  --craie: #F0EEE9;
  --paille: #E8C547;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
  background: var(--bitume);
  color: var(--craie);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.dedans { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }

/* --- L'en-tête ---------------------------------------------------------- */

header.haut {
  position: sticky; top: 0; z-index: 10;
  background: rgba(28, 31, 36, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bitume-clair);
}
header.haut .dedans {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 1rem;
}
header.haut img { height: 24px; display: block; }
header.haut nav { display: flex; gap: 1.25rem; font-size: .95rem; }
header.haut nav a { color: var(--beton); text-decoration: none; }
header.haut nav a:hover { color: var(--craie); }

/* --- La bannière -------------------------------------------------------- */

.banniere { position: relative; overflow: hidden; }
.banniere img.fond {
  width: 100%; height: clamp(320px, 52vw, 560px); object-fit: cover;
  object-position: center 62%; display: block;
}
.banniere .voile {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28,31,36,.25) 0%, rgba(28,31,36,.55) 55%, var(--bitume) 100%);
}
.banniere .texte {
  position: absolute; inset: auto 0 0 0; padding-bottom: clamp(1.5rem, 5vw, 3.5rem);
}
.banniere h1 {
  font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1.05; margin: 0 0 .6rem;
  letter-spacing: -.02em;
}
.banniere p.signature {
  font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--craie);
  margin: 0 0 1.4rem; opacity: .9;
}

/* --- Les boutons -------------------------------------------------------- */

.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; font-size: 1rem;
}
.bouton.plein { background: var(--braise); color: #14161A; }
.bouton.creux { border: 1px solid rgba(240,238,233,.28); color: var(--craie); }
.bouton.bientot { opacity: .55; pointer-events: none; }

/* --- Les sections ------------------------------------------------------- */

section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
section h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0 0 .5rem; letter-spacing: -.01em;
}
section p.chapeau { color: var(--beton); font-size: 1.05rem; margin: 0 0 2rem; max-width: 44rem; }

.regles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.regle {
  background: var(--bitume-clair); border-radius: 18px; padding: 1.4rem;
  border: 1px solid rgba(240,238,233,.06);
}
.regle h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.regle p { margin: 0; color: var(--beton); font-size: .95rem; }
.regle .marque { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: .6rem; color: var(--braise); }

.deux { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .deux { grid-template-columns: 1.1fr .9fr; } }
.deux img { width: 100%; border-radius: 20px; display: block; }

.souligne { color: var(--paille); }

/* --- Le pied ------------------------------------------------------------ */

footer {
  border-top: 1px solid var(--bitume-clair); padding: 2.5rem 0 3rem;
  color: var(--beton); font-size: .9rem;
}
footer .dedans { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
footer a { color: var(--beton); }

/* --- Les pages de texte -------------------------------------------------- */

article { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
article h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .25rem; }
article h2 { font-size: 1.15rem; margin: 2.2rem 0 .5rem; }
article .date { color: var(--beton); font-size: .9rem; margin: 0 0 2rem; }
article table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
article th, article td {
  text-align: left; padding: .6rem .5rem;
  border-bottom: 1px solid var(--bitume-clair); vertical-align: top;
}
article ul { padding-left: 1.2rem; }