@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2-variations'), url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0d3134;
  --ink-2: #164448;
  --ink-soft: #3c5c5f;
  --teal: #1fb5a3;
  --teal-deep: #0b7a6e;
  --mint: #e3f4f1;
  --paper: #f6f8f7;
  --card: #ffffff;
  --line: #d6e3e0;
  --sun: #ffc83d;
  --sun-deep: #f0b116;
  --busy: #c3cfcd;
  --danger: #b3261e;
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 9px;
  --wide: 118%;
  --shadow: 0 1px 0 rgba(13, 49, 52, .06), 0 10px 30px -18px rgba(13, 49, 52, .35);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-stretch: var(--wide); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 750; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sun); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.3em; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-stretch: 108%; text-decoration: none; cursor: pointer; white-space: nowrap; background: transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 1.05em; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: var(--sun-deep); color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--teal-deep); color: #fff; }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(13, 49, 52, .96); backdrop-filter: saturate(1.4) blur(8px); color: #fff; }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; }
.brand:hover { color: #fff; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-name { font-weight: 800; font-stretch: 122%; font-size: 1.12rem; letter-spacing: -0.01em; }
.nav { display: flex; gap: 4px; }
.nav a { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 550; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.top-tel { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 650; }
.top-tel svg { width: 18px; height: 18px; fill: var(--teal); }
.top-tel:hover { color: var(--sun); }
.lang-sw { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.lang-sw:hover { color: var(--sun); border-color: var(--sun); }
.review-note { color: var(--ink-soft); font-size: .9rem; margin: -6px 0 16px; }
@media (max-width: 400px) { .top:has(.lang-sw) .top-tel { display: none; } .lang-sw { min-width: 38px; height: 38px; } .brand-name { white-space: nowrap; } }
@media (max-width: 900px) { .nav { display: none; } }
@media (max-width: 560px) {
  .top-tel span { display: none; }
  .top-tel { width: 40px; height: 40px; justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; }
  .brand-name { font-size: 1rem; }
  .top-in { gap: 10px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 64px); overflow: hidden; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: auto -10% -45% 40%; height: 120%;
  background: radial-gradient(closest-side, rgba(31, 181, 163, .28), transparent 70%); pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px 40px; align-items: center; }
.hero-place { color: var(--teal); font-weight: 650; margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem); font-weight: 850; font-stretch: 125%; letter-spacing: -0.03em; line-height: .98; max-width: 11ch; }
.hero-sub { font-size: 1.15rem; color: rgba(255, 255, 255, .8); max-width: 46ch; margin: 22px 0 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-van { position: relative; justify-self: center; }
.hero-van img { width: min(384px, 100%); height: auto; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .35)); }
.hero-price {
  position: absolute; right: -6px; top: -14px; background: var(--sun); color: var(--ink);
  font-weight: 850; font-stretch: 115%; font-size: 1.35rem; padding: 10px 16px; border-radius: 16px; transform: rotate(4deg);
  line-height: 1;
}
.hero-price small { display: block; font-size: .7rem; font-weight: 600; font-stretch: 100%; margin-bottom: 3px; }

/* Tableau de la semaine */
.week { grid-column: 1 / -1; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-lg); padding: 20px 22px 16px; margin-top: 12px; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.week-head h2 { font-size: 1.15rem; font-weight: 750; font-stretch: 110%; letter-spacing: 0; }
.week-legend, .cal-legend { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 0; font-size: .88rem; }
.week-legend { color: rgba(255, 255, 255, .75); }
.lg { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-left: 6px; }
.lg:first-child { margin-left: 0; }
.lg-free { background: var(--teal); }
.lg-busy { background: repeating-linear-gradient(135deg, var(--busy) 0 3px, transparent 3px 6px); border: 1px solid var(--busy); }
.week .lg-busy { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 6px); border-color: rgba(255, 255, 255, .35); }
.lg-sel { background: var(--sun); }
.week-grid { display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)); gap: 6px 6px; align-items: center; }
.week-loading { grid-column: 1 / -1; color: rgba(255, 255, 255, .6); margin: 18px 0; }
.wk-day { text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .7); line-height: 1.2; }
.wk-day strong { display: block; color: #fff; font-size: 1.05rem; font-stretch: 110%; }
.wk-veh { font-weight: 700; font-stretch: 108%; font-size: .95rem; }
.wk-veh small { display: block; font-weight: 500; color: rgba(255, 255, 255, .6); font-size: .78rem; }
.wk-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.wk-half {
  height: 34px; border: 0; border-radius: 7px; padding: 0; cursor: pointer;
  background: var(--teal); color: var(--ink); font-size: .72rem; font-weight: 700;
  transition: background-color .12s, transform .1s;
}
.wk-half:hover { background: var(--sun); }
.wk-half.is-busy { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 7px); cursor: default; }
.wk-half.is-past { background: rgba(255, 255, 255, .06); cursor: default; }
.week-help { color: rgba(255, 255, 255, .6); font-size: .86rem; margin: 14px 0 0; }
.week-error { grid-column: 1 / -1; color: #fff; margin: 12px 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-van { grid-row: 1; justify-self: start; width: 70%; max-width: 300px; }
  .hero-price { font-size: 1.1rem; right: -24px; }
}
@media (max-width: 640px) {
  .week { padding: 16px 12px 14px; margin-inline: -4px; }
  .week-grid { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 5px 3px; }
  .wk-veh { font-size: .82rem; }
  .wk-veh small { font-size: .7rem; }
  .wk-day { font-size: .7rem; }
  .wk-day strong { font-size: .92rem; }
  .wk-cell { grid-template-columns: 1fr; gap: 2px; }
  .wk-half { height: 20px; border-radius: 5px; font-size: 0; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin: 12px 0 0; }

/* Véhicules */
.vehicles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vcard { background: var(--card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.vcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vcard-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.vcard-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vcard-title h3 { font-size: 1.5rem; }
.vol { font-weight: 850; font-stretch: 125%; font-size: 1.6rem; color: var(--teal-deep); line-height: 1; }
.vcard-body > p { color: var(--ink-soft); }
.specs { list-style: none; padding: 0; margin: 4px 0 22px; display: grid; gap: 8px; }
.specs li { padding-left: 22px; position: relative; }
.specs li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 10px; height: 6px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.vcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.from { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.from strong { color: var(--ink); font-size: 1.25rem; font-stretch: 112%; }
.from span { display: block; font-size: .88rem; }
@media (max-width: 760px) { .vehicles { grid-template-columns: 1fr; } }

/* ---------- Réservation ---------- */
.book { background: var(--mint); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.book-steps { display: grid; gap: 18px; min-width: 0; }
.step { border: 0; margin: 0; padding: 22px 24px 24px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; }
.step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-weight: 750; font-stretch: 112%; font-size: 1.2rem; margin-bottom: 16px; padding: 0; }
.step legend + * { clear: both; }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; font-size: .92rem; font-stretch: 100%; flex: none; }

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background-color .12s; }
.choice-box img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; flex: none; }
.choice-box strong { font-size: 1.1rem; font-stretch: 112%; }
.choice-box small { display: block; color: var(--ink-soft); font-size: .86rem; }
.choice:hover .choice-box { border-color: var(--teal); }
.choice input:checked + .choice-box { border-color: var(--ink); background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + .choice-box, .seg input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border-radius: var(--radius); padding: 5px; gap: 5px; }
.seg label { position: relative; }
.seg span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; cursor: pointer; line-height: 1.2; transition: background-color .12s; }
.seg strong { display: block; font-stretch: 108%; }
.seg small { color: var(--ink-soft); font-size: .82rem; }
.seg label:hover span { background: rgba(31, 181, 163, .12); }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:checked + span small { color: rgba(255, 255, 255, .75); }
.days { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.days > span:first-child { font-weight: 650; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; }
.stepper button { width: 44px; height: 44px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; border-radius: 999px; }
.stepper button:hover:not(:disabled) { background: var(--mint); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { min-width: 2.2ch; text-align: center; font-weight: 800; font-size: 1.2rem; }
.days-hint { color: var(--ink-soft); font-size: .9rem; }
.days-hint strong { color: var(--teal-deep); }
.extra-km { padding-top: 16px; border-top: 1px dashed var(--line); }
.extra-km > span:first-child small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .85rem; }
.extra-km .stepper input[type="text"] { width: 5.5ch; border-radius: 0; min-height: 40px; border: 0; padding: 0; text-align: center; font-weight: 800; font-size: 1.2rem; background: transparent; box-shadow: none; }
.extra-km .stepper input[type="text"]:focus { box-shadow: none; }
.extra-km .stepper:focus-within { border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(31, 181, 163, .25); }
.option-field { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); align-self: stretch; }
.option-field small { font-weight: 400; color: var(--ink-soft); font-size: .85rem; }

