/* ------------------------------------------------------------------
   Prestige Auto Rental — charte inspirée de mercedes-benz.fr
   Fond sable, noir profond, titres en serif, textes compacts,
   cartes blanches à coins arrondis, boutons pilules.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* teintes reprises du site Mercedes : sable, ivoire, encre */
  --sand: #e9e1d8;
  --sand-deep: #ded4c8;
  --ivory: #f6f2ed;
  --white: #ffffff;
  --ink: #16140f;
  --ink-soft: #3d3a34;
  --muted: #7a746b;
  --line: #d9d1c6;
  --line-soft: #e6ded3;
  --accent: #1d5c52;      /* vert profond, rappel du sélecteur Maybach */
  --accent-soft: #2f7a6d;
  --gold: #c9a45c;
  --gold-soft: #d8b77a;
  --ok: #1d7a4c;
  --danger: #a5372c;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --pill: 999px;

  --max: 1280px;
  --gutter: 20px;
  --header-h: 66px;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --shadow-xs: 0 1px 2px rgba(22, 20, 15, .05);
  --shadow-s: 0 2px 10px rgba(22, 20, 15, .06);
  --shadow-m: 0 10px 30px -8px rgba(22, 20, 15, .18);
  --shadow-l: 0 24px 60px -18px rgba(22, 20, 15, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0;
}
h4 { margin: 0; font-weight: 500; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}

.section { padding: 64px 0; }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }

.section__head { max-width: 640px; margin-bottom: 32px; }
.section__head h2 { font-size: clamp(26px, 3.2vw, 38px); }
.section__head p { color: var(--ink-soft); margin: 10px 0 0; font-size: 14px; }

/* ----------------------------------------------------------- boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { background: #2b2822; border-color: #2b2822; }
.btn:active { transform: scale(.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: rgba(255,255,255,.85); border-color: transparent; }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn--sm { padding: 8px 15px; font-size: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn__arrow { transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ----------------------------------------------------------- en-tête */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(233, 225, 216, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.brand__name { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.brand__sub { font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: var(--pill);
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--ink); }

.header__cta { display: flex; align-items: center; gap: 10px; }
.header__phone { font-size: 12.5px; white-space: nowrap; color: var(--ink-soft); }

.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4.5px 0; }

/* ------------------------------------------------------------ accueil */

.home .header {
  background: linear-gradient(180deg, rgba(12, 11, 9, .72), rgba(12, 11, 9, .35));
  backdrop-filter: blur(8px);
  border-bottom-color: transparent;
}
.home .brand__name { color: var(--white); }
.home .brand__sub { color: rgba(255,255,255,.6); }
.home .nav a { color: rgba(255,255,255,.86); }
.home .nav a:hover { background: rgba(255,255,255,.14); color: var(--white); }
.home .burger span { background: var(--white); }

.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12,11,9,.9) 0%, rgba(12,11,9,.55) 45%, rgba(12,11,9,.1) 100%),
    linear-gradient(0deg, rgba(12,11,9,.85) 0%, rgba(12,11,9,0) 45%);
}
.hero__inner { position: relative; z-index: 2; padding: calc(var(--header-h) + 48px) var(--gutter) 40px; }
.hero .eyebrow, .cta-banner .eyebrow { color: var(--gold); }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.5vw, 76px);
  line-height: 1.05;
  margin: 14px 0 16px;
  color: var(--white);
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__lead { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 46ch; margin: 0 0 34px; }

.search {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: rgba(12, 11, 9, .55);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-l);
  backdrop-filter: blur(10px);
  color-scheme: dark;
}
.search__field { display: grid; gap: 7px; min-width: 0; }
.search__field span { font-size: 11px; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.search__field select,
.search__field input {
  width: 100%;
  /* Sans cela, un champ date garde sa largeur naturelle (imposee par iOS)
     et deborde de sa colonne. */
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-s);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font: inherit;
  font-size: 13px;
}
.search__field select option { color: var(--ink); }
.search__btn { height: 43px; padding: 0 22px; white-space: nowrap; }

