/**
 * VivaWeb - Ajax Search - Frontend Styles
 */

/* Aucune font-family ici, volontairement : le champ doit prendre la police du
   site. Une pile systeme etait posee a l'origine par le module de recherche ;
   elle imposait une typographie etrangere au theme des que du texte sortait de
   l'input, et faisait diverger le declencheur du reste de la page. */
.wc-ajax-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

/* Input trigger (dans le header) */
.wc-ajax-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wc-ajax-search-trigger {
    width: 100%;
    padding: 14px 50px 14px 18px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-ajax-search-trigger:hover,
.wc-ajax-search-trigger:focus {
    border-color: #999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wc-ajax-search-trigger::placeholder {
    color: #aaa;
}

/* display:flex + line-height:0 : sans ca, la <span> est une boite en ligne dont
   la hauteur suit le line-height (27,2 px pour une SVG de 20 px). Le glyphe
   repose sur la ligne de base et laisse sous lui la place des jambages :
   centrer la boite montait donc l'icone de 3,6 px au-dessus du texte. */
.wc-ajax-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #999;
    pointer-events: none;
}

/* ================================
   MODAL OVERLAY
   ================================ */
.wc-ajax-search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wc-ajax-search-modal.is-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-top: 80px;
}

.wc-ajax-search-modal.is-visible {
    opacity: 1;
}

/* Close button */
.wc-ajax-search-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.wc-ajax-search-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.wc-ajax-search-close svg {
    color: #fff;
    width: 24px;
    height: 24px;
}

