@charset "UTF-8";

/* ── FONT ── */

@font-face {
  font-family: 'Selecta';
  src: url('../fonts/SelectaTrialUnlicensed-Medium.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* ── VARIABLES ── */

:root {
  --brawn:          #c8fa3f;
  --bg:             #ffffff;
  --text:           #111111;
  --muted:          #aaaaaa;

  --dot-dim:         0.6;
  --col-brawn-gp:    #c8fa3f;
  --col-red-bull:    #3360b4;
  --col-mclaren:     #ff8000;
  --col-ferrari:     #e8002d;
  --col-toyota:      #cc0000;
  --col-bmw-sauber:  #0067ff;
  --col-williams:    #00a0dd;
  --col-renault:     #ffd800;
  --col-toro-rosso:  #408ce4;
  --col-force-india: #f596c8;

  --gp-name-size:   clamp(2rem, calc(13.4628vw + 2.8447rem), 12rem);
  --menu-font-size: clamp(2.5rem, calc(5.6958vw + 1.165rem), 8rem);
  --rank-font-size: clamp(1.625rem, calc(4.0129vw + 0.6845rem), 5.5rem);
  --close-size:     clamp(1.75rem, calc(2.0712vw + 1.2646rem), 3.75rem);
  --panel-padding:  0 2.5rem 5rem;
  --panel-pad-top:  1.75rem;
}

/* ── BASE ── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Selecta', Arial, sans-serif;
}

/* ── CURSEUR ── */

#cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  background: var(--muted);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  top: -40px;
  left: -40px;
  opacity: 0.5;
}

/* ── STAGE ── */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── SVG CIRCUIT ── */

#scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  padding: 2%;
}

#cars circle { cursor: pointer; }

/* ── LABEL GP ── */

#gp-label {
  position: relative;
  pointer-events: none;
  z-index: 10;
}

#gp-name {
  font-size: var(--gp-name-size);
  font-weight: 400;
  line-height: 0.95;
  color: var(--brawn);
  opacity: 0.9;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  hyphens: none;
}

/* ── BURGER ── */

.burger-btn {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 20;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
}

.burger-btn span {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--text);
  transition: background .15s, transform .3s, opacity .3s;
  transform-origin: center;
}

.burger-btn:hover span { background: var(--brawn); }
.burger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── BOUTON CLASSEMENT ── */

.ranking-tab {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 41;
  width: 44px;
  height: 240px;
  background: var(--muted);
  color: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, right .4s cubic-bezier(.4,0,.2,1);
  padding: 0;
}

.ranking-tab:hover { background: var(--text); }

.ranking-tab.active {
  background: var(--brawn);
  color: var(--text);
  right: 38vw;
}

.ranking-tab-label {
  font-family: 'Selecta', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: currentColor;
  white-space: nowrap;
  padding: 5px;
}

/* ── PANEL CLASSEMENT ── */

.panel-ranking-side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38vw;
  z-index: 40;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.panel-ranking-side[aria-hidden="false"] { transform: translateX(0); }

.panel-ranking-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.12);
  padding: 2rem 2.5rem 4rem;
}

/* ── FICHE PILOTE ── */

#tooltip {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  pointer-events: none;
  z-index: 50;
  text-align: right;
  line-height: 1;
}

#tooltip.hidden { display: none; }

.tt-name {
  font-size: var(--rank-font-size);
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  display: block;
}

.tt-team {
  font-size: calc(var(--rank-font-size) * 0.35);
  font-weight: 400;
  opacity: .9;
  display: block;
  text-transform: uppercase;
}

.tt-meta {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.4em;
  margin-top: 0.3em;
  font-size: calc(var(--rank-font-size) * 0.28);
  font-weight: 400;
  color: var(--muted);
}

.tt-sep { opacity: .4; }

/* ── BACKDROP ── */

#backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.15);
}

#backdrop.hidden { display: none; }

/* ── PANEL MENU ── */

.panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,.0,.2,1);
  overflow: hidden;
}

.panel[aria-hidden="false"] { transform: translateY(0); }

.panel-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255,255,255,0.08);
  padding: var(--panel-padding);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  padding: var(--panel-pad-top) 0 1rem;
  margin-bottom: 0;
  z-index: 2;
}

.panel-close {
  background: none;
  border: none;
  font-size: var(--close-size);
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  line-height: 1;
  transition: color .15s;
}

.panel-close:hover { color: var(--text); }

/* ── MENU GP ── */

#menu-list { list-style: none; }

#menu-list li {
  font-size: var(--menu-font-size);
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition: color .12s;
  padding: 0.1em 0;
}