.search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: 16px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  font-size: 13px;
}
.search-info[hidden] { display: none; }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.home .header__cta .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.cta-banner { background: var(--ink); color: var(--white); padding: 84px 0; }
.cta-banner h2 { font-size: clamp(28px, 4vw, 44px); color: var(--white); margin: 12px 0 14px; }
.cta-banner p { color: rgba(255,255,255,.75); max-width: 52ch; font-size: 14px; margin: 0 0 24px; }

/* ----------------------------------------------------------- bandeau */

.strip { background: var(--ivory); border-bottom: 1px solid var(--line-soft); }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 28px 0; }
.strip__item h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.strip__item p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ----------------------------------------------------------- filtres */

.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.chip {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  padding: 7px 15px;
  border-radius: var(--pill);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

/* ------------------------------------------------- cartes véhicules */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: var(--shadow-s);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow-m); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card__media { position: relative; aspect-ratio: 16 / 9; background: var(--sand-deep); overflow: hidden; }
.card__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.card__slide.is-active { opacity: 1; }

.card__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  font-size: 15px;
  line-height: 1;
  z-index: 2;
}
.card:hover .card__arrow { opacity: 1; }
.card__arrow:hover { background: rgba(0,0,0,.6); }
.card__arrow--prev { left: 8px; }
.card__arrow--next { right: 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  color: var(--ink);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; }
.card__badge-right { position: absolute; top: 10px; right: 10px; z-index: 2; }

.card__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.card__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--pill);
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.card__dot.is-active { width: 14px; background: #fff; }

.card__body { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0; }
.card__title { font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.card__meta { font-size: 11.5px; color: var(--muted); margin: 0; }
.card__outline {
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 3px 9px;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}
.card__price { font-size: 14px; font-weight: 600; margin: 0; }
.card__price span { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.card__note { font-size: 11px; color: var(--accent); margin: 0; }

/* ----------------------------------------------------------- tarifs */

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pricing__item {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: 20px;
}
.pricing__item h3 { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.pricing__item strong { display: block; font-family: var(--serif); font-size: 25px; font-weight: 400; margin: 8px 0 4px; }
.pricing__item p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

.offer {
  margin-top: 22px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-l);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.offer h3 { color: var(--white); font-size: clamp(19px, 2.4vw, 25px); margin-top: 10px; }
.offer p { margin: 8px 0 0; color: rgba(255,255,255,.75); max-width: 62ch; font-size: 13px; }
.offer__badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--pill);
  padding: 5px 13px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ----------------------------------------------------- page véhicule */

.crumbs { font-size: 11.5px; color: var(--muted); padding: 20px 0; }
.crumbs a:hover { color: var(--ink); }

.vehicle {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 40px;
  align-items: start;
  padding-bottom: 60px;
}

.gallery__main {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  background: var(--sand-deep);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.85);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__index {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--pill);
}

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; margin-top: 10px; }
.thumbs button {
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: none;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .2s ease; border-radius: inherit; }
.thumbs button:hover img { opacity: 1; }
.thumbs button[aria-current="true"] { border-color: var(--ink); }
.thumbs button[aria-current="true"] img { opacity: 1; }

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 7px;
  margin: 18px 0;
}
.specs div {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 8px 10px;
}
.specs dt { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 2px 0 0; font-size: 12.5px; }

.prose h2 { font-size: 20px; margin-bottom: 8px; }
.prose p { color: var(--ink-soft); font-size: 13.5px; }
.prose ul { padding-left: 17px; color: var(--ink-soft); font-size: 13.5px; }

/* ----------------------------------------------------------- formulaire */

.booking {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.booking__head { padding: 20px 20px 0; }
.booking__head h2 { font-size: 19px; }
.booking__head p { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.booking__form { padding: 16px 20px 20px; display: grid; gap: 13px; }

.field { display: grid; gap: 6px; }
.field label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--ivory);
  color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 74px; }
