/* ============================================================
   search-overlay.css — refonte de l'overlay de recherche v2
   Charge APRES gold.min.css et mega-menu.css : override par cascade.
   Rollback = retirer la <link> dans include_header_general.tpl.
   Regle d'or (voir en-tete de mega-menu.css) : gold.min.css contient des
   selecteurs `html.light .so-*` en (0,2,x) — toute declaration de couleur
   qui doit battre l'existant est doublee `.X, html.light .X` et la valeur
   vient d'un token --mm-* (re-assigne par html.light dans mega-menu.css).
   ============================================================ */

/* ── Panneau desktop ─────────────────────────────────────── */
@media (min-width:1021px){
  .so-overlay{max-height:min(75vh,640px)}
}

/* Backdrop transparent sur desktop : simple click-catcher, plus d'assombrissement */
@media (min-width:1021px){
  .so-backdrop,html.light .so-backdrop{background:transparent}
}

/* Fenetre morte 1021-1024px : neutralise le layout recherche legacy KVS
   (.search absolute pleine largeur + bouton .search-js) qui cohabitait
   avec le nouveau systeme (pivot 1020/1021). */
@media (min-width:1021px) and (max-width:1024px){
  .search{position:static !important;width:auto !important;max-width:none !important;
    justify-content:center !important;left:auto !important}
  .btn-mobile.search-js{display:none !important}
}

/* ── Corps / sections ────────────────────────────────────── */
#soSearchBody{padding:12px 16px 0}
#soDefault{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}
/* display:flex sur l'ID battrait l'attribut hidden (UA) : l'autocomplete doit REMPLACER le hub */
#soDefault[hidden]{display:none}
#soResults{padding-bottom:0}
.so-section-title,html.light .so-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:var(--mm-txt-dim,#8a8a8a)
}
.so-sec-action,html.light .so-sec-action{
  font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--mm-gold-text,#D4A853);background:none;border:none;padding:0;
  cursor:pointer;font-family:inherit;text-decoration:none
}
.so-sec-action:hover{text-decoration:underline}

