:root {
  --paper:#f7fbff;
  --paper2:#fff;
  --ink:#121212;
  --red:#ef3428;
  --red2:#c71f18;
  --yellow:#ffd12a;
  --blue:#5bb8ec;
  --muted:#5e6873;
  --dark:#101316;
  --shadow:4px 4px 0 #111;
  background:#eef7fd;
  color:#111;
}
html { background:#eef7fd; }
body {
  background:#f7fbff;
  background-image:radial-gradient(circle at 1px 1px,rgba(36,108,151,.10) 1px,transparent 1.2px);
  background-size:13px 13px;
  color:#111;
}
.page-noise { display:none; }
.site-header { background:rgba(255,255,255,.98);border-bottom:3px solid #111;box-shadow:none; }
.nav-wrap { max-width:1540px;padding:12px 26px; }
.brand { filter:none;transform:skew(-5deg);letter-spacing:-2px; }
.brand-defis,.brand-moto { -webkit-text-stroke:0;font-size:40px;line-height:.9; }
.brand-defis { color:#111; }
.brand-moto { color:var(--red);margin-left:2px; }
.brand-flag { display:none; }
.desktop-nav { font-family:"Trebuchet MS",Arial,sans-serif;font-weight:900;gap:12px; }
.desktop-nav a,.link-button { padding:10px 12px;border-radius:0; }
.desktop-nav a:first-child { border-bottom:4px solid var(--red); }
.desktop-nav .nav-cta { background:var(--red);color:#fff;border:2px solid #111;box-shadow:2px 2px 0 #111;transform:none; }
.user-chip { background:#f0f6fa;color:#111;border:2px solid #111;transform:none; }
main { max-width:1600px;padding:18px 26px 70px; }

/* Hero — vraie illustration, pas de background CSS fragile */
.comic-hero {
  grid-template-columns:minmax(480px,.92fr) minmax(560px,1.08fr);
  min-height:500px;
  border:3px solid #111;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  margin-bottom:14px;
}
.comic-hero:before { background:radial-gradient(circle at 2px 2px,rgba(52,133,180,.13) 1px,transparent 1.2px);background-size:12px 12px;opacity:.55; }
.hero-copy { padding:42px 44px 36px; }
.sticker { border:3px solid #111;box-shadow:3px 3px 0 #111; }
.kicker { font-family:Impact,"Arial Black",sans-serif;color:var(--red);font-size:15px;letter-spacing:1.5px; }
.comic-hero h1 { font-size:clamp(58px,6.4vw,102px);line-height:.84;letter-spacing:-1.5px;margin:12px 0 22px; }
.comic-hero h1 em { color:var(--red);text-shadow:3px 3px 0 #111;-webkit-text-stroke:0; }
.hero-lead { font-size:19px;line-height:1.38;max-width:650px; }
.hero-actions { margin-top:26px; }
.button,button,.fake-button { border:2px solid #111;border-radius:7px;box-shadow:3px 3px 0 #111; }
.button-red,.fake-button { background:linear-gradient(#f34539,#e6251c);color:#fff; }
.button-yellow { background:linear-gradient(#ffdb43,#ffc927); }
.hero-art { position:relative;min-height:500px;border-left:3px solid #111;background:#d7effc;overflow:hidden; }
.hero-art:before,.hero-art .speech,.hero-art .onomatopoeia { display:none!important; }
.hero-art .hero-scene {
  position:absolute!important;
  inset:0!important;
  right:auto!important;
  bottom:auto!important;
  display:block;
  width:100%!important;
  height:100%!important;
  min-height:500px;
  object-fit:cover!important;
  object-position:center center;
  filter:none!important;
  transform:none!important;
}
.stats { display:none; }

/* Défis */
#defis { margin-top:16px; }
.section-title { padding:0 8px;margin-bottom:14px;align-items:center; }
.comic-title h2 { font-size:36px;font-style:italic;letter-spacing:-.5px; }
.eyebrow { font-family:Impact,"Arial Black",sans-serif;color:var(--red);font-size:14px; }
.scribble-link { color:#176aa1;text-decoration:none;border-bottom:2px solid #176aa1; }
.grid.challenge-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.challenge-grid .challenge-card { transform:none!important; }
.card,.panel { background:#fff;border:2px solid #111;border-radius:10px;box-shadow:3px 3px 0 #111; }
.challenge-card { overflow:hidden; }
.card-link { padding:0 16px 16px; }
.card-top { padding:12px 0 8px; }
.badge { border:2px solid #111;box-shadow:1px 1px 0 #111; }
.difficulty { font-size:22px; }
.challenge-illustration {
  height:185px;
  margin:0 -16px 12px;
  border-block:2px solid #111;
  background:#d7effc!important;
  overflow:hidden;
  display:block;
}
.challenge-illustration:before,.challenge-illustration:after,.challenge-illustration span,.challenge-illustration i { display:none!important; }
.challenge-illustration img {
  position:static!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:none!important;
  transform:none!important;
}
.card h3 { font-size:24px;margin:10px 0 6px; }
.card p { line-height:1.38; }
.meta { gap:8px; }
.meta span { background:#fff;border:1.5px solid #111;border-radius:5px;padding:5px 8px; }
.fake-button { margin-top:10px;padding:11px 16px; }

/* Formulaires et routes */
.comic-panel { background:#fff;max-width:1180px; }
.ai-panel { border-top:6px solid var(--yellow); }
input,textarea,select { background:#fff;border:2px solid #24313a;box-shadow:none; }
details { background:#f3f8fb;border:2px dashed #607887; }
.road-card { background:#fff;border-top:6px solid #70b9df; }
.road-ribbon { background:var(--yellow);color:#111;border:2px solid #111; }
.empty-card { background:#f9fcff; }

/* Fiche défi */
.mission-sheet { background:#fff;border:3px solid #111;border-radius:10px;box-shadow:none;overflow:hidden; }
.mission-art { position:relative;background:#d7effc;border-left:3px solid #111;overflow:hidden; }
.mission-art .mission-scene {
  position:absolute!important;
  inset:0!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:none!important;
  transform:none!important;
}
.stamp { background:rgba(255,255,255,.94);z-index:2; }

/* Garage */
.garage-hero,.map-hero { background:#fff;border:3px solid #111;border-radius:10px;box-shadow:none; }
.garage-hero { padding:0;min-height:310px; }
.garage-hero > div:first-child { padding:30px 34px;flex:1; }
.garage-hero .garage-scene {
  position:static!important;
  display:block!important;
  align-self:stretch;
  width:min(52%,620px)!important;
  max-width:none!important;
  min-height:310px;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
  border-left:3px solid #111;
}
.bike-poster { background:linear-gradient(160deg,#bfe8ff 0 55%,#e9f4fa 56%);border:2px solid #111; }

/* Connexion */
.auth-art { position:relative;background:#d7effc;border:3px solid #111;border-radius:10px;box-shadow:none;overflow:hidden; }
.auth-art .auth-scene {
  position:absolute!important;
  inset:0!important;
  left:0!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:65% center!important;
  transform:none!important;
  filter:none!important;
}
.auth-art .speech { z-index:3; }
.auth-card { background:#fff; }

.map-shell { background:#fff;border:3px solid #111;border-radius:10px;box-shadow:none; }
.leaflet-popup-content-wrapper { background:#fff!important; }
footer { background:#0e1114;border-top:4px solid var(--red); }

/* Safari : hero cache-busté + fallback de fond. */
.hero-art {
  display:flex!important;
  background:#d7effc url('/static/hero-dream-v2.jpg') center center / cover no-repeat!important;
}
.hero-art .hero-scene {
  position:relative!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:500px;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:1;
}

@media(max-width:1100px) {
  .comic-hero { grid-template-columns:1fr 1fr; }
  .hero-copy { padding:34px 28px; }
  .grid.challenge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .comic-hero { grid-template-columns:1fr; }
  .hero-art { border-left:0;border-top:3px solid #111;min-height:390px; }
  .hero-art .hero-scene { min-height:390px; }
  .grid.challenge-grid { grid-template-columns:1fr; }
  .comic-hero h1 { font-size:clamp(52px,13vw,78px); }
  .nav-wrap { padding:10px 14px; }
  .brand-defis,.brand-moto { font-size:34px; }
  main { padding:14px 12px 50px; }
  .garage-hero { display:block; }
  .garage-hero .garage-scene { width:100%!important;min-height:270px;border-left:0;border-top:3px solid #111; }
}
@media(max-width:680px) {
  .mission-art { min-height:280px;border-left:0;border-top:3px solid #111; }
  .auth-art { min-height:300px; }
}
@media(max-width:520px) {
  .hero-art,.hero-art .hero-scene { min-height:300px; }
  .hero-copy { padding:26px 20px; }
  .comic-title h2 { font-size:30px; }
  .challenge-illustration { height:165px; }
  .button,.fake-button,button { font-size:16px; }
}