/* Atmos Fest — teaser 2027 (option C « Signal »)
   Tokens repris de la charte v1.0 (voir ../tokens/tokens.css). */

:root {
  --nuit: #1A1020;
  --brume: #EDE6FF;
  --lavande: #C69AFF;
  --violet-500: #8E5BE8;
  --violet-600: #7B4FD4;
  --violet-900: #4C1D95;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-text: "Dosis", "Trebuchet MS", sans-serif;
  --page-x: clamp(20px, 4.5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--brume);
  color: var(--nuit);
  font-family: var(--font-text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--violet-600);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ---- Mise en page : une seule vue, pas de scroll si la fenêtre le permet ---- */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding: 0 var(--page-x);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Monogramme qui se dessine ----
   Chaque trait du monogramme AF (viewBox d'origine 718.6 934.7 1694.2 1177.8,
   épaisseur 140, extrémités rondes) est une gélule qui sert de masque ; une
   gélule pleine y glisse le long de l'axe. Seul `transform` est animé : le
   tracé est pris en charge par le compositeur, sans repeindre à chaque image. */
.signal {
  position: absolute;
  z-index: 0;
  color: var(--violet-500);
  right: -12.5vw;
  top: 10vh;
  width: min(72vw, 1040px);
  aspect-ratio: 1694.2 / 1177.8;
  pointer-events: none;
  container-type: inline-size;
}
.signal__seg {
  --u: calc(100cqw / 1694.2); /* 1 unité du dessin d'origine */
  position: absolute;
  height: calc(140 * var(--u));
  border-radius: calc(70 * var(--u));
  transform-origin: calc(70 * var(--u)) 50%;
  overflow: hidden;
}
.signal__seg > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform: translateX(-100%);
  will-change: transform;
  animation: 7s linear .2s infinite both;
}
.signal__a1 { left: calc(0.04 * var(--u)); top: calc(1037.62 * var(--u)); width: calc(1458.72 * var(--u)); transform: rotate(-51.89deg); }
.signal__a2 { left: calc(813.92 * var(--u)); top: calc(0.01 * var(--u)); width: calc(1177.61 * var(--u)); transform: rotate(90.00deg); }
.signal__f1 { left: calc(1030.78 * var(--u)); top: calc(1037.76 * var(--u)); width: calc(1177.44 * var(--u)); transform: rotate(-90.00deg); }
.signal__f2 { left: calc(1554.22 * var(--u)); top: calc(394.06 * var(--u)); width: calc(650.89 * var(--u)); transform: rotate(180.00deg); }
.signal__a1 > span { animation-name: af-a1; }
.signal__a2 > span { animation-name: af-a2; }
.signal__f1 > span { animation-name: af-draw; animation-timing-function: cubic-bezier(.6, 0, .2, 1); animation-delay: .55s; }
.signal__f2 > span { animation-name: af-draw; animation-timing-function: cubic-bezier(.6, 0, .2, 1); animation-delay: .9s; }
@keyframes af-draw {
  0%        { transform: translateX(-100%); }
  45%, 80%  { transform: translateX(0); }
  100%      { transform: translateX(100%); }
}
/* Premier trait (polyligne en deux segments) : la courbe cubic-bezier(.6, 0, .2, 1)
   est échantillonnée sur la longueur totale pour enchaîner les deux segments. */
