/* ===========================
   RESPONSIVE PATCH (mobile)
   Place ce fichier en DERNIER
   =========================== */

html, body {
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------
   LANG SWITCH (FR / EN) – look propre
----------------------------------- */
.lang-switch,
.lang {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.lang-switch button,
.lang button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: rgba(255,255,255,.72);
  position: relative;
  line-height: 1;
}

.lang-switch button.active,
.lang button.active {
  color: var(--red);
}

.lang-switch button.active::after,
.lang button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 26px;
  height: 2px;
  background: var(--red);
  opacity: .9;
}

.lang-switch button:hover,
.lang button:hover {
  color: rgba(255,255,255,.95);
}

/* Fix spécifique : sur INDEX, ton HTML met .lang-switch en frère du bouton menu,
   donc ça se colle. On force un espace uniquement dans ce cas. */
.site-header .header-inner > .lang-switch {
  margin-left: auto;
  margin-right: 18px;
}

/* ---------------------------------
   CONTACT : dragon derrière, pas au-dessus du texte
   (corrige ton bug d'empilement z-index)
----------------------------------- */
.contact-inner {
  position: relative;
  isolation: isolate; /* crée un contexte : z-index fiable */
}

.contact-inner > * {
  position: relative;
  z-index: 2;
}

.contact-line {
  position: relative;
  z-index: 1;
}

.contact-dragon {
  z-index: 0 !important;
  pointer-events: none;
  opacity: .85;
}

/* ---------------------------------
   BREAKPOINTS
----------------------------------- */

/* TABLET ↓ */
@media (max-width: 980px) {

  /* HEADER */
  .site-header .header-inner {
    padding: 20px 22px !important;
  }

  .logo-img {
    width: 40px !important;
    height: 40px !important;
  }

  .logo-jp {
    font-size: 12px !important;
  }

  .menu-toggle {
    transform: scale(.95);
  }

  /* MENU overlay */
  .menu-panel {
    width: min(92vw, 420px);
  }

  /* HERO */
  .hero {
    margin-top: 110px !important;
    height: 56vh !important;
  }

  .hero h1 {
    font-size: clamp(26px, 6vw, 44px) !important;
    padding: 0 16px;
  }

  /* RULES */
  .rules {
    padding: 70px 18px !important;
  }

  .rules h2 {
    font-size: clamp(28px, 6.5vw, 52px) !important;
    line-height: 1.05;
  }

  .rules-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .rule {
    padding: 18px !important;
  }

  /* VEHICLES (index) */
  .vehicles {
    padding: 70px 18px !important;
  }

  .vehicle-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .vehicle {
    max-width: 520px;
    margin: 0 auto;
  }

  .vehicle img {
    height: 340px !important;
    object-fit: cover;
  }

  /* CONTACT */
  .contact {
    height: auto !important;
    padding: 90px 18px !important;
    background-attachment: scroll !important;
  }

  .contact-inner {
    width: min(92vw, 680px) !important;
    padding: 56px 22px !important;
  }

  .contact-inner h2 {
    font-size: clamp(42px, 10vw, 82px) !important;
  }

  .contact-btn {
    width: min(340px, 100%);
    padding: 14px 18px !important;
  }

  .contact-line {
    width: 100% !important;
    margin: 30px auto 0 !important;
  }

  .contact-dragon {
    width: 180px !important;
    left: -55px !important;
    top: -86px !important;
  }

  .jp-text {
    margin-top: 26px !important;
  }

  /* FOOTER */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 26px !important;
    padding: 55px 18px !important;
  }

  .footer-divider {
    width: 100% !important;
    height: 1px !important;
    opacity: .35;
  }

  .footer-right {
    text-align: left !important;
  }
}

