/* Site de reservation du camping : tokens --sd-* de stilldeep.css seulement (docs/brand/README.md), theme du systeme. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sd-bg);
  color: var(--sd-text);
  font-family: var(--sd-font-sans);
  line-height: 1.5;
}

a { color: var(--sd-accent); }
h1, h2 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }

.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--sd-text-muted); }

.top { background: var(--sd-surface); border-bottom: 1px solid var(--sd-border); }
.top-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding-block: 8px; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--sd-text); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.top nav a { text-decoration: none; font-weight: 600; padding-block: 10px; }

main { padding-block: 24px 48px; }

.foot { border-top: 1px solid var(--sd-border); color: var(--sd-text-muted); font-size: .875rem; }
.foot-bar { display: flex; align-items: center; gap: 6px; min-height: 56px; }
.foot-brand { display: inline-flex; align-items: center; gap: 6px; padding-block: 10px; color: inherit; text-decoration: none; }

.panel {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-1);
  padding: 20px;
  margin-bottom: 16px;
}
.panel.narrow { max-width: 440px; margin-inline: auto; }
.notice { text-align: center; padding-block: 40px; }

.button {
  display: inline-block;
  border: 0;
  border-radius: var(--sd-radius-md);
  background: var(--sd-accent);
  color: var(--sd-on-accent);
  font: inherit;
  font-weight: 700;
  padding: 12px 20px;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
}
.button.ghost { background: transparent; color: var(--sd-accent); border: 1px solid var(--sd-border); }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--sd-focus-ring); }
.link { background: none; border: 0; color: var(--sd-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 10px 0; }
form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 8px 4px 0; }

.alert {
  background: var(--sd-danger-soft);
  color: var(--sd-danger);
  border-radius: var(--sd-radius-md);
  padding: 12px 16px;
  font-weight: 600;
}

label { display: grid; gap: 4px; font-weight: 600; margin-bottom: 12px; }
input, select {
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface-2);
  color: var(--sd-text);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { margin: 16px 0 0; }

/* Dates du sejour. */
.dates { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.dates label { margin: 0; }

/* Plans : le camping (zones en cartes, leurs terrains en petit) et une zone (terrains), au trait du site StillDeep. */
.map { width: 100%; height: auto; display: block; border-radius: var(--sd-radius-md); background: var(--sd-surface); }
.map .lake { fill: color-mix(in srgb, var(--sd-accent) 14%, var(--sd-surface)); }
.map .beach { fill: color-mix(in srgb, var(--sd-warning) 9%, var(--sd-surface)); }
.map .road { fill: none; stroke: var(--sd-border); stroke-linecap: round; stroke-linejoin: round; }
.map .road-line { fill: none; stroke: var(--sd-surface); stroke-width: 2; }
.map .alley { fill: none; stroke: var(--sd-border); stroke-linecap: round; }
.map .area { fill: var(--sd-surface-2); stroke: var(--sd-border); stroke-width: 1.5; }
.map a:hover .area, .map a:focus-visible .area { stroke: var(--sd-accent); stroke-width: 3; }
.map .entrance-dot { fill: var(--sd-accent); }
.map .place-dot { fill: var(--sd-text); }
.map .place { font-size: 16px; font-weight: 700; fill: var(--sd-text-muted); }
.map .zone-label { font-size: 20px; font-weight: 800; fill: var(--sd-text); }
.map .zone-free { font-size: 15px; font-weight: 600; fill: var(--sd-text-muted); }
.map .site { fill: var(--sd-surface); stroke: color-mix(in srgb, var(--sd-text-muted) 60%, var(--sd-surface)); stroke-width: 2.5; }
.map .site.taken { fill: color-mix(in srgb, var(--sd-accent) 22%, var(--sd-surface)); stroke: var(--sd-accent); }
.map .site.blocked { fill: var(--sd-surface-2); stroke: var(--sd-border); }
.map .site.hour { fill: color-mix(in srgb, var(--sd-text-muted) 8%, var(--sd-surface)); stroke: var(--sd-border); }
.map.zone a:hover .site.free, .map.zone a:focus-visible .site.free { stroke: var(--sd-accent); stroke-width: 4; }
.map .site-label { font-family: var(--sd-font-mono); font-size: 20px; font-weight: 700; fill: var(--sd-text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map .site.blocked + .site-label { fill: var(--sd-text-muted); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 0; color: var(--sd-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 2px solid; vertical-align: middle; }
.swatch.free { background: var(--sd-surface); border-color: color-mix(in srgb, var(--sd-text-muted) 60%, var(--sd-surface)); }
.swatch.taken { background: color-mix(in srgb, var(--sd-accent) 22%, var(--sd-surface)); border-color: var(--sd-accent); }
.swatch.blocked { background: var(--sd-surface-2); border-color: var(--sd-border); }

.zones, .sites, .cards, .items { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.zones a { display: block; padding: 10px 0; text-decoration: none; }
.sites li, .cards li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 6px; border-bottom: 1px solid var(--sd-border); }
.price { font-weight: 700; margin-left: auto; }
.site-link { display: inline-flex; align-items: center; min-width: 64px; min-height: 44px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--sd-accent); }

/* Telephone : le plan garde une taille lisible et defile de cote. */
.map-scroll { overflow-x: auto; }

/* Guidage (extension gps) : destination, depart, ligne droite, point « vous etes ici » et sa precision. */
.guide-form { max-width: 520px; }
.guide-result { font-size: 18px; font-weight: 700; margin: 12px 0 0; }
.guide-on #guide-from { display: none; }
.map .site.mine { fill: color-mix(in srgb, var(--sd-success) 30%, var(--sd-surface)); stroke: var(--sd-success); }
.map .place-dot.guide-to { fill: var(--sd-accent); }
.map .guide-route { stroke: var(--sd-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 10; }
.map circle.guide-to { fill: none; stroke: var(--sd-accent); stroke-width: 4; }
.map .guide-from { fill: var(--sd-text); stroke: var(--sd-surface); stroke-width: 3; }
.map .guide-me { fill: var(--sd-accent); stroke: var(--sd-surface); stroke-width: 4; }
.map .guide-accuracy { fill: color-mix(in srgb, var(--sd-accent) 16%, transparent); stroke: none; }
.swatch.mine { background: color-mix(in srgb, var(--sd-success) 30%, var(--sd-surface)); border-color: var(--sd-success); }
.swatch.guide-to { background: transparent; border-color: var(--sd-accent); border-radius: 50%; }
.swatch.guide-me { background: var(--sd-accent); border-color: var(--sd-surface); border-radius: 50%; }
@media (max-width: 640px) {
  .map-scroll .map { min-width: 720px; }
}

/* Heures de la salle et des terrains. */
.hours { display: flex; flex-wrap: wrap; gap: 8px; }
.hour {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 44px; padding: 0 12px;
  border-radius: var(--sd-radius-md); border: 1px solid var(--sd-border);
  font: inherit; font-weight: 700; text-decoration: none;
}
.hour.free { background: var(--sd-surface); color: var(--sd-text); border-color: color-mix(in srgb, var(--sd-text-muted) 60%, var(--sd-surface)); cursor: pointer; }
.hour.free:hover, .hour.free:focus-visible { border-color: var(--sd-accent); color: var(--sd-accent); }
.hour.taken { background: var(--sd-surface-2); color: var(--sd-text-muted); }

/* Commande. */
.summary { width: 100%; border-collapse: collapse; margin-block: 12px; }
.summary td { padding: 8px 4px; border-bottom: 1px solid var(--sd-border); vertical-align: top; }
.summary .qty { text-align: right; color: var(--sd-text-muted); white-space: nowrap; }
.summary .amount { text-align: right; white-space: nowrap; font-family: var(--sd-font-mono); }
.summary .total td { font-weight: 800; border-bottom: 0; }
.hold { color: var(--sd-warning); font-weight: 600; }
.camp-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.camp-card p { margin: 0; font-weight: 600; }
.cancel { text-align: center; }

/* Livraison. */
.items li label { display: grid; grid-template-columns: 1fr auto 84px; align-items: center; gap: 12px; margin: 0; font-weight: 500; }
.tips { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tips label { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; }
.tips input { min-height: auto; }

@media (max-width: 640px) {
  .pair { grid-template-columns: 1fr; }
  .items li label { grid-template-columns: 1fr 84px; }
  .items li label .price { grid-column: 1; grid-row: 2; margin-left: 0; }
}