/* ============================================================
 * Agado bike — feuille de styles commune (v2 « Océan & Soleil »)
 * Mobile d'abord (référence 390 px) · HTML/CSS purs · aucune librairie
 * Police : Plus Jakarta Sans (Google Fonts, 1 fichier variable 400–800)
 *
 * IMPORTANT (intégration) : toutes les classes et tous les id de la v1
 * sont conservés, y compris ceux de la page admin (#map, .bike-row,
 * .bike-qr, .toolbar, .res-row, .legend…). Les nouvelles classes sont
 * regroupées en fin de fichier (section « Accueil v2 »).
 * ============================================================ */

/* ---------- 1. Jetons de design ---------- */
:root {
  /* Océan (couleur de marque) */
  --ocean-900: #062A42;   /* en-tête, titres */
  --ocean-700: #0A4F7A;   /* marque, liens, éléments actifs */
  --ocean-500: #1673A8;   /* survol, focus secondaire */
  --ocean-200: #BFD9EA;   /* traits clairs sur fond foncé */
  --ocean-100: #E3F0F8;   /* fonds d'info */

  /* Soleil (action principale) */
  --sun-500: #F6A91C;     /* bouton principal — texte --ink */
  --sun-600: #E39500;     /* survol / appui */
  --sun-100: #FFF2D6;     /* fond d'alerte douce */
  --sun-text: #8A5A00;    /* texte sur --sun-100 */

  /* Sable (fonds) */
  --sand-50:  #FBF8F3;    /* fond de page */
  --sand-100: #F4ECDF;    /* fonds secondaires, photos */
  --sand-300: #E3D3BA;    /* bordures douces */

  /* Lagon (vélos électriques) */
  --lagoon-700: #0B6B78;
  --lagoon-100: #DDF4F6;

  /* États */
  --palm-700: #17663B;    /* succès / disponible */
  --palm-100: #E2F3E8;
  --danger:   #B42318;    /* erreur / verrouillé */
  --danger-100: #FCE6E2;

  /* Texte */
  --ink: #0F1E2A;         /* texte principal — 16:1 sur sable */
  --ink-muted: #4F5F6B;   /* texte secondaire — 6,2:1 sur sable */
  --line: #E7DED0;        /* filets */
  --field-border: #C9BBA5;/* bordure des champs (3:1 sur blanc) */

  /* Alias v1 (gardés pour compatibilité avec d'éventuels styles inline) */
  --brand: var(--ocean-700);
  --brand-dark: var(--ocean-900);
  --bg: var(--sand-50);
  --card: #FFFFFF;
  --text: var(--ink);
  --muted: var(--ink-muted);
  --ok: var(--palm-700);

  /* Formes */
  --radius: 16px;         /* cartes */
  --radius-sm: 12px;      /* champs, créneaux */
  --radius-pill: 999px;   /* puces, badges */
  --shadow-1: 0 1px 2px rgba(6, 42, 66, .06), 0 4px 14px rgba(6, 42, 66, .07);
  --shadow-2: 0 2px 4px rgba(6, 42, 66, .08), 0 12px 32px rgba(6, 42, 66, .12);

  /* Typo */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tactile */
  --tap: 48px;            /* hauteur mini de toute cible */
  --tap-lg: 56px;         /* boutons d'action */
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17 px : lisible en plein soleil */
  line-height: 1.55;
  background: var(--sand-50);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; color: var(--ocean-900); }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 1rem; }
h3 { font-size: 1.1rem;  font-weight: 700; }

a { color: var(--ocean-700); }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--sun-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 3. Barre supérieure ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem .75rem;
  padding: .55rem 1rem .4rem;
  background: var(--ocean-900);
  color: #fff;
}

.brand { display: flex; align-items: center; min-width: 0; }
.brand a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--tap);
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.brand svg { width: 36px; height: 36px; flex: none; }
.brand-name {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.brand-tag {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--ocean-200);
  line-height: 1.3;
}

