/* -------- RESET & BASE -------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: Arial, sans-serif;
}

/* -------- BACKGROUND & LAYOUT -------- */
/* Fond ancré à la fenêtre → évite le "zoom" quand le contenu est plus haut */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('images/background.jpg') no-repeat center center / cover;
}

/* <main> ne porte plus le fond (juste la mise en page) */
main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 40px;
  background: none;
}


/* -------- HEADER -------- */
header {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
  z-index: 10;
}

.logo img {
  height: 150px;
  margin-top: -20px;
}

.header-buttons {
  margin-top: -40px; /* 👈 C’est ici que tu remontes les boutons */
}

.header-buttons button {
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* -------- TITRES -------- */
h1 {
  font-size: 2em;
  color: white;
  margin-bottom: 10px;
}

.subtext {
  color: #ccc;
  margin-bottom: 30px;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #01c2f1;
  border-radius: 50%;
  margin: 0 6px;
}

/* -------- FORM -------- */
.search-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 100%;
  max-width: 1100px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  align-items: flex-end;
  width: 100%;
}

.input-group,
.select-group > div {
  display: flex;
  flex-direction: column;
}

.select-group{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* aligne les champs par le bas */
  gap: 20px;
}



input,
select {
  padding: 12px;
  border-radius: 8px;
  border: none;
  min-width: 150px;
  color: #4e4e4e; /* Texte des selects en gris */
  background-color: white;
}

label {
  font-size: 0.85em;
  margin-bottom: 5px;
  text-align: left;
  color: white;
}

.ou {
  font-weight: bold;
  align-self: center;
  color: white;
}

/* -------- CTA -------- */
.cta {
  background: #0295b4;
  color: white;
  border: none;
  padding: 15px;
  font-size: 1em;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 1100px;
}

@media (max-width: 768px) {
  .search-form {
    gap: 20px;
    padding: 0 10px;
  }

/* garder la rangée en ligne, mais autoriser le retour à la ligne si besoin */
.form-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.select-group { /* reste "contents", ici c'est juste un filet de sécurité */
  flex-direction: row;
  gap: 10px;
}



/* Garder des champs compacts et alignables, même en mobile */
.search-form input,
.search-form select {
  width: auto !important;
  min-width: 160px !important;
  max-width: none;
}


  .cta {
    width: 100%;
    max-width: 100%;
  }

.logo img {
  height: 130px;
  margin-top: -10px;
  transition: transform 0.3s ease;
}


  .header-buttons {
    margin-top: -30px;
  }

  header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }
}

.header-buttons button:hover {
  background: rgba(255, 255, 255, 0.2); /* Légère teinte bleue */
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.4),
    0 0 16px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(255, 255, 255, 0.8);
  color: #ffffff;
  transition: all 0.25s ease-in-out;
}

.logo img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(1, 194, 241, 0.6));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.cta:hover {
  background: #01c2f1;
  box-shadow:
    0 0 4px rgba(1, 194, 241, 0.3),
    0 0 8px rgba(1, 194, 241, 0.4);
  transform: scale(1.015);
  transition: all 0.25s ease-in-out;
}

/* === CHOIX PRESTATIONS PAGE === */
.prestation-page main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160px;
  text-align: center;
  background: transparent;
}


.vehicle-summary {
  color: white;
  margin-bottom: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.vehicle-summary .edit-vehicle {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1em;
  filter: drop-shadow(0 0 3px white);
}

h2 {
  color: rgb(255, 255, 255);
  font-size: 2em;
  margin-bottom: 20px;
}

.prestation-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 700px;
  gap: 20px;
}

.prestation-select {
  padding: 15px;
  width: 100%;
  border-radius: 8px;
  border: none;
  font-size: 1em;
}

.selected-prestations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: white;
  justify-content: center;
}

.prestation-tag {
  background: white;
  color: black;
  padding: 5px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
}

.prestation-tag button {
  background: none;
  border: none;
  color: black;
  cursor: pointer;
  font-weight: bold;
}

.prestation-submit {
  margin-top: 20px;
}
@media (max-width: 768px) {
  .prestation-page main {
    padding: 120px 20px 40px;
  }

  .vehicle-summary {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    font-size: 0.95em;
  }

  h2 {
    font-size: 1.5em;
  }

  .prestation-select {
    width: 100%;
    font-size: 1em;
  }

  .selected-prestations {
    flex-direction: column;
    align-items: center;
  }

  .prestation-tag {
    font-size: 0.9em;
    padding: 6px 10px;
  }

  .cta.prestation-submit {
    width: 100%;
    font-size: 1em;
    padding: 12px;
  }

  .logo img {
    height: 130px;
  }

  .header-buttons {
    margin-top: -30px;
  }

  header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }
}

.lieu-main {
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  min-height: 100vh;
  background: transparent;
}


