/* =========================================================
   RECHERCHE GLOBALE
   - Bouton collant "Faire une recherche"
   - Loupe top bar + loupe header mobile
   - Popup de recherche (overlay)
   ========================================================= */

/* =========================
   Bouton collant (encarts flottants droite)
   ========================= */
button.qly-floating-cta__item{appearance:none;-webkit-appearance:none;border:0;margin:0;font:inherit;cursor:pointer;text-align:center}
.qly-floating-cta__item--search .qly-floating-cta__icon img{width:auto;height:46px}

/* =========================
   Loupe header mobile / tablette
   ========================= */
.qly-mobile-search-btn{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;cursor:pointer;position:relative;width:38px;height:38px;border-radius:50%;background-color:#004563;display:none;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color .2s ease,transform .1s ease}
/* zone tactile élargie (~48px) sans grossir le visuel */
.qly-mobile-search-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.qly-mobile-search-btn img{display:block;width:auto;height:18px}
.qly-mobile-search-btn:hover{background-color:#2cb6bb}
.qly-mobile-search-btn:active{background-color:#2cb6bb;transform:scale(.94)}
.qly-mobile-search-btn:focus-visible{outline:2px solid #F29100;outline-offset:2px}
@media (max-width:1320px){
  #site-header .oceanwp-mobile-menu-icon{display:flex;align-items:center;gap:14px}
  /* neutralise le clearfix OceanWP (.clr::after) devenu item flex parasite */
  #site-header .oceanwp-mobile-menu-icon::before,
  #site-header .oceanwp-mobile-menu-icon::after{display:none}
  .qly-mobile-search-btn{display:inline-flex}
}
/* Petits écrans : tout le header sur une seule ligne
   (logo un peu réduit, loupe alignée sur le centre du logo) */
@media (max-width:600px){
  #site-header #site-logo img{max-height:44px!important;width:auto!important}
  #site-header .oceanwp-mobile-menu-icon{margin-top:19px;gap:10px}
  .qly-mobile-search-btn{width:36px;height:36px}
  .qly-mobile-search-btn img{height:17px}
}

/* =========================
   Popup de recherche
   ========================= */
.qly-search-overlay{position:fixed;inset:0;z-index:100001;display:flex;justify-content:center;align-items:flex-start;background:rgba(0,69,99,.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;overflow:hidden}
.qly-search-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease}
body.qly-search-open{overflow:hidden}

/* Décos demi-cercles (mêmes visuels que la popup bienvenue) */
.qly-search-overlay::before,
.qly-search-overlay::after{content:"";position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat;background-position:center;background-size:contain}
.qly-search-overlay::before{width:340px;height:412px;left:-160px;top:10vh;background-image:url("../img/popup/LOUPE_JAUNECLAIR.png")}
.qly-search-overlay::after{width:420px;height:578px;right:-180px;bottom:-190px;background-image:url("../img/popup/LOUPE_PETITE_VERTCLAIR.png")}

/* Croix de fermeture */
.qly-search-overlay__close{position:absolute;top:34px;right:38px;width:48px;height:48px;border:0;margin:0;padding:0;cursor:pointer;background:transparent url("../img/popup/CROIX.png") no-repeat center;background-size:contain;z-index:2}
.qly-search-overlay__close:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Panneau (titre + champ) */
.qly-search-overlay__panel{position:relative;z-index:1;width:100%;max-width:720px;margin-top:clamp(100px,18vh,190px);padding:0 24px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}
.qly-search-overlay__title{display:inline-flex;align-items:flex-start;gap:14px;margin:0 0 80px;font-family:"Outfit","Fira Sans",sans-serif;font-weight:400;font-size:40px;line-height:1.1;color:#fff;text-align:center}
.qly-search-overlay__title-deco{flex:0 0 auto;width:44px;height:44px;margin-top:-4px;background:url("../img/search/titre-blanc.png") no-repeat center;background-size:contain}

/* Formulaire (partagé popup / page résultats) */
.qly-search-form{display:flex;align-items:flex-end;gap:28px;width:100%;max-width:621px}
.qly-search-form input.qly-search-form__input{flex:1 1 auto;min-width:0;width:auto;height:auto;background:transparent;border:0;border-bottom:2px solid #fff;border-radius:0;box-shadow:none;padding:0 0 12px;font-family:"Fira Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;font-size:26px;line-height:1.2;color:#fff;outline:none}
.qly-search-form input.qly-search-form__input:focus{background:transparent;border:0;border-bottom:3px solid #2cb6bb;box-shadow:none;color:#fff;outline:none;padding-bottom:11px}
.qly-search-form input.qly-search-form__input::placeholder{color:#fff;opacity:1}
.qly-search-form input.qly-search-form__input::-webkit-search-decoration,
.qly-search-form input.qly-search-form__input::-webkit-search-cancel-button{-webkit-appearance:none}
.qly-search-form button.qly-search-form__submit{flex:0 0 auto;appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;cursor:pointer;width:56px;height:48px;border-radius:8px;background:#fff url("../img/search/loupe-bleue.png") no-repeat center;background-size:auto 26px;transition:transform .15s ease,background-color .15s ease}
.qly-search-form button.qly-search-form__submit:hover{background-color:#fff;transform:scale(1.06)}
.qly-search-form button.qly-search-form__submit:focus-visible{outline:2px solid #F29100;outline-offset:3px}

/* =========================
   Responsive popup
   ========================= */
@media (max-width:768px){
  .qly-search-overlay::before{width:230px;height:278px;left:-130px;top:70px}
  .qly-search-overlay::after{width:280px;height:385px;right:-150px;bottom:-140px}
  .qly-search-overlay__close{top:20px;right:20px;width:36px;height:36px}
  .qly-search-overlay__panel{margin-top:clamp(90px,16vh,150px);padding:0 20px}
  .qly-search-overlay__title{font-size:28px;margin-bottom:44px;gap:10px}
  .qly-search-overlay__title-deco{width:24px;height:24px;margin-top:0}
  .qly-search-form{gap:16px}
  .qly-search-form input.qly-search-form__input{font-size:20px;padding-bottom:10px}
  .qly-search-form input.qly-search-form__input:focus{padding-bottom:9px}
  .qly-search-form button.qly-search-form__submit{width:48px;height:42px;background-size:auto 22px}
}