/* Page d'attente : mêmes matières et couleurs de chauffe que le site (web/src/app/globals.css). */
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: italic; font-display: swap; src: url(/fonts/barlow-condensed-800-italic.woff2) format("woff2"); }

:root {
  --bg: #121213; --panel: #1c1b1a; --panel-2: #252322; --line: #2e2c2a; --line-2: #3a3836;
  --text: #ece7df; --muted: #9aa0a6;
  --heat-1: #fff3dc; --heat-2: #ffc35a; --ember: #ff6b1f; --straw: #d9b36a;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 400 17px/1.55 Barlow, system-ui, sans-serif;
}
a:focus-visible { outline: 3px solid var(--heat-2); outline-offset: 2px; }
.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }
@media (min-width: 1024px) { .wrap { padding: 0 3rem; } }

.strip, .heat { display: grid; grid-template-columns: repeat(8, 1fr); }
.strip { height: 6px; }
.strip i:nth-child(1), .heat i:nth-child(1) { background: var(--heat-1); }
.strip i:nth-child(2), .heat i:nth-child(2) { background: var(--heat-2); }
.strip i:nth-child(3), .strip i:nth-child(4), .heat i:nth-child(3), .heat i:nth-child(4) { background: var(--ember); }
.strip i:nth-child(5), .heat i:nth-child(5) { background: var(--line-2); }
.strip i:nth-child(6), .heat i:nth-child(6) { background: var(--line); }
.strip i:nth-child(7), .heat i:nth-child(7) { background: var(--panel-2); }
.strip i:nth-child(8), .heat i:nth-child(8) { background: var(--panel); }

.top { display: flex; align-items: center; gap: .75rem; height: 72px; }
.logo {
  width: 40px; height: 40px; background: var(--text);
  -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat;
}
.brand, h1, .cta {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-weight: 800; font-style: italic; text-transform: uppercase;
}
.brand { font-size: 26px; white-space: nowrap; }
.brand em { color: var(--ember); font-size: 18px; }

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 3rem; padding-bottom: 4rem; }
.kicker {
  font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--straw); font-size: 18px;
}
h1 { font-size: clamp(56px, 11vw, 136px); line-height: .86; margin: .9rem 0 1.6rem; }
h1 span { color: var(--ember); }
.lead { max-width: 36rem; color: var(--muted); font-size: 19px; }
.cta {
  align-self: flex-start; margin-top: 2rem; padding: .7rem 1.4rem;
  background: var(--ember); color: var(--bg); text-decoration: none; font-size: 22px;
}
.cta:hover { background: var(--heat-2); }
.heat { height: 10px; max-width: 28rem; margin-top: 3rem; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.75rem; padding-bottom: 1.75rem; border-top: 2px solid var(--panel);
  font: 13px/1.6 ui-monospace, Menlo, monospace; color: var(--muted);
}
.foot a { color: var(--text); }

/* Mentions légales */
.home { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.legal { flex: 1; padding-top: 3rem; padding-bottom: 4rem; }
.legal section { max-width: 48rem; }
.legal h1 { font-size: clamp(44px, 8vw, 80px); margin: 0 0 2rem; }
.legal section { border-top: 2px solid var(--panel); padding: 1.25rem 0; }
.legal h2 {
  font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--straw); font-size: 18px; margin-bottom: .4rem;
}
.legal a { color: var(--text); }
.legal .back {
  display: inline-block; margin-top: 1.5rem; color: var(--ember); text-decoration: none;
  font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 600; text-transform: uppercase; font-size: 18px;
}

/* Pied de page : liens et signature, discrets. */
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.credit { color: var(--muted); }
.credit .name { color: var(--straw); }
.credit a { text-decoration-color: var(--line-2); }
.credit a:hover .name { color: var(--ember); }