/* Orly Num : recherche dans le site
   Utilise les couleurs et les polices de style.css (thème clair et sombre inclus). */

/* ===== Barre de recherche dans le menu ===== */
.search{position:relative;order:10;flex:1 0 100%;min-width:0;padding-bottom:.15rem}
.search-box{display:flex;align-items:center;gap:.15rem;min-height:2.75rem;padding:0 .3rem 0 .2rem;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;transition:border-color .15s,box-shadow .15s,background .15s}
.search-box:hover{border-color:var(--field)}
.search-box:focus-within{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 28%,transparent)}
.search-btn,.search-clear{flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer;padding:0}
.search-btn:hover,.search-clear:hover{background:color-mix(in srgb,var(--blue) 14%,transparent)}
.search-btn .ico{width:1.3rem;height:1.3rem}
.search-clear{color:var(--muted)}
.search-clear .ico{width:1.1rem;height:1.1rem}
.search input[type="search"]{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;line-height:1.3;padding:.5rem .35rem;outline:none;-webkit-appearance:none;appearance:none}
.search input[type="search"]::placeholder{color:var(--muted);opacity:1}
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}

/* Sur grand écran, la barre prend place dans la première ligne du menu.
   L'en-tête est alors un peu plus large pour que les cinq liens restent sur une ligne. */
@media (min-width:95rem){
  .site-header .bar{max-width:75rem}
  .search{order:0;flex:0 1 14.5rem;min-width:9rem;padding-bottom:0}
  .bar .nav{min-width:0}
  .bar .nav a{padding-inline:.6rem;white-space:nowrap}
}

/* ===== Suggestions ===== */
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:60;margin:0;padding:.4rem;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-height:min(70vh,26rem);overflow:auto}
@media (min-width:70rem){.search-suggest{left:auto;right:0;width:min(30rem,calc(100vw - 2rem))}}
.search-suggest li{margin:0}
.search-suggest a{display:flex;flex-direction:column;gap:.1rem;padding:.65rem .8rem;border-radius:12px;color:var(--ink);text-decoration:none}
.search-suggest li.is-active a,.search-suggest a:hover{background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
.sg-title{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.sg-where{font-size:.875rem;color:var(--muted)}
.sg-all a{flex-direction:row;justify-content:space-between;color:var(--blue);font-weight:700;margin-top:.2rem;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
.sg-empty{padding:.8rem;color:var(--muted)}
.sg-hint{display:block;font-size:.875rem;margin-top:.15rem}

/* ===== Mise en évidence des mots recherchés ===== */
.search-panel mark,.search-suggest mark{background:var(--blue-soft);background:color-mix(in srgb,var(--accent) 24%,transparent);color:inherit;border-radius:3px;padding:0 .08em;font-weight:inherit}

/* ===== Panneau de résultats ===== */
html.search-open{overflow:hidden}
.search-panel{position:fixed;top:var(--sp-top,4.5rem);right:0;bottom:0;left:0;z-index:40;overflow:auto;overscroll-behavior:contain;background:var(--bg);animation:sp-in .18s ease both}
.search-panel[hidden]{display:none!important}
@keyframes sp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sp-wrap{max-width:52rem;padding-block:1.5rem 3rem}
.sp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.sp-head h2{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;overflow-wrap:anywhere;min-width:0}
.sp-head h2:focus{outline:none}
.sp-close{min-height:2.75rem;padding:.4rem 1.1rem}
.sp-status{margin:.9rem 0 0;color:var(--muted)}
.sp-note{margin:1rem 0 0;padding:.8rem 1rem;border:1px solid var(--warn);background:var(--warn-soft);color:var(--ink);border-radius:12px;font-size:1rem;display:flex;align-items:center;gap:.7rem}
.sp-note[hidden]{display:none}
.sp-spin{flex:none;width:1.1rem;height:1.1rem;border:2.5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:sp-spin .8s linear infinite}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.9rem}
.sp-item{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;transition:border-color .15s,box-shadow .15s}
@media (hover:hover){.sp-item:hover{border-color:var(--blue);box-shadow:var(--shadow)}}
.sp-item:focus-within{border-color:var(--blue)}
.sp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:0 0 .35rem;font-size:.875rem;color:var(--muted)}
.sp-badge{font-weight:700;padding:.1rem .65rem;border-radius:999px;background:var(--blue-soft);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.sp-item h3{font-size:1.25rem;line-height:1.25;overflow-wrap:anywhere}
.sp-item h3 a{color:var(--blue);text-decoration:none}
.sp-item h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.sp-item h3 a:hover{text-decoration:underline}
.sp-item h3 a:focus-visible{outline:none}
.sp-item h3 a:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.sp-snip{margin:.5rem 0 0;color:var(--ink);font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
.sp-empty{margin-top:1.5rem;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.sp-empty[hidden]{display:none}
.sp-empty-t{font:700 1.25rem/1.3 var(--font-display);overflow-wrap:anywhere}
.sp-tips{margin:.9rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem;color:var(--muted)}
.sp-empty-s{margin:1.25rem 0 .6rem;color:var(--muted)}
.sp-quick{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}

/* ===== Contenu trouvé : repère visuel de quelques secondes ===== */
.srch-flash{outline:3px solid var(--accent);outline-offset:6px;border-radius:var(--radius);transition:outline-color .4s}

@media (prefers-reduced-motion:reduce){
  .search-panel,.sp-spin{animation:none}
}