.field input[type="time"] { min-width: 0; }
.field input.is-invalid { border-color: var(--danger); background: #fbf1ef; }
.field__error { font-size: 11px; color: var(--danger); margin: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.chauffeur {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 13px;
  cursor: pointer;
}
.chauffeur input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }

/* piece d'identite obligatoire au formulaire de reservation */
.id-doc {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: 13px 14px;
  gap: 9px;
}
.id-doc__required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fbf1ef;
  border: 1px solid #e6c3bd;
  color: var(--danger);
  font-size: 9px;
  letter-spacing: .1em;
}
.id-doc__hint { margin: 0; font-size: 12px; color: var(--ink-soft); }
.id-doc__note { margin: 0; font-size: 11px; color: var(--muted); }
.id-doc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.id-doc__actions .btn { flex: 1 1 140px; padding: 10px 14px; font-size: 12px; }
.id-doc__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white, #fff);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 9px;
}
.id-doc__preview img {
  width: 92px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--ivory);
}
.id-doc__meta { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.id-doc__clear {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

.summary {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: 14px;
  display: grid;
  gap: 7px;
  font-size: 13px;
}
.summary__row { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-soft); }
.summary__row--total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-size: 16px;
  color: var(--ink);
}
.summary__row--total strong { font-weight: 600; }
.summary__saving { color: var(--ok); }