#menu-list li[data-circuit],
#menu-list li[data-screen] { cursor: pointer; }

#menu-list li[data-circuit]:hover,
#menu-list li[data-screen]:hover { color: var(--text); }

#menu-list li.active { color: var(--brawn); }

/* ── CLASSEMENT ── */

#ranking-block {
  display: flex;
  flex-direction: column;
}

.rank-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.15rem 0;
  font-size: var(--rank-font-size);
  font-weight: 400;
  line-height: 1.1;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s;
}

.rank-row:hover { color: var(--text); }
.rank-row.active { color: var(--brawn); }

.rank-pos,
.rank-pts {
  font-size: 0.35em;
  opacity: .5;
  flex-shrink: 0;
  padding-top: 0.3em;
}

.rank-name { flex: 1; }

/* ── RESPONSIVE ── */

@media (max-width: 1249px) {
  :root { --panel-padding: 0 2rem 4rem; }
}

@media (max-width: 849px) {
  :root {
    --panel-padding:  0 1.25rem 3rem;
    --panel-pad-top:  1rem;
    --menu-font-size: clamp(2rem, 10vw, 5rem);
    --gp-name-size:   clamp(3rem, 16vw, 10rem);
  }

  .panel-ranking-side { width: 80vw; }
  .ranking-tab.active { right: 80vw; }
  .panel-ranking-inner { padding: 1.5rem 1.5rem 3rem; }

  #tooltip {
    top: 0.75rem;
    right: 0.75rem;
  }

  .rank-pos,
  .rank-pts { font-size: max(0.35em, 0.75rem); }
}

/* ── ÉCRANS PLEIN ÉCRAN ── */

.fullscreen-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--bg);
  z-index: 5;
  transition: transform .6s cubic-bezier(.4,.0,.2,1),
              opacity   .6s cubic-bezier(.4,.0,.2,1);
  will-change: transform;
  overflow: hidden;
}

.fullscreen-screen.hidden {
  display: flex !important;
  pointer-events: none;
  transform: translateY(100%);
  opacity: 0;
}

.fullscreen-screen.slide-up-out {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.fullscreen-screen.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── INTRO ── */

.intro-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.intro-scroll::-webkit-scrollbar { display: none; }

.intro-section {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.intro-section--push {
  background: var(--bg);
  pointer-events: none;
}

.screen-content--intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6vh 4vw 5vh;
  pointer-events: none;
  text-align: center;
}

.intro-top {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

.intro-label {
  font-size: clamp(1.5rem, 4.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
  display: block;
}

.intro-year-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

#intro-title {
  font-size: clamp(6rem, 28vw, 38rem);
  font-weight: 400;
  line-height: 0.88;
  color: var(--brawn);
  display: block;
  margin: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -0.01em;
}

.intro-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.intro-sublabel {
  font-size: clamp(1.5rem, 4.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
  display: block;
}

/* ── VICTOIRE ── */

.screen-content--outro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6vh 4vw 5vh;
  pointer-events: none;
  text-align: center;
}

.outro-top {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

.outro-label {
  font-size: clamp(1.8rem, 7vw, 10rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  display: block;
}

.outro-name-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

#outro-title {
  font-size: clamp(3.5rem, 16vw, 22rem);
  font-weight: 400;
  line-height: 0.88;
  color: var(--bg);
  display: block;
  margin: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -0.01em;
}

.outro-bottom {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.screen-arrow {
  font-size: 1.5rem;
  color: var(--muted);
  display: block;
}

.screen-arrow--white { color: var(--bg); }

/* ── HISTOIRE ── */

.histoire-inner {
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--bg);
}

.histoire-titre {
  font-size: clamp(1.75rem, 8.5vw, 7rem);
  font-family: 'Selecta', Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  text-align: left;
  display: block;
}

.histoire-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.histoire-p--grand {
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-family: 'Selecta', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0;
  text-align: left;
  hyphens: none;
  display: block;
}

.histoire-col--right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
}

.histoire-img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
}

.histoire-photo-caption {
  font-size: 0.8rem;
  font-family: 'Selecta', Arial, sans-serif;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 849px) {
  .histoire-inner { padding: 16px; gap: 14px; }
  .histoire-body  { grid-template-columns: 1fr; gap: 16px; }
  .histoire-p--grand { font-size: clamp(1rem, 3.5vw, 1.4rem); }
}

/* ── FINALE ── */

.fullscreen-screen--finale {
  background: transparent;
  overflow: hidden;
}

.finale-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.finale-scroll::-webkit-scrollbar { display: none; }

.finale-section {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.finale-section--victoire { background: var(--brawn); }
.finale-section--histoire { background: var(--bg); overflow-y: auto; }