/* Claude — 2026-08-04 — suggestions de catégories, recherche DESKTOP header (widget b9288f5).
   Portée stricte : tablette + desktop (>=768px), jamais en dessous — le mobile (widget ecc87e3,
   <=767px) est géré par koaprint-header-search-mobile.css, non modifié par ce fichier, aucune
   règle en commun (classes "koa-search-desktop-*" ici, "koa-search-*" côté mobile).

   Couleurs déclarées EN DUR (jamais de var(--e-global-color-*) : --e-global-color-accent vaut
   #961038 (bordeaux), toute couleur non explicite y retombe sur ce site). background ET
   background-color systématiquement posés ensemble. Vert de marque #0F544D.

   Le panneau est position:absolute, ANCRÉ dans .e-search-input-wrapper (déjà position:relative
   nativement, cf. CSS Elementor de base) — jamais position:fixed, jamais de body verrouillé,
   jamais de backdrop-filter. Le formulaire ne bouge jamais dans le DOM (cf. JS associé). */

@media (min-width: 768px) {

  /* ============================================================
     PANNEAU — masqué par défaut, affiché uniquement quand le widget
     porte la classe koa-search-open (posée par le JS au focus).
     ============================================================ */
  .koa-search-desktop-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #fff;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 10px;
    box-sizing: border-box;
    z-index: 9999;
    max-height: calc(100vh - 200px); /* demande Antony 04/08 : marge de sécurité écran, même avec 6 catégories + 5 produits + la ligne d'action */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .elementor-element-b9288f5.koa-search-open .koa-search-desktop-panel {
    display: block;
  }

  /* 🔴 Correctif z-index (même cause/même fix que le panneau mobile, déjà validé) : la chaîne
     d'ancêtres du widget (b9288f5 -> bec155d -> header) est position:relative mais z-index:auto,
     alors qu'une section de contenu a un z-index explicite -> sans boost le panneau passe
     derrière le contenu. Classe posée/retirée par le JS UNIQUEMENT pendant l'ouverture. */
  .koa-search-header-boost-desktop {
    position: relative !important;
    z-index: 10000 !important;
  }

  /* ============================================================
     LABELS DE SECTION ("Catégories" / "Produits") — discrets, gris,
     mêmes proportions que le panneau mobile déjà validé.
     ============================================================ */
  .koa-search-desktop-label {
    padding: 8px 6px 6px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #595959;
    background: transparent;
    background-color: transparent;
  }
  .koa-search-desktop-products-block {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  /* ============================================================
     LISTE CATÉGORIES (rendue par koaprint-header-search-desktop.js
     via le moteur local, koaprint-search-engine.js).
     ============================================================ */
  .koa-search-desktop-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .koa-search-desktop-list li {
    border-top: 1px solid rgba(0, 0, 0, .06);
  }
  .koa-search-desktop-list li:first-child {
    border-top: 0;
  }
  .koa-search-desktop-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    font-size: 15px;
    color: #1a1a1a;
    text-decoration: none;
    background: transparent;
    background-color: transparent;
  }
  .koa-search-desktop-list a:hover,
  .koa-search-desktop-list a:focus-visible {
    background: rgba(15, 84, 77, .06);
    background-color: rgba(15, 84, 77, .06);
    outline: none;
  }
  .koa-search-desktop-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .koa-search-desktop-item-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, .45);
    white-space: nowrap;
  }
  .koa-search-desktop-no-match {
    padding: 8px 6px 4px 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, .45);
  }

  /* ============================================================
     LIGNE D'ACTION PERMANENTE ("Rechercher « … » dans tous les
     produits" / "Chercher la référence « … »") — même gabarit de
     ligne que les résultats, mise en avant par la couleur d'accent
     du site (vert de marque, PAS le vert/rouge global Elementor).
     ============================================================ */
  .koa-search-desktop-action-link {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-size: 15px;
    font-weight: 600;
    color: rgb(15, 84, 77);
    text-decoration: none;
    background: transparent;
    background-color: transparent;
  }
  .koa-search-desktop-action-link:hover,
  .koa-search-desktop-action-link:focus-visible {
    background: rgba(15, 84, 77, .06);
    background-color: rgba(15, 84, 77, .06);
    outline: none;
  }

  /* ============================================================
     RÉSULTATS PRODUITS NATIFS (conteneur Elementor <output
     class="e-search-results-container">, déplacé par le JS À
     L'INTÉRIEUR de .koa-search-desktop-products-block — jamais
     recréé, jamais reconfiguré : seule sa POSITION dans le panneau
     est neutralisée ici pour qu'il flotte dans notre panneau au
     lieu de son propre position:absolute d'origine (qui, une fois
     imbriqué, produirait un doublon de boîte/ombre/arrondi).
     Le contenu interne (.e-search-results, template_id 15080)
     n'est touché par AUCUNE règle ci-dessous.
     ============================================================ */
  .koa-search-desktop-panel .e-search-results-container {
    position: static !important;
    inset-block-start: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Demande Antony (04/08) : vignettes en 40-48px, pas la taille servie par défaut par le
     template (potentiellement plus grande — non vérifiable sans inspection live, le widget
     natif/template_id 15080 n'étant pas modifiable ici). Ceci force le GABARIT D'AFFICHAGE
     (poids réseau inchangé : voir le rapport livré à Antony pour la limite exacte de cette
     mesure). loading="lazy"/decoding="async" posés en JS (cf. koaprint-header-search-desktop.js,
     processResults) — pas de CSS possible pour ces attributs HTML. */
  .koa-search-desktop-panel .e-search-results-container img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex: 0 0 auto !important;
  }
}