/*
 * CHD BU Locator — version minimaliste (page d'accueil)
 * Style aligné sur le thème France Boissons (barre de recherche du header,
 * dégradé orange, pas d'encadrement).
 */

.fb-chd-mini {
  /* Reprend les tokens du thème quand ils existent, avec fallback FB */
  --fb-mini-orange-start: #e94e1b;
  --fb-mini-orange-end: #f39200;
  --fb-mini-accent: var(--orange-primary, #f39200);
  --fb-mini-text: var(--text-color, #292929);
  --fb-mini-muted: var(--medium-gray, #6b7280);
  --fb-mini-field-bg: #f1f2f4;
  --fb-mini-field-bg-focus: #e9ebee;
  --fb-mini-radius: 999px;

  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-primary, "Lato", sans-serif);
  color: var(--fb-mini-text);
  box-sizing: border-box;
}

.fb-chd-mini *,
.fb-chd-mini *::before,
.fb-chd-mini *::after {
  box-sizing: border-box;
}

/* ============================================================
   EN-TÊTE PLEINE LARGEUR — accroche + lieux
   ============================================================ */
.fb-mini-head {
  text-align: center;
  margin-bottom: 30px;
}

.fb-mini-accroche {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 auto 22px;
  max-width: 760px;
  color: #f3971e;
}

.fb-mini-lieux {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fb-mini-lieux-intro {
  font-size: 16px;
  font-weight: 600;
  color: var(--fb-mini-muted);
}

/* Tags / pastilles */
.fb-mini-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
}

/* Tags discrets : fond gris très clair, texte gris foncé, sans bordure colorée */
.fb-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #555b63;
  background: #f4f5f6;
  border: 0;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.fb-mini-tag:hover {
  background: #ececee;
  color: #333;
}

/* ============================================================
   2 COLONNES — visuel + recherche (sans encadrement)
   ============================================================ */
.fb-mini-top {
  display: flex;
  align-items: center;
  gap: 48px;
}

.fb-mini--visual-left .fb-mini-visual { order: 1; }
.fb-mini--visual-left .fb-mini-search { order: 2; }
.fb-mini--visual-right .fb-mini-visual { order: 2; }
.fb-mini--visual-right .fb-mini-search { order: 1; }

/* Visuel — la largeur est pilotée par des variables réglables depuis le back-office
   via la classe .fb-mini--visual-{small|medium|large|xlarge} sur le conteneur racine.
   Valeur par défaut = medium. */
.fb-chd-mini {
  --fb-visual-col: 42%;   /* largeur de la colonne visuel */
  --fb-visual-max: 360px; /* largeur max de l'image/SVG    */
}

.fb-chd-mini.fb-mini--visual-small  { --fb-visual-col: 32%; --fb-visual-max: 260px; }
.fb-chd-mini.fb-mini--visual-medium { --fb-visual-col: 42%; --fb-visual-max: 360px; }
.fb-chd-mini.fb-mini--visual-large  { --fb-visual-col: 50%; --fb-visual-max: 480px; }
.fb-chd-mini.fb-mini--visual-xlarge { --fb-visual-col: 58%; --fb-visual-max: 640px; }

.fb-mini-visual {
  flex: 0 0 var(--fb-visual-col);
  max-width: var(--fb-visual-col);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fb-mini-france {
  width: 100%;
  max-width: var(--fb-visual-max);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.1));
}

/* Image médiathèque (SVG, WebP, raster…) — cadrage propre quel que soit le format
   et même pour un SVG sans dimensions intrinsèques. */
.fb-mini-visual-img {
  display: block;
  width: 100%;
  max-width: var(--fb-visual-max);
  height: auto;
  object-fit: contain;
}

/* Un SVG sans width/height natifs n'a pas de ratio : on lui donne une hauteur de
   référence pour qu'il ne s'écrase pas à 0 ou ne déborde pas. */
.fb-mini-visual-img--svg {
  max-height: var(--fb-visual-max);
}

/* Recherche */
.fb-mini-search {
  flex: 1 1 auto;
  min-width: 0;
}

.fb-mini-search-header {
  margin-bottom: 18px;
}

.fb-mini-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #f3971e;
}

.fb-mini-subtitle {
  font-size: 16px;
  color: var(--fb-mini-muted);
  margin: 0;
  line-height: 1.45;
}

