/* =========================================================
   ET SI ? — LANDING.CSS
========================================================= */

:root {
  --bg: #0b0f16;
  --surface: #121823;
  --surface-2: #181f2c;
  --surface-3: #202938;

  --line: rgba(255, 255, 255, 0.10);

  --text: #f5f7fb;
  --text-soft: #b7c0cf;
  --text-muted: #7e8999;

  --yellow: #f4cf2c;
  --yellow-light: #ffe35b;

  --teal: #20b9b1;

  --shadow:
    0 28px 90px
    rgba(0, 0, 0, 0.34);
}


/* =========================================================
   MODE CLAIR
========================================================= */

html[data-theme="light"] {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #eef1ec;
  --surface-3: #e6eae3;

  --line: rgba(18, 25, 34, 0.11);

  --text: #151a22;
  --text-soft: #596473;
  --text-muted: #7b8592;

  --shadow:
    0 28px 70px
    rgba(30, 38, 47, 0.12);
}


/* =========================================================
   BASE
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  line-height: 1.55;
}


body.modal-open {
  overflow: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input {
  font: inherit;
}


button {
  border: 0;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: sticky;
  top: 0;

  z-index: 50;

  background:
    color-mix(
      in srgb,
      var(--bg) 88%,
      transparent
    );

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid
    var(--line);
}


.header-inner {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  min-height: 78px;

  margin:
    0 auto;

  display: flex;

  align-items: center;

  gap: 28px;
}


/* =========================================================
   LOGO
========================================================= */

/* =========================================================
   LOGO
========================================================= */

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  transition: transform 0.25s ease;
}

.brand:hover {
  transform: translateY(-1px);
}

.brand-logo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-title {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 950;
  letter-spacing: -0.07em;
  line-height: 1;
  color: var(--text);
  transition: color 0.25s ease;
}

.brand-badge {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--yellow);
  color: #11151a;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    0 10px 24px rgba(244, 207, 44, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.brand-tagline {
  position: relative;
  display: inline-block;
  padding-left: 34px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.brand-tagline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    var(--yellow),
    rgba(244, 207, 44, 0.1)
  );
}

.brand:hover .brand-title {
  color: var(--yellow);
}

.brand:hover .brand-badge {
  transform: rotate(-8deg) scale(1.05);
  box-shadow:
    0 14px 30px rgba(244, 207, 44, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}


.main-nav a {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  transition: background 0.16s ease, color 0.16s ease;
}


.main-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.main-nav a.is-active {
  color: #11151a;
  background: var(--yellow);
}

.main-nav-icon {
  display: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-nav-icon .nav-icon-fill,
.main-nav .nav-icon-fill {
  fill: currentColor;
  stroke: none;
}


/* =========================================================
   CONTACT ACCUEIL
========================================================= */

.home-contact {
  width: min(1120px, calc(100% - 40px));
  margin: 80px auto;
  padding: clamp(26px, 5vw, 44px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.home-contact-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--yellow);
  color: #11151a;
}

.home-contact-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-contact-copy .section-label {
  margin: 0 0 8px;
}

.home-contact-copy h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(25px, 4vw, 36px);
  letter-spacing: -0.035em;
}

.home-contact-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.home-contact-link {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 13px;
  background: var(--yellow);
  color: #11151a;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.home-contact-link:hover {
  transform: translateY(-2px);
}


/* =========================================================
   ACTIONS HEADER
========================================================= */

.header-actions {
  display: flex;

  align-items: center;

  gap: 10px;
}

.header-contact {
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-soft);
  transition: color 0.2s ease, background 0.2s ease;
}

.header-contact:hover {
  color: var(--text);
  background: var(--surface-2);
}

.header-contact svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.theme-toggle,
.header-play {
  min-height:
    43px;

  border-radius:
    11px;

  cursor:
    pointer;

  transition:
    transform 0.2s ease;
}


.theme-toggle:hover,
.header-play:hover {
  transform:
    translateY(-2px);
}