.garage-main .recap-bloc {
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  margin-bottom: 40px;
  backdrop-filter: blur(5px);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.garage-main .recap-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.label {
  font-weight: bold;
}

.edit-btn {
  background: none;
  border: none;
  font-size: 1em;
  color: white;
  cursor: pointer;
  filter: drop-shadow(0 0 2px white);
}

.prestation-tag {
  background: white;
  color: black;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 5px;
  font-size: 0.85em;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: black;
}

html, body {
  height: 100%;
}

.popular-locations button {
  background-color: #004f5f;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.popular-locations button:hover {
  background-color: #007c91;
}
/* ===== STYLES GARAGE.HTML ===== */

body {
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

main {
  padding: 40px 20px;
}

/* ---------- HEADER GARAGE ---------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  padding: 20px;
  background-color: #1c1c1c;
  border-radius: 12px;
}

.header img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
}

.header h1 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.vehicle-tag {
  display: inline-block;
  background: white;
  color: black;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.95em;
  margin-top: 8px;
}
.phone-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#show-phone-btn {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

#show-phone-btn:hover {
  background-color: #f0f0f0;
}
.inline-btn {
  background-color: white;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 3px 8px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
}

.inline-btn:hover {
  background-color: #f0f0f0;
}

/* ---------- CTA BUTTON ---------- */
.cta {
  background: #01c2f1;
  color: white;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.2s ease-in-out;
}

.cta:hover {
  background: #00a3cc;
  transform: scale(1.02);
}

/* ---------- BLOC LIGNES ---------- */
.flex-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

.garage-main .recap-bloc,
.garage-main .horaire-bloc,
.garage-main .avis-bloc {
  background: white;
  color: black;
  padding: 20px;
  border-radius: 16px;
  flex: 1;
  min-width: 280px;
}

.garage-main .recap-bloc {
  flex: 1.2;
  max-width: 400px;
}

.garage-main .horaire-bloc {
  flex: 1;
  max-width: 300px;
}

.garage-main .avis-bloc {
  flex: 1;
  max-width: 350px;
}


.garage-main .recap-bloc h2,
.garage-main .horaire-bloc h2,
.garage-main .avis-bloc h2 {
  margin-bottom: 15px;
  font-size: 1.2em;
  color: black;
}

.garage-main .recap-ligne {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 1em;
}

.label {
  font-weight: bold;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

/* ---------- HEURES ---------- */
.time-slot {
  background: #eee;
  color: black;
  padding: 8px 12px;
  margin: 5px;
  border-radius: 8px;
  display: inline-block;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.3s;
}

.time-slot:hover {
  background: #ddd;
}

/* ---------- AVIS ---------- */
.note-moyenne {
  margin-top: 10px;
  font-weight: bold;
  color: #000;
}

.garage-main .recap-container {
  display: grid;
  grid-template-areas:
    "devis horaires"
    "avis horaires-ouverture";
  gap: 30px;
  max-width: 1100px;
  margin: 50px auto;
  justify-content: center;
  align-items: start;
}

.garage-main .recap-bloc {
  grid-area: devis;
}

.garage-main .horaire-bloc.main {
  grid-area: horaires;
}

.garage-main .avis-bloc {
  grid-area: avis;
}

.garage-main .horaire-bloc.secondary {
  grid-area: horaires-ouverture;
}

/* Styles généraux pour les blocs */
.garage-main .recap-bloc,
.garage-main .horaire-bloc,
.garage-main .avis-bloc {
  background: white;
  color: black;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 400px;
}


/* === STYLES SPÉCIFIQUES À LIEU.HTML === */
.lieu-recap-bloc {
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  margin-bottom: 40px;
  backdrop-filter: blur(5px);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
}

.lieu-recap-ligne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 1em;
}

.lieu-recap-ligne h3 {
  margin-bottom: 5px;
  font-size: 1.1em;
  font-weight: bold;
}

.lieu-recap-ligne .prestation-tag {
  background: white;
  color: black;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 3px;
  font-size: 0.85em;
  display: inline-block;
}

/* === POP-UP AVIS MAQUETTE === */
.avis-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  font-family: Arial, sans-serif;
}

.avis-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}

.avis-box {
  position: relative;
  background: #f5f5f5;
  color: black;
  width: 90%;
  max-width: 500px;
  margin: 60px auto;
  padding: 30px;
  border-radius: 15px;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avis-box h3 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.5em;
}

.avis-note-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.note-valeur {
  font-size: 1.4em;
  font-weight: bold;
}

