/*
 * Vitrine Démiurges — feuille de style unique (accueil + pages légales).
 * Palette et polices reprises de l'application (client/src/index.css) pour que
 * le passage de la vitrine à l'app ne donne pas l'impression de changer de site.
 */

@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --or: #d9a441;
  --or-clair: #dfb65c;
  --or-pale: #efdcac;
  --or-sombre: #b98730;
  --or-profond: #6f4f1e;
  --pierre-950: #0c0a09;
  --pierre-900: #16130f;
  --pierre-850: #1c1917;
  --pierre-800: #292524;
  --pierre-700: #44403c;
  --pierre-400: #a8a29e;
  --pierre-300: #d6d3d1;
  --texte: #e7e5e4;
  --largeur: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pierre-950);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain discret : évite l'aplat numérique un peu mort */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: 'Cinzel', Georgia, serif;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-clair); }

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

/* ── En-tête ─────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 10, 9, 0.9);
  border-bottom: 1px solid var(--pierre-800);
  backdrop-filter: blur(10px);
}
header .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.marque {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--or);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.marque img { width: 26px; height: 26px; border-radius: 4px; }
nav { display: flex; gap: 1.7rem; align-items: center; }
nav a { color: var(--pierre-300); font-size: 0.95rem; }
nav a:hover { color: var(--or); }

.bouton {
  display: inline-block;
  background: linear-gradient(180deg, var(--or-clair), var(--or-sombre));
  color: #14110d;
  font-weight: 700;
  padding: 0.68rem 1.4rem;
  border-radius: 6px;
  border: 1px solid var(--or-clair);
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 14px rgba(217, 164, 65, 0.18);
}
.bouton:hover {
  color: #14110d;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(217, 164, 65, 0.32);
}
.bouton.secondaire {
  background: transparent;
  color: var(--or);
  border-color: var(--pierre-700);
  box-shadow: none;
}
.bouton.secondaire:hover {
  border-color: var(--or);
  background: rgba(217, 164, 65, 0.07);
  color: var(--or-clair);
}

/* ── Héros ───────────────────────────────────────────────── */
.heros {
  padding: 5.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.heros::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(217, 164, 65, 0.17), transparent 65%);
  pointer-events: none;
}
.heros-grille {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
.heros h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  font-weight: 900;
  margin-bottom: 1.3rem;
  letter-spacing: -0.01em;
}
.heros h1 .accent {
  display: block;
  background: linear-gradient(100deg, var(--or-pale), var(--or) 45%, var(--or-sombre));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heros .accroche {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--pierre-400);
  max-width: 34rem;
  margin: 0 0 2rem;
}
.actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.mention { margin-top: 1.3rem; font-size: 0.86rem; color: #78716c; }

/* Dé 20 faces décoratif */
.de-visuel { display: flex; justify-content: center; align-items: center; }
.de-visuel svg {
  width: min(330px, 78vw);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(217, 164, 65, 0.28));
  animation: flotter 7s ease-in-out infinite;
}
@keyframes flotter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2.5deg); }
}

/* ── Bandeau de confiance ────────────────────────────────── */
.bandeau {
  border-block: 1px solid var(--pierre-800);
  background: var(--pierre-900);
  padding: 1.4rem 0;
}
.bandeau .contenu {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--pierre-400);
}
.bandeau span { display: flex; align-items: center; gap: 0.5rem; }
.bandeau svg { width: 17px; height: 17px; color: var(--or); flex-shrink: 0; }

/* ── Sections ────────────────────────────────────────────── */
section { padding: 4.8rem 0; position: relative; }
section.alt { background: var(--pierre-900); border-block: 1px solid var(--pierre-800); }

.titre-section { text-align: center; margin-bottom: 3rem; }
.titre-section h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.titre-section p { color: var(--pierre-400); max-width: 40rem; margin: 0 auto; }

/* Ornement de séparation (motif de grimoire) */
.ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 1.4rem;
  max-width: 190px;
  color: var(--or-profond);
}
.ornement::before, .ornement::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--or-profond));
}
.ornement::after { background: linear-gradient(90deg, var(--or-profond), transparent); }
.ornement svg { width: 13px; height: 13px; color: var(--or); flex-shrink: 0; }

