/* dimbike.be — feuille de style des gabarits.
   Charger APRÈS ds/dimbike/tokens.css et ds/dimbike/components/bundle.css.
   Toute valeur vient des tokens du Dimbike Design System ; les ajouts marqués ÉVOLUTION sont à intégrer au système. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-0); color: var(--ink-body); font-family: var(--font-body); font-size: 15px; line-height: 25.5px; }
img { max-width: 100%; display: block; }
a { color: var(--red-300); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red-300); outline-offset: 2px; }

/* Typographie */
.s-h1 { font-family: var(--font-heading); font-weight: 600; font-size: 56px; line-height: 1.2; color: var(--ink); margin: 0; }
.s-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1.3; color: var(--ink); margin: 0; }
.s-h3 { font-family: var(--font-heading); font-weight: 600; font-size: 23px; line-height: 1.3; color: var(--ink); margin: 0; }
.s-h4 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--ink); margin: 0; }
.s-h5 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }
.s-p { margin: 0; color: var(--ink-body); }
.s-small { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.s-todo { color: var(--ink-muted); }

/* Mise en page */
.s-page { width: 100%; min-width: 0; background: var(--surface-0); }
.s-container { width: 100%; max-width: var(--container); margin: 0 auto; }
.s-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; }
.s-section { padding: var(--section-y) var(--section-x); }
.s-section-sm { padding: var(--space-60) var(--section-x); }
.s-pad-x { padding: 0 var(--section-x); }
.s-alt { background: var(--surface-100); }
.s-stack { display: flex; flex-direction: column; gap: var(--gap); }
.s-stack-sm { display: flex; flex-direction: column; gap: var(--space-30); }
.s-row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
.s-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-bottom: var(--space-70); }
.s-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-80); align-items: center; }
.s-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.s-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.s-crumbs { font-size: 13px; line-height: 20px; color: var(--ink-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.s-crumbs a { color: var(--ink-body); text-decoration: none; }

/* En-tête : burger mobile (ÉVOLUTION SiteHeader) */
.s-header-cta { display: inline-flex; }
.s-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--ink); border-radius: var(--radius-xs); box-shadow: var(--shadow-sm); color: var(--ink); cursor: pointer; }
.s-logo { height: 51px; width: auto; }

/* Héros photo plein cadre — voile = aplat (ÉVOLUTION token overlay) */
.s-hero { position: relative; min-height: 680px; display: flex; align-items: flex-end; padding: var(--section-y) var(--section-x); overflow: hidden; background: var(--surface-200); }
.s-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hero-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.s-hero-inner { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-40); }
.s-hero-inner .s-p { max-width: 560px; }
.s-pagehero { position: relative; min-height: 380px; display: flex; align-items: flex-end; padding: var(--space-80) var(--section-x); overflow: hidden; background: var(--surface-200); }

/* Photos */
.s-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-200); }
.s-photo-wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-200); }
.s-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* Service avec photo */
.s-service-photo { display: flex; flex-direction: column; gap: 0; }
.s-service-photo .db-service { border-top: 0; }

/* Emplacements d'avis Google (ÉVOLUTION ReviewSlot) */
.s-slot { border: 1px dashed var(--border); background: var(--surface-100); padding: var(--space-50); min-height: 200px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-30); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.s-slot strong { color: var(--ink-body); font-weight: 600; text-transform: uppercase; }

/* Bandeau Dimcar */
.s-dimcar { background: var(--surface-0); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-60) var(--section-x); }
.s-dimcar-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.s-dimcar-name { font-family: var(--font-heading); font-weight: 600; color: var(--ink); }

/* Pied de page */
.s-footer { background: var(--surface-0); border-top: 1px solid var(--surface-200); padding: var(--space-80) var(--section-x) var(--space-60); }
.s-footer-cols { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--gap); }
.s-footer h3 { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-30); }
.s-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.s-footer a { color: var(--ink-body); text-decoration: none; }
.s-footer a:hover { color: var(--red-300); }
.s-footer-bottom { max-width: var(--container); margin: var(--space-60) auto 0; padding-top: var(--space-50); border-top: 1px solid var(--surface-200); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.s-footer-cars { color: var(--ink-body); }

/* Catalogue motos (ÉVOLUTION FilterPanel) */
.s-shop { display: flex; flex-wrap: wrap; gap: var(--space-60); align-items: flex-start; }
.s-filters { flex: 1 1 280px; max-width: 300px; background: var(--surface-100); border: 1px solid var(--surface-200); padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-50); }
.s-results { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.s-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.s-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-40); }
.s-pager { display: flex; gap: var(--space-30); justify-content: center; }
.s-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.s-badges .db-badge { position: static; }
.s-empty { border: 1px dashed var(--border); padding: var(--space-80) var(--space-60); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-40); }

/* Case à cocher (ÉVOLUTION Checkbox) */
.s-check { display: flex; align-items: center; gap: 10px; color: var(--ink-body); min-height: 32px; cursor: pointer; }
.s-check input { width: 18px; height: 18px; accent-color: var(--red-500); margin: 0; }
.s-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.s-fieldset legend { font-size: 13px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: var(--ink-body); padding: 0; margin-bottom: 6px; }