.hide-btn {
  background: black;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.avis-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.avis-item {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.avis-item .note {
  font-weight: bold;
  margin-bottom: 5px;
}

.avis-item .texte {
  font-style: italic;
  margin-bottom: 5px;
}

.avis-item .date {
  font-size: 0.85em;
  color: #666;
  text-align: right;
}

.avis-pagination {
  display: flex;
  justify-content: space-between;
}

.nav-btn {
  background: none;
  border: none;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  color: #000;
}

.hidden {
  display: none;
}





.horaire-ligne-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 12px;
  font-size: 0.9em;
  line-height: 1.4;
  border-radius: 4px;
}

.horaire-jour {
  font-weight: 500;
  width: 110px;
}

.horaire-horaire {
  flex: 1;
  text-align: right;
  color: #222;
}
.horaire-ligne-final.today {
  background: rgba(1, 194, 241, 0.1);
  font-weight: bold;
}




/* === BLOC CHOIX HORAIRE DE DÉPÔT === */
.planning-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.day-labels {
  display: flex;
  justify-content: space-between;
  flex: 1;
  gap: 10px;
}

.day-label {
  text-align: center;
  font-size: 0.85em;
  font-weight: bold;
  width: 80px;
}

/* AJUSTEMENT BLOC HEURES - + COMPACT + SEPARATEUR */
.horaire-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto;
}

.day-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 80px;
}

.horaire-slot {
  background: #eee;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.9em;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.toggle-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}


.toggle-btn {
  background-color: #ddd;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  color: black;
}

.toggle-btn.active {
  background-color: #01c2f1;
  color: white;
}



.horaire-slot:hover {
  background: #bcecff;
}

.horaire-slot.selected {
  background: #01c2f1;
  color: white;
  box-shadow: 0 0 0 2px white, 0 0 4px rgba(0,0,0,0.2);
}

.horaire-slot.past,
.horaire-slot.blocked {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}


.nav-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  color: black;
}

.more-hours {
  text-align: center;
  color: #00bfff;
  font-size: 0.9em;
  margin-top: 10px;
  cursor: pointer;
  transition: color 0.2s;
}

.more-hours:hover {
  color: #01c2f1;
}



.valider-rdv {
  margin-top: 15px;
  width: 100%;
  background: #01c2f1;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.valider-rdv:hover {
  background: #009fc3;
}


.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: white;
  color: black; /* 👈 AJOUTE BIEN CELA */
  padding: 30px;
  border-radius: 10px;
  width: 500px;
  max-width: 90%;
  position: relative;
  text-align: left;
}


.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
  color: red;
}

.rdv-close {
  position: absolute;
  top: 12px;
  right: 18px;
  color: red;
  font-weight: bold;
  cursor: pointer;
  font-size: 20px;
  z-index: 2;
}



.popup-content h2, .popup-content h3, .popup-content p, .popup-content ul {
  color: black;
}



.account-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.dropdown-menu a {
  padding: 12px 16px;
  text-decoration: none;
  color: black;
  font-weight: bold;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background 0.2s ease;
}

.dropdown-menu a:hover {
  background: #01c2f1;
  color: white;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.hidden {
  display: none !important;
}



.auth-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  padding: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: -4px 0 20px rgba(0,0,0,0.6);
  transition: transform 0.3s ease;
}

.auth-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.auth-form input {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 1em;
}

.auth-link {
  font-size: 0.9em;
  color: white;
}

.auth-link a {
  color: #01c2f1;
  text-decoration: none;
  font-weight: bold;
}

.close-auth {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 22px;
  color: red;
  cursor: pointer;
  font-weight: bold;
}

.auth-form input {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 1em;
  background: white;
  color: black;
}


.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  width: 100%;
  padding-right: 40px !important; /* espace pour l'œil */
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.1em;
  color: #555;
  user-select: none;
}



.verify-slide{max-height:0;overflow:hidden;transition:max-height .35s ease}
.verify-slide.open{max-height:160px}
.verify-msg{margin:.5rem 0 .25rem;font-size:.95rem;opacity:.9}
.verify-row{display:flex;gap:.5rem;align-items:center}
.verify-row input{letter-spacing:.25em;text-align:center}
.verify-error{color:#e33;font-size:.9rem;margin-top:.25rem}



/* Bouton "Renvoyer le code" harmonisé */
#resend-code {
  border: 2px solid #00bfff;
  background: transparent;
  color: #00bfff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  margin-left: 8px;
}
#resend-code:hover {
  background: #00bfff;
  color: white;
  transform: translateY(-1px);
}
#verify-panel .auth-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Form ligne : immat + Ou + selects sur une même rangée --- */
.search-form .form-row{
  display:flex;
  flex-wrap:wrap;              /* passe à la ligne si pas assez de place */
  align-items:flex-end;         /* aligne les champs par le bas */
  justify-content:center;
  gap:12px;
}

/* colonnes label + champ */
.search-form .input-group,
.search-form .select-group > div{
  display:flex;
  flex-direction:column;
}