.theme-toggle {
  width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;

  border:
    1px solid
    var(--line);

  background:
    var(--surface);

  color:
    var(--text);
}

.theme-toggle > span {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="light"] .theme-sun,
html[data-theme="dark"] .theme-moon {
  display: flex;
}


html[data-theme="dark"] .theme-sun {
  display: none;
}


html[data-theme="light"] .theme-moon {
  display: none;
}


.header-play {
  padding:
    0 17px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  background:
    var(--yellow);

  color:
    #11151a;

  font-size:
    13px;

  font-weight:
    900;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position:
    relative;

  min-height:
    calc(100vh - 79px);

  display:
    flex;

  align-items:
    center;

  border-bottom:
    1px solid
    var(--line);
}


.hero-inner {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    70px 0 90px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 0.92fr);

  gap:
    72px;

  align-items:
    center;
}


/* =========================================================
   HERO TEXTE
========================================================= */

.hero-kicker {
  width:
    fit-content;

  margin-bottom:
    22px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.live-dot {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--teal);

  box-shadow:
    0 0 0 5px
    rgba(32, 185, 177, 0.12);
}


.hero h1 {
  margin:
    0;

  max-width:
    680px;

  font-size:
    clamp(
      52px,
      6.2vw,
      88px
    );

  line-height:
    0.95;

  letter-spacing:
    -0.06em;
}


.hero h1 span {
  display:
    block;

  color:
    var(--yellow);
}


.hero-description {
  max-width:
    620px;

  margin:
    28px 0;

  color:
    var(--text-soft);

  font-size:
    17px;
}


.hero-description strong {
  color:
    var(--text);
}


/* =========================================================
   HERO BOUTONS
========================================================= */

.hero-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.primary-button,
.ghost-button {
  min-height:
    49px;

  padding:
    0 19px;

  border-radius:
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  cursor:
    pointer;

  font-weight:
    850;

  transition:
    transform 0.2s ease;
}


.primary-button:hover,
.ghost-button:hover {
  transform:
    translateY(-2px);
}


.primary-button {
  background:
    var(--yellow);

  color:
    #11151a;
}


.ghost-button {
  border:
    1px solid
    var(--line);

  background:
    transparent;

  color:
    var(--text);
}


.button-arrow {
  font-size:
    18px;
}


/* =========================================================
   OBSERVE / ANTICIPE / DÉCIDE
========================================================= */

.hero-principles {
  margin-top:
    28px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--text-muted);

  font-size:
    12px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.10em;
}


.hero-principles i {
  width:
    22px;

  height:
    1px;

  background:
    var(--line);
}


/* =========================================================
   APERÇU DU JEU
========================================================= */

.hero-stage {
  position:
    relative;

  perspective:
    1000px;
}


.game-preview {
  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    19px;

  background:
    var(--surface);

  box-shadow:
    var(--shadow);

  transform:
    rotateY(-2deg)
    rotateX(1deg);
}


.preview-top {
  min-height:
    50px;

  padding:
    0 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--line);

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.preview-progress {
  display:
    flex;

  gap:
    6px;
}


.preview-progress i {
  width:
    20px;

  height:
    4px;

  border-radius:
    99px;

  background:
    var(--surface-3);
}


.preview-progress i.active {
  background:
    var(--yellow);
}


/* =========================================================
   SCÈNE
========================================================= */

.preview-scene {
  position:
    relative;

  aspect-ratio:
    16 / 9;

  overflow:
    hidden;

  background:
    #222a34;
}


/* =========================================================
   VRAIE IMAGE DE SITUATION
========================================================= */

.preview-situation-image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  z-index:
    1;
}


/* =========================================================
   AVATAR SUR LA SITUATION
========================================================= */

.preview-driver {
  position:
    absolute;

  left:
    18px;

  bottom:
    18px;

  z-index:
    10;
}


