/* =========================================================================
   LE SCRIPTORIUM - page vitrine

   Cette page s'adresse a quelqu'un qui ne connait pas encore la Compagnie :
   elle doit donner envie d'une carte, pas expliquer comment on la fabrique.
   Le mode d'emploi vit ailleurs, dans le Mode de jeu.

   Tout est prefixe `sv-` : la feuille cohabite avec style.css et ne doit
   capturer aucune classe generique d'une autre page.
   ========================================================================= */

.sv-page {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(168, 137, 90, 0.16), transparent 68%),
    #1b1013;
  min-height: 100vh;
}

/* La page porte la nav du site depuis le 2026-09-19. Le bandeau de retour
   maison qui vivait ici n'avait que quatre liens : on y arrivait par un
   partage et on s'y retrouvait enferme, sans acces aux Archives ni au Lore.
   La nav fixe mesure environ 3 rem : le hero garde son degagement en tete. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Porte de `.cmd-header` (Mode de jeu, Commandes) : video floutee, fondu vers
   la couleur de la page, titre a la taille des autres pages. Le fondu va vers
   #160401, le fond de `.sv-page`, et non vers le #120000 des commandes : sinon
   une bande de couleur se verrait a la jonction. */
.sv-hero {
  position: relative;
  text-align: center;
  padding: 7rem 2rem 3rem;
  background: #1b1013;
  overflow: hidden;
}
.sv-hero-video { position: absolute; inset: 0; z-index: 0 }
.sv-hero-video video {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(2px) brightness(0.75) saturate(0.9);
}
.sv-hero-fondu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, #1b1013, transparent);
  pointer-events: none;
}
.sv-hero h1 {
  position: relative; z-index: 1;
  font-family: var(--font-title);
  font-size: 2.8rem;
  color: #a8895a;
  letter-spacing: 2px;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}
.sv-hero h1::after {
  content: ''; display: block; width: 80px; height: 2px;
  background: #6b5a4c; margin: 0.8rem auto 0;
}
.sv-hero .sv-sous {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: #a8a48c;
  letter-spacing: 1px;
  margin: 0;
}