/* groupe des selects en ligne, avec wrap si besoin */
.search-form .select-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* harmoniser la hauteur des champs */
.search-form label{
  color:#fff;
  margin-bottom:6px;
  font-weight:600;
}
.search-form select,
.search-form input[type="text"]{
  min-width:200px;
  height:44px;
  padding:10px 12px;
  border:1px solid #d0d0d5;
  border-radius:8px;
  outline:0;
}

/* le séparateur "Ou" au milieu de la ligne */
.or-sep{
  align-self:center;
  color:#fff;
  font-weight:700;
  padding:0 6px;
}

/* responsive: un peu plus compact en mobile */
@media (max-width: 768px){
  .search-form select,
  .search-form input[type="text"]{ min-width:160px; }
}



/* ===== One-line layout (desktop) : compacts + "Ou" sans espace ===== */
@media (min-width: 992px){
  .search-form{ max-width: 1320px; margin: 0 auto; }

  .search-form .select-group{
    display: flex !important;
    flex-wrap: nowrap !important;      /* une seule ligne */
    justify-content: center;
    align-items: flex-end;
    column-gap: 10px;                   /* resserré */
    row-gap: 0;
  }

  /* largeur fixe pour CHAQUE bloc sauf "Ou" */
  .search-form .select-group > div:not(.or-sep),
  .search-form .input-group{
    flex: 0 0 170px !important;         /* selects */
  }
  /* immatriculation un peu plus large */
  .search-form .select-group > .input-group{
    flex-basis: 200px !important;
  }

/* "Ou" compact et un poil plus bas pour s'aligner visuellement */
.search-form .or-sep{
  flex: 0 0 auto !important;
  margin: 0 4px;
  white-space: nowrap;
  align-self: center;
  font-weight: 700;
  transform: translateY(8px);   /* <- baisse légèrement */
}


  .search-form select,
  .search-form input[type="text"]{
    width: 100% !important;
    min-width: 0 !important;
    height: 44px;
  }
}



/* ====== BASE MOBILE-FIRST ====== */
:root {
  --page-max: 1100px;
  --gap-lg: 24px;
  --gap-md: 16px;
  --gap-sm: 10px;
}
* { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
header { display:flex; align-items:center; justify-content:space-between; gap: var(--gap-md); padding: 16px 20px; flex-wrap: wrap; }
header .header-buttons { display:flex; gap: var(--gap-sm); margin-left:auto; flex-wrap: wrap; }
header .header-buttons button { padding: 10px 14px; }

/* Conteneurs */
main, .wrap, .lieu-container, .gallery-preview { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 16px; }

/* Boutons */
.cta { width: auto; }
@media (max-width: 560px){
  .cta { width: 100%; }
}

/* ====== INDEX (formulaire de recherche) ====== */
.search-form { width: 100%; }
.search-form .form-row { display: flex; gap: var(--gap-md); align-items: flex-end; }
.select-group { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap-md); width: 100%; }
@media (max-width: 1100px){
  .select-group { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  .search-form .form-row { flex-direction: column; align-items: stretch; }
  .select-group { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .select-group { grid-template-columns: 1fr; }
}

/* ====== PRESTATION ====== */
.prestation-form { display: grid; gap: var(--gap-md); max-width: 900px; }
.selected-prestations { display:flex; flex-wrap:wrap; gap: 8px; }
#prestation-select, .prestation-submit { min-height: 44px; }

/* ====== LIEU (Carte + Liste) ====== */
.carte-et-garages { display:flex; gap: var(--gap-md); }
.garage-list { flex:1; max-width: 50%; display:flex; flex-direction:column; gap: var(--gap-md); }
#map { flex:1; height: 520px; border-radius: 10px; }
@media (max-width: 1024px){
  .carte-et-garages { flex-direction: column; }
  .garage-list { max-width: 100%; }
  #map { height: 420px; }
}
@media (max-width: 560px){
  #map { height: 320px; }
}

/* ====== GARAGE (blocs devis/horaires/avis + galerie) ====== */
.recap-container {
  display: grid;
  grid-template-areas: "devis horaires" "avis horaires-ouverture";
  gap: var(--gap-lg);
  justify-content: center;
  align-items: start;
}
.recap-bloc { grid-area: devis; }
.horaire-bloc.main { grid-area: horaires; }
.horaire-bloc.secondary { grid-area: horaires-ouverture; }
.avis-bloc { grid-area: avis; }
.recap-bloc, .horaire-bloc, .avis-bloc {
  background: #fff; color:#000; padding: 20px; border-radius: 12px;
  width: 100%; max-width: 480px;
}
@media (max-width: 1050px){
  .recap-container { grid-template-areas: "devis" "horaires" "horaires-ouverture" "avis"; }
  .recap-bloc, .horaire-bloc, .avis-bloc { max-width: 100%; }
}
/* Galerie (déjà responsive, on assure juste les gaps) */
.gallery-tiles { gap: 16px; }
@media (max-width: 700px){ .gallery-tiles { grid-template-columns: 1fr; } }

/* ====== MON-COMPTE (sidebar + contenu) ====== */
/* On neutralise les offsets/margins inline sur mobile */
@media (max-width: 1200px){
  main { padding-top: 100px !important; }
  .sidebar { width: 100%; margin: 0 !important; }
  .content { margin: 0 !important; width: 100%; }
  #tab-rdv, #tab-vehicules, #tab-infos { margin: 0 !important; }
}
@media (max-width: 900px){
  main { display: flex; flex-direction: column; gap: var(--gap-md); align-items: stretch; }
  .sidebar { order: 1; }
  .content { order: 2; }
  .rdv-card { max-width: 100%; }
  #liste-vehicules { width: 100%; }
  .sidebar button { font-size: 16px; }
  /* petits inputs */
  #tab-vehicules .grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 560px){
  #tab-vehicules .grid { grid-template-columns: 1fr; }
}

/* ====== PRO / PRO-DASHBOARD (grilles) ====== */
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.tabs { display:flex; flex-wrap: wrap; gap: var(--gap-sm); }
@media (max-width: 900px){
  .grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 16px; }
  #addr-map { height: 220px; }
}
/* cartes blanches lisibles */
.card h1, .card h2, .card h3, .card label, .card p, .card span { color:#000 !important; }

/* ====== PRO-STATUS ====== */
.wrap { max-width: 720px; padding: 0 16px; }
.card .cta { min-height: 40px; }

/* ====== PETITES AMÉLIORATIONS GLOBALES ====== */
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; min-height: 40px; }




/* --- Ajustements page d'accueil mobile --- */
@media (max-width: 768px) {
  /* Header : centrer les boutons */
  header {
    flex-direction: column;
    align-items: center;
  }
  .header-buttons {
    margin-top: 10px !important;
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
    display: flex;
    gap: 12px;
  }

  /* Réorganisation des champs recherche */
  .search-form .form-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .search-form .input-group,
  .search-form .select-group {
    width: 100%;
    max-width: 400px;
    text-align: center;
    align-items: center;
  }

  /* "Ou" centré sous l'immat */
  .search-form .or-sep {
    width: 100%;
    text-align: center;
    margin: 8px 0;
  }

  /* Groupe Marque/Modèle/Motorisation/Année en bloc centré */
  .search-form .select-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: center;
  }

  @media (max-width: 480px) {
    .search-form .select-group {
      grid-template-columns: 1fr;
    }
  }
}


