/*
 * Boutique revendeur d'exemple — feuille de style.
 *
 * Écrite à la main, sans bibliothèque d'interface : une boutique sobre et
 * crédible, lisible sur téléphone comme sur écran large. Trois couleurs, une
 * échelle typographique, et rien de décoratif qui ne serve à comprendre.
 */

:root {
  --encre: #16202b;
  --encre-douce: #5a6b7d;
  --trait: #dfe5ec;
  --fond: #ffffff;
  --fond-doux: #f5f7fa;
  --accent: #0f5d8f;
  --accent-clair: #e8f1f8;
  --alerte: #a8410f;
  --alerte-clair: #fdf1ea;
  --succes: #1c6b45;
  --succes-clair: #ecf6f1;
  --attente: #7a5a12;
  --attente-clair: #fbf4e3;
  --rayon: 6px;
  --ombre: 0 1px 2px rgba(22, 32, 43, 0.06), 0 4px 12px rgba(22, 32, 43, 0.05);
  --largeur: 1180px;
}

* { box-sizing: border-box; }

/*
 * Un élément de grille a par défaut une largeur minimale égale à son contenu :
 * un tableau ou un descriptif un peu large suffit alors à faire déborder toute
 * la page sur téléphone. On le neutralise partout où une grille porte du contenu
 * de longueur libre.
 */
.product-layout > *,
.seating-layout > *,
.panel-grid > *,
.action-row > *,
.footer-grid > * {
  min-width: 0;
}

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.6rem; font-weight: 650; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.8rem; }
img { max-width: 100%; display: block; }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: 0.85em; }
.small { font-size: 0.85rem; color: var(--encre-douce); }
.empty { color: var(--encre-douce); padding: 2rem 0; }
.ok { color: var(--succes); font-weight: 600; }

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

.site-header {
  border-bottom: 1px solid var(--trait);
  background: var(--fond);
  position: sticky;
  top: 0;
  z-index: 20;
}

.bar {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--encre); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: var(--rayon);
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
}
.brand-name { font-weight: 650; font-size: 1.1rem; }

.search { flex: 1 1 260px; display: flex; gap: 0.4rem; }
.search input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 0.95rem;
}
.search input:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
.search button {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--trait);
  background: var(--fond-doux);
  border-radius: var(--rayon);
  font: inherit; font-size: 0.9rem;
  cursor: pointer;
}
.search button:hover { background: var(--accent-clair); border-color: var(--accent); }

.admin-link { font-size: 0.9rem; color: var(--encre-douce); }
.cart-link { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.count-pill {
  display: inline-block;
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}

/* --------------------------------------------------------------------- menu */

.menu {
  border-top: 1px solid var(--trait);
  background: var(--fond-doux);
}
.menu.empty { padding: 0.6rem 1.25rem; font-size: 0.9rem; color: var(--encre-douce); }

.menu-root {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  gap: 0.25rem;
  list-style: none;
  overflow-x: auto;
}
.menu-item { position: relative; flex: 0 0 auto; }
.menu-item > a {
  display: block;
  padding: 0.65rem 0.75rem;
  color: var(--encre);
  font-size: 0.93rem;
  white-space: nowrap;
}
.menu-item:hover > a { background: var(--fond); color: var(--accent); text-decoration: none; }

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 22rem;
  max-width: 46rem;
  padding: 1rem 1.2rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 0 0 var(--rayon) var(--rayon);
  box-shadow: var(--ombre);
  z-index: 30;
}
.menu-item:hover .submenu { display: block; }
.submenu > ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2rem;
}
.submenu > ul > li { break-inside: avoid; margin-bottom: 0.7rem; }
.submenu a { font-size: 0.92rem; }
.submenu .count { color: var(--encre-douce); font-size: 0.78rem; margin-left: 0.3rem; }
.submenu .leaves { list-style: none; margin: 0.15rem 0 0; padding: 0 0 0 0.7rem; }
.submenu .leaves a { color: var(--encre-douce); font-size: 0.85rem; }

/* -------------------------------------------------------------- fil d'Ariane */