@keyframes af-a1 {
  0.00% { transform: translateX(-100.00%); }
  1.00% { transform: translateX(-99.92%); }
  2.00% { transform: translateX(-99.65%); }
  3.00% { transform: translateX(-99.18%); }
  4.00% { transform: translateX(-98.49%); }
  5.00% { transform: translateX(-97.54%); }
  6.00% { transform: translateX(-96.31%); }
  7.00% { transform: translateX(-94.74%); }
  8.00% { transform: translateX(-92.78%); }
  9.00% { transform: translateX(-90.38%); }
  10.00% { transform: translateX(-87.45%); }
  11.00% { transform: translateX(-83.88%); }
  12.00% { transform: translateX(-79.54%); }
  13.00% { transform: translateX(-74.25%); }
  14.00% { transform: translateX(-67.79%); }
  15.00% { transform: translateX(-59.89%); }
  16.00% { transform: translateX(-50.26%); }
  17.00% { transform: translateX(-38.80%); }
  18.00% { transform: translateX(-25.82%); }
  19.00% { transform: translateX(-12.32%); }
  20.00% { transform: translateX(0.00%); }
  80.00% { transform: translateX(0.00%); }
  80.44% { transform: translateX(0.08%); }
  80.89% { transform: translateX(0.35%); }
  81.33% { transform: translateX(0.82%); }
  81.78% { transform: translateX(1.51%); }
  82.22% { transform: translateX(2.46%); }
  82.67% { transform: translateX(3.69%); }
  83.11% { transform: translateX(5.26%); }
  83.56% { transform: translateX(7.22%); }
  84.00% { transform: translateX(9.62%); }
  84.44% { transform: translateX(12.55%); }
  84.89% { transform: translateX(16.12%); }
  85.33% { transform: translateX(20.46%); }
  85.78% { transform: translateX(25.75%); }
  86.22% { transform: translateX(32.21%); }
  86.67% { transform: translateX(40.11%); }
  87.11% { transform: translateX(49.74%); }
  87.56% { transform: translateX(61.20%); }
  88.00% { transform: translateX(74.18%); }
  88.44% { transform: translateX(87.68%); }
  88.89% { transform: translateX(100.00%); }
  100.00% { transform: translateX(100.00%); }
}
@keyframes af-a2 {
  0.00% { transform: translateX(-100.00%); }
  19.00% { transform: translateX(-100.00%); }
  20.00% { transform: translateX(-99.38%); }
  21.00% { transform: translateX(-84.93%); }
  22.00% { transform: translateX(-72.54%); }
  23.00% { transform: translateX(-62.02%); }
  24.00% { transform: translateX(-53.07%); }
  25.00% { transform: translateX(-45.43%); }
  26.00% { transform: translateX(-38.86%); }
  27.00% { transform: translateX(-33.19%); }
  28.00% { transform: translateX(-28.26%); }
  29.00% { transform: translateX(-23.97%); }
  30.00% { transform: translateX(-20.22%); }
  31.00% { transform: translateX(-16.95%); }
  32.00% { transform: translateX(-14.09%); }
  33.00% { transform: translateX(-11.60%); }
  34.00% { transform: translateX(-9.43%); }
  35.00% { transform: translateX(-7.55%); }
  36.00% { transform: translateX(-5.93%); }
  37.00% { transform: translateX(-4.55%); }
  38.00% { transform: translateX(-3.39%); }
  39.00% { transform: translateX(-2.43%); }
  40.00% { transform: translateX(-1.64%); }
  41.00% { transform: translateX(-1.02%); }
  42.00% { transform: translateX(-0.56%); }
  43.00% { transform: translateX(-0.24%); }
  44.00% { transform: translateX(-0.06%); }
  45.00% { transform: translateX(0.00%); }
  88.44% { transform: translateX(0.00%); }
  88.89% { transform: translateX(0.62%); }
  89.33% { transform: translateX(15.07%); }
  89.78% { transform: translateX(27.46%); }
  90.22% { transform: translateX(37.98%); }
  90.67% { transform: translateX(46.93%); }
  91.11% { transform: translateX(54.57%); }
  91.56% { transform: translateX(61.14%); }
  92.00% { transform: translateX(66.81%); }
  92.44% { transform: translateX(71.74%); }
  92.89% { transform: translateX(76.03%); }
  93.33% { transform: translateX(79.78%); }
  93.78% { transform: translateX(83.05%); }
  94.22% { transform: translateX(85.91%); }
  94.67% { transform: translateX(88.40%); }
  95.11% { transform: translateX(90.57%); }
  95.56% { transform: translateX(92.45%); }
  96.00% { transform: translateX(94.07%); }
  96.44% { transform: translateX(95.45%); }
  96.89% { transform: translateX(96.61%); }
  97.33% { transform: translateX(97.57%); }
  97.78% { transform: translateX(98.36%); }
  98.22% { transform: translateX(98.98%); }
  98.67% { transform: translateX(99.44%); }
  99.11% { transform: translateX(99.76%); }
  99.56% { transform: translateX(99.94%); }
  100.00% { transform: translateX(100.00%); }
}