/* Fiche moto */
.s-product { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "gal panel" "desc panel"; gap: var(--space-60); align-items: start; }
.s-p-gallery { grid-area: gal; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.s-p-panel { grid-area: panel; position: sticky; top: 24px; background: var(--surface-100); border: 1px solid var(--surface-200); padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-40); }
.s-p-desc { grid-area: desc; display: flex; flex-direction: column; gap: var(--space-60); min-width: 0; }
.s-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.s-thumbs button { padding: 0; border: 1px solid var(--surface-200); background: transparent; cursor: pointer; }
.s-thumbs button[aria-current="true"] { border: 2px solid var(--red-300); }
.s-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.s-price-big { font-family: var(--font-accent); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--ink); }
.s-list { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--gap); }
.s-divider { border: 0; border-top: 1px solid var(--surface-200); margin: 0; width: 100%; }

/* Formulaires */
.s-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40); }
.s-span-2 { grid-column: 1 / -1; }
.s-form .db-field select, .s-filters .db-field select { appearance: auto; }

/* Contact */
.s-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-80); align-items: start; }
.s-hours { width: 100%; border-collapse: collapse; }
.s-hours th, .s-hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--surface-200); font-weight: 400; }
.s-hours th { color: var(--ink-body); }
.s-hours td { color: var(--ink-muted); text-align: right; }
.s-map { border: 1px dashed var(--border); background: var(--surface-100); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-40); padding: var(--space-50); }
.s-tabs { display: flex; gap: var(--space-30); flex-wrap: wrap; }

/* Blog (ÉVOLUTION ArticleCard) */
.s-post { background: var(--surface-100); border: 1px solid var(--surface-200); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.s-post-body { padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-30); }
.s-post-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-article { display: flex; flex-direction: column; gap: var(--space-50); }
.s-article h2 { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.3; color: var(--ink); margin: var(--space-40) 0 0; }
.s-article p { margin: 0; }

/* Back-office (ÉVOLUTION) */
.bo { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--surface-0); }
.bo-side { flex: 1 1 240px; max-width: 260px; background: var(--surface-100); border-right: 1px solid var(--surface-200); padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-50); }
.bo-side nav { display: flex; flex-direction: column; gap: 2px; }
.bo-side nav a { display: block; padding: 10px 12px; color: var(--ink-body); text-decoration: none; font-weight: 600; font-size: 13px; line-height: 20px; text-transform: uppercase; }
.bo-side nav a[aria-current="page"] { background: var(--surface-200); color: var(--ink); box-shadow: inset 3px 0 0 var(--red-500); }
.bo-side .s-logo { height: 34px; }
.bo-main { flex: 999 1 720px; min-width: 0; padding: var(--space-60) var(--space-70); display: flex; flex-direction: column; gap: var(--gap); }
.bo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.bo-card { background: var(--surface-100); border: 1px solid var(--surface-200); padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-40); }
.bo-tablebox { overflow-x: auto; background: var(--surface-100); border: 1px solid var(--surface-200); }
.s-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.s-table th { text-align: left; font-size: 13px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: var(--ink-muted); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.s-table td { padding: 12px 16px; border-bottom: 1px solid var(--surface-200); vertical-align: middle; color: var(--ink-body); }
.s-table img { width: 72px; aspect-ratio: 4 / 3; object-fit: cover; }
.s-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.s-seg button { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 700; text-transform: uppercase; padding: 6px 12px; background: transparent; color: var(--ink-body); border: 0; border-right: 1px solid var(--border); cursor: pointer; min-height: 36px; }
.s-seg button:last-child { border-right: 0; }
.s-seg button[aria-pressed="true"].is-available { background: var(--green-available); color: var(--ink-900); }
.s-seg button[aria-pressed="true"].is-reserved { background: var(--surface-200); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.s-seg button[aria-pressed="true"].is-sold { background: var(--ink-muted); color: var(--ink-900); }
.s-drop { border: 1px dashed var(--border); background: var(--surface-0); padding: var(--space-60); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-30); }
.s-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.s-photo-item { position: relative; background: var(--surface-200); border: 1px solid var(--border); }
.s-photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.s-photo-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.s-handle { cursor: grab; color: var(--ink-body); background: transparent; border: 0; font-size: 13px; padding: 4px; }
.s-dyn { display: grid; grid-template-columns: 1.6fr 1fr 0.7fr 1fr 0.7fr 0.8fr auto; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--surface-200); }
.s-dyn .db-field input, .s-dyn .db-field select { padding: 8px 10px; }
.s-dyn .s-check { min-height: 44px; }

/* Tablette */
@media (max-width: 1024px) {
  .s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-product { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gal" "panel" "desc"; }
  .s-p-panel { position: static; }
  .s-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 720px) {
  .s-section { padding: 64px 24px; }
  .s-section-sm, .s-dimcar { padding: var(--space-60) 24px; }
  .s-pad-x { padding: 0 24px; }
  .s-hero { min-height: 560px; padding: 64px 24px; }
  .s-pagehero { min-height: 300px; padding: var(--space-60) 24px; }
  .s-h1 { font-size: 35px; }
  .s-h2 { font-size: 30px; }
  .s-h3 { font-size: 22px; }
  .s-grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-60); }
  .s-grid-3, .s-grid-4, .s-cards, .s-gallery, .s-form, .s-contact, .s-footer-cols, .s-list, .s-post-feature { grid-template-columns: minmax(0, 1fr); }
  .s-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s-head-row { margin-bottom: var(--space-60); }
  .db-nav, .s-header-cta { display: none; }
  .s-burger { display: inline-flex; }
  .s-logo { height: 26px; }
  .s-filters { max-width: none; }
  .s-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .s-price-big { font-size: 35px; }
  .s-footer { padding: var(--space-60) 24px; }
}