/* Calendrier */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head h3 { font-size: 1.15rem; text-transform: capitalize; font-stretch: 110%; }
.cal-nav { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; }
.cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-nav:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow span { text-align: center; font-size: .8rem; color: var(--ink-soft); padding-bottom: 4px; }
.day {
  position: relative; border: 1.5px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 6px 6px 7px; min-height: 58px; display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; text-align: left; transition: border-color .12s, background-color .12s;
}
.day-n { font-weight: 700; font-size: .98rem; line-height: 1; }
.day-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.day-bars i { height: 7px; border-radius: 3px; background: var(--teal); }
.day-bars i.b { background: repeating-linear-gradient(135deg, var(--busy) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--busy); }
.day-bars i.p { background: var(--line); opacity: .6; }
.day-bars i.s { background: var(--sun); box-shadow: inset 0 0 0 1px var(--sun-deep); }
.day:hover:not(:disabled) { border-color: var(--teal); }
.day.is-today .day-n::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-deep); margin-left: 4px; vertical-align: middle; }
.day.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.day.in-range { background: #fff7dd; border-color: var(--sun-deep); }
.day:disabled { cursor: default; background: transparent; border-color: transparent; color: #9aaeac; }
.day.is-full:disabled { color: #8ba2a0; }
.day.is-full .day-n { text-decoration: line-through; }
.day.is-empty { visibility: hidden; }
.cal-legend { margin-top: 12px; color: var(--ink-soft); }
.cal-legend-note { flex-basis: 100%; font-size: .82rem; }

.slots { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.slots-empty { color: var(--ink-soft); margin: 0; }
.slots h4 { margin: 0 0 10px; font-size: 1rem; font-stretch: 108%; }
.slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot {
  border: 2px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 12px 14px;
  text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s;
}
.slot strong { display: block; font-size: 1.05rem; font-stretch: 108%; }
.slot small { color: var(--ink-soft); }
.slot:hover:not(:disabled) { border-color: var(--teal); }
.slot.is-on { border-color: var(--ink); background: var(--sun); }
.slot.is-on small { color: var(--ink); }
.slot:disabled { cursor: default; background: var(--paper); color: #8ba2a0; }
.slot:disabled small { color: #8ba2a0; }
.slot-note { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft); }
.slot-row.cols-1 { grid-template-columns: 1fr; }
.slot-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-sm { padding: 9px 10px; border-radius: 12px; }
.slot-sm strong { font-size: .98rem; }
.slot-sm small { font-size: .8rem; line-height: 1.25; display: block; }
.multi-toggle { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; cursor: pointer; }
.multi-toggle:has(input:checked) { border-color: var(--ink); background: #fff7dd; }
.multi-toggle input { margin-top: 2px; }
.multi-toggle small { display: block; color: var(--ink-soft); font-size: .88rem; }
.multi-note { margin: 0; padding: 10px 12px; background: #fff7dd; border-radius: 10px; font-size: .93rem; }
.mitem { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.mitem-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.mitem-x { border: 0; background: none; color: var(--danger); font-weight: 650; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.mitem-x:hover { background: #fdecea; }
.mitem-sub { margin: 10px 0 6px; font-size: .88rem; font-weight: 650; color: var(--ink-soft); }
@media (max-width: 560px) { .slot-sm { padding: 8px 6px; font-stretch: 82%; } .slot-sm strong { font-size: .92rem; } .slot-sm small { font-size: .74rem; } }
.notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff3cd; font-size: .93rem; }

@media (max-width: 560px) {
  .step { padding: 18px 14px 18px; border-radius: 18px; }
  .choice-row { grid-template-columns: 1fr; }
  .cal-dow, .cal-grid { gap: 4px; }
  .day { min-height: 50px; padding: 5px 4px 6px; border-radius: 8px; }
  .day-n { font-size: .9rem; }
  .day-bars i { height: 6px; }
  .seg small { display: none; }
  .seg span { padding: 12px 4px; font-size: .9rem; }
  .seg strong { font-stretch: 96%; }
}

/* Formulaires */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-weight: 600; font-size: .95rem; }
.field small { font-weight: 400; color: var(--ink-soft); }
.field-wide { grid-column: 1 / -1; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(31, 181, 163, .25); }
.is-invalid { border-color: var(--danger) !important; }
.check-field { display: flex; align-items: center; gap: 10px; align-self: end; min-height: 48px; cursor: pointer; }
.check-field small { display: block; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin: 0; }
.hp { position: absolute; left: -9999px; }
.form-error { color: var(--danger); background: #fdecea; border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: .95rem; }
.form-ok { color: var(--teal-deep); background: var(--mint); border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-weight: 600; }
.fine { font-size: .85rem; color: var(--ink-soft); margin: 12px 0 0; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* Récapitulatif */
.summary { position: sticky; top: 88px; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 24px; }
.summary h3 { font-size: 1.3rem; margin-bottom: 14px; }
.sum-list { margin: 0 0 16px; display: grid; gap: 10px; }
.sum-list div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
.sum-list dt { color: rgba(255, 255, 255, .6); font-size: .9rem; }
.sum-list dd { margin: 0; font-weight: 550; }
.sum-list dd.muted { color: rgba(255, 255, 255, .55); font-weight: 400; }
.sum-price { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 14px; margin-bottom: 16px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, .75); font-size: .95rem; margin-bottom: 6px; }
.sum-line s { color: rgba(255, 255, 255, .5); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 8px 0 12px; }
.sum-total span { font-weight: 600; }
.sum-total strong { font-size: 1.9rem; font-weight: 850; font-stretch: 118%; letter-spacing: -0.02em; }
.sum-pay { background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.sum-pay div { display: flex; justify-content: space-between; gap: 12px; }
.sum-pay .now { color: var(--sun); font-weight: 750; font-size: 1.08rem; }
.sum-pay .later { color: rgba(255, 255, 255, .75); font-size: .93rem; }
.cgv { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 14px; color: rgba(255, 255, 255, .85); cursor: pointer; }
.cgv input { accent-color: var(--sun); margin-top: 1px; }
.cgv a { color: var(--sun); }
.summary .form-error { background: #fff; }
.sum-note { font-size: .84rem; color: rgba(255, 255, 255, .6); margin: 12px 0 0; }
.sum-phone { background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.sum-phone p { margin: 0 0 10px; }

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .4);
}
.mobile-bar strong { display: block; font-size: 1.15rem; font-stretch: 112%; }
.mobile-bar span { font-size: .85rem; color: rgba(255, 255, 255, .7); }
@media (min-width: 981px) { .mobile-bar { display: none !important; } }
@media (max-width: 980px) {
  .book-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}

.pending-banner { background: var(--card); border: 2px solid var(--sun-deep); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pending-banner p { margin: 0; }

/* ---------- Tarifs ---------- */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.price-table caption { text-align: left; font-weight: 800; font-stretch: 115%; font-size: 1.3rem; padding: 0 4px 12px; }
.price-table caption span { color: var(--teal-deep); }
.price-table th, .price-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th { font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: var(--paper); padding-block: 10px; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table tbody th { font-weight: 650; }
.price-table tbody th small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .86rem; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table td { white-space: nowrap; }
.price-table td:last-child { font-weight: 800; font-stretch: 112%; font-size: 1.15rem; white-space: nowrap; }
.discounts { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 20px 24px; }
.discounts p { margin: 0; }
.discounts p strong { display: block; font-stretch: 112%; }
.discounts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.discounts li { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 8px 14px; }
.discounts li strong { color: var(--sun); font-size: 1.25rem; font-stretch: 115%; margin-right: 6px; }
@media (max-width: 760px) {
  .prices { grid-template-columns: 1fr; }
  .price-table th, .price-table td { padding: 14px 14px; }
}

/* ---------- Avis ---------- */
.reviews { background: var(--card); }
.reviews-head { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.rating { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.rating strong { grid-row: span 2; font-size: 3rem; font-weight: 850; font-stretch: 120%; line-height: 1; }
.stars { color: var(--sun-deep); letter-spacing: 2px; font-size: 1.2rem; }
.rating small { color: var(--ink-soft); }
.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.review { margin: 0; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); border-radius: var(--radius-lg); padding: 22px 24px; }
.review blockquote { margin: 0 0 14px; font-size: 1.08rem; line-height: 1.5; }
.review blockquote::before { content: '★★★★★'; display: block; color: var(--sun-deep); letter-spacing: 2px; font-size: .9rem; margin-bottom: 8px; }
.review figcaption { font-weight: 700; font-size: .95rem; }
.review figcaption span { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.review-cta { margin: 28px 0 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.info { margin: 24px 0; display: grid; gap: 14px; }
.info div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.info dt { color: var(--ink-soft); }
.info dd { margin: 0; font-weight: 600; }
.map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--mint) url('/images/map-hint.svg') center / cover; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-load { width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-content: center; gap: 4px; text-align: center; color: var(--ink); }
.map-load strong { font-size: 1.05rem; background: var(--card); padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); }
.map-load span { font-size: .85rem; color: var(--ink-soft); }
.map-links { display: flex; gap: 18px; margin-top: 12px; font-weight: 600; }
.contact-form { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; }
.contact-form h3 { font-size: 1.4rem; margin-bottom: 6px; }
.contact-form > p { color: var(--ink-soft); }
.contact-form .btn { margin-top: 16px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-form { padding: 22px 16px; } }

/* ---------- Conditions ---------- */
.conditions { padding-top: 0; }
.conditions h2 { font-size: 1.5rem; margin-bottom: 16px; }
.conditions details { max-width: 820px; border-top: 1px solid var(--line); }
.conditions details:last-child { border-bottom: 1px solid var(--line); }
.conditions summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.conditions summary::-webkit-details-marker { display: none; }
.conditions summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--teal-deep); }
.conditions details[open] summary::after { content: '−'; }
.conditions details > div { padding: 0 0 16px; color: var(--ink-soft); max-width: 70ch; }
.conditions ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Pied de page ---------- */
.foot { background: var(--ink); color: rgba(255, 255, 255, .78); padding: 44px 0 24px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot-name { font-weight: 800; font-stretch: 122%; font-size: 1.3rem; color: #fff; margin-bottom: 8px; }
.foot-links { display: grid; gap: 8px; align-content: start; }
.foot a { color: #fff; }
.foot a:hover { color: var(--sun); }
.foot-copy { margin-top: 32px; font-size: .85rem; color: rgba(255, 255, 255, .5); }
@media (max-width: 980px) { body.has-bar .foot { padding-bottom: 96px; } }

/* ---------- Pages simples (merci, mentions) ---------- */
.page { padding: clamp(40px, 7vw, 80px) 0; }
.page h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); font-weight: 850; margin-bottom: 18px; }
.page h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.page .lead { font-size: 1.15rem; color: var(--ink-soft); }
.panel { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px; margin: 24px 0; }
.panel dl { margin: 0; display: grid; gap: 12px; }
.panel dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.panel dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.panel dt { color: var(--ink-soft); }
.panel dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .panel dl div { grid-template-columns: 1fr; gap: 2px; } .panel { padding: 20px 16px; } }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--mint); color: var(--teal-deep); }
.status.wait { background: #fff3cd; color: #7a5600; }
.status.bad { background: #fdecea; color: var(--danger); }
.spinner { width: 16px; height: 16px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.legal p, .legal li { color: var(--ink-soft); max-width: 72ch; }

/* ---------- Confort sur téléphone ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 22px; }
  .section-head p { font-size: 1rem; }
  .vcard img { aspect-ratio: 16 / 10; }
  .vcard-body { padding: 18px 18px 20px; }
  .vcard-foot { flex-direction: column; align-items: stretch; }
  .vcard-foot .btn { width: 100%; }
  .choice-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .choice-box { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; text-align: left; }
  .choice-box img { width: 100%; height: 74px; }
  .choice-box > span { padding: 0 4px 2px; }
  .choice-box strong { font-size: 1.02rem; }
  .step legend { font-size: 1.08rem; margin-bottom: 12px; }
  .step-n { width: 26px; height: 26px; font-size: .85rem; }
  .book-steps { gap: 12px; }
  .cal-head h3 { font-size: 1.05rem; }
  .cal-nav { width: 40px; height: 40px; }
  .slot { padding: 12px; }
  .summary { padding: 20px 16px; border-radius: 18px; }
  .sum-total strong { font-size: 1.7rem; }
  .price-table caption { font-size: 1.12rem; }
  .discounts { padding: 16px; }
  .discounts li { padding: 6px 10px; }
  .review { padding: 18px; }
  .review-list { grid-template-columns: 1fr; gap: 12px; }
  .info div { grid-template-columns: 90px 1fr; }
  .multi-toggle { padding: 10px 12px; }
  .mobile-bar { padding-top: 8px; }
  .mobile-bar .btn { min-height: 44px; padding: 0 1.2em; }
  h2 { font-size: 1.65rem; }
}

/* ---------- Contact rapide (appel, SMS, WhatsApp) ---------- */
.quick-label { margin: 22px 0 10px; color: rgba(255, 255, 255, .7); font-size: .95rem; }
.quick-label-light { color: var(--ink-soft); margin: 14px 0 12px; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.quick-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 10px;
  border-radius: 14px; font-weight: 700; font-stretch: 106%; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.quick-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.quick-dark .quick-btn { background: rgba(255, 255, 255, .08); color: #fff; border: 1.5px solid rgba(255, 255, 255, .18); }
.quick-dark .quick-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.quick-light .quick-btn { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.quick-light .quick-btn:hover { border-color: var(--ink); color: var(--ink); }
.quick-btn.wa svg { color: #25d366; }
.summary .quick { margin-top: 10px; }
.summary .quick-btn { background: rgba(255, 255, 255, .08); color: #fff; border: 1.5px solid rgba(255, 255, 255, .18); min-height: 44px; font-size: .9rem; }
@media (max-width: 400px) { .quick-btn { flex-direction: column; gap: 2px; font-size: .85rem; min-height: 58px; } }

/* ---------- Application installée ---------- */
.top { padding-top: env(safe-area-inset-top); }
.install-bar {
  display: flex; align-items: center; gap: 12px; background: var(--card); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin: 16px auto 0;
  width: min(1180px, 100% - 32px);
}
.install-bar img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install-bar p { margin: 0; flex: 1; font-size: .93rem; line-height: 1.35; }
.install-bar p strong { display: block; font-size: 1rem; }
.install-bar .x { border: 0; background: none; font-size: 1.4rem; line-height: 1; padding: 6px; cursor: pointer; color: var(--ink-soft); }
.share-ico { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; }
@media (display-mode: standalone) { .hide-in-app { display: none !important; } }