/* ==========================================================================
   Golden Train : « affiche de western ».
   Papier vieilli, double filet à coins ornés, grand titre typographique,
   soleil rayonnant qui tourne lentement derrière la boîte, voie ferrée
   où passe un petit train (silhouette originale), tableau des horaires.
   L'illustration de la boîte est affichée entière, sans aucun effet.
   ========================================================================== */

@font-face { font-family: "Rye"; src: url("/assets/fonts/rye-latin-400-normal.woff2") format("woff2"); font-display: swap; }

.gt {
  --papier-gt: #f3e4c6;
  --papier-fonce: #e2c99a;
  --sepia: #2b1c15;
  --sepia-doux: #5e4434;
  --rouge: #963320;
  --rouge-fonce: #5e1d10;
  --or: #c8902e;
  --bois-gt: #3a2416;
  background: #e9d6b0;
  color: var(--sepia);
}
.gt .fil-ariane, .gt .fil-ariane a { color: var(--sepia-doux); }

/* ---------- L'affiche (ouverture) ---------- */
.gt-affiche {
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 55%, rgba(94, 68, 52, 0.25)),
    #e9d6b0;
}
.gt-papier {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(62rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1rem, 4vw, 3rem) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, var(--papier-gt) 55%, var(--papier-fonce) 100%);
  border: 3px solid var(--sepia);
  outline: 1.5px solid var(--sepia);
  outline-offset: -12px;
  box-shadow: 0 30px 60px -30px rgba(43, 28, 21, 0.75);
}
.gt-coin {
  position: absolute;
  z-index: 2;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--rouge);
}
.gt-coin--hg { top: 0.3rem; left: 0.45rem; }
.gt-coin--hd { top: 0.3rem; right: 0.45rem; }
.gt-coin--bg { bottom: 0.3rem; left: 0.45rem; }
.gt-coin--bd { bottom: 0.3rem; right: 0.45rem; }

.gt-titre { position: relative; z-index: 2; }
.gt-presente {
  margin: 0 0 0.6rem;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sepia-doux);
}
.gt-presente span { color: var(--rouge); }
.gt h1 {
  margin: 0;
  font-family: "Rye", var(--titre);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--rouge);
  text-shadow: 3px 3px 0 var(--papier-gt), 5px 5px 0 var(--sepia);
}
.gt-accroche {
  margin: 1rem auto 0;
  max-width: 34ch;
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  line-height: 1.4;
  color: var(--sepia);
}
.gt-accroche::before, .gt-accroche::after { content: "—"; color: var(--rouge); margin-inline: 0.5em; }

/* Soleil rayonnant derrière la boîte */
.gt-soleil-zone { position: relative; display: grid; place-items: center; margin-top: clamp(1rem, 3vw, 2rem); padding-block: clamp(1rem, 3vw, 2rem); }
.gt-soleil {
  position: absolute;
  z-index: -1;
  width: min(48rem, 140vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(200, 144, 46, 0.32) 0 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
}
.gt-boite { position: relative; z-index: 1; width: min(24rem, 70vw); }
.gt-boite picture { display: contents; }
.gt-boite img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(43, 28, 21, 0.45)); }

/* Voie ferrée et petit train */
.gt-voie { position: relative; height: 6.5rem; margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem)); overflow: hidden; }
.gt-rails {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.2rem;
  height: 1.1rem;
  background:
    linear-gradient(var(--sepia), var(--sepia)) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--sepia-doux) 0 10px, transparent 10px 26px);
}
.gt-convoi { position: absolute; bottom: 2rem; left: 50%; width: 15rem; margin-left: -7.5rem; }
.gt-train { display: block; width: 100%; }
.gt-train__corps { fill: var(--sepia); }
.gt-train__fenetre { fill: var(--or); }
.gt-train__roues circle { fill: var(--rouge-fonce); stroke: var(--sepia); stroke-width: 3; }
.gt-fumee {
  position: absolute;
  top: -1rem;
  left: 69%;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(94, 68, 52, 0.28);
}
.gt-fumee--2 { width: 2.1rem; height: 2.1rem; top: -2.2rem; left: 62%; opacity: 0.8; }
.gt-fumee--3 { width: 2.7rem; height: 2.7rem; top: -3.6rem; left: 53%; opacity: 0.55; }