.breadcrumb {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.8rem 1.25rem 0;
  font-size: 0.85rem;
  color: var(--encre-douce);
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumb li { overflow-wrap: anywhere; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.35rem; color: var(--trait); }

/* --------------------------------------------------------------------- page */

.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.hero { padding: 1.5rem 0 0.5rem; }
.hero h1 { font-size: 2.1rem; }
.lead { color: var(--encre-douce); font-size: 1.05rem; }

.section-head { border-bottom: 1px solid var(--trait); padding-bottom: 0.8rem; margin-bottom: 1.4rem; }
.section-head .lead { margin: 0; font-size: 0.95rem; }

.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state .actions { margin-top: 1.5rem; }

.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.button:hover { background: #0c4c76; text-decoration: none; }
.button.secondary { background: var(--fond); color: var(--accent); }
.button.secondary:hover { background: var(--accent-clair); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ univers */

.univers { margin: 2rem 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.8rem; }
.tile {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-doux);
  color: var(--encre);
}
.tile:hover { border-color: var(--accent); background: var(--accent-clair); text-decoration: none; }
.tile-name { font-weight: 620; }
.tile-count { font-size: 0.82rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------- grille */

.strip { margin: 2.4rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond);
  transition: border-color 0.12s ease;
}
.card:hover { border-color: var(--accent); box-shadow: var(--ombre); }
.card-media { position: relative; display: block; background: var(--fond-doux); }
.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fond-doux); }
.thumb.placeholder {
  background:
    repeating-linear-gradient(135deg, #eef2f6 0 12px, #e6ecf2 12px 24px);
  min-height: 150px;
}
.card-body { padding: 0.8rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.card-kicker { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-douce); }
.card h3 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.card h3 a { color: var(--encre); }
.card-date { margin: 0; font-size: 0.85rem; color: var(--encre-douce); }
.card-price { margin-top: auto; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.card-price .from { font-size: 0.78rem; color: var(--encre-douce); }
.card-price strong { font-size: 1.12rem; }
.card-price .public { font-size: 0.85rem; color: var(--encre-douce); text-decoration: line-through; }
.card-price .hint { font-size: 0.75rem; color: var(--accent); width: 100%; }

.badges { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.badge {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: var(--encre); color: #fff;
}
.badge.new { background: var(--succes); }
.badge.warn { background: var(--alerte); }
.badge.off { background: var(--encre-douce); }
.badge.wait { background: var(--attente); }
.badge.ship { background: var(--accent); }

/* -------------------------------------------------------------- listes/pagin */

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.3rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--encre);
  background: var(--fond-doux);
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip-count { font-size: 0.75rem; color: var(--encre-douce); }

.list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; font-size: 0.9rem;
}
.list-toolbar form { display: flex; align-items: center; gap: 0.5rem; }
.list-toolbar select, .field select, .field input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font: inherit; font-size: 0.92rem;
  background: var(--fond);
}
.page-indicator { margin: 0; color: var(--encre-douce); }

.pagination { display: flex; gap: 0.3rem; justify-content: center; margin: 2rem 0 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-size: 0.9rem;
}
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .disabled, .pagination .gap { color: var(--trait); border-color: transparent; }

/* ------------------------------------------------------------------ produit */

.product-head { margin-bottom: 1.4rem; }
.product-head .kicker { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--encre-douce); }
.product-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; color: var(--encre-douce); font-size: 0.9rem; }
.brand-chip { padding: 0.15rem 0.5rem; background: var(--fond-doux); border: 1px solid var(--trait); border-radius: 999px; color: var(--encre); }
.product-head .badges { position: static; flex-direction: row; margin-top: 0.6rem; }