/* ── Chips tendances ─────────────────────────────────────── */
.so-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.so-tag{display:inline-flex;align-items:center;gap:6px}
.so-tag--trend svg{width:12px;height:12px;stroke:var(--mm-gold-text,#D4A853);flex-shrink:0}

/* ── Grille categories (cartes clonees du mega menu) ─────── */
.so-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.so-cats .trending-cat-card{margin:0;width:auto;flex:none;display:block}

/* ── Rail modeles (etat vide) ────────────────────────────── */
.so-mrail{display:flex;gap:14px;overflow-x:auto;padding:2px 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.so-mrail::-webkit-scrollbar{display:none}
.so-mchip{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.so-mavatar,html.light .so-mavatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;
  border:2px solid transparent;background:var(--mm-skel,rgba(255,255,255,.05));
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s
}
.so-mchip:hover .so-mavatar{border-color:#D4A853}
.so-mavatar img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.so-mavatar--txt,html.light .so-mavatar--txt{
  font-size:14px;font-weight:500;color:var(--mm-txt-dim,#8a8a8a);text-transform:uppercase
}
.so-mname,html.light .so-mname{
  max-width:100%;font-size:11px;font-weight:500;color:var(--mm-txt,#d0d0d0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.so-mchip:hover .so-mname{color:var(--mm-gold-text,#D4A853)}

/* ── Lignes (recentes + resultats) ───────────────────────── */
.so-rrow{position:relative}
.so-row,html.light .so-row{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 12px;
  border-radius:8px;font-size:14px;color:var(--mm-txt,#d0d0d0);
  text-decoration:none;cursor:pointer
}
.so-row:hover,html.light .so-row:hover{background:var(--mm-bar-hover,rgba(255,255,255,.06))}
.so-row--active,html.light .so-row--active{background:var(--mm-bar-hover,rgba(255,255,255,.06))}
.so-ico{display:flex;flex-shrink:0}
.so-ico svg{width:14px;height:14px;stroke:var(--mm-ico,#8e8e8e)}
.so-row-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-row-txt b,html.light .so-row-txt b{font-weight:600;color:var(--mm-txt-strong,#fff)}
.so-rrow .so-row{padding-right:36px}
.so-row-del,html.light .so-row-del{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:6px;cursor:pointer;color:var(--mm-txt-dim,#8a8a8a);padding:0
}
.so-row-del:hover{background:var(--mm-bar-hover,rgba(255,255,255,.06));color:var(--mm-txt-strong,#fff)}
.so-row-del svg{width:12px;height:12px;stroke:currentColor}

/* Colonne texte des lignes entites */
.so-row-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.so-row-col .so-row-txt{flex:none}
.so-meta,html.light .so-meta{font-size:11px;color:var(--mm-txt-dim,#8a8a8a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-meta--gold,html.light .so-meta--gold{color:var(--mm-gold-text,#D4A853)}

/* Vignettes */
.so-cthumb,.so-vthumb{position:relative;flex:none;border-radius:6px;overflow:hidden;
  background:var(--thumb-placeholder-bg,#070707)}
.so-cthumb{width:64px;height:36px}
.so-vthumb{width:68px;height:38px}
.so-cthumb img,.so-vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.so-vdur{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.8);color:#fff;
  font-size:10px;font-weight:500;line-height:1;padding:2px 4px;border-radius:4px}
.so-mava36{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--mm-skel,rgba(255,255,255,.05));
  display:flex;align-items:center;justify-content:center}
.so-mava36 img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.so-mava36.so-mavatar--txt{font-size:12px}

/* Groupes de resultats (l'ID bat le .so-section-title:nth-child(n+2) de gold.min) */
#soResults .so-section-title{margin:14px 0 8px}
#soResults .so-section-title:first-child{margin-top:2px}

/* Aucun resultat */
.so-noresults,html.light .so-noresults{
  padding:14px 12px;font-size:13px;font-style:italic;color:var(--mm-txt-dim,#8a8a8a)
}

/* Voir tous les resultats — sticky en bas du panneau */
.so-all,html.light .so-all{
  position:sticky;bottom:0;display:flex;align-items:center;gap:10px;
  min-height:44px;margin:8px -16px 0;padding:4px 16px;
  border-top:1px solid var(--mm-hairline,rgba(255,255,255,.06));
  font-size:13px;font-weight:500;color:var(--mm-txt-strong,#fff);text-decoration:none;cursor:pointer
}
.so-all{background:var(--main-background)}
html.light .so-all{background:#fff}
.so-all svg{width:14px;height:14px;stroke:var(--mm-gold-text,#D4A853);flex-shrink:0}
.so-all:hover,.so-all.so-row--active{background:#161616}
html.light .so-all:hover,html.light .so-all.so-row--active{background:#f5f5f5}
.so-all span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Barre de chargement (2px or, indeterminee) ──────────── */
.so-loadbar{height:2px;flex-shrink:0;position:relative;overflow:hidden}
.so-loadbar[hidden]{display:none}
.so-loadbar::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:#D4A853;animation:soLoad .9s linear infinite}
@keyframes soLoad{to{left:100%}}

/* ── Header mobile de l'overlay ──────────────────────────── */
.so-back{width:40px;height:40px}
.so-form{position:relative;align-items:center;gap:6px}
.so-input{padding-right:36px;-webkit-appearance:none;appearance:none}
.so-input::-webkit-search-cancel-button,.so-input::-webkit-search-decoration{
  -webkit-appearance:none;appearance:none;display:none}
.so-clear,html.light .so-clear{
  position:absolute;right:46px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--mm-txt-dim,#8a8a8a);padding:0
}
.so-clear[hidden]{display:none}
.so-clear svg{width:14px;height:14px;stroke:currentColor}
.so-submit,html.light .so-submit{
  width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--mm-txt-dim,#8a8a8a);padding:0
}
.so-submit svg{width:18px;height:18px;stroke:currentColor}

/* ── Badge clavier "/" dans le champ desktop ─────────────── */
.so-slash,html.light .so-slash{
  flex:none;align-self:center;width:20px;height:20px;line-height:18px;text-align:center;
  border:1px solid var(--mm-border,rgba(255,255,255,.10));border-radius:4px;
  font-size:11px;color:var(--mm-txt-dim,#8a8a8a);pointer-events:none
}
.search-inner.so-suggested .so-slash{visibility:hidden}
@media (max-width:1020px){.so-slash{display:none}}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:1020px){
  .so-row{min-height:48px}
  .so-rrow .so-row{padding-right:48px}
  .so-rrow .so-row-del{width:44px;height:44px;right:0}
  /* Chips : rail horizontal 1 ligne */
  .so-chiprow{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .so-chiprow::-webkit-scrollbar{display:none}
  .so-tag{flex:none}
  /* Rail modeles : avatars plus grands, zone tactile */
  .so-mrail{margin:0 -16px;padding:2px 16px 6px}
  .so-mchip{width:72px}
  .so-mavatar{width:56px;height:56px}
  /* Grille categories : 3 colonnes compactes */
  .so-cats{gap:8px}
  .so-cats .trending-cat-info{padding:8px}
  /* Voir tout : zone tactile + safe area */
  .so-all{min-height:48px}
  /* Videos : 2 lignes max geree cote JS */
}

/* Safe areas (viewport-fit=cover actif — pattern shorts.css) */
@media (max-width:1020px){
  .so-header,html.light .so-header{height:auto;min-height:48px}
}
@supports (padding:max(0px)){
  @media (max-width:1020px){
    .so-header{padding-top:calc(8px + env(safe-area-inset-top))}
    #soSearchBody{padding-bottom:calc(0px + env(safe-area-inset-bottom))}
    .so-all{padding-bottom:calc(4px + env(safe-area-inset-bottom))}
    .so-ai-input-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  }
}

@media (max-width:379px){
  .so-cats{grid-template-columns:repeat(2,1fr)}
}

/* ── Scrollbar du panneau (pattern .mm-panel) ────────────── */
.so-body{scrollbar-width:thin;scrollbar-color:var(--mm-border,rgba(255,255,255,.10)) transparent}
.so-body::-webkit-scrollbar{width:8px}
.so-body::-webkit-scrollbar-thumb{background:var(--mm-border,rgba(255,255,255,.10));border-radius:4px}
.so-body::-webkit-scrollbar-track{background:transparent}

/* ── Focus clavier (pattern mega-menu.css §2.12) ─────────── */
.so-row:focus-visible,.so-tag:focus-visible,.so-mchip:focus-visible,
.so-all:focus-visible,.so-back:focus-visible,.so-tab:focus-visible,
.so-clear:focus-visible,.so-submit:focus-visible,.so-row-del:focus-visible,
.so-sec-action:focus-visible,.mh-search:focus-visible{
  outline:2px solid var(--mm-gold,#D4A853);outline-offset:2px}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .so-overlay,.so-backdrop,.so-mavatar,.search-inner{transition:none !important}
  .so-loadbar::after{animation:none !important;left:0;width:100%}
  .mh-ph-track,.mh-ph-ai-marquee,.desk-ai-badge,.mh-ai-badge,
  .desk-ai-badge svg,.mh-ai-badge svg{animation:none !important}
  .desk-ai-badge::before,.mh-ai-badge::before{animation:none !important}
}