/* Recherche (lot 7) - reprise de docs/i4s-recherche.html : loupe mobile, panneau de l'en-tête et ses suggestions,
   suggestions du champ de l'accueil. Chargée sur toutes les pages, après menu-mobile.css (la loupe mobile se place
   avant le bouton de menu). */

/* ---------- loupe mobile ---------- */
.sq-m{display:none}
@media (max-width:1140px){.sq-m{display:inline-flex;width:52px;height:52px;align-self:center;margin-left:auto}
  .sq-m + .burger{margin-left:8px}}

/* ---------- panneau de recherche ---------- */
.sq{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  border-bottom:4px solid var(--blue);box-shadow:0 26px 44px -30px rgba(21,42,56,.55);z-index:210;
  max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.sq:not([hidden]){animation:mmIn .26s cubic-bezier(.22,.72,.28,1)}
.sq__in{padding-block:clamp(20px,2.6vw,34px);display:grid;gap:20px}
.sq__f{position:relative;display:flex;align-items:center}
.sq__f > .ic{position:absolute;left:22px;font-size:1.25rem;color:var(--blue);pointer-events:none}
.sq__f input{width:100%;height:68px;border:2px solid var(--navy);border-radius:0;background:#fff;
  padding:0 70px 0 60px;font-family:var(--ui);font-weight:700;font-size:clamp(1.05rem,1.8vw,1.3rem);
  color:var(--navy)}
.sq__f input::placeholder{font-weight:500;color:var(--mute)}
.sq__f input:focus{outline:0;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.sq__f input::-webkit-search-cancel-button{display:none}
.sq__x{position:absolute;right:10px;width:48px;height:48px;display:grid;place-items:center;border:0;
  background:transparent;color:var(--navy);cursor:pointer;font-size:1.1rem}
.sq__x:hover{background:var(--wash);color:var(--blue)}
.sq__h{font-family:var(--ui);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:10px}
.sq__q{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sq__q a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);
  color:var(--navy);font-family:var(--ui);font-weight:700;font-size:.88rem;transition:.14s}
.sq__q a .ic{color:var(--blue)}
.sq__q a:hover{border-color:var(--blue);background:var(--wash);text-decoration:none}
.sq__l{list-style:none;border-top:2px solid var(--navy)}
.sq__l li{border-bottom:1px solid var(--line)}
.sq__l a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 16px;
  padding:12px 12px 12px 0;color:var(--navy);transition:background .12s,padding .12s}
.sq__l a:hover,.sq__l a[aria-selected="true"]{background:var(--wash);padding-left:10px;text-decoration:none}
.sq__l .tile{flex:0 0 auto;width:44px;height:44px;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:.95rem;grid-row:span 2}
.sq__l .tile .ic{width:1em;height:1em}
.sq__l b{font-family:var(--ui);font-weight:800;font-size:1rem;line-height:1.25}
.sq__l b mark{background:transparent;color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--sky)}
.sq__l small{grid-column:2;font-size:.84rem;color:var(--body)}
.sq__l em{grid-row:1/3;grid-column:3;font-style:normal;font-family:var(--ui);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:4px 8px}
.sq__n{font-size:.95rem;color:var(--body);padding:8px 0}
.sq__all{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-family:var(--ui);font-weight:800;
  font-size:.9rem;color:var(--blue);border-bottom:2px solid var(--sky);padding-bottom:3px}
.sq__all:hover{text-decoration:none;color:var(--blue-d)}
@media (max-width:640px){
  .sq__l em{display:none}
  .sq__l a{grid-template-columns:44px minmax(0,1fr)}
}

/* ---------- suggestions du champ de l'accueil : elles s'ouvrent au-dessus du champ, dans la photo ---------- */
.hero__f{position:relative}
.hero__f input::-webkit-search-cancel-button{display:none}
.hero__sug{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;z-index:5;background:#fff;
  border-top:4px solid var(--blue);box-shadow:0 26px 44px -30px rgba(9,18,26,.7);text-align:left;
  padding:6px 18px 16px;max-height:min(360px,50vh);overflow-y:auto;overscroll-behavior:contain}
.hero__sug .sq__l{border-top:0}
.hero__sug .sq__all{margin-top:12px}