.product-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 2rem; align-items: start; }
.product-visual { margin: 0 0 1.5rem; }
.product-visual .thumb { aspect-ratio: 16 / 9; border-radius: var(--rayon); border: 1px solid var(--trait); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.gallery .thumb { aspect-ratio: 4 / 3; }
.calendar-image { margin: 1.2rem 0 0; padding: 1rem; background: var(--fond-doux); border-radius: var(--rayon); }
.calendar-image h3 { margin-bottom: 0.3rem; }

.prose { margin-bottom: 1.8rem; overflow-wrap: anywhere; }
.prose p { margin-bottom: 0.7rem; }
.usage { margin-bottom: 1.8rem; }
.practical { margin-bottom: 1.8rem; }
.locations ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.locations li { padding: 0.7rem 0.8rem; background: var(--fond-doux); border-radius: var(--rayon); font-size: 0.9rem; }

.product-aside { position: sticky; top: 7.5rem; display: flex; flex-direction: column; gap: 1rem; }
.booking { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem; background: var(--fond); box-shadow: var(--ombre); }
.booking-form { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; }
.field > span { font-weight: 600; }
.field small { color: var(--encre-douce); }
.field.short { max-width: 8rem; }
.field-static { margin: 0; font-size: 0.88rem; }

.price-block { border-top: 1px solid var(--trait); padding-top: 0.9rem; }
.price-main { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.price-main .label { font-size: 0.82rem; color: var(--encre-douce); width: 100%; }
.price-main strong { font-size: 1.65rem; }
.price-main .public { font-size: 0.88rem; color: var(--encre-douce); }
.price-detail { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0; font-size: 0.88rem; }
.price-detail dt { color: var(--encre-douce); }
.price-detail dd { margin: 0; }

/* --------------------------------------------------------------- placement */

.seating { margin: 2.4rem 0; }
.seating-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); gap: 1.6rem; align-items: start; }
.seating-plan .thumb { aspect-ratio: 16 / 10; border: 1px solid var(--trait); border-radius: var(--rayon); }
.legend, .zone-list { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.legend li, .zone-list li { display: flex; align-items: center; gap: 0.5rem; }
.zone-list li.off { opacity: 0.45; }
.zone-list .small { margin-left: auto; }
.swatch { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

.seat-grid { margin-top: 1.6rem; padding: 1rem; background: var(--fond-doux); border-radius: var(--rayon); overflow-x: auto; }
.seat-row { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.2rem; }
.row-label { width: 2.2rem; font-size: 0.78rem; color: var(--encre-douce); flex: 0 0 auto; }
.seat {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  font-size: 0.65rem;
  border-radius: 3px;
  background: var(--succes-clair); color: var(--succes);
  border: 1px solid rgba(28, 107, 69, 0.3);
  flex: 0 0 auto;
}
.seat.unavailable { background: var(--trait); color: var(--encre-douce); border-color: var(--trait); }
.seat.limited { background: var(--attente-clair); color: var(--attente); border-color: rgba(122, 90, 18, 0.3); }

/* ------------------------------------------------------------- déclinaisons */

.variants, .order-line { margin: 2.4rem 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { background: var(--fond-doux); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tr.selected { background: var(--accent-clair); }

.payload {
  background: var(--encre); color: #e7eef5;
  padding: 1rem; border-radius: var(--rayon);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.tech { margin: 2.4rem 0 0; border: 1px solid var(--trait); border-radius: var(--rayon); }
.tech summary { padding: 0.7rem 1rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; background: var(--fond-doux); }
.tech-body { padding: 1rem; }
.flags { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.3rem; font-size: 0.85rem; }
.flags li.on { color: var(--succes); }
.flags li.off { color: var(--encre-douce); }
.calls { list-style: none; padding: 0; margin: 0 0 0.8rem; font-size: 0.85rem; }
.calls li { padding: 0.2rem 0; }

/* ------------------------------------------------------------ notifications */

.notice {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.8rem 1rem;
  border-radius: var(--rayon);
  border-left: 3px solid var(--accent);
  background: var(--accent-clair);
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice.warn { background: var(--attente-clair); border-color: var(--attente); }
.notice.error { background: var(--alerte-clair); border-color: var(--alerte); }
.notice.wait { background: var(--attente-clair); border-color: var(--attente); }
.notice.info { background: var(--accent-clair); border-color: var(--accent); }

/* ---------------------------------------------------------- synchronisation */

.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; }
.panel {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
  background: var(--fond);
  margin-bottom: 1.6rem;
}
.panel.running { border-color: var(--accent); }
.panel dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.9rem; }
.panel dt { color: var(--encre-douce); white-space: nowrap; }
.panel dd { margin: 0; overflow-wrap: anywhere; }

.actions-panel { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; margin-bottom: 1.6rem; }
.action-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.action-row form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.progress { height: 8px; background: var(--fond-doux); border-radius: 999px; overflow: hidden; margin: 0.6rem 0 0.3rem; }
.progress .bar { height: 100%; background: var(--accent); transition: width 0.3s ease; }

.counters { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.counters li {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-doux);
  display: flex; flex-direction: column;
}
.counters li.active { border-color: var(--accent); background: var(--accent-clair); }
.counters strong { font-size: 1.3rem; }
.counters span { font-size: 0.8rem; color: var(--encre-douce); }

.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0.2rem 0.2rem 0;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
}
.tag.created { background: var(--succes-clair); color: var(--succes); border-color: rgba(28, 107, 69, 0.3); }
.tag.price { background: var(--accent-clair); color: var(--accent); border-color: rgba(15, 93, 143, 0.3); }
.tag.stock { background: var(--attente-clair); color: var(--attente); border-color: rgba(122, 90, 18, 0.3); }
.tag.removed { background: var(--alerte-clair); color: var(--alerte); border-color: rgba(168, 65, 15, 0.3); }

.tag.draft { background: var(--fond-doux); color: var(--encre-douce); }
.tag.pending { background: var(--attente-clair); color: var(--attente); border-color: rgba(122, 90, 18, 0.3); }
.tag.fulfilled { background: var(--succes-clair); color: var(--succes); border-color: rgba(28, 107, 69, 0.3); }
.tag.confirmed { background: var(--accent-clair); color: var(--accent); border-color: rgba(15, 93, 143, 0.3); }
.tag.partially_fulfilled { background: var(--accent-clair); color: var(--accent); border-color: rgba(15, 93, 143, 0.3); }
.tag.cancelled,
.tag.expired,
.tag.failed { background: var(--alerte-clair); color: var(--alerte); border-color: rgba(168, 65, 15, 0.3); }
.tag.unchanged { background: var(--fond-doux); color: var(--encre-douce); }

.detail-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.detail-list .was { color: var(--encre-douce); }

.error-page { padding: 3rem 0; }

/* ------------------------------------------------- panier, commande, gestion */

.cart-form { margin-top: 0.8rem; }
.cart-form .button { width: 100%; }

.cart-table td,
.cart-table th { vertical-align: top; }
tr.expired td { background: var(--alerte-clair); }
tr.muted td { color: var(--encre-douce); }

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
}
.link-button:hover { text-decoration: underline; }

.button.small-button { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.totals dl,
.inline-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  max-width: 520px;
  margin: 0.6rem 0 1rem;
  font-size: 0.92rem;
}
.inline-totals dt { color: var(--encre-douce); }
.inline-totals dd { margin: 0; text-align: right; }
.totals dd { text-align: right; }
.totals .strong,
.inline-totals .strong { font-weight: 700; color: var(--encre); font-size: 1.02rem; }

.panel dl.two-columns { grid-template-columns: 220px 1fr; }

.shipping-form,
.simulation-form,
.cancel-form { display: grid; gap: 0.7rem; max-width: 620px; margin-top: 0.8rem; }
.shipping-form label.radio,
.cancel-form label.checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond);
}
.simulation-form label,
.cancel-form > label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--encre-douce); }
.simulation-form input,
.simulation-form select,
.cancel-form input,
.cancel-form select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 0.92rem;
  background: var(--fond);
}
.cancel-form fieldset {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.6rem 0.8rem;
}
.cancel-form legend { font-size: 0.85rem; color: var(--encre-douce); padding: 0 0.3rem; }
.cancel-form .button,
.shipping-form .button,
.simulation-form .button { justify-self: start; }

.sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.sequence > form { min-width: 0; }
.sequence p { margin-top: 0.4rem; }

.subpanel {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
}
.subpanel h3 { margin-bottom: 0.3rem; }

.running-line { margin: 0.8rem 0; }

.journal td { vertical-align: top; font-size: 0.9rem; }

/* ------------------------------------------------------------- pied de page */

.site-footer { border-top: 1px solid var(--trait); background: var(--fond-doux); margin-top: 3rem; }
.footer-grid {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  font-size: 0.88rem;
  color: var(--encre-douce);
}
.footer-grid h4 { color: var(--encre); font-size: 0.92rem; margin-bottom: 0.4rem; }
.footer-grid p { margin-bottom: 0.35rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  .panel dl.two-columns { grid-template-columns: auto 1fr; }
  .product-layout { grid-template-columns: 1fr; }
  .product-aside { position: static; }
  .seating-layout { grid-template-columns: 1fr; }
  .submenu { position: static; min-width: 0; box-shadow: none; border: none; padding: 0.4rem 0 0.8rem 1rem; }
  .submenu > ul { columns: 1; }
  .menu-item:hover .submenu { display: none; }
}

@media (max-width: 640px) {
  .price-detail { grid-template-columns: 1fr; gap: 0 0; }
  .price-detail dd { margin-bottom: 0.4rem; }
  .flags { grid-template-columns: 1fr; }
  .locations ul { grid-template-columns: 1fr; }
  h1 { font-size: 1.5rem; }
  .hero h1 { font-size: 1.7rem; }
  .bar { gap: 0.7rem; }
  .search { order: 3; flex-basis: 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.7rem; }
  .page { padding: 1rem 0.9rem 2.5rem; }
}