/* Sélecteur de langue (rempli par app.js) */
#lang-switcher { display: flex; align-items: center; margin-left: auto; }
#lang-switcher:empty { display: none; }
.lang-sep { margin: 0 .2rem; opacity: .5; }
.lang-btn {
  min-height: 40px;
  min-width: 44px;
  padding: .35rem .7rem;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: 700 .85rem/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.lang-btn.active { background: #fff; color: var(--ocean-900); border-color: #fff; }

/* Navigation : 2e ligne pleine largeur sur mobile, en ligne dès 720 px */
.topnav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: .25rem;
  margin: 0 -.25rem;
}
.topnav-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  color: var(--ocean-200);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.topnav-link.active { color: #fff; }
.topnav-link.active::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: var(--sun-500);
}

/* Sélecteur de langue : sur mobile, sa propre ligne centrée sous la
   navigation (8 langues ne tiennent pas à côté du logo). */
#lang-switcher { order: 4; flex: 1 0 100%; flex-wrap: wrap; justify-content: center; row-gap: .3rem; margin-top: .3rem; }

@media (min-width: 720px) {
  #lang-switcher { order: 0; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; margin-top: 0; }
  .topbar { flex-wrap: nowrap; padding: .6rem 1.5rem; }
  .topnav { order: 0; flex: 0 0 auto; margin: 0 0 0 auto; }
  .topnav-link { flex: 0 0 auto; }
  #lang-switcher { margin-left: .5rem; }
}

/* ---------- 4. Mise en page ---------- */
.container { max-width: 640px; margin: 0 auto; padding: 1rem; }
.container.wide { max-width: 1120px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(6, 42, 66, .04);
}
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }

.hidden { display: none !important; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.mt { margin-top: 1rem; }

/* État de chargement : petit indicateur CSS (léger, sans image) */
#cat-loading p, #bike-loading p, #rent-loading p,
#bd-loading p, #ex-loading p, #exd-loading p {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--ink-muted);
  font-weight: 600;
}
#cat-loading p::before, #bike-loading p::before, #rent-loading p::before,
#bd-loading p::before, #ex-loading p::before, #exd-loading p::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid var(--sand-300);
  border-top-color: var(--ocean-700);
  animation: agado-spin .8s linear infinite;
}
@keyframes agado-spin { to { transform: rotate(360deg); } }

/* ---------- 5. Boutons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: var(--tap-lg);
  padding: .8rem 1.25rem;
  font: 800 1.075rem/1.25 var(--font);
  letter-spacing: -.005em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--sun-500);         /* action principale = soleil */
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 0 var(--sun-600);
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: #FFB733; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--sun-600); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn.secondary {
  background: #fff;
  color: var(--ocean-700);
  border-color: var(--ocean-700);
  box-shadow: none;
}
.btn.secondary:hover { background: var(--ocean-100); }