/* L'ouverture, sous le hero : le paragraphe qui l'alourdissait. */
.sv-ouverture {
  max-width: 660px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
  text-align: center;
}
.sv-ouverture p { color: #d9c7b8; font-size: 1.02rem; line-height: 1.75; margin: 0 }

/* ── L'eventail de cartes ───────────────────────────────────────────────── */
/* Les trois cartes sont de vraies sorties de l'atelier, pas un montage : le
   meme code que le bouton « Exporter en image » les a dessinees. Une vitrine
   qui montre autre chose que ce que l'outil produit ment des la premiere
   evolution. */
.sv-eventail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 2.5rem 1rem 3.5rem;
  perspective: 1200px;
}
.sv-eventail img {
  width: min(31vw, 268px);
  height: auto;
  border-radius: 3px;
  /* Un filet clair : sur ce fond, une carte sombre n'a plus de bord et se lit
     comme une tache. Les champs de nuit en ont besoin autant que les autres. */
  outline: 1px solid rgba(168, 137, 90, 0.35);
  outline-offset: -1px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.4s;
}
.sv-eventail img:nth-child(1) { transform: rotate(-7deg) translateX(28px) scale(0.93); z-index: 1 }
.sv-eventail img:nth-child(2) { transform: translateY(-14px); z-index: 3 }
.sv-eventail img:nth-child(3) { transform: rotate(7deg) translateX(-28px) scale(0.93); z-index: 2 }
.sv-eventail img:hover {
  transform: translateY(-24px) scale(1.02);
  z-index: 5;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.7);
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.sv-bloc {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.sv-bloc h2 {
  font-family: var(--font-title);
  font-size: 1.9rem;
  color: #a8895a;
  text-align: center;
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}
.sv-bloc h2::after { display: none }
.sv-chapo {
  text-align: center;
  color: #b9a596;
  font-style: italic;
  max-width: 620px;
  margin: 0 auto 2.2rem;
}

/* ── Avant / apres ──────────────────────────────────────────────────────── */
.sv-avant-apres {
  display: flex;
  /* Par le HAUT, pas par le centre : les deux legendes n'ont ni le meme nombre
     de lignes ni la meme hauteur de ligne, et le centrage decalait les cartes
     l'une par rapport a l'autre. Reserver des lignes laissait encore 7 px
     d'ecart. Alignees en tete, les deux cartes se repondent exactement. */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.sv-etape { text-align: center; max-width: 260px }
.sv-etape img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
.sv-etape b {
  display: block;
  font-family: var(--font-title);
  color: var(--parchment);
  font-size: 1.05rem;
  margin-top: 1rem;
  line-height: 1.3;
}
.sv-etape span {
  display: block; color: #a99183; font-size: 0.86rem; margin-top: 0.2rem;
}
/* La fleche vise le milieu d'une CARTE, pas du bloc entier : les legendes sont
   sous les cartes, et les compter la ferait glisser sous l'image. La carte fait
   au plus 260 px de large pour un rapport 420x588, donc 364 px de haut. */
.sv-fleche {
  font-size: 2rem;
  color: #6b5a4c;
  align-self: flex-start;
  margin-top: calc(min(260px, 34vw) * 588 / 420 / 2 - 1rem);
}

/* ── Les trois voies ────────────────────────────────────────────────────── */
.sv-voies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
}
.sv-voie {
  background: linear-gradient(160deg, #f7eed6, #e6d3ab);
  border: 1px solid rgba(91, 70, 54, 0.45);
  border-radius: 3px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  min-width: 0;
}
.sv-voie h3 {
  font-family: var(--font-title);
  color: var(--wood-dark);
  font-size: 1.2rem;
  margin-bottom: 0.1rem;
}
/* Le compte tient sur UNE ligne dans les trois cartes : a 2.1rem « Une
   quarantaine » passait a la ligne et « de stickers » tombait n'importe ou.
   L'unite passe en dessous, en etiquette, pour que les trois se lisent pareil. */
.sv-voie .sv-compte {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--wood);
  line-height: 1.15;
  margin: 0.55rem 0 0;
}
.sv-voie .sv-compte em {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-top: 0.3rem;
}
.sv-voie p { color: var(--ink-soft); font-size: 0.92rem; margin: 0.7rem 0 0 }

/* ── L'atelier ──────────────────────────────────────────────────────────── */
.sv-atelier {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2rem;
  align-items: center;
}
.sv-atelier img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid rgba(107, 90, 76, 0.6);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  min-width: 0;
}
.sv-outils { list-style: none; min-width: 0 }
.sv-outils li {
  color: #d9c7b8;
  padding: 0.65rem 0 0.65rem 0;
  border-bottom: 1px solid rgba(107, 90, 76, 0.35);
  font-size: 0.95rem;
}
.sv-outils li:last-child { border-bottom: none }
.sv-outils li > b:first-child {
  display: block;
  font-family: var(--font-title);
  color: #a8895a;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ── Appel a l'action ───────────────────────────────────────────────────── */
.sv-final {
  text-align: center;
  padding: 1rem 1.5rem 5rem;
}
.sv-boutons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.sv-bouton {
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  border-radius: 3px;
  border: 1px solid #6b5a4c;
  color: var(--parchment);
  background: #3a1a26;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.sv-bouton:hover { background: #641220; border-color: #a8895a; transform: translateY(-2px) }
.sv-bouton--plein { background: #a8895a; color: #2b1a22; border-color: #a8895a }
.sv-bouton--plein:hover { background: #c0a496; border-color: #c0a496 }

.sv-note {
  color: #8d7a6e;
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 1.4rem;
}

/* La note qui suit une rangee de boutons se cale sur eux. Dans `.sv-final` le
   centrage vient du bloc ; posee dans une section de texte, elle restait calee
   a gauche sous des boutons centres. Modificateur nomme sur son bloc, jamais un
   `centree` nu : c'est le piege qui revient le plus souvent ici. */
.sv-note--centree { text-align: center; }

/* ── Petits ecrans ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .sv-hero { padding: 6rem 1.2rem 2.2rem }
  .sv-hero h1 { font-size: 2rem }
  .sv-atelier { grid-template-columns: 1fr }
  .sv-eventail { flex-direction: column; gap: 1.2rem; perspective: none }
  .sv-eventail img,
  .sv-eventail img:nth-child(1),
  .sv-eventail img:nth-child(2),
  .sv-eventail img:nth-child(3) { transform: none; width: min(72vw, 300px) }
  .sv-fleche { transform: rotate(90deg) }
}

.sv-final-titre::after { display: none }
.sv-final-titre {
  font-family: var(--font-title);
  color: #a8895a;
  font-size: 1.7rem;
}
.sv-final-texte {
  color: #b9a596;
  max-width: 560px;
  margin: 0.6rem auto 0;
}