/**
 * 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;
  /* 8px, pas --space-5 (24px) : padding exact de .hippo-card sur le vrai widget. L'écart
     (24 contre 8, soit 32px de plus en haut+bas) faisait sauter tout le contenu sous la
     carte de 31px à la bascule façade -> vrai widget -- signalé par Samuel le 2026-08-18,
     confirmé hauteur band 145px contre 114px sur le vrai widget au même conteneur (928px),
     alors que le contenu intérieur est quasi identique (97px contre 98px). Les champs
     gardent leur propre padding de 15px (.rsv-col/.rsv-search), donc l'écart carte -> champ
     reste correct : 8+15=23px, identique à la mesure du vrai widget. */
  padding: 8px;
  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;
  /* 14px : valeur exacte mesurée sur le vrai widget (label Bootstrap), hors échelle
     --text-* du thème (le plus proche, --text-sm, fait 15px -- assez différent pour se voir
     à l'écran, signalé par Samuel le 2026-08-18 avec .rsv-field__val et .rsv-flex). */
  font-size: 14px;
  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);
  /* 400/14px : valeurs exactes mesurées sur le vrai <input> (poids normal, pas 600 ; 14px,
     pas --text-md/17px) -- la façade rendait un texte nettement plus gros et plus gras que
     le vrai widget, signalé par Samuel le 2026-08-18. */
  font-weight: 400;
  font-size: 14px;
  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);
  /* 400/11.2px : le vrai lien est un Bootstrap <small> (80% de son parent 14px) en poids
     normal, pas 700/15px -- même écart de taille/graisse que .rsv-field__val, mesuré le
     2026-08-18. */
  font-weight: 400;
  font-size: 11.2px;
  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;
}