.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 2px 0 #861A12; }
.btn.danger:hover { background: #9E1F15; }

.btn + .btn { margin-top: .6rem; }

.btn.small {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: .5rem 1rem;
  font-size: .95rem;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ocean-700);
  font-weight: 700;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.linklike {
  background: none;
  border: none;
  min-height: 44px;
  padding: .6rem 0;
  color: var(--ocean-700);
  font: 700 1rem var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 6. Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.badge.electric   { background: var(--lagoon-100); color: var(--lagoon-700); }
.badge.mechanical { background: var(--sand-100);   color: #6B4E16; }
.badge.available  { background: var(--palm-100);   color: var(--palm-700); }
.badge.rented     { background: var(--danger-100); color: var(--danger); }
.badge.maintenance, .badge.offline { background: #ECEFF1; color: #4A5560; }
.badge.cat        { background: var(--ocean-100);  color: var(--ocean-700); }
.badge.cat svg    { width: 16px; height: 16px; }
.cat-ico svg { width: 24px; height: 24px; vertical-align: -5px; color: var(--ocean-700); }

/* ---------- 7. Fiche vélo ---------- */
.bike-name { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 800; }
.bike-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.price {
  font-size: 1.75rem;
  font-weight: 800;
  margin: .5rem 0;
  color: var(--ocean-900);
  font-variant-numeric: tabular-nums;
}
.error-text { color: var(--danger); font-weight: 700; }

.detail-head { display: flex; gap: 1rem; align-items: flex-start; }
.detail-head .photo-ph { flex: 0 0 120px; }

/* ---------- 8. Location en cours (rent) ---------- */
.lock-indicator {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.lock-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.lock-dot.locked   { background: var(--danger);   box-shadow: 0 0 0 6px rgba(180, 35, 24, .15); }
.lock-dot.unlocked { background: var(--palm-700); box-shadow: 0 0 0 6px rgba(23, 102, 59, .18); }

.timer {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--ocean-900);
  margin: .5rem 0 .75rem;
}
.timer-label {
  text-align: center;
  color: var(--ink-muted);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.stat-row, .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
.stat-row strong, .summary-line strong { font-variant-numeric: tabular-nums; text-align: right; }
.summary-total { font-size: 1.3rem; font-weight: 800; color: var(--ocean-900); }
.summary-total strong { white-space: nowrap; }

/* ---------- 9. Hero (v1, utilisé par excursions.html) ---------- */
.hero { text-align: center; padding: 2rem 1.25rem; }
.hero h1 { margin: .25rem 0 .5rem; font-size: 1.8rem; }
.hero p { color: var(--ink-muted); margin: 0; }
.hero svg { width: 64px; height: 64px; color: var(--ocean-700); }

.steps { list-style: none; margin: 0 0 1rem; padding: 0; }
.steps li { margin-bottom: .75rem; }
.steps h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--ink-muted); }

/* ---------- 10. Filtres par catégorie (chips) ---------- */
/* Mobile : une ligne qui défile horizontalement (libellés EN plus longs) */
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  margin: 0 -1rem 1.25rem;
  padding: .25rem 1rem .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--tap);
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sand-300);
  background: #fff;
  color: var(--ocean-900);
  font: 700 .95rem/1.2 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--ocean-700); }
.chip.active {
  background: var(--ocean-700);
  border-color: var(--ocean-700);
  color: #fff;
}
.chip-icon svg { width: 22px; height: 22px; display: block; }
@media (min-width: 720px) {
  .chips { flex-wrap: wrap; overflow: visible; margin: 0 0 1.5rem; padding: 0; }
}

/* ---------- 11. Grille + carte vélo type ---------- */
.bike-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 560px) { .bike-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .container.wide .bike-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.bike-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid rgba(6, 42, 66, .05);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bike-card:hover { box-shadow: var(--shadow-2); }
.bike-card:active { transform: scale(.99); }
.bike-card .photo-ph { aspect-ratio: 16 / 10; min-height: 0; }
.bike-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.bike-card-body {
  position: relative;
  flex: 1;
  padding: .9rem 1.1rem 1.1rem;
  padding-right: 4.25rem;            /* place pour la flèche */
}
.bike-card-body h3 { margin: 0 0 .45rem; font-size: 1.125rem; }
.bike-card .bike-badges { margin-bottom: .55rem; }

/* Catalogue uniquement : la ligne générée « Type · <strong>xx MAD / heure</strong> »
   n'affiche que le prix (le type est déjà dans le badge).
   Limité à #bike-grid : les cartes d'excursion (#ex-grid) réutilisent
   .bike-card et doivent garder durée et lieu. */
.bike-card .bike-meta { margin: 0 0 .2rem; font-size: .95rem; color: var(--ink-muted); }
.bike-card .bike-meta strong { color: var(--ocean-900); font-weight: 800; font-variant-numeric: tabular-nums; }
#bike-grid .bike-card .bike-meta { margin: 0; font-size: 0; }
#bike-grid .bike-card .bike-meta strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ocean-900);
  font-variant-numeric: tabular-nums;
}

/* Flèche « voir le vélo » (pas de texte : neutre FR/EN) */
.bike-card-body::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sun-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E2A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* ---------- 12. Photo (placeholder) ---------- */
.photo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 150px;
  background:
    radial-gradient(circle at 82% 26%, rgba(246, 169, 28, .35) 0 22px, transparent 23px),
    linear-gradient(180deg, var(--ocean-100) 0%, var(--ocean-100) 58%, var(--sand-100) 58%, var(--sand-100) 100%);
  color: var(--ink-muted);
  font-size: .8rem;
  font-weight: 700;
}
.photo-ph svg { width: 64px; height: 64px; color: var(--ocean-700); opacity: .55; }
.photo-ph.small { min-height: 110px; border-radius: var(--radius-sm); }
.photo-ph.small svg { width: 44px; height: 44px; }
.photo-ph.wide { min-height: 180px; border-radius: var(--radius-sm); margin-bottom: 1rem; }