/* Modal search container */
.wc-ajax-search-modal-content {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Modal input */
.wc-ajax-search-modal-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wc-ajax-search-input {
    width: 100%;
    padding: 18px 55px 18px 22px;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: none;
    border-radius: 16px;
    outline: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.wc-ajax-search-input::placeholder {
    color: #999;
}

/* Meme correction de ligne de base que pour .wc-ajax-search-icon : ici l'ecart
   etait de 4,1 px, la SVG de la modale faisant 22 px. */
.wc-ajax-search-modal-icon,
.wc-ajax-search-loader {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #666;
    pointer-events: none;
}

.wc-ajax-search-loader svg {
    animation: wc-search-spin 1s linear infinite;
}

@keyframes wc-search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================================
   RESULTS IN MODAL
   ================================ */
.wc-ajax-search-results {
    display: none;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wc-ajax-search-results.is-visible {
    display: block;
}

/* Results list */
.wc-ajax-search-results-list {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.wc-ajax-search-results-list li {
    margin: 0;
    padding: 0;
}

.wc-ajax-search-results-list li + li {
    border-top: 1px solid #f0f0f0;
}

/* Result item */
.wc-ajax-search-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: background-color 0.15s ease;
    gap: 16px;
}

.wc-ajax-search-item:hover,
.wc-ajax-search-item.is-active {
    background-color: #f8f9fa;
    text-decoration: none;
}

.wc-ajax-search-item:focus {
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

/* Product image */
.wc-ajax-search-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #eee;
}

.wc-ajax-search-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product info */
.wc-ajax-search-info {
    flex: 1;
    min-width: 0;
}

.wc-ajax-search-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.wc-ajax-search-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
}

.wc-ajax-search-price {
    color: #b8860b;
    font-weight: 600;
}

.wc-ajax-search-price del {
    color: #999;
    font-weight: 400;
    margin-right: 4px;
}

.wc-ajax-search-price ins {
    text-decoration: none;
    color: #c41e3a;
}

.wc-ajax-search-sku {
    color: #888;
    font-size: 12px;
}

.wc-ajax-search-type {
    display: inline-block;
    padding: 4px 10px;
    background: #e8f4fc;
    color: #1a73e8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.wc-ajax-search-type.variation {
    background: #fef3e8;
    color: #e67e22;
}

/* Messages */
.wc-ajax-search-message {
    padding: 32px 20px;
    text-align: center;
    color: #777;
    font-size: 15px;
}

.wc-ajax-search-message.error {
    color: #c41e3a;
}

/* View all link */
.wc-ajax-search-view-all {
    display: block;
    padding: 16px;
    text-align: center;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 0 0 16px 16px;
    transition: background-color 0.15s ease;
}

.wc-ajax-search-view-all:hover {
    background-color: #f0f0f0;
    text-decoration: none;
    color: #1a73e8;
}

/* Highlight matched text */
.wc-ajax-search-highlight {
    background-color: #fff59d;
    color: #333;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 3px;
}

/* ================================
   MOBILE RESPONSIVE
   ================================ */
@media (max-width: 768px) {
    .wc-ajax-search-modal.is-active {
        padding: 15px;
        padding-top: 70px;
    }
    
    .wc-ajax-search-close {
        top: 15px;
        right: 15px;
    }
    
    .wc-ajax-search-input {
        padding: 16px 50px 16px 18px;
        font-size: 16px;
        border-radius: 12px;
    }
    
    .wc-ajax-search-results {
        border-radius: 12px;
        max-height: calc(100vh - 200px);
    }
    
    .wc-ajax-search-image {
        width: 56px;
        height: 56px;
    }
    
    .wc-ajax-search-item {
        padding: 12px 14px;
        gap: 12px;
    }
    
    .wc-ajax-search-title {
        font-size: 14px;
    }
    
    .wc-ajax-search-meta {
        font-size: 13px;
        gap: 8px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .wc-ajax-search-modal.is-active {
        padding: 12px;
        padding-top: 60px;
    }
    
    .wc-ajax-search-image {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }
    
    .wc-ajax-search-results {
        max-height: calc(100vh - 160px);
    }
}

/* Prevent body scroll when modal is open */
body.wc-search-modal-open {
    overflow: hidden;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wc-ajax-search-modal,
    .wc-ajax-search-item {
        transition: none;
    }
    
    .wc-ajax-search-loader svg {
        animation: none;
    }
}


/* ================================================================
   CORRECTIFS D'INTEGRATION THEME  (VivaWeb - 2026-08-19)
   ================================================================
   1. EMPILEMENT. La modale est deplacee en enfant direct de <body>
      par search.js (portail). Kadence Blocks cree deux contextes
      d'empilement redondants autour du shortcode :
        .kt-row-column-wrap    { position:relative; z-index:1 }
        .wp-block-kadence-column { z-index:1 }  (item de grille)
      Aucun z-index interne ne peut en sortir : le header (#masthead,
      z-index:11) et le contenu de page peignaient par-dessus la modale.
      Les regles ci-dessous la rendent autonome : elle ne doit plus rien
      attendre de .wc-ajax-search-wrapper.
   2. SPECIFICITE. Kadence stylise input[type="text"] / input[type="search"]
      (specificite 0,1,1) et bat les selecteurs de classe du plugin (0,1,0),
      d'autant que le CSS du plugin est enqueue AVANT celui du theme.
      Le bloc d'armure se limite strictement aux proprietes que le theme
      revendique, pour ne rien casser d'autre.
   ================================================================ */

body > .wc-ajax-search-modal {
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.wc-ajax-search-wrapper .wc-ajax-search-trigger,
.wc-ajax-search-modal .wc-ajax-search-input {
    box-sizing: border-box !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    background-color: #fff !important;
    color: #333 !important;
}

.wc-ajax-search-wrapper .wc-ajax-search-trigger {
    padding: 14px 50px 14px 18px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 16px !important;
}

.wc-ajax-search-wrapper .wc-ajax-search-trigger:hover,
.wc-ajax-search-wrapper .wc-ajax-search-trigger:focus {
    border-color: #999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.wc-ajax-search-modal .wc-ajax-search-input {
    padding: 18px 55px 18px 22px !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    font-size: 18px !important;
}

@media (max-width: 768px) {
    .wc-ajax-search-modal .wc-ajax-search-input {
        padding: 16px 50px 16px 18px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
}

/* Les visuels de cartes sont au format portrait : 'cover' rognait environ
   28 % de la hauteur, dont le titre et le numero de collection. */
.wc-ajax-search-image img {
    object-fit: contain;
    background: #fff;
}


/* ================================================================
   MOBILE : LE DECLENCHEUR DU HEADER SE REDUIT A L'ICONE (2026-08-20)
   ================================================================
   Le champ pose dans le HTML mobile du personnalisateur Kadence
   occupait toute la barre superieure (247 px sur 375) pour n'afficher
   qu'un placeholder. On garde le meme <input> - c'est lui qui porte
   le clic d'ouverture, l'icone etant en pointer-events:none - mais on
   le reduit a une cible tactile de 44 px et on efface le texte.
   La portee est volontairement .site-mobile-header-wrap : c'est
   Kadence qui decide a quelle largeur cette entete remplace celle du
   bureau, la regle suit donc son point de rupture au lieu d'en
   redefinir un. Le champ pose dans le contenu (hero) n'est pas
   concerne : il garde son champ pleine largeur.
   ================================================================ */

.site-mobile-header-wrap .wc-ajax-search-wrapper {
    width: 44px;
    max-width: 44px;
    margin-left: auto;
}

/* Le bloc d'armure ci-dessus pose padding/border/box-shadow en
   !important : il faut la meme arme pour les reprendre. */
.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-trigger,
.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-trigger:hover,
.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-trigger:focus {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    caret-color: transparent;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-trigger::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* L'icone passe au centre du carre, et en blanc : la barre superieure
   mobile est sur --global-palette4 (fond sombre), ou le gris #999 du
   declencheur pleine largeur ne se detachait plus. */
.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-icon {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    color: #fff;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper .wc-ajax-search-icon svg {
    width: 24px;
    height: 24px;
}


/* ================================================================
   VERSION LONGUE DU DECLENCHEUR  (2026-08-21)
   ================================================================
   [wc_ajax_search version="longue"]. Deux differences avec la
   version par defaut :
     - plus de plafond a 500 px, le champ suit la largeur qu'on lui
       donne ;
     - sur mobile il garde sa zone de saisie au lieu de se reduire a
       l'icone de 44 px. Il faut donc reprendre une a une les regles
       de la section precedente, qui sont en !important.
   ================================================================ */

.wc-ajax-search-wrapper--long {
    max-width: none;

    /* Posee dans une ligne d'en-tete, la version longue en dicte la hauteur :
       sans marge, elle touche les bords de la bande. Vertical uniquement — sur
       mobile le champ est en width:100%, une marge laterale le ferait deborder. */
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Un peu plus basse que la version par defaut : elle occupe deja toute la
   largeur, elle n'a pas besoin de la meme presence verticale. */
.wc-ajax-search-wrapper--long .wc-ajax-search-trigger {
    padding-top: 9px;
    padding-bottom: 9px;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper--long {
    width: 100%;
    max-width: none;
    margin-left: 0;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-trigger,
.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-trigger:hover,
.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-trigger:focus {
    width: 100% !important;
    height: auto !important;
    padding: 9px 42px 9px 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: #333 !important;
    caret-color: auto;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-trigger::placeholder {
    color: #aaa !important;
    opacity: 1 !important;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-icon {
    left: auto;
    right: 14px;
    transform: translateY(-50%);
    color: #999;
}

.site-mobile-header-wrap .wc-ajax-search-wrapper--long .wc-ajax-search-icon svg {
    width: 20px;
    height: 20px;
}


/* ================================================================
   VERSION PLEINE LARGEUR  (2026-08-21)
   ================================================================
   [wc_ajax_search version="pleine-largeur"]. Cumule la version
   longue et une contrainte de plus : le creneau d'en-tete qui porte
   le champ occupe toute sa ligne. Sans cela, une ligne d'en-tete
   Kadence dimensionne ses sections sur leur contenu et le champ
   n'obtenait qu'une fraction de la largeur disponible.

   On fait grandir le flex plutot que de sortir du flux avec un
   100vw : la formule de debordement classique suppose un parent
   centre dans la page, ce qui n'est pas le cas d'une section
   d'en-tete laterale, et le #wrapper de Kadence est en
   overflow:clip — le champ y serait rogne au lieu de deborder.
   ================================================================ */

.site-header-section:has( .wc-ajax-search-wrapper--full ),
.site-header-item:has( .wc-ajax-search-wrapper--full ) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

[class*="header-html"]:has( .wc-ajax-search-wrapper--full ),
[class*="mobile-html"]:has( .wc-ajax-search-wrapper--full ) {
    width: 100%;
    min-width: 0;
}

.wc-ajax-search-wrapper--full,
.site-mobile-header-wrap .wc-ajax-search-wrapper--full {
    width: 100%;
    max-width: none;
}