/* === ACCUEIL : header au-dessus du titre + labels centrés (mobile) === */
@media (max-width: 768px) {
  /* Le header sort du mode "overlay" pour prendre sa place au-dessus du main */
  header {
    position: relative !important;
    background: transparent !important;      /* on retire le dégradé par-dessus le titre */
    padding: 16px 20px 0 !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Logo un peu plus compact pour libérer de la place */
  .logo img {
    height: 110px !important;
    margin-top: 0 !important;
  }

  /* Boutons centrés, sous le logo, au-dessus du titre */
  .header-buttons {
    margin: 6px 0 10px !important;          /* plus de marge négative */
    margin-left: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  /* Le contenu de la page remonte puisqu'on n'a plus un header absolu */
  main {
    padding-top: 20px !important;
  }

  /* --- Formulaire : labels centrés au-dessus de leurs champs --- */
  .search-form .input-group,
  .search-form .select-group > div {
    align-items: center;                     /* centre le bloc */
    text-align: center;
  }
  .search-form label {
    text-align: center !important;           /* sous-titres centrés */
    width: 100%;
  }

  /* Grille des selects propre et centrée (2 colonnes tablette, 1 colonne tel) */
  .search-form .select-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  @media (max-width: 480px) {
    .search-form .select-group {
      grid-template-columns: 1fr;
      max-width: 360px;
    }
  }
}

@media (max-width: 768px) {
  /* Espace sous les boutons */
  .header-buttons {
    margin-bottom: -70px !important; /* ajoute un espace sous les boutons */
  }

  /* Supprimer le padding top trop fort de <main> */
  main {
    padding-top: -20 !important;
  }
}


/* === PRESTATION : réduire l'espace entre les 2 boutons (header) et le résumé véhicule === */
/* === PRESTATION (MOBILE) : corriger chevauchement header/boutons === */
@media (max-width: 768px) {
  .prestation-page main {
    padding-top: 20px !important;   /* petit espace, pas énorme */
    margin-top: 0 !important;
  }
  .prestation-page .header-buttons {
    margin-bottom: 10px !important; /* petit espace sous les boutons */
  }
  .prestation-page .vehicle-summary {
    margin-top: 60px !important;    /* pousse uniquement le bloc véhicule */
  }
}





/* ===== GARAGE.HTML — Fix mobile chevauchement + blocs hors-écran ===== */
@media (max-width: 768px) {
  /* 1) Le header n'est plus en overlay sur la page garage */
  body:has(main.garage-main) header {
    position: relative !important;          /* au lieu de absolute */
    background: rgba(0,0,0,0.6) !important; /* léger fond sous les boutons */
    padding: 12px 16px !important;
  }
  body:has(main.garage-main) .logo img { height: 100px !important; }
  body:has(main.garage-main) .header-buttons {
    margin-top: 6px !important;
    justify-content: center; width: 100%;
  }

  /* 2) On libère l'espace en haut du contenu */
  main.garage-main { padding-top: 12px !important; }

  /* 3) Grille des blocs -> pile verticale 1 colonne (rien ne dépasse) */
  .garage-main .recap-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "devis"
      "horaires"
      "horaires-ouverture"
      "avis" !important;
    gap: 16px !important;
    margin: 16px auto !important;
    padding: 0 12px !important;
    max-width: 100% !important;
  }

  /* 4) Blocs full-width, pas de max-width qui force à sortir de l'écran */
  .garage-main .recap-bloc,
  .garage-main .horaire-bloc,
  .garage-main .avis-bloc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  /* 5) Sélecteurs d'heures plus denses et centrés */
  .horaire-grid { flex-wrap: wrap; max-width: 100% !important; gap: 8px; }
  .day-column { width: 90px; }
}

/* Option tablette: empilement dès 992px si tu veux */
@media (max-width: 992px) {
  .garage-main .recap-container {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "devis" "horaires" "horaires-ouverture" "avis" !important;
  }
}

/* ===== GARAGE.HTML — mobile: header clair + blocs 1 colonne ===== */
@media (max-width: 768px){

  /* Le header de la page garage n'est plus en overlay */
body:has(main.garage-main) header{
    position: relative !important;
    background: transparent !important; /* plus de bloc noir */
    padding: 12px 16px !important;
}

  /* Logo un peu réduit */
  body:has(main.garage-main) .logo img{
    height: 96px !important;
    margin-top: 0 !important;
  }
  /* Boutons: on supprime la marge négative et on les centre */
  body:has(main.garage-main) .header-buttons{
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    justify-content: center;
    width: 100%;
    display: flex;
    gap: 10px;
  }

  /* Le contenu démarre sous le header (plus de chevauchement) */
  main.garage-main{
    justify-content: flex-start !important;  /* au cas où <main> serait centré verticalement */
    padding-top: 8px !important;
  }

  /* Grille -> pile verticale : rien ne déborde sur la droite */
  .garage-main .recap-container{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "devis"
      "horaires"
      "horaires-ouverture"
      "avis" !important;
    gap: 16px !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 0 12px !important;
  }

  /* Blocs full width */
  .garage-main .recap-bloc,
  .garage-main .horaire-bloc,
  .garage-main .avis-bloc{
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  /* Petites densifications utiles */
  .horaire-grid{ flex-wrap: wrap; gap: 8px; max-width: 100% !important; }
  .day-column{ width: 90px; }
}
/* Ajustement haut du bloc infos garage */
.garage-main .header {
  margin-top: 60px;   /* espace entre le header global et le bloc */
}




/* ===== LIEU.HTML — header non-overlay + sizing propre ===== */
@media (max-width: 1200px){
  body:has(main.lieu-main) header{
    position: relative !important;          /* pas d'overlay */
    background: transparent !important;
    padding: 12px 16px !important;
  }
  body:has(main.lieu-main) .logo img{
    height: 110px !important;
    margin-top: 0 !important;
  }
  body:has(main.lieu-main) .header-buttons{
    margin-top: 6px !important;
    justify-content: center;
    width: 100%;
    display: flex;
    gap: 10px;
  }
  /* Carte + liste : colonne en mobile/tablette pour éviter tout débordement */
  body:has(main.lieu-main) .carte-et-garages{
    flex-direction: column !important;
  }
  body:has(main.lieu-main) .garage-list{
    max-width: 100% !important;
  }
  body:has(main.lieu-main) #map{
    height: 360px !important; /* un peu plus compact sur tel */
  }
}

/* ===== LIEU : header + espacements ===== */
body:has(main.lieu-main) header{
  position: relative !important; /* pas d’overlay */
  background: transparent !important;
}

/* ===== LIEU : header + espacements ===== */
body:has(main.lieu-main) .header-buttons{
  margin-top: -10px !important;
  margin-bottom: 24px !important;
  width: auto;
  display: flex;
  gap: 12px;
  justify-content: flex-end;   /* 👉 Alignés à droite par défaut (PC) */
}
@media (max-width: 768px){
  body:has(main.lieu-main) .header-buttons{
    justify-content: center !important; /* 👉 Recentrés uniquement sur tel/tablette */
    width: 100% !important;
  }
}


.lieu-recap-bloc #prestations-summary { justify-content: center; }

/* ===== LIEU : grille liste + carte ===== */
body:has(main.lieu-main) .carte-et-garages{
  display: flex !important;
  flex-direction: row !important;   /* liste à gauche, carte à droite */
  align-items: stretch !important;
  gap: 20px !important;
}

body:has(main.lieu-main) .garage-list{
  flex: 1 1 48% !important;
  max-width: 48% !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
}

body:has(main.lieu-main) #map{
  flex: 1 1 52% !important;
  min-height: 520px !important;     /* hauteur sûre pour Leaflet */
  width: 100% !important;           /* évite un map “0px” en flex */
  border-radius: 10px;
  overflow: hidden;
}