/* ---------- 13. Formulaires ---------- */
.field { margin-bottom: 1.1rem; }
.field label, .field-label {
  display: block;
  font-weight: 700;
  margin-bottom: .4rem;
  font-size: .95rem;
  color: var(--ocean-900);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="email"],
.field select,
.field textarea,
.toolbar input[type="date"],
.toolbar select,
.res-info input[type="text"] {
  width: 100%;
  min-height: var(--tap-lg);
  padding: .7rem .9rem;
  font: 500 1.0625rem var(--font);   /* ≥ 16 px : pas de zoom auto iOS */
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A4F7A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 20px no-repeat;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus {
  outline: none;
  border-color: var(--ocean-700);
  box-shadow: 0 0 0 4px rgba(10, 79, 122, .18);
}
.field input[type="file"] { font: inherit; max-width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.check-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  margin: 1rem 0;
  background: var(--sun-100);
  border: 1.5px solid var(--sun-500);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.check-row input { width: 26px; height: 26px; flex: none; margin-top: .05rem; accent-color: var(--ocean-700); }

.btn-row { display: flex; gap: .6rem; margin-top: 1rem; }
.btn-row .btn { margin-top: 0; }

/* ---------- 14. Créneaux horaires ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 560px) { .slot-grid { grid-template-columns: repeat(5, 1fr); } }
.slot {
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--field-border);
  background: #fff;
  color: var(--ocean-900);
  padding: .35rem .25rem;
  font: 700 .95rem/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.slot:hover { border-color: var(--ocean-700); }
.slot.selected { background: var(--ocean-700); border-color: var(--ocean-700); color: #fff; }
.slot.busy {
  border-color: var(--line);
  background: var(--sand-100);
  color: #8C8577;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---------- 15. Indicateur d'étapes ---------- */
.stepper {
  list-style: none;
  display: flex;
  margin: 0 0 1rem;
  padding: 0;
  gap: .4rem;
}
.stepper li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-muted);
  padding: .6rem .25rem;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.stepper .step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sand-300);
  color: var(--ocean-900);
  font-size: .85rem;
}
.stepper li.active { color: var(--ocean-900); box-shadow: inset 0 -3px 0 var(--sun-500), var(--shadow-1); }
.stepper li.active .step-n { background: var(--ocean-700); color: #fff; }
.stepper li.done .step-n { background: var(--palm-700); color: #fff; }

/* ---------- 16. OCR pièce d'identité ---------- */
.ocr-box {
  border: 2px dashed var(--sand-300);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--sand-50);
}
.ocr-preview { max-width: 100%; border-radius: var(--radius-sm); margin: .5rem 0; }
progress { width: 100%; height: 14px; accent-color: var(--ocean-700); }

/* ---------- 17. Contrat / confirmation ---------- */
.contract-sheet h3 { margin-top: 0; }
.resa-number { font-size: 1.3rem; }
.contract-terms { margin-top: 1rem; }

/* ---------- 18. Admin (outil interne — conservé) ---------- */
#map {
  height: 60vh;
  min-height: 320px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 1rem;
  z-index: 1;
}
.legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .9rem; color: var(--ink-muted); margin-bottom: 1rem; }
.legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .3rem; }

.bike-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.bike-row:first-child { border-top: none; padding-top: 0; }
.bike-info { flex: 1; min-width: 0; }
.bike-info h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.bike-meta { font-size: .92rem; color: var(--ink-muted); margin: .25rem 0; }
.bike-qr { text-align: center; flex: none; }
.bike-qr img {
  width: 104px;
  height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  image-rendering: pixelated;
}
.bike-qr figcaption { font-size: .75rem; color: var(--ink-muted); margin-top: .2rem; }