.notice { padding: 11px 13px; font-size: 13px; border-radius: var(--radius-s); background: var(--ivory); border: 1px solid var(--line-soft); }
.notice--error { border-color: #e6c3bd; color: var(--danger); background: #fbf1ef; }
.notice--ok { border-color: #bcdcc9; color: var(--ok); background: #f1f8f4; }

/* ----------------------------------------------------------- calendrier */

.calendar { border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 9px; background: var(--white); }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendar__head strong { font-size: 12px; font-weight: 500; }
.calendar__nav {
  border: 1px solid var(--line);
  background: var(--white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}
.calendar__nav:hover { border-color: var(--ink); }
.calendar__dow, .calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar__dow { font-size: 9.5px; letter-spacing: .08em; color: var(--muted); text-align: center; margin-bottom: 3px; }

.day {
  aspect-ratio: 1 / 0.8;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: var(--ivory);
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.day:hover:not([disabled]) { background: var(--sand-deep); }
.day--empty { background: transparent; cursor: default; }
.day--past { color: #c3bdb3; background: transparent; cursor: not-allowed; }
.day--busy { background: #f7e7e4; color: var(--danger); text-decoration: line-through; cursor: not-allowed; }
.day--range { background: #dfece8; color: var(--accent); }
.day--selected { background: var(--ink) !important; color: var(--ivory) !important; }

.calendar__hint { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
.calendar__hint--error { color: var(--danger); }

/* ----------------------------------------------------------- confirmation */

.confirm {
  border: 1px solid #bcdcc9;
  background: #f1f8f4;
  border-radius: var(--radius-m);
  padding: 20px;
  display: grid;
  gap: 11px;
}
.confirm h3 { font-size: 19px; color: var(--ok); }
.confirm dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; font-size: 13px; }
.confirm dt { color: var(--muted); }
.confirm dd { margin: 0; }
.confirm__ref { font-size: 17px; letter-spacing: .08em; }

/* ----------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 9, 7, .95);
  display: grid;
  place-items: center;
  padding: 36px 16px;
}
.lightbox img { max-width: min(1150px, 94vw); max-height: 80vh; object-fit: contain; border-radius: var(--radius-m); }
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.2); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 11.5px;
  letter-spacing: .06em;
}
.lightbox .thumbs button[aria-current="true"] { border-color: rgba(255,255,255,.9); }

/* ----------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.contact__card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: 20px;
}
.contact__card h3 { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.contact__card p { margin: 9px 0 6px; font-size: 15px; }
.contact__card small { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; }

/* ----------------------------------------------------------- pied */

.footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 44px 0 22px; font-size: 13px; }
.footer a:hover { color: var(--white); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.footer h4 { color: var(--white); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 11px; font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.footer__partners { border-top: 1px solid rgba(255,255,255,.16); margin-top: 30px; padding-top: 22px; text-align: center; }
.footer__partners ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.footer__partners li {
  background: var(--white);
  border-radius: var(--radius-m);
  height: 76px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}
.footer__partners img { height: 100%; width: auto; max-width: 150px; object-fit: contain; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: 30px;
  padding-top: 16px;
  font-size: 11.5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-m);
}
.whatsapp svg { width: 24px; height: 24px; fill: #fff; }

/* ----------------------------------------------------------- admin */

.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--ivory); }
.status { font-size: 10.5px; letter-spacing: .06em; padding: 3px 10px; border-radius: var(--pill); border: 1px solid; }
.status--en_attente { color: #8a6100; border-color: #e0c489; background: #fdf6e6; }
.status--confirmee { color: var(--ok); border-color: #bcdcc9; background: #f1f8f4; }
.status--annulee { color: var(--danger); border-color: #e6c3bd; background: #fbf1ef; }

.tabs { display: flex; gap: 8px; margin-bottom: 22px; }

.badge--new {
  display: inline-block;
  margin-left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--pill);
  vertical-align: middle;
}

.filters-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters-bar select, .filters-bar input {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
}
.filters-bar input[type="search"] { flex: 1; min-width: 220px; }

.vehicle-form { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 20px; margin-bottom: 24px; display: grid; gap: 13px; }
.vehicle-form .field label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vehicle-form input, .vehicle-form textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--ivory);
  color: var(--ink);
  width: 100%;
}
.vehicle-form textarea { resize: vertical; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-grid__item { position: relative; width: 74px; height: 56px; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--line-soft); }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.vehicle-thumb { width: 52px; height: 38px; object-fit: cover; border-radius: 6px; }

.filter-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.filter-date input { font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--white); color: var(--ink); }

.bookings-table td.nowrap { white-space: nowrap; }
.booking-row.is-new { background: #f1f8f4; }
.detail-row td { white-space: normal; background: var(--ivory); padding: 14px 16px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin: 0; }
.detail-grid dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.detail-grid dd { margin: 2px 0 0; font-size: 13px; }
.detail-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ------------------------------------------- comptes de l'espace interne */

.auth-form {
  max-width: 440px;
  display: grid;
  gap: 14px;
  padding: 24px;
  margin-bottom: 28px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.auth-form h2 { font-size: 20px; margin: 0; }
.auth-form__note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.auth-form__note code { font-size: 12px; background: var(--ivory); padding: 1px 5px; border-radius: 4px; }

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}

.invite-link {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  font-size: 13px;
}
.invite-link[hidden] { display: none; }
.invite-link__row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-link__row input {
  flex: 1;
  min-width: 240px;
  padding: 9px 11px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
}
/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .vehicle { grid-template-columns: 1fr; gap: 30px; }
  .booking { position: static; }
}

@media (max-width: 860px) {
  /* en portrait, cover ne garde qu une bande : on la cale sur la voiture */
  .hero__img { object-position: 46% center; }
  .strip__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .search { grid-template-columns: repeat(2, 1fr); }
  .search__btn { grid-column: 1 / -1; height: 46px; }
  .home .nav.is-open { background: rgba(12, 11, 9, .94); border-bottom-color: transparent; }
  .home .nav.is-open a { color: var(--white); }
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--line-soft);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 14px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 12px; }
  .burger { display: block; }
  .header__phone { display: none; }
  .header__inner { position: relative; }
}

@media (max-width: 620px) {
  .section { padding: 46px 0; }
  .strip__grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .offer { padding: 22px; }
  .header__cta .btn { display: none; }

  /* Deux colonnes pour tenir dans l'ecran, mais seules les deux dates
     partagent une ligne : « Lieu de prise en charge » et « Type de vehicule »
     ont besoin de toute la largeur, sinon leur libelle est tronque. */
  .search { grid-template-columns: 1fr 1fr; }
  .search__field:nth-of-type(1),
  .search__field:nth-of-type(4) { grid-column: 1 / -1; }

  /* Un champ date est plus haut qu'une liste deroulante sur iPhone : sans
     hauteur commune, les deux colonnes se decalent. */
  .search__field select,
  .search__field input {
    height: 44px;
    padding: 0 11px;
    min-width: 0;
  }
}

/* ------------------------------------------------- confort sur telephone */

@media (max-width: 860px) {
  /* iOS agrandit la page des qu'on touche un champ dont le texte fait moins
     de 16px. A 16px, la saisie ne fait plus sauter la mise en page. */
  .field input, .field select, .field textarea,
  .search__field input, .search__field select,
  .filters-bar input, .filters-bar select,
  .invite-link__row input {
    font-size: 16px;
  }

  /* Cibles tactiles : en dessous de 40px, le pouce rate le bouton. */
  .btn { min-height: 44px; }
  .chip, .btn--sm { min-height: 40px; }
  .card__dot { width: 10px; height: 10px; }
  .nav a { padding: 13px 12px; }
}

@media (max-width: 620px) {
  /* Sur telephone, texte et formulaire ne sont plus poses sur la photo :
     en portrait ils la recouvraient entierement et le bloc depassait de
     l'ecran. La photo prend sa propre bande en haut, le reste suit dessous
     sur le fond sombre. La voiture est enfin visible, et tout tient. */
  /* L en-tete est colle en haut et recouvrait le debut de la bande : on la
     decale d autant pour que la photo commence juste en dessous. */
  .hero { display: block; min-height: auto; padding-top: var(--header-h); }
  .hero__img {
    position: relative;
    inset: auto;
    height: 34svh;
    min-height: 200px;
    max-height: 290px;
    object-position: 50% 45%;
    transform: none;
  }
  .hero__shade { display: none; }
  .hero__inner { padding: 20px var(--gutter) 26px; }

  /* « Prestige Auto Rental » figure deja dans l'en-tete juste au-dessus. */
  .hero .eyebrow { display: none; }
  .hero__title { font-size: clamp(28px, 8.5vw, 38px); margin: 0 0 10px; }
  .hero__lead { font-size: 13.5px; margin-bottom: 18px; }

  .search { padding: 12px; gap: 9px; border-radius: var(--radius-m); }
  .search__field { gap: 5px; }
  .search__field span { font-size: 11px; }

  /* Photos : plus basses pour laisser voir le texte sans faire defiler. */
  .gallery__main { max-height: 250px; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .specs { grid-template-columns: repeat(2, 1fr); }

  /* Textes secondaires trop petits une fois sur un ecran de telephone. */
  .card__meta { font-size: 12.5px; }
  .card__note { font-size: 12px; }
  .section__head p, .strip__item p { font-size: 13.5px; }

  .cta-banner { padding: 54px 0; }
  .booking__form { padding: 14px 16px 18px; }
  .booking__head { padding: 16px 16px 0; }

  /* Flotte : deux fiches par ligne, et tout l'interieur resserre pour que
     le tarif et le bouton tiennent sans deborder. */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card__body { padding: 10px 11px 12px; gap: 3px; }
  .card__title { font-size: 13.5px; }
  .card__meta { font-size: 11px; line-height: 1.4; }
  .card__note { font-size: 10.5px; }
  .card__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .card__price { font-size: 13px; }
  .card__price span { font-size: 10.5px; }
  .card__foot .btn { justify-content: center; padding: 9px 10px; font-size: 12px; min-height: 38px; }
  .badge { font-size: 9.5px; padding: 3px 7px; }
  .card__badges, .card__badge-right { top: 6px; }
  .card__badges { left: 6px; }
  .card__badge-right { right: 6px; }
  .card__arrow { display: none; }

  /* Le bouton WhatsApp recouvrait le bouton « Réserver » de la derniere fiche. */
  .whatsapp { width: 44px; height: 44px; right: 12px; bottom: 76px; }
  .whatsapp svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card__slide, .btn { transition: none !important; }
}