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

html,
body {
  margin: 0;
  min-height: 100%;
}


html {
  background: #050505;
}


body {
  position: relative;

  min-height: 100vh;

  background: transparent !important;

  color: white;

  overflow-x: hidden;
}



/* =========================================================
   ARRIÈRE-PLAN
========================================================= */

.contact-bg {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  z-index: 0;

  pointer-events: none;
}


.contact-bg-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.02);
}



/* =========================================================
   OVERLAY
========================================================= */

.contact-overlay {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.65) 50%,
      rgba(0, 0, 0, 0.84) 100%
    );

  z-index: 1;

  pointer-events: none;
}



/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  z-index: 1000 !important;
}



/* =========================================================
   PAGE
========================================================= */

.contact-page {
  position: relative;

  z-index: 2;

  width: min(1200px, calc(100% - 40px));

  margin: 0 auto;

  padding-top: 155px;
  padding-bottom: 100px;
}



/* =========================================================
   INTRODUCTION
========================================================= */

.contact-intro {
  max-width: 900px;

  margin: 0 auto 70px;

  text-align: center;
}


.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: #D62828;

  font-size: 0.78rem;
  font-weight: 700;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}


.contact-intro h1 {
  margin: 0;

  font-size: clamp(2.7rem, 5vw, 5rem);

  line-height: 1.02;

  letter-spacing: -0.045em;
}


.contact-intro h1 span {
  display: block;

  color: #D62828;
}


.contact-intro p {
  max-width: 760px;

  margin: 28px auto 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: 1.05rem;

  line-height: 1.7;
}



/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.contact-container {
  display: grid;

  grid-template-columns: 0.82fr 1.45fr;

  gap: 25px;

  align-items: start;
}



/* =========================================================
   CARTE GAUCHE
========================================================= */

.contact-info {
  position: sticky;

  top: 120px;

  padding: 38px;

  border-radius: 24px;

  background: rgba(15, 15, 15, 0.60);

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

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35);
}


.section-number {
  display: block;

  margin-bottom: 12px;

  color: rgba(255, 255, 255, 0.35);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.2em;
}


.contact-info h2 {
  margin: 0;

  font-size: 2rem;

  letter-spacing: -0.03em;
}


.contact-info-intro {
  margin: 18px 0 0;

  color: rgba(255, 255, 255, 0.62);

  line-height: 1.65;
}



/* =========================================================
   LISTE CONTACT GAUCHE
========================================================= */

.contact-list {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 35px;
}


.contact-item {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 15px;

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

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.20);

  color: white;

  text-decoration: none;

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


.contact-item:hover {
  background: rgba(214, 40, 40, 0.08);

  border-color: rgba(214, 40, 40, 0.35);

  transform: translateX(3px);
}


.contact-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: rgba(214, 40, 40, 0.14);

  border: 1px solid rgba(214, 40, 40, 0.4);

  color: #D62828;

  font-size: 0.9rem;
  font-weight: 700;
}


.contact-item > div:last-child {
  min-width: 0;
}


.contact-label {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.contact-item strong {
  display: block;

  color: white;

  font-size: 0.95rem;

  line-height: 1.35;

  overflow-wrap: anywhere;
}


.contact-item small {
  display: block;

  margin-top: 3px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 0.78rem;

  line-height: 1.4;
}



/* =========================================================
   DISPONIBILITÉ
========================================================= */

.availability {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-top: 28px;

  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.availability-dot {
  flex: 0 0 9px;

  width: 9px;
  height: 9px;

  margin-top: 5px;

  border-radius: 50%;

  background: #D62828;

  box-shadow:
    0 0 15px rgba(214, 40, 40, 0.7);
}


.availability strong {
  display: block;

  margin-bottom: 4px;

  font-size: 0.9rem;
}


.availability div span {
  display: block;

  color: rgba(255, 255, 255, 0.45);

  font-size: 0.8rem;

  line-height: 1.45;
}



/* =========================================================
   CARTE COORDONNÉES DROITE
========================================================= */

.contact-details-card {
  padding: 42px;

  border-radius: 24px;

  background: rgba(15, 15, 15, 0.64);

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

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.38);
}


.contact-details-card h2 {
  margin: 0;

  font-size: 2.2rem;

  letter-spacing: -0.03em;
}


.contact-details-intro {
  margin: 15px 0 30px;

  color: rgba(255, 255, 255, 0.60);

  line-height: 1.6;
}



/* =========================================================
   PHOTO VÉHICULE
========================================================= */

.company-vehicle {
  position: relative;

  width: 100%;
  height: 330px;

  margin-bottom: 25px;

  overflow: hidden;

  border-radius: 18px;

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

  background: rgba(0, 0, 0, 0.35);
}


.company-vehicle img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


.company-vehicle:hover img {
  transform: scale(1.03);
}


.company-vehicle::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.88) 100%
    );

  pointer-events: none;
}