/* En tablette/mobile : on empile proprement */
@media (max-width: 1024px){
  body:has(main.lieu-main) .carte-et-garages{ flex-direction: column !important; }
  body:has(main.lieu-main) .garage-list{ max-width: 100% !important; }
  body:has(main.lieu-main) #map{ min-height: 400px !important; }
}
@media (max-width: 560px){
  body:has(main.lieu-main) #map{ min-height: 320px !important; }
}

/* ===== MON-COMPTE — header non-overlay + layout mobile ===== */
@media (max-width: 900px){
  /* Le header ne recouvre plus le contenu */
  body:has(#greeting) header{
    position: relative !important;
    background: transparent !important;
    padding: 12px 16px !important;
  }
  body:has(#greeting) .logo img{
    height: 110px !important;
    margin-top: 0 !important;
  }
  body:has(#greeting) .header-buttons{
    margin-top: 6px !important;
    margin-bottom: 12px !important; /* espace entre les boutons et "Bonjour" */
    justify-content: center;
    width: 100%;
    display: flex;
    gap: 12px;
  }

  /* Le contenu commence juste sous le header */
  body:has(#greeting) main{
    padding-top: 8px !important;
    align-items: stretch !important;
  }

  /* Nettoie les offsets inline très forts de cette page */
  #greeting{ margin: 8px 0 16px 0 !important; padding: 0 12px; }
  .sidebar{ margin: 0 !important; width: 100% !important; }
  .content{ margin: 0 !important; width: 100% !important; }

  /* Les 3 onglets n'ont plus de marges négatives / décalages */
  #tab-rdv, #tab-vehicules, #tab-infos{
    margin: 0 !important;
  }
}