.preview-avatar.emoji-avatar {
  width:
    82px;

  height:
    82px;

  display:
    grid;

  place-items:
    center;

  border:
    3px solid
    var(--yellow);

  border-radius:
    50%;

  background:
    rgba(
      15,
      19,
      27,
      0.88
    );

  backdrop-filter:
    blur(8px);

  font-size:
    52px;

  line-height:
    1;

  user-select:
    none;

  box-shadow:
    0 10px 25px
    rgba(0, 0, 0, 0.30);
}


#preview-avatar-boy {
  display:
    none;
}


/* =========================================================
   CARTE ET SI
========================================================= */

.what-if-card {
  position:
    absolute;

  right:
    15px;

  bottom:
    15px;

  z-index:
    12;

  max-width:
    210px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    12px;

  background:
    rgba(
      10,
      14,
      20,
      0.76
    );

  color:
    #ffffff;

  backdrop-filter:
    blur(9px);
}


.what-if-card span {
  display:
    block;

  color:
    var(--yellow);

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    0.14em;
}


.what-if-card strong {
  display:
    block;

  margin-top:
    4px;

  font-size:
    13px;

  line-height:
    1.25;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {
  position:
    absolute;

  left:
    50%;

  bottom:
    22px;

  transform:
    translateX(-50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--text-muted);

  font-size:
    10px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.scroll-indicator i {
  width:
    1px;

  height:
    25px;

  background:
    var(--line);
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    100px 0;

  display:
    grid;

  grid-template-columns:
    70px 1fr;

  gap:
    24px;

  border-bottom:
    1px solid
    var(--line);
}


.section-number {
  padding-top:
    8px;

  color:
    var(--text-muted);

  font-size:
    12px;

  font-weight:
    850;

  letter-spacing:
    0.15em;
}


.section-label {
  margin:
    0 0 16px;

  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.section-content h2 {
  margin:
    0;

  max-width:
    800px;

  font-size:
    clamp(
      34px,
      4.2vw,
      56px
    );

  line-height:
    1.03;

  letter-spacing:
    -0.045em;
}


.section-content h2 span {
  color:
    var(--yellow);
}


/* =========================================================
   CONCEPT
========================================================= */

.concept-grid {
  margin-top:
    42px;

  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    42px;
}


.concept-copy {
  color:
    var(--text-soft);

  font-size:
    17px;
}


.concept-copy p {
  max-width:
    540px;

  margin:
    0 0 17px;
}


.concept-copy strong {
  color:
    var(--text);
}


.concept-flow {
  display:
    grid;

  gap:
    11px;
}


.flow-item {
  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    40px 1fr;

  gap:
    13px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--surface);
}


.flow-item.featured {
  border-color:
    rgba(
      244,
      207,
      44,
      0.55
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        244,
        207,
        44,
        0.08
      ),
      var(--surface)
    );
}


.flow-index {
  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    850;
}


.flow-item span {
  color:
    var(--yellow);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.flow-item h3 {
  margin:
    5px 0 6px;

  font-size:
    18px;
}


.flow-item p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    13px;
}


/* =========================================================
   TRANSITION ROUTE
========================================================= */

.road-break {
  position:
    relative;

  min-height:
    240px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--surface);

  border-bottom:
    1px solid
    var(--line);
}


.road-break-line {
  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    50%;

  height:
    3px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--yellow)
      0 70px,
      transparent
      70px 115px
    );

  opacity:
    0.45;
}


.road-break-car {
  position:
    absolute;

  left:
    12%;

  bottom:
    55px;

  width:
    180px;
}


.road-break-car svg {
  width:
    100%;

  display:
    block;
}


.road-message {
  position:
    relative;

  z-index:
    2;

  padding:
    22px 30px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--bg);

  text-align:
    center;

  box-shadow:
    var(--shadow);
}


.road-message small {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--yellow);

  font-weight:
    900;

  letter-spacing:
    0.14em;
}


.road-message strong {
  font-size:
    20px;
}


/* =========================================================
   CONDUCTEUR
========================================================= */

.driver-intro {
  max-width:
    700px;

  margin:
    20px 0 28px;

  color:
    var(--text-soft);
}