.vehicle-overlay {
  position: absolute;

  left: 22px;
  right: 22px;
  bottom: 20px;

  z-index: 2;
}


.vehicle-overlay span {
  display: block;

  margin-bottom: 4px;

  color: #D62828;

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.vehicle-overlay strong {
  display: block;

  color: #ffffff;

  font-size: 1.25rem;

  font-weight: 600;
}



/* =========================================================
   GRILLE COORDONNÉES
========================================================= */

.company-details {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}


.company-detail {
  display: flex;

  align-items: center;

  gap: 14px;

  min-height: 85px;

  padding: 16px;

  border-radius: 14px;

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

  background: rgba(0, 0, 0, 0.24);

  color: #ffffff;

  text-decoration: none;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


a.company-detail:hover {
  background: rgba(214, 40, 40, 0.08);

  border-color: rgba(214, 40, 40, 0.40);

  transform: translateY(-2px);
}



/* =========================================================
   ICÔNES COORDONNÉES
========================================================= */

.company-detail-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: rgba(214, 40, 40, 0.14);

  border: 1px solid rgba(214, 40, 40, 0.4);

  color: #D62828;

  font-size: 0.95rem;
  font-weight: 700;
}


.company-detail > div:last-child {
  min-width: 0;
}


.company-detail span {
  display: block;

  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.company-detail strong {
  display: block;

  color: #ffffff;

  font-size: 0.9rem;

  line-height: 1.4;

  overflow-wrap: anywhere;
}



/* =========================================================
   ACCÈS RAPIDES DEVIS
========================================================= */

.contact-actions {
  position: relative;

  margin-top: 80px;

  padding: 55px 40px;

  text-align: center;

  border-radius: 24px;

  background: rgba(15, 15, 15, 0.58);

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

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35);

  overflow: hidden;
}


.contact-actions::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  top: -220px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(214, 40, 40, 0.20);

  filter: blur(60px);

  pointer-events: none;
}


.contact-actions .eyebrow,
.contact-actions h2,
.contact-actions p,
.contact-actions .action-buttons {
  position: relative;

  z-index: 1;
}


.contact-actions h2 {
  max-width: 750px;

  margin: 0 auto;

  font-size: clamp(1.8rem, 3vw, 2.7rem);

  letter-spacing: -0.035em;

  line-height: 1.15;
}


.contact-actions h2 span {
  display: block;

  color: #D62828;
}


.contact-actions > p {
  max-width: 650px;

  margin: 20px auto 0;

  color: rgba(255, 255, 255, 0.60);

  font-size: 0.95rem;

  line-height: 1.6;
}



/* =========================================================
   BOUTONS DEVIS
========================================================= */

.action-buttons {
  display: flex;

  justify-content: center;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 30px;
}


.action-buttons button {
  padding: 14px 27px;

  border-radius: 999px;

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

  background: rgba(255, 255, 255, 0.08);

  color: white;

  font-family: inherit;

  font-size: 0.95rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.action-buttons button:hover {
  background: #D62828;

  border-color: #D62828;

  transform: scale(1.04);
}


.action-buttons .kit-button {
  background: #D62828;

  border-color: #D62828;
}


.action-buttons .kit-button:hover {
  background: #b91f1f;

  border-color: #b91f1f;
}



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

@media (max-width: 950px) {

  .contact-container {
    grid-template-columns: 1fr;
  }


  .contact-info {
    position: relative;

    top: auto;
  }

}



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

@media (max-width: 650px) {

  .contact-page {
    width: calc(100% - 20px);

    padding-top: 110px;
    padding-bottom: 60px;
  }


  .contact-intro {
    margin-bottom: 45px;
  }


  .contact-intro h1 {
    font-size: 2.5rem;
  }


  .contact-intro p {
    font-size: 0.95rem;
  }


  .contact-info {
    padding: 28px 22px;
  }


  .contact-details-card {
    padding: 28px 18px;
  }


  .company-vehicle {
    height: 240px;
  }


  .company-details {
    grid-template-columns: 1fr;
  }


  .contact-actions {
    margin-top: 50px;

    padding: 40px 20px;
  }


  .contact-actions h2 {
    font-size: 1.7rem;
  }


  .action-buttons {
    flex-direction: column;
  }


  .action-buttons button {
    width: 100%;
  }

}
/* ==========================================
   DOUBLE CARTE D'IDENTITÉ ENTREPRISE
========================================== */

.company-identity-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  width: 100%;
}

/* Les deux cartes gardent le même design */
.company-identity-column .contact-details-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Case vide réservée aux futures informations */
.identity-empty {
  display: block;
  min-height: 20px;
}

/* Éviter les débordements sur téléphone */
@media (max-width: 768px) {
  .company-identity-column {
    gap: 20px;
  }

  .company-identity-column .contact-details-card {
    width: 100%;
  }
}