/**
 * Bois de Faral — Habillage de la façade statique du widget Hippocamp (story 4.8)
 *
 * Structure `.rsv-*` inspirée de l'oracle ui_kit `design-system/refresh-2026-07/ui_kits/
 * reservation/`, mais COULEURS ET RADIUS corrigés le 2026-08-17 contre le DOM réel du widget
 * une fois chargé (`#hc-form-container`, relevé `getComputedStyle` sur dev.bois-de-faral.com
 * après déploiement) : l'oracle ui_kit posait un fond vert plein sur la barre, le vrai widget
 * est une carte blanche neutre — la bascule façade → widget réel faisait un flash vert→blanc
 * visible (signalé par Samuel). Valeurs mesurées : carte `#fff`, radius 16px, ombre douce
 * `0 4px 20px rgba(0,0,0,.08)` (pas de bordure) ; zone icône `#f5f0e3` = `--paper-100` avec
 * icône `#565c2d` = `--green-700` ; bordure des champs `#ded4bd` = `--paper-300` ; hauteur de
 * champ 40px. Fichier séparé de hippocamp.css : celui-ci cible les sélecteurs `.rsv-*` de la
 * façade, hippocamp.css cible les sélecteurs `#hc-*`/`.cm-*`/`.hpc-*` du vrai widget une fois
 * chargé — les deux ne se recouvrent jamais, la façade disparaissant du DOM au premier
 * déclenchement (voir hippocamp-lazy.js).
 *
 * Scoping sous #hippocamp-search-widget-container : `.rsv-*` reste un nom de classe libre,
 * pas de risque de collision connu, mais même discipline que hippocamp.css (préfixer le
 * mount point plutôt que poser des classes globales pour un seul bloc de page).
 */

#hippocamp-search-widget-container .rsv-band {
  background: var(--paper-0);
  /* 16px : valeur exacte mesurée sur le widget réel, hors échelle --radius-* du thème. */
  border-radius: 16px;
  padding: var(--space-5);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}

#hippocamp-search-widget-container .rsv-bar {
  display: grid;
  /* minmax(0, 1fr) et non 1fr seul : sans le 0 explicite, chaque piste garde un minimum
     "auto" basé sur le contenu de sa colonne -- avec `.rsv-field__val` en `white-space:
     nowrap` (cf. règle plus bas), le texte des dates impose un min-content large et
     déséquilibre les 3 colonnes (271px/133px/262px mesuré) malgré `1fr 1fr 1fr`. Trouvé en
     recette le 2026-08-17, en comparant au pixel près la façade et le vrai widget au même
     conteneur (928px) : le vrai widget n'a AUCUN gap visuel entre les colonnes -- l'espacement
     vient d'un padding de 15px de chaque côté DANS chaque colonne (Bootstrap col-md-3/col-md-2),
     pas d'un gap entre elles. Reproduit ci-dessous (gap:0 + padding sur .rsv-col/.rsv-search)
     plutôt que par un gap CSS Grid, pour un rendu identique au pixel près. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0;
  align-items: start;
}

#hippocamp-search-widget-container .rsv-col,
#hippocamp-search-widget-container .rsv-search {
  box-sizing: border-box;
  padding: 0 15px;
}

#hippocamp-search-widget-container .rsv-col__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-900);
  margin: 0 0 8px;
}

#hippocamp-search-widget-container .rsv-field {
  width: 100%;
  background: var(--paper-0);
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-300);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  appearance: none;
  font: inherit;
  /* Clippe la zone icône (fond plein) sur le radius du champ plutôt que de lui donner son
     propre radius — même rendu que .input-group-prepend/.input-group du widget réel. */
  overflow: hidden;
}

#hippocamp-search-widget-container .rsv-field__val {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink-900);
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  /* Le vrai champ est un <input> : jamais de retour à la ligne, débordement invisible.
     Ce <span> le reproduit -- sans ça le texte des dates enjambe sur 2 lignes dans une case
     à hauteur fixe (40px) dès que la colonne devient trop étroite pour tenir sur une ligne.
     Trouvé en recette le 2026-08-17 (colonnes égalisées, cf. commit grille/breakpoints). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hippocamp-search-widget-container .rsv-field__chev {
  width: 14px;
  height: 14px;
  margin-right: 12px;
  color: var(--ink-500);
  flex: none;
}

#hippocamp-search-widget-container .rsv-tile {
  /* Zone icône flush à gauche du champ (fond plein, pas de marge) : align-self: stretch la
     fait courir sur toute la hauteur du champ, comme .input-group-prepend du widget réel. */
  align-self: stretch;
  padding: 0 12px;
  background: var(--paper-100);
  color: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

#hippocamp-search-widget-container .rsv-tile svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

#hippocamp-search-widget-container .rsv-flex {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--green-700);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 8px 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  appearance: none;
}

#hippocamp-search-widget-container .rsv-search {
  display: flex;
  flex-direction: column;
}

#hippocamp-search-widget-container .rsv-search__spacer {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  margin: 0 0 8px;
  visibility: hidden;
}

#hippocamp-search-widget-container .rsv-search__box {
  height: 40px;
  display: flex;
  align-items: center;
  /* Le vrai widget centre le bouton dans sa colonne à toutes les largeurs (y compris empilé,
     où il ne s'étire pas en pleine largeur) -- mesuré le 2026-08-17. */
  justify-content: center;
}

/* Le vrai widget force son bouton à 40px (search.min.css, `!important`) pour l'aligner sur
   ses champs 40px — .bdf-btn--md ferait ~44px naturellement (même écart déjà documenté et
   assumé côté hippocamp.css pour le widget réel, arbitrage Samuel du 2026-08-01). Même
   traitement ici pour que la façade s'aligne au pixel près sur ce que le vrai widget affiche
   juste après. */
#hippocamp-search-widget-container .rsv-search__box .bdf-btn {
  height: 40px;
}

/* Seuils calqués sur le comportement réel du widget (Bootstrap col-md-3 x3 + col-md-2),
   mesuré getBoundingClientRect sur dev.bois-de-faral.com le 2026-08-17 -- pas le seuil unique
   à 900px de l'oracle ui_kit, qui ne reproduit ni le palier intermédiaire ni le comportement
   du bouton. Écart trouvé en recette : entre 900 et 1023px la façade restait en 4 colonnes
   sur une ligne pendant que le vrai widget renvoyait déjà le bouton "Rechercher" seul sur une
   seconde ligne centrée -- bascule de mise en page visible en plus de la bascule de couleur
   déjà corrigée. Trois états, dans l'ordre (la règle la plus étroite doit venir en dernier :
   une media query n'ajoute aucune spécificité, cf. § Pièges catalogués du skill recette-uikit) :
   - >= 1024px  : 4 colonnes sur une ligne (règle de base ci-dessus)
   - 768-1023px : 3 champs égaux sur une ligne, bouton seul sur sa ligne, centré
   - <  768px   : tout empilé, bouton à largeur naturelle, centré (pas étiré) */
@media (max-width: 1023.98px) {
  #hippocamp-search-widget-container .rsv-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  #hippocamp-search-widget-container .rsv-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  #hippocamp-search-widget-container .rsv-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Retour visuel pendant le chargement du vrai widget (hippocamp-lazy.js pose/retire la
   classe sur le conteneur) — même patron que #bdf-carte.est-en-chargement (custom.css). */
#hippocamp-search-widget-container.est-en-chargement .rsv-band {
  opacity: 0.6;
  pointer-events: none;
}