.avatar-selector {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 280px)
    );

  gap:
    14px;
}


.avatar-option {
  position:
    relative;

  min-height:
    150px;

  padding:
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    var(--surface);

  color:
    var(--text);

  cursor:
    pointer;

  text-align:
    left;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}


.avatar-option:hover {
  transform:
    translateY(-2px);
}


.avatar-option.selected {
  border-color:
    var(--yellow);

  box-shadow:
    inset 0 0 0 1px
    var(--yellow);
}


.avatar-option-preview {
  width:
    88px;

  height:
    105px;

  flex:
    0 0 auto;
}


.avatar-option-preview.emoji-choice {
  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  background:
    var(--surface-2);

  font-size:
    58px;

  line-height:
    1;

  user-select:
    none;
}


.avatar-option-info {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.avatar-option-info strong {
  font-size:
    16px;
}


.avatar-option-info span {
  color:
    var(--text-muted);

  font-size:
    13px;
}


.avatar-check {
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    23px;

  height:
    23px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  background:
    var(--yellow);

  color:
    #111;

  opacity:
    0;

  font-size:
    12px;

  font-weight:
    900;
}


.avatar-option.selected .avatar-check {
  opacity:
    1;
}


/* =========================================================
   COMMENT JOUER
========================================================= */

.how-grid {
  margin-top:
    38px;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    14px;
}


.how-card {
  min-height:
    220px;

  padding:
    22px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    var(--surface);
}


.how-index {
  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    850;
}


.how-symbol {
  width:
    42px;

  height:
    42px;

  margin-top:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  background:
    var(--surface-2);

  font-size:
    18px;

  font-weight:
    900;
}


.how-symbol.yellow {
  background:
    var(--yellow);

  color:
    #111;
}


.how-card h3 {
  margin:
    15px 0 7px;

  font-size:
    20px;
}


.how-card p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    14px;
}


/* =========================================================
   SECTION FINALE
========================================================= */

.final-section {
  position:
    relative;

  overflow:
    hidden;

  padding:
    100px 20px;

  background:
    var(--surface);
}


.final-content {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1040px,
      100%
    );

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;
}


.final-content h2 {
  margin:
    0;

  font-size:
    clamp(
      44px,
      6vw,
      72px
    );

  line-height:
    0.98;

  letter-spacing:
    -0.055em;
}


.final-play {
  min-width:
    210px;

  min-height:
    58px;

  padding:
    0 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-radius:
    13px;

  background:
    var(--yellow);

  color:
    #111;

  cursor:
    pointer;

  font-weight:
    900;

  transition:
    transform 0.2s ease;
}


.final-play:hover {
  transform:
    translateY(-3px);
}


.final-road {
  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    24px;

  height:
    2px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--yellow)
      0 70px,
      transparent
      70px 120px
    );

  opacity:
    0.15;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-road-message {
  width: calc(100% - 52px);
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.footer-road-message strong {
  font-weight: 800;
}

.footer-road-line {
  min-width: 80px;
  height: 26px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--surface-3);
}

.footer-road-line span {
  width: 13px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--yellow);
}

.site-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 38px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.footer-brand {
  display: flex;
  align-items: center;
  color: var(--text);
}

.site-footer > p:not(.footer-credit) {
  text-align: center;
}

.footer-logo-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-logo-text {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -0.07em;
  line-height: 1;
}

.footer-logo-badge {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #11151a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    0 5px 12px rgba(244, 207, 44, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.site-footer p,
.footer-credit {
  margin: 0;
  text-align: center;
}

.footer-credit a {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px;
}

.site-footer .footer-contact-link {
  color: var(--text);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px;
}

@media (min-width: 701px) {
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    text-align: initial;
  }

  .footer-brand {
    grid-column: 1;
    justify-self: start;
  }

  .site-footer > p:not(.footer-credit) {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
    text-align: center;
  }

  .footer-credit {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
    text-align: right;
  }
}