.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .btn { width: auto; min-height: 48px; font-size: 1rem; padding: .6rem 1.1rem; }

.res-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.res-row:first-child { border-top: none; padding-top: 0; }
.res-info { flex: 1 1 220px; min-width: 0; }
.res-info h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.res-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
#sec-reservations h2, #sec-spots h2, #sec-cats h2,
#sec-excursions h2, #sec-excbookings h2 { margin: 0 0 1rem; }

/* ============================================================
 * 19. Accueil v2 (nouvelles classes)
 * ============================================================ */

/* Bandeau d'accueil : prolonge l'en-tête, soleil en dégradé CSS (0 image) */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1rem 5.5rem;
  color: #fff;
  background:
    radial-gradient(circle at calc(100% - 30px) 26px, rgba(246, 169, 28, .95) 0 26px, rgba(246, 169, 28, .22) 27px 54px, transparent 55px),
    linear-gradient(170deg, var(--ocean-900) 0%, var(--ocean-700) 72%, var(--ocean-500) 100%);
}
.home-hero::after {                     /* vague du rivage */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 38' preserveAspectRatio='none'%3E%3Cpath d='M0 22c120-16 240-16 360 0s240 16 360 0 240-16 360 0 240 16 360 0V38H0z' fill='%23FBF8F3'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.home-hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.eyebrow {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sun-500);
}
.home-hero h1 {
  margin: 0 0 .6rem;
  max-width: 15ch;
  padding-right: 3.5rem;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
}
.home-hero p.lead {
  margin: 0;
  max-width: 34ch;
  font-size: 1.05rem;
  color: #E6F1F8;
}

/* Les deux parcours */
.modes {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  margin: -4.25rem 0 2rem;
}
@media (min-width: 720px) { .modes { grid-template-columns: 1fr 1fr; } }

.mode-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-2);
  border-top: 5px solid var(--ocean-700);
}
.mode-card--scan { border-top-color: var(--sun-500); }
.mode-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.mode-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ocean-100);
  color: var(--ocean-700);
}
.mode-card--scan .mode-icon { background: var(--sun-100); color: var(--sun-text); }
.mode-icon svg { width: 28px; height: 28px; }
.mode-card h2 { margin: 0; font-size: 1.3rem; }
.mode-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.mode-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mode-status.soon { color: var(--sun-text); }
.mode-status.live { color: var(--palm-700); }

.mode-steps {
  list-style: none;
  counter-reset: step;
  margin: .25rem 0 1rem;
  padding: 0;
}
.mode-steps li {
  counter-increment: step;
  position: relative;
  padding: .55rem 0 .55rem 2.6rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
  line-height: 1.4;
}
.mode-steps li:first-child { border-top: 0; }
.mode-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .45rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ocean-700);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}
.mode-card--scan .mode-steps li::before { background: var(--sun-500); color: var(--ink); }
.mode-note {
  margin: auto 0 0;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--sand-50);
  color: var(--ink-muted);
  font-size: .9rem;
}
.mode-note strong { color: var(--ocean-900); }
.mode-card .btn { margin-top: auto; }

/* En-tête de section */
.section-head { margin: 0 0 1rem; }
.section-head h2 { margin: 0 0 .2rem; font-size: 1.5rem; }
.section-head p { margin: 0; color: var(--ink-muted); font-size: .95rem; }

/* Pied de page */
.site-footer {
  margin-top: 1rem;
  padding: 1.5rem 1rem 2rem;
  background: var(--ocean-900);
  color: var(--ocean-200);
  font-size: .9rem;
  text-align: center;
}
.site-footer strong { color: #fff; }
.site-footer p { margin: .2rem 0; }

@media (min-width: 720px) {
  .home-hero { padding: 3rem 0 6.5rem; }
  .home-hero-inner { padding: 0 1.5rem; }
  .home-hero h1 { font-size: 2.75rem; }
  .home-hero p.lead { font-size: 1.15rem; }
  .container.wide { padding: 1rem 1.5rem; }
}

/* ============================================================
 * 19 bis. Pages intérieures (lot 2) — fiches vélo, location,
 * réservation, excursions. Nouvelles classes uniquement.
 * ============================================================ */

/* Surtitre sur fond clair */
.eyebrow.on-light { color: var(--sun-text); }

/* Lien retour */
.back-link { margin: 0 0 .25rem; }

/* Mise en page détail : 1 colonne mobile, 2 colonnes ≥ 960 px */
@media (min-width: 960px) {
  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1.25rem;
    align-items: start;
  }
  .detail-layout > .card { margin-bottom: 0; }
  .detail-layout > .booking-card { position: sticky; top: 88px; }
}