/* MOBILE ↓ */
@media (max-width: 620px) {

  /* HEADER */
  .site-header .header-inner {
    padding: 16px 16px !important;
  }

  .menu-toggle span {
    width: 26px !important;
  }

  /* HERO */
  .hero {
    height: 52vh !important;
  }

  /* RULES text */
  .rule p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* VEHICLE cards on index */
  .vehicle img {
    height: 280px !important;
  }

  .vehicle-info p {
    font-size: 13px !important;
  }

  .vehicle-info span {
    font-size: 12px !important;
  }

  /* CONTACT : garder le dragon visible, mais intégré */
  .contact-inner {
    padding: 46px 18px !important;
  }

  .contact-dragon {
    width: 150px !important;
    left: -35px !important;
    top: -70px !important;
    opacity: .75;
  }

  .fr-text {
    font-size: 13px !important;
  }

  /* ABOUT page */
  .about {
    height: auto !important;
    padding: 110px 0 70px !important;
  }

  .about-inner {
    flex-direction: column !important;
    gap: 26px !important;
    padding: 0 16px !important;
  }

  .about-image img {
    width: 100% !important;
    max-height: 46vh !important;
    object-fit: cover !important;
  }

  .about-content {
    text-align: center;
  }

  .about-content h1 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }

  .about-box {
    width: 100% !important;
    text-align: left;
  }

  .about-btn {
    width: min(360px, 100%) !important;
    margin: 16px auto 0 !important;
  }

  .mini-icons img {
    width: 24px !important;
    height: 24px !important;
  }

  .boss-note {
    max-width: 100% !important;
    text-align: left;
  }

  .boss-note-mark {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ---------------------------------
   CATALOGUE (car cards) – responsive propre
----------------------------------- */
@media (max-width: 980px) {
  .catalog-hero {
    height: auto !important;
    min-height: 62vh !important;
    background-attachment: scroll !important;
  }

  .catalog-hero__inner {
    padding: 120px 18px 60px !important;
  }

  .catalog-title {
    font-size: clamp(26px, 6.2vw, 44px) !important;
    line-height: 1.05;
  }

  .catalog-note {
    max-width: 100% !important;
  }

  .catalog-container {
    padding: 60px 18px !important;
  }

  .car-card,
  .car-card--rev {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .car-card__media {
    order: -1;
    min-height: 220px;
  }

  .car-card__media img {
    height: 100% !important;
    object-fit: cover !important;
  }

  .car-card__price {
    font-size: 12px !important;
    padding: 10px 12px !important;
    top: 14px !important;
    left: 14px !important;
  }

  .car-card__body {
    padding: 18px !important;
  }

  .car-card__title,
  .car-card__title--right {
    text-align: left !important;
    font-size: clamp(18px, 5vw, 26px) !important;
  }

  .car-card__specs,
  .car-card__specs--right {
    text-align: left !important;
  }

  .car-card__desc,
  .car-card__desc--right {
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* =========================================
   MOBILE FIXES (INDEX)
   - HERO: image moins "coupée"
   - RULES: barres rouges qui ne chevauchent plus le texte
========================================= */
@media (max-width: 640px) {

  /* HERO: on garde cover, mais on "descend" l'image pour voir YOUKI ZAKA */
  .hero{
    min-height: 100svh !important;
    background-size: cover !important;
    background-position: 50% 82% !important; /* ↓ ajuste 78% -> 88% si besoin */
  }

  .hero-content{
    margin-top: 120px !important;
    padding: 0 16px;
  }

  .hero-content h1{
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.05;
  }

  /* RULES: sur mobile, le texte descend trop, et la rule-line absolue le chevauche
     => on repasse la line en "flux normal" */
  .rules{
    padding: 90px 0 !important;
  }

  .rules-grid{
    padding: 0 16px !important;
    gap: 26px !important;
  }

  .rule{
    min-height: unset !important;
    padding: 34px 18px 26px !important;
  }

  .rule p{
    margin-bottom: 0 !important;
  }

  .rule-line{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 28px auto 0 !important; /* espace entre texte et barres */
    width: 72% !important;
  }
}