@media (max-width: 700px) {
  .home-contact {
    margin: 54px auto;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-contact-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
  }

  .home-contact-link {
    width: 100%;
  }

  .footer-road-message {
    width: calc(100% - 40px);
  }

  .site-footer {
    gap: 12px;
  }
}

/* =========================================================
   MODALE
========================================================= */

.profile-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    100;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}


.profile-modal.open {
  visibility:
    visible;

  opacity:
    1;
}


.profile-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      4,
      7,
      11,
      0.76
    );

  backdrop-filter:
    blur(9px);
}


.profile-panel {
  position:
    relative;

  width:
    min(
      510px,
      100%
    );

  padding:
    32px;

  border:
    1px solid
    var(--line);

  border-radius:
    19px;

  background:
    var(--surface);

  box-shadow:
    var(--shadow);
}


.profile-close {
  position:
    absolute;

  right:
    14px;

  top:
    14px;

  width:
    38px;

  height:
    38px;

  border-radius:
    10px;

  background:
    var(--surface-2);

  color:
    var(--text);

  cursor:
    pointer;

  font-size:
    23px;
}


.profile-step {
  margin-bottom:
    8px;

  color:
    var(--yellow);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.profile-panel h2 {
  margin:
    0;

  font-size:
    31px;

  letter-spacing:
    -0.035em;
}


.profile-intro {
  margin:
    10px 0 22px;

  color:
    var(--text-soft);
}


.profile-label,
.profile-avatar-title {
  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    750;
}


.profile-input {
  width:
    100%;

  height:
    50px;

  padding:
    0 14px;

  margin-bottom:
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  outline:
    none;

  background:
    var(--surface-2);

  color:
    var(--text);
}


.profile-input:focus {
  border-color:
    var(--yellow);
}


/* =========================================================
   AVATARS DE LA MODALE
========================================================= */

.profile-avatars {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    11px;
}


.profile-avatar {
  position:
    relative;

  min-height:
    130px;

  padding:
    12px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    var(--surface-2);

  color:
    var(--text);

  cursor:
    pointer;
}


.profile-avatar.selected {
  border-color:
    var(--yellow);

  box-shadow:
    inset 0 0 0 1px
    var(--yellow);
}


.profile-avatar-circle {
  width:
    78px;

  height:
    78px;

  margin:
    0 auto 10px;
}


.profile-avatar-circle.emoji-choice {
  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--surface);

  font-size:
    52px;

  line-height:
    1;

  user-select:
    none;
}


.profile-avatar strong {
  display:
    block;

  text-align:
    center;
}


.profile-check {
  position:
    absolute;

  top:
    9px;

  right:
    9px;

  width:
    21px;

  height:
    21px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--yellow);

  color:
    #111;

  opacity:
    0;

  font-size:
    11px;

  font-weight:
    900;
}


.profile-avatar.selected .profile-check {
  opacity:
    1;
}


.profile-error {
  min-height:
    20px;

  margin:
    10px 0 4px;

  color:
    #ff7676;

  font-size:
    12px;
}


.profile-start {
  width:
    100%;

  min-height:
    49px;

  margin-top:
    7px;

  padding:
    0 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-radius:
    11px;

  background:
    var(--yellow);

  color:
    #111;

  cursor:
    pointer;

  font-weight:
    900;

  transition:
    transform 0.2s ease;
}