/* Carte « produit » : photo pleine largeur puis titre */
.product-card { padding: 0; overflow: hidden; }
.product-card .photo-ph { aspect-ratio: 16 / 9; min-height: 0; border-radius: 0; margin: 0; }
.product-card .product-body { padding: 1.1rem 1.25rem 1.25rem; }
.product-card .bike-name { font-size: 1.6rem; }
.product-card .price { margin: .25rem 0 0; }
.price-unit { font-size: .95rem; font-weight: 600; color: var(--ink-muted); }

/* Liste de réassurance (icône + texte) */
.assure-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.assure-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
}
.assure-list li:first-child { border-top: 0; }
.assure-list svg { flex: none; width: 22px; height: 22px; color: var(--ocean-700); margin-top: .05rem; }

/* Encadré mode de paiement espèces */
.pay-note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1rem 0 0;
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--sun-100);
  color: var(--sun-text);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
}
.pay-note svg { flex: none; width: 22px; height: 22px; }
.pay-note.info { background: var(--ocean-100); color: var(--ocean-900); }
.pay-note.info svg { color: var(--ocean-700); }

/* Champs numérotés (étapes du choix de créneau) */
.steps-form { counter-reset: fstep; }
.steps-form .field.numbered > label,
.steps-form .field.numbered > .field-label {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.steps-form .field.numbered > label::before,
.steps-form .field.numbered > .field-label::before {
  counter-increment: fstep;
  content: counter(fstep);
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ocean-700);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
.slot-grid > p { grid-column: 1 / -1; margin: 0; }

/* Barre d'action collée en bas de l'écran (mobile) */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 1.25rem -1.25rem -1.25rem;
  padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -10px 24px rgba(6, 42, 66, .08);
}
.sticky-cta .summary-line { border-top: 0; padding: 0 0 .6rem; align-items: center; }
.sticky-cta .summary-total > span { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.sticky-cta .summary-total > strong { font-size: 1.45rem; }
.sticky-cta .btn-row { margin-top: 0; }
.sticky-cta .error-text { margin: 0 0 .6rem; font-size: .92rem; }
.sticky-cta > .btn.mt { margin-top: 0; }
@media (min-width: 960px) {
  .detail-layout .sticky-cta { position: static; box-shadow: none; }
}

/* Boutons Retour / Continuer : Continuer prend la place */
.btn-row .btn { flex: 1 1 0; min-width: 0; }
.btn-row .btn.secondary { flex: 0 1 38%; }
.btn-row .btn:only-child { flex: 1 1 100%; }

/* Champ fichier (photo de la pièce) : grande zone tactile */
.field input[type="file"] {
  display: block;
  width: 100%;
  padding: .6rem;
  border: 1.5px dashed var(--field-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-muted);
  font: 600 .95rem var(--font);
}
.field input[type="file"]::file-selector-button {
  min-height: var(--tap);
  margin-right: .75rem;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--ocean-700);
  color: #fff;
  font: 800 .95rem var(--font);
  cursor: pointer;
}
.ocr-box .btn-row { margin-top: .25rem; }
.ocr-box > p:last-child { margin: .25rem 0 0; }

/* Étape de réservation : en-tête de carte */
.step-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; }
.step-intro { margin: 0 0 1rem; }

/* Contrat : aspect « document » */
#rv-step3 .contract-sheet {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sand-50);
}
.contract-sheet h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.contract-sheet .summary-line { font-size: 1rem; }
.contract-sheet .summary-line.summary-total { font-size: 1.2rem; }
.summary-line .badge { margin-left: .25rem; vertical-align: 1px; }

