/* booking-intel.css — bande d'intelligence de séjour (#be-intel) + pastille « Notre recommandation ».
   Identité home : crème #F8F5F0, navy #1B263B, mer #2F5D73 / #4A90B8, teal clair #D6EAF2, Plus Jakarta Sans,
   radius 2 px. Aucun or, aucune police historique des cartes, aucun import distant : la feuille premium
   (booking-premium.css) porte les fontes. */

/* Geometry (owner 05/09 evening) = the message family of booking-premium.css (3b): the band is a flex child of
   #be-normal-view, so it takes exactly the width of the control bar and of the grid (no max-width, no auto
   margins); same padding 14/18 (12/14 mobile), STRAIGHT corners, 1px border. Same 14px ink text.
   Coloured 3px left rail, BACK at the owner's request (06/09) on a validated before/after: the rail REPLACES
   the 1px left border (border-left-width 3px, never 1+3), top/right/bottom stay 1px rgba(27,38,59,.08) and the
   corners stay square. Colour = meaning: sea #2F5D73 = the context of the stay. The 32px pool-light icon disc
   is kept. padding-left drops 18->16 (14->12 mobile) so the text keeps the exact same x as with the 1px border.
   This declaration lives HERE, not in booking-premium.css: booking-intel.css is loaded AFTER it in
   reserver.html, so its `border` shorthand would win over any same-specificity rail declared upstream. */
#be-intel {
  --bi-ink: var(--be-ink, #1B263B);
  --bi-sea: #2F5D73;
  --bi-sea-light: #D6EAF2;
  --bi-muted: #5B6470;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: 14px 18px 14px 16px;
  min-height: 48px;
  background: #fff;
  border: 1px solid rgba(27, 38, 59, .08);
  border-left: 3px solid var(--bi-sea);
  border-radius: 0;
  box-shadow: none;
  color: var(--bi-ink);
  font-family: var(--be-fb, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  animation: be-intel-in .35s ease both;
}
#be-intel[hidden] { display: none; }
@keyframes be-intel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.be-intel__icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bi-sea-light);
  color: var(--bi-sea);
}
.be-intel__icon svg { width: 18px; height: 18px; stroke-width: 2; }

.be-intel__main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.be-intel__text { margin: 0; font-weight: 400; }
.be-intel__text strong { font-weight: 600; }
.be-intel__links { display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.be-intel__links a {
  color: var(--bi-sea);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 93, 115, .35);
  white-space: nowrap;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.be-intel__links a:hover, .be-intel__links a:focus-visible { color: var(--bi-ink); text-decoration-color: currentColor; }
.be-intel__links a::after { content: '\2192'; margin-left: .3em; font-weight: 400; }

.be-intel__close {
  flex: 0 0 auto;
  appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px; margin: -4px -6px 0 0;
  border-radius: var(--be-r-ctl, 6px);
  color: var(--bi-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .25s ease, background .25s ease;
}
.be-intel__close svg { width: 16px; height: 16px; }
.be-intel__close:hover, .be-intel__close:focus-visible { color: var(--bi-ink); background: #F8F5F0; outline: none; }

/* Pastille « Notre recommandation » sur la première carte du classement Recommandés */
.be-card__intel-reco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  margin: 0 0 .5rem;
  font-family: var(--be-fb, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.be-card__intel-reco__label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #2F5D73;
}
.be-card__intel-reco__reason { font-size: 12.5px; font-weight: 300; color: #5B6470; }

@media (max-width: 767px) {
  /* same 3px rail on mobile (the border-left above is not reset here); only the padding is restated, so it
     must carry the -2px compensation itself or the shorthand would put the left padding back to 14px. */
  #be-intel { margin: 0; padding: 12px 14px 12px 12px; min-height: 44px; font-size: 14px; gap: 12px; align-items: flex-start; }
  .be-intel__main { flex-direction: column; gap: .35rem; }
  .be-intel__links { gap: .2rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  #be-intel { animation: none; }
  .be-intel__links a, .be-intel__close { transition: none; }
}