.profile-start:hover {
  transform:
    translateY(-2px);
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {

  .header-inner {
    gap: 10px;
  }

  .brand-tagline {
    display: none;
  }

  .main-nav {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
  }

  .main-nav a {
    width: 34px;
    min-height: 30px;
    padding: 0;
    border-radius: 9px;
  }

  .main-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .main-nav-icon {
    display: block;
  }

  .theme-toggle {
    width: 36px;
    min-height: 36px;
    border-radius: 10px;
  }


  .hero {
    min-height:
      auto;
  }


  .hero-inner {
    padding:
      60px 0 85px;

    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  .hero-stage {
    max-width:
      700px;
  }


  .concept-grid {
    grid-template-columns:
      1fr;
  }


  .how-grid {
    grid-template-columns:
      1fr;
  }


  .scroll-indicator {
    display:
      none;
  }


  .final-content {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .header-inner,
  .hero-inner,
  .section,

  


  .header-inner {
    min-height:
      68px;
  }


  .brand-text span {
    display:
      none;
  }


  .play-label {
    display:
      none;
  }


  .header-play {
    width:
      43px;

    padding:
      0;

    justify-content:
      center;
  }


  .hero-inner {
    padding-top:
      48px;
  }


  .hero h1 {
    font-size:
      48px;
  }


  .hero-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .hero-principles {
    flex-wrap:
      wrap;
  }


  .game-preview {
    transform:
      none;
  }


  .preview-driver {
    left:
      12px;

    bottom:
      12px;
  }


  .preview-avatar.emoji-avatar {
    width:
      64px;

    height:
      64px;

    font-size:
      42px;
  }


  .what-if-card {
    right:
      10px;

    bottom:
      10px;

    max-width:
      165px;
  }


  .section {
    padding:
      70px 0;

    grid-template-columns:
      1fr;
  }


  .road-break {
     min-height: 240px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding:
      24px 16px
      0;
  }



  .road-break-car {
     width: 125px;

    left: 8%;

    bottom: 32px;

    z-index: 3;

    animation:
      roadCarDriveMobile
      5.5s
      ease-in-out
      infinite
      alternate;
  }

    @keyframes roadCarDriveMobile {

    from {
      transform:
        translateX(0);
    }

    to {
      transform:
        translateX(80px);
    }

  }

}



  .road-message {
    position: relative;

    z-index: 5;

    width:
      min(
        300px,
        calc(100% - 28px)
      );

    margin: 0 auto;

    padding:
      14px 18px;

    border-radius:
      13px;
  }

    .road-message small {
    font-size: 10px;
  }



  .road-message strong {
    font-size: 15px;

    line-height: 1.25;
  }


  /* ROUTE PLUS BAS */

  .road-break-line {
    top: auto;

    bottom: 68px;
  }


@media (max-width: 430px) {

  .road-break {
    min-height: 225px;
  }


  .road-message {
    width:
      calc(100% - 36px);

    padding:
      13px 14px;
  }


  .road-message strong {
    font-size: 14px;
  }


  .road-break-car {
    width: 105px;

    left: 4%;

    bottom: 30px;
  }


  .road-break-line {
    bottom: 62px;
  }


  @keyframes roadCarDriveMobile {

    from {
      transform:
        translateX(0);
    }

    to {
      transform:
        translateX(55px);
    }

  }

}

  .avatar-selector {
    grid-template-columns:
      1fr;
  }


  .avatar-option {
    min-height:
      120px;
  }


  .avatar-option-preview {
    width:
      72px;

    height:
      84px;
  }


  .avatar-option-preview.emoji-choice {
    font-size:
      49px;
  }


  .final-section {
    padding:
      75px 20px;
  }


  .final-play {
    width:
      100%;
  }


  .profile-panel {
    padding:
      28px 19px 20px;
  }


  .profile-avatars {
    grid-template-columns:
      1fr 1fr;
  }


  .profile-avatar-circle.emoji-choice {
    font-size:
      46px;
  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 430px) {

  .main-nav a {
    width: 30px;
  }

  .main-nav-icon {
    width: 16px;
    height: 16px;
  }

  .brand-main {
    gap: 6px;
  }

  .brand-title {
    font-size: 21px;
  }

  .brand-badge {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .hero h1 {
    font-size:
      41px;
  }


  .brand-symbol {
    width:
      40px;

    height:
      40px;
  }


  .header-play {
    width: 40px;
    min-height: 40px;
  }


  .profile-avatars {
    grid-template-columns:
      1fr;
  }


  .what-if-card {
    max-width:
      145px;

    padding:
      9px 11px;
  }


  .what-if-card strong {
    font-size:
      11px;
  }

}

/* =========================================================
   REFONTE VISUELLE 2026 — LOGO, HERO, IMAGE & ANIMATIONS
   Ajoutée en fin de fichier pour préserver toute la logique existante.
========================================================= */

:root {
  --brand-ink: #11151b;
  --hero-ring: rgba(244, 207, 44, 0.18);
  --hero-soft: rgba(32, 185, 177, 0.10);
}

html[data-theme="light"] {
  --brand-ink: #12161c;
  --hero-ring: rgba(220, 179, 0, 0.16);
  --hero-soft: rgba(32, 185, 177, 0.08);
}

/* ---------- LOGO ET SI ? ---------- */
.brand {
  gap: 14px;
  isolation: isolate;
}

.brand-symbol {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--yellow-light), var(--yellow));
  box-shadow:
    0 12px 30px rgba(244,207,44,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--brand-ink);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -.08em;
  transform: rotate(-2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.brand:hover .brand-symbol {
  transform: rotate(0deg) translateY(-2px) scale(1.03);
  box-shadow:
    0 16px 40px rgba(244,207,44,.26),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.brand-symbol .brand-et,
.brand-symbol .brand-si,
.brand-symbol .brand-question {
  position: relative;
  z-index: 2;
  line-height: 1;
}

.brand-symbol .brand-et {
  align-self: end;
  justify-self: end;
  padding: 0 4px 3px 0;
  font-size: 12px;
}

.brand-symbol .brand-si {
  align-self: end;
  justify-self: start;
  padding: 0 0 3px 4px;
  font-size: 12px;
}

.brand-symbol .brand-question {
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  padding-top: 1px;
  font-size: 23px;
  transform: none;
}

.brand-road {
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 14px;
  height: 35px;
  border-left: 2px dashed rgba(17,21,27,.35);
  transform: translateX(-1px) rotate(10deg);
  opacity: .7;
}

.brand-text strong {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 17px;
  letter-spacing: .11em;
}

.brand-text span {
  margin-top: 4px;
  letter-spacing: .015em;
}

/* ---------- HERO ---------- */
.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 35%, var(--hero-ring), transparent 30%),
    radial-gradient(circle at 12% 78%, var(--hero-soft), transparent 27%),
    var(--bg);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
}

.hero-ambient {
  position: absolute;
  border: 1px solid rgba(244,207,44,.18);
  border-radius: 999px;
  pointer-events: none;
  opacity: .7;
}

.hero-ambient-one {
  width: 440px;
  height: 440px;
  right: -190px;
  top: 6%;
  animation: heroOrbit 16s ease-in-out infinite alternate;
}

.hero-ambient-two {
  width: 230px;
  height: 230px;
  right: 28%;
  bottom: -120px;
  border-color: rgba(32,185,177,.18);
  animation: heroOrbit 12s ease-in-out -4s infinite alternate-reverse;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-copy {
  animation: heroCopyIn .85s cubic-bezier(.2,.75,.25,1) both;
}

.hero-kicker {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: blur(12px);
}

.live-dot {
  animation: livePulse 1.8s ease-out infinite;
}

.hero h1 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  text-wrap: balance;
}

.hero h1 span {
  position: relative;
  width: fit-content;
}



.primary-button,
.header-play,
.final-play {
  position: relative;
  overflow: hidden;
}

.primary-button::before,
.header-play::before,
.final-play::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -45%;
  width: 28%;
  height: 220%;
  background: rgba(255,255,255,.35);
  transform: rotate(20deg);
  transition: left .55s ease;
}

.primary-button:hover::before,
.header-play:hover::before,
.final-play:hover::before {
  left: 125%;
}

.button-arrow,
.header-play > span:last-child,
.final-play > span:last-child {
  transition: transform .25s ease;
}

.primary-button:hover .button-arrow,
.header-play:hover > span:last-child,
.final-play:hover > span:last-child {
  transform: translateX(4px);
}

/* ---------- APERÇU DE LA SITUATION ---------- */
.hero-stage {
  animation: heroStageIn 1s .12s cubic-bezier(.2,.75,.25,1) both;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 13% -7% -10% 12%;
  z-index: -1;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(244,207,44,.16), rgba(32,185,177,.09));
  filter: blur(24px);
  opacity: .8;
}

.game-preview {
  position: relative;
  border-radius: 24px;
  transform: rotateY(-3deg) rotateX(1.2deg) translateY(0);
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease,
    border-color .35s ease;
  animation: previewFloat 6s 1.2s ease-in-out infinite;
}

.game-preview:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-7px) scale(1.012);
  border-color: rgba(244,207,44,.35);
  box-shadow: 0 35px 110px rgba(0,0,0,.42);
}