/* ------------------------------------------------------------
   Champ de recherche — repris du header (.search-form du thème)
   pill arrondie, sans bordure, bouton SVG à droite.
   Sur fond clair → fond gris translucide lisible (au lieu du
   blanc translucide du header qui ne marche que sur l'orange).
   ------------------------------------------------------------ */
.fb-mini-field-wrap {
  position: relative;
  max-width: 480px;
}

.fb-mini-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Spécificité renforcée (.fb-chd-mini input.fb-mini-input) pour battre la règle
   globale du thème `input[type="text"] { padding: 2px }` (sélecteur attribut). */
.fb-chd-mini input.fb-mini-input {
  width: 100%;
  height: 48px;
  background: var(--fb-mini-field-bg);
  border-radius: var(--fb-mini-radius);
  border: none;
  /* Texte décalé du bord gauche (demande FB) + place pour le bouton à droite */
  padding: 0 58px 0 30px;
  color: var(--fb-mini-text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.fb-mini-input::placeholder {
  color: var(--fb-mini-muted);
}

.fb-mini-input:focus {
  background: var(--fb-mini-field-bg-focus);
}

/* RGAA 10.7 : focus clavier visible */
.fb-mini-input:focus-visible {
  outline: 2px solid var(--fb-mini-accent);
  outline-offset: 2px;
}

/* Bouton loupe : dégradé orange FB, positionné à droite dans la pill */
.fb-mini-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--fb-mini-orange-start) 0%, var(--fb-mini-orange-end) 100%);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease;
}

.fb-mini-btn:hover {
  filter: brightness(1.08);
}

.fb-mini-btn:focus-visible {
  outline: 2px solid var(--fb-mini-accent);
  outline-offset: 2px;
}

.fb-mini-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* État de chargement */
.fb-mini-loading .fb-mini-btn {
  color: transparent;
}

.fb-mini-loading .fb-mini-btn::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fb-mini-spin 0.7s linear infinite;
}

@keyframes fb-mini-spin {
  to { transform: rotate(360deg); }
}

/* Autocomplétion */
.fb-mini-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  display: none;
}

.fb-mini-autocomplete.active {
  display: block;
}

.fb-mini-ac-item {
  padding: 11px 18px;
  cursor: pointer;
  font-size: 15px;
  border-bottom: 1px solid #f1f2f4;
  transition: background 0.12s ease;
}

.fb-mini-ac-item:last-child {
  border-bottom: 0;
}

.fb-mini-ac-item strong {
  color: var(--fb-mini-accent);
  margin-right: 6px;
}

.fb-mini-ac-item:hover,
.fb-mini-ac-item.selected {
  background: #f6f7f9;
}

/* Message de validation */
.fb-mini-validation {
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 8px;
  padding-left: 18px;
}

/* ============================================================
   RÉSULTAT — remplace les 2 colonnes (visuel + recherche)
   Transition en crossfade fluide :
   1. les colonnes (head + top) fade-out + léger translateY,
   2. puis sont retirées du flux (.fb-mini--collapsed),
   3. le drawer fade-in + slide-up.
   ============================================================ */