/* ---------- La gazette (contenu) ---------- */
.gt-gazette { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.gt-gazette__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.gt-journal {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--papier-gt);
  border-top: 6px double var(--sepia);
  border-bottom: 6px double var(--sepia);
}
.gt-rubrique {
  margin: 0 0 0.5rem;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rouge);
  border-bottom: 1px solid rgba(43, 28, 21, 0.35);
  padding-bottom: 0.5rem;
}
.gt-journal h2 {
  font-family: "Rye", var(--titre);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.1;
  color: var(--sepia);
  margin: 0.6rem 0 1rem;
}
.gt-description { font-size: 1.12rem; line-height: 1.7; max-width: 60ch; color: var(--sepia); }
.gt-description::first-letter {
  float: left;
  font-family: "Rye", var(--titre);
  font-size: 3.4em;
  line-height: 0.85;
  margin: 0.06em 0.12em 0 0;
  color: var(--rouge);
}
.gt .bouton { background: var(--rouge); border-color: var(--rouge-fonce); color: #fff8ec; border-radius: 3px; }
.gt .bouton:hover { background: var(--rouge-fonce); color: #fff8ec; }
.gt .bouton--clair { background: transparent; color: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.gt .liens-secondaires a { color: var(--rouge-fonce); font-weight: 600; }

/* Tableau des horaires en bois sombre */
.gt-horaires {
  padding: 1.3rem 1.5rem 1.1rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(0, 0, 0, 0.18) 26px 28px),
    var(--bois-gt);
  color: #f6e7c4;
  border: 4px solid #22140b;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(200, 144, 46, 0.5), 0 20px 34px -22px rgba(0, 0, 0, 0.7);
}
.gt-horaires__titre {
  font-family: "Rye", var(--titre);
  font-weight: 400;
  font-size: 1.7rem;
  color: #f2c063;
  text-align: center;
  margin: 0 0 0.7rem;
  letter-spacing: 0.06em;
}
.gt-horaires__liste { margin: 0; }
.gt-horaires__liste div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; }
.gt-horaires__liste dt { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; color: #f6e7c4; }
.gt-horaires__liste div::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(246, 231, 196, 0.45); }
.gt-horaires__liste dd { order: 2; margin: 0; font-weight: 700; color: #f2c063; }

.gt-equipe { margin-top: 1.8rem; }
.gt-equipe__titre { font-family: "Rye", var(--titre); font-weight: 400; font-size: 1.6rem; color: var(--sepia); margin: 0 0 0.4rem; }
.gt-credits { margin: 0; }
.gt-credits div { padding: 0.55rem 0; border-top: 1px solid rgba(43, 28, 21, 0.3); }
.gt-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--rouge-fonce); }
.gt-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; }

/* Étoile de shérif pour la distinction */
.gt-etoiles { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.gt-etoile { display: flex; align-items: center; gap: 1rem; }
.gt-etoile__insigne {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.6rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 35%, #f6d488, var(--or) 65%, #8a5c16);
  clip-path: polygon(50% 0, 61% 30%, 93% 25%, 70% 50%, 93% 75%, 61% 70%, 50% 100%, 39% 70%, 7% 75%, 30% 50%, 7% 25%, 39% 30%);
}
.gt-etoile__insigne span { font-weight: 800; font-size: 0.68rem; color: var(--sepia); }
.gt-etoile strong { display: block; font-family: "Rye", var(--titre); font-weight: 400; font-size: 1.2rem; color: var(--rouge-fonce); }
.gt-etoile span { font-size: 0.98rem; color: var(--sepia); }

.gt-cliche {
  margin: clamp(3rem, 6vw, 4rem) auto 0;
  max-width: 58rem;
  padding: 0.8rem 0.8rem 0;
  background: var(--papier-gt);
  border: 3px solid var(--sepia);
}
.gt-cliche img { width: 100%; height: auto; }
.gt-cliche figcaption { font-family: "Rye", var(--titre); text-align: center; padding: 0.6rem 0 0.8rem; }

@media (max-width: 52rem) {
  .gt-gazette__grille { grid-template-columns: minmax(0, 1fr); }
  .gt-accroche::before, .gt-accroche::after { content: none; }
  .gt h1 { text-shadow: 2px 2px 0 var(--papier-gt), 4px 4px 0 var(--sepia); }
}

@media (prefers-reduced-motion: no-preference) {
  .gt-soleil { animation: gt-tourne 120s linear infinite; }
  @keyframes gt-tourne { to { rotate: 360deg; } }
  .gt-convoi { animation: gt-passe 16s linear infinite; }
  @keyframes gt-passe { from { translate: -60vw 0; } to { translate: 60vw 0; } }
  .gt-fumee { animation: gt-fumee 1.8s ease-out infinite; }
  .gt-fumee--2 { animation-delay: 0.6s; }
  .gt-fumee--3 { animation-delay: 1.2s; }
  @keyframes gt-fumee { from { translate: 0 0.8rem; scale: 0.5; opacity: 0.9; } to { translate: -1.5rem -0.6rem; scale: 1.3; opacity: 0; } }
  .gt-train__roues circle { stroke-dasharray: 8 4; animation: gt-roue 0.8s linear infinite; }
  @keyframes gt-roue { to { stroke-dashoffset: -24; } }
}