.preview-top {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.preview-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5,8,13,.42), transparent 42%),
    linear-gradient(110deg, transparent 55%, rgba(255,255,255,.08));
}

.preview-situation-image {
  transform: scale(1.035);
  animation: sceneBreath 9s ease-in-out infinite alternate;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.game-preview:hover .preview-situation-image {
  transform: scale(1.075);
  filter: saturate(1.04) contrast(1.02);
}

.preview-scene-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 13;
  min-height: 31px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(9,13,19,.66);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.preview-scene-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(244,207,44,.16);
}

.what-if-card {
  z-index: 14;
  border-color: rgba(244,207,44,.34);
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
  animation: whatIfFloat 4.2s ease-in-out infinite;
}

.preview-avatar.emoji-avatar {
  z-index: 14;
  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    0 0 0 6px rgba(244,207,44,.08);
  animation: avatarPop .7s .8s cubic-bezier(.2,1.4,.4,1) both;
}

/* ---------- CARTES / SECTIONS ---------- */
.flow-item,
.how-card,
.avatar-option {
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.flow-item:hover,
.how-card:hover,
.avatar-option:hover {
  transform: translateY(-5px);
  border-color: rgba(244,207,44,.30);
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
}

.flow-item.featured:hover {
  border-color: rgba(244,207,44,.72);
}

.how-symbol {
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
}

.how-card:hover .how-symbol {
  transform: rotate(-6deg) scale(1.08);
}

.road-break-car {
  animation: roadCarDrive 5.5s ease-in-out infinite alternate;
}

.scroll-indicator i {
  transform-origin: top;
  animation: scrollLine 1.7s ease-in-out infinite;
}

/* ---------- KEYFRAMES ---------- */
@keyframes heroCopyIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroStageIn {
  from { opacity: 0; transform: translateX(34px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes heroOrbit {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to { transform: translate3d(-22px,20px,0) rotate(8deg); }
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(32,185,177,.34); }
  70% { box-shadow: 0 0 0 9px rgba(32,185,177,0); }
  100% { box-shadow: 0 0 0 0 rgba(32,185,177,0); }
}

@keyframes titleLine {
  to { transform: scaleX(1); }
}

@keyframes previewFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes sceneBreath {
  from { transform: scale(1.035); }
  to { transform: scale(1.065); }
}

@keyframes whatIfFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes avatarPop {
  from { opacity: 0; transform: scale(.7) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes roadCarDrive {
  from { transform: translateX(-28px); }
  to { transform: translateX(42px); }
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(.35); opacity: .3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- RESPONSIVE DE LA REFONTE ---------- */
@media (max-width: 920px) {
  .hero-ambient-one { right: -280px; }
  .game-preview { animation-duration: 7s; }
}

@media (max-width: 680px) {
  .brand-symbol {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .brand-text span { display: none; }

  .hero::before {
    background-size: 52px 52px;
    opacity: .16;
  }

  .hero-ambient-one,
  .hero-ambient-two { opacity: .35; }

  .preview-scene-badge {
    top: 10px;
    left: 10px;
    min-height: 27px;
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  .brand-symbol {
    width: 42px;
    height: 42px;
  }

  .brand-symbol .brand-question { font-size: 19px; }
  .brand-symbol .brand-et,
  .brand-symbol .brand-si { font-size: 10px; }

  .preview-scene-badge {
    max-width: 115px;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}