/* ============================================================
   SYRPA Manchette — recherche globale (loupe header + overlay)
   Chargé sur TOUT le site : autonome, ne dépend pas de manchette.css.
   ============================================================ */

/* — Bouton loupe dans le header Hello Plus —
   !important : neutralise les styles de bouton du kit Elementor / Hello Plus
   (fond, bordure, ombre) qui s'appliquent sinon à tout <button> du header. */
button.sm-loupe{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:44px!important;height:44px!important;min-width:0!important;padding:0!important;margin:0 14px 0 20px!important;background:transparent!important;border:1.5px solid #141110!important;border-radius:50%!important;box-shadow:none!important;line-height:1;cursor:pointer;transition:background-color .2s ease,transform .2s ease}
button.sm-loupe svg{display:block;width:18px!important;height:18px!important;stroke:#141110!important;stroke-width:2;fill:none!important;stroke-linecap:round;transition:stroke .2s ease}
button.sm-loupe:hover{background:#141110!important;transform:scale(1.06)}
button.sm-loupe:hover svg{stroke:#F7F2EA!important}
button.sm-loupe:focus-visible{outline:3px solid #C2330F;outline-offset:3px}
@media(max-width:1024px){button.sm-loupe{width:36px!important;height:36px!important;margin:0 8px 0 0!important}button.sm-loupe svg{width:15px!important;height:15px!important}}

/* — Overlay de recherche plein écran — */
.sm-overlay{position:fixed;inset:0;z-index:100000;background:#F7F2EA;color:#141110;font-family:'Sora','Avenir Next',system-ui,sans-serif;overflow-y:auto;-webkit-font-smoothing:antialiased}
.sm-overlay[hidden]{display:none}
.sm-overlay *,.sm-overlay *::before,.sm-overlay *::after{box-sizing:border-box}
.sm-overlay__inner{max-width:1100px;margin-inline:auto;padding:clamp(24px,4vw,48px) clamp(20px,4vw,64px) 64px}
.sm-overlay__bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sm-overlay__kicker{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
button.sm-overlay__close{flex:none;display:grid!important;place-items:center;width:48px!important;height:48px!important;min-width:0!important;padding:0!important;margin:0!important;background:transparent!important;border:1.5px solid #141110!important;border-radius:50%!important;box-shadow:none!important;cursor:pointer;transition:background-color .2s ease,transform .2s ease}
button.sm-overlay__close svg{width:16px!important;height:16px!important;stroke:#141110!important;fill:none!important;stroke-width:2;stroke-linecap:round;transition:stroke .2s ease}
button.sm-overlay__close:hover{background:#141110!important;transform:rotate(90deg)}
button.sm-overlay__close:hover svg{stroke:#F7F2EA!important}
.sm-overlay__close:focus-visible{outline:3px solid #C2330F;outline-offset:3px}
.sm-overlay__rule{height:1px;background:#141110;margin-top:16px}
.sm-overlay__title{margin:clamp(32px,6vw,64px) 0 0;font-size:clamp(3rem,8vw,6.5rem);font-weight:800;line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.sm-overlay__title .dot{color:#FF5534}
.sm-overlay__hint{margin:24px 0 0;font-size:13px;color:#66605A}
.sm-overlay__hint kbd{font-family:inherit;font-size:11px;font-weight:700;border:1px solid #141110;border-radius:6px;padding:2px 7px;background:#FFFFFF}

/* — Formulaire + suggestions dans l'overlay (copie scopée du style Manchette) — */
.sm-overlay .sm-search-form{position:relative;display:flex;gap:14px;flex-wrap:wrap;max-width:640px;margin-top:clamp(28px,4vw,44px)}
.sm-overlay .sm-search-form input[type="search"]{flex:1;min-width:240px;height:58px;padding:0 24px;margin:0;font:inherit;font-size:16px;color:#141110;background:#FFFFFF;border:2px solid #141110;border-radius:999px;box-shadow:6px 6px 0 #141110;transition:box-shadow .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.sm-overlay .sm-search-form input[type="search"]::placeholder{color:#66605A;opacity:1}
.sm-overlay .sm-search-form input[type="search"]:focus{outline:3px solid #C2330F;outline-offset:3px}
.sm-overlay .sm-search-form input[type="search"]:focus,.sm-overlay .sm-search-form input[type="search"]:hover{box-shadow:3px 3px 0 #141110;transform:translate(3px,3px)}
.sm-overlay .sm-search-form .btn--orange{display:inline-flex;align-items:center;gap:8px;height:58px;padding:16px 28px;font:inherit;font-size:16px;font-weight:700;color:#141110;background:#FF5534;border:0;border-radius:999px;cursor:pointer;text-decoration:none;transition:background-color .3s ease}
.sm-overlay .sm-search-form .btn--orange:hover{background:#EE451F}
.sm-overlay .sm-suggest{position:absolute;top:calc(100% + 14px);left:0;right:0;z-index:5;list-style:none;margin:0;padding:8px;background:#FFFFFF;border:2px solid #141110;border-radius:20px;box-shadow:8px 8px 0 #141110;max-height:420px;overflow-y:auto}
.sm-overlay .sm-suggest li{margin:0}
.sm-overlay .sm-suggest a{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.35;color:#141110;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.sm-overlay .sm-suggest a mark{background:none;color:#C2330F;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sm-overlay .sm-suggest .sug-type{flex:none;margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#66605A}
.sm-overlay .sm-suggest li[aria-selected="true"] a,.sm-overlay .sm-suggest a:hover{background:#FF5534;color:#141110}
.sm-overlay .sm-suggest li[aria-selected="true"] .sug-type,.sm-overlay .sm-suggest a:hover .sug-type{color:#141110}
.sm-overlay .sm-suggest li[aria-selected="true"] a mark,.sm-overlay .sm-suggest a:hover mark{color:inherit}
.sm-overlay .sm-suggest .sug-all a{font-weight:700;color:#C2330F;justify-content:center}
.sm-overlay .sm-suggest .sug-all a:hover,.sm-overlay .sm-suggest .sug-all[aria-selected="true"] a{color:#141110}
.sm-overlay .sm-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* — Entrée en scène — */
@media(prefers-reduced-motion:no-preference){
  .sm-overlay:not([hidden]){animation:sm-ov-in .3s cubic-bezier(.16,1,.3,1)}
  .sm-overlay:not([hidden]) .sm-overlay__title{animation:sm-ov-up .5s cubic-bezier(.16,1,.3,1)}
  @keyframes sm-ov-in{from{opacity:0}to{opacity:1}}
  @keyframes sm-ov-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media(max-width:767px){
  .sm-overlay .sm-search-form .btn--orange{width:100%;justify-content:center}
  .sm-overlay .sm-suggest{max-height:300px}
}