/* Écran de succès (réservation, excursion, fin de location) */
.success-card { text-align: left; }
.success-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: .25rem auto 1rem;
  border-radius: 50%;
  background: var(--palm-100);
  color: var(--palm-700);
}
.success-mark svg { width: 34px; height: 34px; }
.success-card .contract-sheet > h3:first-child,
.success-card > h2,
.success-card > h1 { text-align: center; }
.success-card .resa-number {
  margin: .25rem 0 1rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ocean-100);
  color: var(--ocean-900);
  text-align: center;
  font-size: 1.05rem;
}
.success-card .resa-number strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Confirmation : boutons empilés sur petit écran */
@media (max-width: 479px) {
  #rv-done .btn-row { flex-direction: column; }
  #rv-done .btn-row .btn { flex: 0 0 auto; }
}

/* Location en cours */
.rent-card .lock-indicator {
  justify-content: center;
  padding: 1rem;
  margin: 0 0 1rem;
  border-radius: var(--radius-sm);
  background: var(--sand-50);
}
.rent-card .timer { font-size: 3.5rem; }
.rent-card .btn.danger.mt { margin-top: 1.25rem; }

/* Redirection paiement : indicateur */
#bike-redirect p { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-weight: 700; }
#bike-redirect p::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid var(--sand-300);
  border-top-color: var(--ocean-700);
  animation: agado-spin .8s linear infinite;
}

/* Bandeau de page d'excursions (dans la vue liste) */
.hero.hero--ocean {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 1.5rem 1.25rem;
  color: #fff;
  border: 0;
  background:
    radial-gradient(circle at calc(100% - 26px) 24px, rgba(246, 169, 28, .95) 0 20px, rgba(246, 169, 28, .22) 21px 42px, transparent 43px),
    linear-gradient(160deg, var(--ocean-900), var(--ocean-700));
}
.hero.hero--ocean h1 { color: #fff; margin: .1rem 0 .4rem; padding-right: 3rem; }
.hero.hero--ocean p { color: #E6F1F8; max-width: 46ch; }
.hero.hero--ocean .eyebrow { margin-bottom: .2rem; }

/* Descriptif excursion */
#exd-desc { font-size: 1.02rem; color: var(--ink); }
#exd-meta { margin-top: .5rem; }

/* Pied de page discret (pages intérieures) */
.site-footer.slim { margin-top: 2rem; padding: 1.1rem 1rem 1.5rem; }

/* ---------- Parité monolithe : téléphone international, contrat, signature ---------- */
.phone-row { display: flex; gap: .5rem; }
.phone-row select { flex: 0 1 46%; min-width: 0; }
.phone-row input { flex: 1 1 auto; min-width: 0; }

.contract-title { text-align: center; margin-bottom: .1rem; }
.contract-subtitle { text-align: center; font-weight: 700; color: var(--ocean-900); margin-top: 0; }
.contract-articles h4 { color: var(--ocean-900); margin: 1.1rem 0 .35rem; }
.contract-articles p { margin: .3rem 0; text-align: justify; }
.contract-articles ul { margin: .3rem 0 .3rem 1.1rem; padding: 0; }
.contract-articles li { margin: .2rem 0; }
.sign-approval { font-weight: 800; color: var(--ocean-900); }

.sign-block { margin-top: 1.2rem; border-top: 2px dashed var(--ocean-200); padding-top: 1rem; }
.sign-block label { display: block; font-weight: 700; margin: .5rem 0 .4rem; }
#rv-sign {
  width: 100%; max-width: 640px; height: 200px; display: block;
  background: #fff; border: 2px solid var(--ocean-700); border-radius: 12px;
  touch-action: none; cursor: crosshair;
}

/* ---------- 20. Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 21. Impression (QR admin + contrat) ---------- */
@media print {
  .topbar, #map, .toolbar, .legend, .no-print, .site-footer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: none; }
  .bike-row { break-inside: avoid; }
  .bike-qr img { width: 140px; height: 140px; }
  .contract-sheet { box-shadow: none; }
  .stepper, .ocr-box, .btn-row { display: none !important; }
  #rv-step1, #rv-step2, #rv-step3 { display: none !important; }
}