/* ── Fonctionnalités ─────────────────────────────────────── */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.5rem;
}
.carte {
  background: linear-gradient(160deg, var(--pierre-850), var(--pierre-900));
  border: 1px solid var(--pierre-800);
  border-radius: 10px;
  padding: 1.8rem;
  transition: border-color 0.2s, transform 0.2s;
}
.carte:hover { border-color: var(--or-sombre); transform: translateY(-3px); }
section.alt .carte { background: linear-gradient(160deg, var(--pierre-950), #131110); }
.carte .icone {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(217, 164, 65, 0.1);
  border: 1px solid rgba(217, 164, 65, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.05rem;
}
.carte .icone svg { width: 20px; height: 20px; color: var(--or); }
.carte h3 { font-size: 1.14rem; font-weight: 700; color: var(--or-clair); margin-bottom: 0.55rem; }
.carte p { color: var(--pierre-400); font-size: 0.95rem; margin: 0; }

/* ── Galerie ─────────────────────────────────────────────── */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
/* La carte 3D occupe toute la largeur : c'est la vue la plus parlante. */
.vue {
  border: 1px solid var(--pierre-800);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pierre-900);
  transition: border-color 0.2s;
}
.vue:hover { border-color: var(--or-sombre); }
.vue img {
  display: block;
  width: 100%;
  height: auto;
  /* Évite le saut de mise en page pendant le chargement */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: var(--pierre-950);
}
.vue figcaption {
  padding: 0.85rem 1.1rem;
  font-size: 0.88rem;
  color: var(--pierre-400);
  border-top: 1px solid var(--pierre-800);
}
.vue.large img { aspect-ratio: 21 / 9; }

@media (min-width: 800px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .vue.large { grid-column: 1 / -1; }
}

/* ── Tarifs ──────────────────────────────────────────────── */
.tarifs {
  display: grid;
  /* 4 paliers : on impose 1, 2 ou 4 colonnes. `auto-fit` donnait 3 colonnes
     entre ~830 et ~1090px, laissant une carte seule sur la deuxième ligne. */
  grid-template-columns: 1fr;
  /* Écart vertical plus large : le badge « Populaire » déborde au-dessus
     de sa carte et doit avoir de l'air quand elle passe en 2e ligne. */
  gap: 2.2rem 1.3rem;
  align-items: stretch;
}
.palier {
  background: linear-gradient(160deg, var(--pierre-850), var(--pierre-900));
  border: 1px solid var(--pierre-800);
  border-radius: 10px;
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.2s;
}
.palier:hover { border-color: var(--or-sombre); }
section.alt .palier { background: linear-gradient(160deg, var(--pierre-950), #131110); }
.palier.populaire {
  border-color: var(--or);
  box-shadow: 0 0 34px rgba(217, 164, 65, 0.13);
  position: relative;
}
.etiquette {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--or-clair), var(--or-sombre));
  color: #14110d;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}
.palier h3 { font-size: 1.32rem; font-weight: 700; }
.prix {
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: 'Cinzel', serif;
}
.prix .par { font-size: 0.82rem; color: var(--pierre-400); font-weight: 400; font-family: 'Inter', sans-serif; }
.palier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  font-size: 0.92rem;
  color: var(--pierre-300);
  flex: 1;
}
.palier li { display: flex; gap: 0.55rem; align-items: flex-start; }
.palier li svg { width: 14px; height: 14px; color: var(--or); flex-shrink: 0; margin-top: 0.4rem; }

/* Encart de réassurance sous la grille tarifaire : c'est la ligne qui lève
   l'objection « mes joueurs devront-ils payer aussi ? ». */
.joueurs-gratuits {
  margin: 2rem auto 0;
  max-width: 46rem;
  background: rgba(217, 164, 65, 0.06);
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.joueurs-gratuits svg {
  width: 22px;
  height: 22px;
  color: var(--or);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.joueurs-gratuits p { margin: 0; font-size: 0.97rem; color: var(--pierre-300); }
.joueurs-gratuits strong { color: var(--or-clair); }

/* ── Pages légales ───────────────────────────────────────── */
.page-legale { padding: 3.5rem 0 4.5rem; }
.page-legale .contenu { max-width: 760px; }
.page-legale h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 700; color: var(--or); margin-bottom: 0.4rem; }
.page-legale .maj { font-size: 0.82rem; color: #78716c; margin: 0 0 2.5rem; }
.page-legale h2 {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--texte);
  margin: 2.4rem 0 0.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pierre-800);
}
.page-legale h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.5rem; }
.page-legale p, .page-legale li { color: var(--pierre-300); }
.page-legale ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.page-legale li::marker { color: var(--or); }
.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--pierre-400);
  font-size: 0.9rem;
  margin-bottom: 1.8rem;
}
.retour:hover { color: var(--or); }
.retour svg { width: 15px; height: 15px; }

/* ── Pied de page ────────────────────────────────────────── */
footer {
  background: var(--pierre-900);
  border-top: 1px solid var(--pierre-800);
  padding: 3rem 0 2.4rem;
  font-size: 0.9rem;
}
.pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.pied-grille h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin: 0 0 0.85rem;
}
.pied-grille ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pied-grille a { color: var(--pierre-300); }
.pied-grille a:hover { color: var(--or); }
.pied-bas {
  border-top: 1px solid var(--pierre-800);
  padding-top: 1.5rem;
  color: #78716c;
  font-size: 0.84rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Tarifs : 2 colonnes dès la tablette, 4 sur grand écran */
@media (min-width: 600px) {
  .tarifs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .tarifs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .heros-grille { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .heros .accroche { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; }
  .de-visuel { order: -1; }
  .de-visuel svg { width: min(230px, 60vw); }
}
@media (max-width: 640px) {
  nav .lien-nav { display: none; }
  .heros { padding: 3.5rem 0 3rem; }
  section { padding: 3.5rem 0; }
  .bandeau .contenu { gap: 1.1rem; flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}