/* Cartes RDV full width sur mobile */
@media (max-width: 900px){
  .rdv-card{ max-width: 100% !important; width: 100%; }
}


/* ===== MON-COMPTE — grille des selects véhicules ===== */
.vehicules-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.vehicules-grid select{
  width: 100%;
  min-width: 0;      /* empêche les débordements */
}

/* Tablette : 2 colonnes */
@media (max-width: 900px){
  .vehicules-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile : 1 colonne, champs pleine largeur */
@media (max-width: 560px){
  .vehicules-grid{ grid-template-columns: 1fr; }
  #tab-vehicules label{ display:block; margin-bottom: 4px; }
}

/* Espace après le bouton "Ajouter ce véhicule" */
#tab-vehicules #btn-add-vehicle{ min-height: 44px; }
#tab-vehicules #vehicules-msg{ display:inline-block; transform: translateY(2px); }


/* Un peu d'air au-dessus du contenu principal */
@media (max-width: 900px){
  #tab-rdv h1, #tab-vehicules h1, #tab-infos h1{
    margin-top: 8px;
  }
  /* Liste des cartes véhicules = full width + spacing */
  #liste-vehicules{ width:100%; padding-right: 0; }
}

/* ===== MON-COMPTE (desktop) : aligné à gauche, sidebar à gauche ===== */
@media (min-width: 901px){
  /* Neutralise les centrages globaux pour cette page */
  body:has(#greeting) main{
    margin: 0;                 /* plus de margin: 0 auto */
    max-width: none;           /* pas de largeur centrée */
    padding: 160px 60px 40px;  /* même respiration qu'avant */
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr); /* sidebar | contenu */
    gap: 40px;
    justify-content: start;    /* bien à gauche */
    align-items: start;
    text-align: left;
  }

  /* Sidebar fixe à gauche, contenu sans marges bizarres */
  body:has(#greeting) .sidebar{
    width: 240px !important;
    margin: 0 !important;
  }
  body:has(#greeting) .content{
    margin: 0 !important;
    width: auto !important;
    align-items: stretch !important;
  }

  /* Les onglets ne poussent plus avec des offsets inline */
  body:has(#greeting) #tab-rdv,
  body:has(#greeting) #tab-vehicules,
  body:has(#greeting) #tab-infos{
    margin: 0 !important;
  }
}


/* === MON-COMPTE — garde les titres alignés à gauche === */
body:has(#greeting) main {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Les titres h1 de mes rendez-vous / mes véhicules / mes infos */
body:has(#greeting) #tab-rdv h1,
body:has(#greeting) #tab-vehicules h1,
body:has(#greeting) #tab-infos h1 {
  text-align: left !important;
  margin-left: 0 !important;
}

/* === MON-COMPTE — replacer les titres à gauche façon "milieu-gauche" === */

/* 1) Neutralise les margin inline foireux sur desktop */
@media (min-width: 901px){
  /* .content globale de mon-compte (repérée via #greeting présent sur cette page) */
  #greeting ~ .content{
    margin-left: 300px !important;   /* place le contenu "milieu gauche" */
    margin-top: 0 !important;
    text-align: left !important;
    max-width: 1000px;               /* largeur de lecture raisonnable */
  }
  /* Onglets internes : annule les offsets inline */
  #greeting ~ .content #tab-rdv,
  #greeting ~ .content #tab-vehicules,
  #greeting ~ .content #tab-infos{
    margin: 0 !important;
    text-align: left !important;
  }
  /* Titres vraiment à gauche */
  #greeting ~ .content #tab-rdv h1,
  #greeting ~ .content #tab-vehicules h1,
  #greeting ~ .content #tab-infos h1{
    text-align: left !important;
    margin-left: 0 !important;
  }
  /* Sidebar calée à gauche, largeur fixe */
  #greeting ~ .sidebar{
    width: 240px !important;
    margin-left: 60px !important;  /* comme dans ton HTML actuel */
    margin-top: 0 !important;
  }
}