/* ---- En-tête ---- */
.top {
  position: relative; z-index: 1;
  height: 96px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand img { display: block; height: 20px; width: auto; }

/* ---- Contenu ---- */
.hero {
  position: relative; z-index: 1;
  align-self: center;
  max-width: 700px;
  display: flex; flex-direction: column; gap: 26px;
  padding: 24px 0;
}
.eyebrow {
  margin: 0;
  font-weight: 700; font-size: 14px; line-height: 1.4;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--violet-900);
}
.eyebrow sup { font-size: .7em; letter-spacing: 0; }
.title { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.title__big {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(76px, 11.7vw, 168px); line-height: .86;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.title__sub {
  font-weight: 800;
  font-size: clamp(48px, 6.7vw, 96px); line-height: .9;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--violet-600);
}
.lead {
  margin: 0; max-width: 560px;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55;
  text-wrap: pretty;
}
.cta { display: flex; align-items: center; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
.offer { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.offer .price { font-family: var(--font-display); font-weight: 400; }
.offer__muted { color: var(--violet-900); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-text); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { height: 60px; padding: 0 32px; font-size: 15px; background: var(--nuit); color: #fff; }
.btn--primary:hover { background: var(--violet-600); }
.btn--outline { height: 44px; padding: 0 20px; font-size: 13px; border: 2px solid var(--nuit); color: var(--nuit); }
.btn--outline .icon { width: 14px; height: 14px; }
.btn--outline:hover { background: var(--nuit); color: #fff; }

/* ---- Pied ---- */
.bottom {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 0 0 36px;
  font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.bottom nav { display: flex; gap: 24px; }
.bottom a { text-decoration: none; padding: 12px 0; }
.bottom a:hover { color: var(--violet-600); }

/* ---- Mobile (≤ 767 px) ---- */
@media (max-width: 767px) {
  .top { height: 64px; }
  .brand img { height: 16px; }
  .btn--outline .icon { display: none; }
  .signal { width: 260px; right: -60px; top: 64px; }
  .hero { align-self: start; padding-top: 196px; gap: 16px; max-width: none; }
  .eyebrow { font-size: 12px; letter-spacing: .2em; }
  .title { gap: 2px; }
  .cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn--primary { height: 56px; }
  .offer { text-align: center; font-size: 14px; }
  .offer br { display: none; }
  .offer__muted::before { content: " · "; color: var(--nuit); }
  .bottom { padding-bottom: 24px; font-size: 12px; letter-spacing: .1em; }
  .bottom > span { display: none; }
  .bottom::before { content: "Lac Galette, QC"; }
}

/* Écrans bas (ex. portable 1366×660) : on resserre pour rester sans scroll */
@media (min-width: 768px) and (max-height: 760px) {
  .top { height: 72px; }
  .hero { gap: 18px; }
  .title__big { font-size: clamp(64px, 16vh, 150px); }
  .title__sub { font-size: clamp(40px, 9vh, 86px); }
  .lead { font-size: 17px; }
  .bottom { padding-bottom: 20px; }
}

/* Petits téléphones (ex. 375×667) */
@media (max-width: 767px) and (max-height: 740px) {
  .signal { width: 190px; top: 56px; right: -40px; }
  .hero { padding-top: 96px; gap: 12px; }
  .title__big { font-size: 64px; }
  .title__sub { font-size: 40px; }
  .lead { font-size: 15px; line-height: 1.45; }
  .btn--primary { height: 52px; }
  .bottom { padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal__seg > span { animation: none; transform: none; }
  .btn { transition: none; }
}