/*
 * HomeBe — Recherche  ([homebe_recherche])
 * Repris de l'export Claude Design (homebe-recherche/index.html).
 * Les regles globales d'origine (*, body, a, ::selection, scrollbars) ont ete
 * scopees sous .hb-recherche : telles quelles elles ecrasaient le theme sur
 * tout le site. Les @keyframes restent globales, leurs noms n'entrent en
 * collision ni avec style.css ni avec homebe-mvp.css.
 */
.hb-recherche{width:100%}
.hb-recherche,.hb-recherche *,.hb-recherche *::before,.hb-recherche *::after{box-sizing:border-box}
  .hb-recherche *{margin:0;padding:0}
  /* scroll-behavior: laisse au theme */
  .hb-recherche{background:#fff;font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;color:#1B2A4E}
  .hb-recherche a{color:#1B2A4E;text-decoration:none}
  .hb-recherche a:hover{color:#0F1A33}
  .hb-recherche ::selection{background:#1B2A4E;color:#fff}
  .hb-recherche .mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .hb-recherche input,.hb-recherche button,.hb-recherche select{font-family:inherit}
  .hb-recherche input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;outline:none}
  .hb-recherche input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#5B7FB5;cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(27,42,78,.3)}
  .hb-recherche input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#5B7FB5;cursor:pointer;border:3px solid #fff}
  .hb-recherche aside::-webkit-scrollbar{width:8px}
  .hb-recherche ::-webkit-scrollbar{width:10px;height:10px}
  .hb-recherche ::-webkit-scrollbar-thumb{background:rgba(27,42,78,.2);border-radius:99px;border:3px solid #fff}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
  @keyframes overlayIn{from{opacity:0}to{opacity:1}}
  @keyframes filtersIn{from{transform:translateX(-100%)}to{transform:none}}
  @keyframes blink{0%,40%{opacity:.9}50%,60%{opacity:.35}70%,100%{opacity:.9}}
  @keyframes pinPop{0%{transform:translate(-50%,-100%) scale(.4);opacity:0}60%{transform:translate(-50%,-100%) scale(1.08)}100%{transform:translate(-50%,-100%) scale(1);opacity:1}}
  @keyframes scan{0%{transform:translateX(-105%)}100%{transform:translateX(320%)}}
  @keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mq-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
  .mq-wrap:hover .mq-track{animation-play-state:paused}
  .mq-logo{width:150px;height:56px;flex:0 0 auto;opacity:.82;filter:saturate(.05) brightness(.55);transition:opacity .25s,filter .25s}
  .mq-logo:hover{opacity:1;filter:none}
  .res-scroll{scrollbar-width:thin;scrollbar-color:var(--navy,#1B2A4E) rgba(27,42,78,.08)}
  .res-scroll::-webkit-scrollbar{width:12px}
  .res-scroll::-webkit-scrollbar-track{background:rgba(27,42,78,.07);border-radius:99px;margin:2px 0}
  .res-scroll::-webkit-scrollbar-thumb{background:var(--navy,#1B2A4E);border-radius:99px;border:3px solid transparent;background-clip:content-box;min-height:60px}
  .res-scroll::-webkit-scrollbar-thumb:hover{background:var(--navy2,#0F1A33);background-clip:content-box}

/* ------------------------------------------------------------------
   Contenu rendu par PHP pour l'indexation et le fonctionnement sans JS.
   recherche.js le masque (attribut hidden) des que l'application monte.
   ------------------------------------------------------------------ */
.hb-recherche-seo{max-width:820px;margin:0 auto;padding:120px 24px 80px;color:#1B2A4E;font-size:16px;line-height:1.65}
.hb-recherche-seo[hidden]{display:none}
.hb-recherche-seo h1{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px}
.hb-recherche-seo h2{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:48px 0 14px}
.hb-recherche-seo h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.hb-recherche-seo p{margin:0 0 16px;color:#5B6577}
.hb-recherche-seo ul{margin:0 0 16px;padding-left:22px;color:#5B6577}
.hb-recherche-seo li{margin-bottom:6px}
.hb-recherche-seo a{color:#B8852B;text-decoration:underline;text-underline-offset:2px}
.hb-recherche-seo-bien{border-top:1px solid #D7DBE3;padding-top:24px;margin-top:24px}
.hb-recherche-seo-demo{background:#FDF6E6;border:1px solid #E8D3A0;border-radius:12px;padding:14px 18px;color:#7A5B18!important}

/* Hero : le header du thème est en position:fixed (~88px). La maquette
   d'origine, sans header, n'avait que 60px de padding haut — le sur-titre
   passait dessous. On reprend les 128px des autres hero HomeBe.
   !important obligatoire : le padding d'origine est en style inline sur
   l'élément, et un style inline bat toujours une règle de feuille externe. */
.hb-recherche .hb-recherche-hero{padding-top:128px !important}
@media (max-width:900px){ .hb-recherche .hb-recherche-hero{padding-top:112px !important} }
@media (max-width:600px){ .hb-recherche .hb-recherche-hero{padding-top:96px !important} }

/* Bandeau de démonstration — visible dans l'application, contrairement au bloc
   SEO qui est masqué dès que le JS monte. Disparaît en passant
   homebe_recherche_is_demo() à false. */
.hb-recherche-demo-bandeau{
  position:sticky;top:0;z-index:70;margin:0;
  background:#FDF6E6;border-bottom:1px solid #E8D3A0;
  padding:12px 24px;text-align:center;
  font-size:14px;line-height:1.5;color:#7A5B18;
  font-family:'DM Sans',system-ui,sans-serif;
}
.hb-recherche-demo-bandeau strong{color:#5C4310}
@media (max-width:600px){ .hb-recherche-demo-bandeau{font-size:12.5px;padding:10px 16px} }

/* Analyse de lien désactivée : le bloc tremble au clic au lieu de produire
   une analyse fabriquée. Retirer cette règle le jour où la fonction sera
   branchée sur une vraie source. */
@keyframes hb-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)} 30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)} 90%{transform:translateX(2px)}
}
.hb-recherche .hb-shake{animation:hb-shake .5s cubic-bezier(.36,.07,.19,.97) both}

/* ==================================================================
   RESPONSIVE MOBILE / TABLETTE
   ------------------------------------------------------------------
   Le gabarit de cette page vient d'un export Claude Design : tout le
   layout est en style="" inline, donc il n'existait aucun point de
   rupture et la page restait en 3-4 colonnes sur telephone.

   Des classes (hb-wrap, hb-grid-*, hb-drawer, hb-cmp-*) ont ete
   ajoutees au gabarit dans shortcode-recherche.php pour servir de
   prise. NE PAS revenir a des selecteurs [style*="..."] : le moteur
   de rendu JS reecrit les styles inline et le navigateur les
   normalise ("display: flex;" au lieu de "display:flex"), donc ces
   selecteurs ne matchent jamais a l'execution.

   Un style inline bat toujours une feuille externe : le !important
   est donc obligatoire sur chaque propriete reprise ici.
   ================================================================== */

@media (max-width:900px){

  .hb-recherche{overflow-x:hidden}

  /* --- Gouttieres des conteneurs 1280px --- */
  .hb-recherche .hb-wrap{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .hb-recherche #results{padding:32px 18px 64px !important}

  /* --- Barre de recherche du hero : un bloc par ligne --- */
  .hb-recherche .hb-hero-tabs,
  .hb-recherche .hb-hero-search,
  .hb-recherche .hb-hero-select,
  .hb-recherche .hb-hero-cta{
    flex:1 1 100% !important;
    min-width:0 !important;
    width:100% !important;
  }
  .hb-recherche .hb-hero-tabs button{flex:1}
  .hb-recherche .hb-hero-select{padding:15px 16px !important}
  .hb-recherche .hb-hero-cta{padding:15px 20px !important;justify-content:center}

  /* Compteurs du hero : ils debordaient en une seule ligne de trois */
  .hb-recherche .hb-hero-statsrow{gap:16px 24px !important}
  .hb-recherche .hb-hero-stats{flex-wrap:wrap;gap:18px 28px !important}

  /* --- Grilles : retour a 1 ou 2 colonnes --- */
  .hb-recherche .hb-grid-3{grid-template-columns:1fr !important}
  .hb-recherche .hb-grid-4{grid-template-columns:1fr 1fr !important}
  .hb-recherche .hb-grid-2{grid-template-columns:1fr !important;gap:32px !important}
  .hb-recherche .hb-grid-3s{grid-template-columns:1fr 1fr !important}

  /* --- Liste des resultats --- */
  /* Elle avait sa propre zone de defilement de 1012px : sur telephone
     cela donne un scroll dans le scroll, impossible a manipuler. */
  .hb-recherche .res-scroll{
    max-height:none !important;
    overflow-y:visible !important;
    padding-right:0 !important;
  }
  /* Barre de tri collante : elle se logeait sous le header fixe du theme */
  .hb-recherche .hb-sortbar{position:static !important}

  /* --- Bandeau des sources --- */
  .hb-recherche .mq-logo{width:112px;height:44px}

  /* --- Comparateur : tableau a defilement horizontal --- */
  .hb-recherche .hb-cmp-overlay{padding:12px !important}
  .hb-recherche .hb-cmp-body{
    padding:16px !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hb-recherche .hb-cmp-row{min-width:520px}
}

@media (max-width:600px){

  .hb-recherche .hb-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .hb-recherche #results{padding:24px 16px 56px !important}

  .hb-recherche .hb-grid-4{gap:10px !important}
  .hb-recherche .hb-grid-3s{grid-template-columns:1fr !important}

  /* Tiroirs detail et filtres en plein ecran */
  .hb-recherche .hb-drawer{width:100% !important}
  .hb-recherche .hb-filters{width:100% !important;padding:20px 16px 32px !important}

  .hb-recherche .mq-logo{width:96px;height:38px}
}