/* 2) En mobile/tablette, on remet full-width (pas de décalage à gauche) */
@media (max-width: 900px){
  #greeting ~ .content{
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
  }
  #greeting ~ .content #tab-rdv,
  #greeting ~ .content #tab-vehicules,
  #greeting ~ .content #tab-infos{
    margin: 0 !important;
  }
  #greeting ~ .sidebar{
    width: 100% !important;
    margin: 0 !important;
  }
}

/* === MON-COMPTE (desktop) : grille propre greet | side | content === */
@media (min-width: 901px){
  /* 1) Le layout de la page mon-compte passe en grille */
  body:has(#greeting) main{
    display: grid !important;
    grid-template-columns: 260px minmax(0,1fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-items: start;
    justify-items: stretch;
    padding: 140px 40px 40px !important; /* espace sous le header */
    text-align: left !important;         /* stop le centrage global */
  }

  /* 2) Greeting plein max en haut (ligne 1) */
  #greeting{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 0 12px 0 !important;       /* on enlève les marges inline */
  }

  /* 3) Sidebar colonne de gauche (ligne 2) */
  body:has(#greeting) .sidebar{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;                /* supprime margin-left inline */
    width: 260px !important;
    position: sticky;
    top: 140px;                           /* reste visible au scroll */
    align-self: start;
  }

  /* 4) Contenu à droite de la sidebar (ligne 2) */
  body:has(#greeting) .content{
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;                /* supprime margin-left/-top inline */
    max-width: 1100px;                   /* largeur de lecture confortable */
  }

  /* 5) Titres bien à gauche */
  body:has(#greeting) #tab-rdv h1,
  body:has(#greeting) #tab-vehicules h1,
  body:has(#greeting) #tab-infos h1{
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* Mobile/tablette: tout en colonne (comme avant) */
@media (max-width: 900px){
  body:has(#greeting) main{ display: flex !important; flex-direction: column; padding-top: 100px !important; }
  body:has(#greeting) .sidebar, body:has(#greeting) .content{ margin:0 !important; width:100% !important; }
}


/* Centrage du bouton "Voir les avis Google" dans garage.html */
.garage-main .avis-bloc .cta {
  display: block;
  margin: 0 auto;   /* centre horizontalement */
  text-align: center;
}



/* Ajustement de la page prestations */
.prestation-page body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.prestation-page main {
  flex: 1;
  margin-top: -200px; /* 👉 Ajuste la valeur, plus petit = plus haut */
}


@media (max-width: 768px) {
  .prestation-page main {
    margin-top: -60px !important; /* réduit l'espace sans tout casser */
    padding-top: 20px !important; /* petit espace au-dessus pour respirer */
  }

  .prestation-page .header-buttons {
    margin-bottom: 5px !important; /* rapproche encore des boutons */
  }

  .prestation-page .vehicle-summary {
    margin-top: -250px !important; /* rapproche bien le bloc véhicule */
  }
}