/* Phase 1 : estompage des colonnes pendant la recherche */
.fb-mini-head,
.fb-mini-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fb-mini--result-open .fb-mini-head,
.fb-mini--result-open .fb-mini-top {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Phase 2 : une fois l'estompage fini, on les sort du flux (JS ajoute la classe) */
.fb-mini--collapsed .fb-mini-head,
.fb-mini--collapsed .fb-mini-top {
  display: none;
}

.fb-mini-drawer {
  opacity: 0;
  transform: translateY(12px);
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s var(--bezier-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.fb-mini-drawer[hidden] {
  display: none;
}

.fb-mini-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
}

.fb-mini-drawer-inner {
  display: flex;
  gap: 32px;
  align-items: stretch;
  text-align: left;
}

/* Carte à gauche, fiche BU à droite (comme la page dédiée) */
.fb-mini-map-wrap { order: 1; }
.fb-mini-result { order: 2; }

.fb-mini-result {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La fiche BU réutilise le design de la page dédiée (.fb-result-card,
   .fb-result-meta, .fb-chd-no-result) défini dans chd-locator.css.
   On supprime juste la marge basse de la carte ici pour centrer. */
.fb-mini-result .fb-result-card {
  margin-bottom: 0;
  width: 100%;
}

/* Carte Leaflet du résultat */
.fb-mini-map-wrap {
  flex: 1 1 58%;
  min-width: 0;
}

/* Sans coordonnées (pas de carte) : la fiche occupe toute la largeur */
.fb-mini--no-map .fb-mini-map-wrap {
  display: none;
}

.fb-mini--no-map .fb-mini-result {
  flex: 1 1 100%;
}

.fb-mini-map {
  width: 100%;
  height: 320px;
  min-height: 280px;
  border-radius: 12px;
  background: #eef0f3;
  overflow: hidden;
  z-index: 1;
}

.fb-mini-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Bouton nouvelle recherche */
.fb-mini-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 10px 24px;
  border: 1px solid #e0e2e6;
  border-radius: 999px;
  background: #fff;
  color: var(--fb-mini-text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.fb-mini-reset:hover {
  border-color: var(--fb-mini-accent);
  color: var(--fb-mini-accent);
  background: #fffaf3;
}

.fb-mini-reset:focus-visible {
  outline: 2px solid var(--fb-mini-accent);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .fb-mini-top,
  .fb-mini-drawer-inner {
    flex-direction: column;
    gap: 28px;
  }

  /* Sur mobile : visuel au-dessus dans tous les cas */
  .fb-mini--visual-left .fb-mini-visual,
  .fb-mini--visual-right .fb-mini-visual { order: 1; }
  .fb-mini--visual-left .fb-mini-search,
  .fb-mini--visual-right .fb-mini-search { order: 2; }

  /* Résultat : carte au-dessus, fiche en dessous */
  .fb-mini-map-wrap { order: 1; }
  .fb-mini-result { order: 2; }

  .fb-mini-visual {
    flex: 0 0 auto;
    max-width: 220px;
  }

  .fb-mini-france {
    max-width: 220px;
  }

  .fb-mini-field-wrap {
    max-width: 100%;
  }

  .fb-mini-search-header {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .fb-mini-map {
    height: 260px;
  }

  .fb-mini-tag {
    font-size: 13px;
    padding: 6px 13px;
  }
}

/* Préférence de mouvement réduit (RGAA / WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .fb-mini-drawer,
  .fb-mini-tag {
    transition: none;
  }
  .fb-mini-loading .fb-mini-btn::after {
    animation: none;
  }
}

/* ============================================================
   DARK MODE (body.dark-mode) — cohérence avec le thème FB
   Titre/accroche → noir FB, champ et tags adaptés au fond sombre.
   Le bouton loupe garde le dégradé orange (identité FB).
   ============================================================ */
/* Le thème FB garde le fond des sections de contenu en BLANC en dark mode
   (seuls les titres passent en noir). Donc ici : textes en noir, pas en clair. */
body.dark-mode .fb-mini-accroche,
body.dark-mode .fb-mini-title {
  color: var(--black, #1a1a1a) !important;
}

body.dark-mode .fb-mini-lieux-intro,
body.dark-mode .fb-mini-subtitle {
  color: var(--black, #1a1a1a);
}

/* Tags discrets : conservent le gris clair en dark mode (fond de section blanc) */
body.dark-mode .fb-mini-tag {
  background: #f4f5f6;
  color: #555b63;
}

body.dark-mode .fb-mini-tag:hover {
  background: #ececee;
  color: #333;
}

/* Champ de recherche : fond clair conservé, texte noir */
body.dark-mode .fb-mini-input {
  background: var(--fb-mini-field-bg);
  color: var(--black, #1a1a1a);
}

body.dark-mode .fb-mini-input::placeholder {
  color: #6b7280;
}

body.dark-mode .fb-mini-input:focus {
  background: var(--fb-mini-field-bg-focus);
}

/* Bouton loupe : conserve le dégradé orange (même couleur, même effet) */
body.dark-mode .fb-mini-btn {
  background: linear-gradient(90deg, var(--fb-mini-orange-start) 0%, var(--fb-mini-orange-end) 100%);
  color: #fff;
}

body.dark-mode .fb-mini-btn:hover {
  filter: brightness(1.12);
}

/* Autocomplétion : reste claire (fond de section blanc), texte noir */
body.dark-mode .fb-mini-ac-item {
  color: var(--black, #1a1a1a);
}

/* Bouton "Nouvelle recherche" : reste clair, texte noir */
body.dark-mode .fb-mini-reset {
  color: var(--black, #1a1a1a);
}

body.dark-mode .fb-mini-reset:hover {
  border-color: var(--orange-primary, #f3971e);
  color: var(--orange-primary, #f3971e);
}