/* ===== Le panneau de recherche =====
   Meme typographie que le reste du site : Jost, noir, capitales espacees pour
   les intitules. Le panneau descend du haut plutot que de surgir au centre :
   il prolonge l'en-tete d'ou on l'a ouvert.

   Sur telephone il occupe tout l'ecran — la liste des resultats a besoin de
   la place, et un panneau flottant sur 390px ne laisse voir que trois lignes.
   Sur ordinateur il reste une boite centree, largeur limitee : une ligne de
   resultat qui traverse 1920px devient illisible.
*/
.rcr{position:fixed;inset:0;z-index:2000;display:none}
.rcr--on{display:block}

.rcr__fondo{position:absolute;inset:0;background:rgba(0,0,0,.45)}

.rcr__box{position:relative;margin:0 auto;background:#fff;
  max-width:720px;max-height:100%;display:flex;flex-direction:column;
  border-radius:3px;
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}

.rcr__testa{display:flex;align-items:center;gap:12px;padding:0 20px;
  border-bottom:1px solid #e6e6e6;flex:0 0 auto}
.rcr__lente{width:20px;height:20px;flex:0 0 auto;color:#111}
/* Pas de bordure au champ, et surtout pas de contour au focus : Safari en
   dessine un noir, net et carre, qui coupe le panneau en deux. Le champ se
   distingue par un fond a peine plus clair que le blanc — on voit ou taper
   sans qu'un trait vienne durcir l'ensemble. */
/* `.rcr .rcr__in` et `!important` sur la bordure : le theme pose
   `border:1px solid #000` sur tous les `input`, avec assez de specificite
   pour gagner. Mesure avant correction : le fond gris s'appliquait bien,
   mais la bordure noire restait — d'ou le carre dur autour du champ. */
.rcr .rcr__in{flex:1 1 auto;min-width:0;height:52px;padding:0 14px;
  border:none !important;outline:none !important;box-shadow:none !important;
  font-family:inherit;font-size:16px;color:#111;
  background:#f6f6f4;border-radius:3px !important;
  -webkit-appearance:none;appearance:none}
.rcr .rcr__in:focus,
.rcr .rcr__in:focus-visible{outline:none !important;box-shadow:none !important;
  border:none !important;background:#f1f1ee}
.rcr__in::placeholder{color:#9a9a9a}
/* la croix native du champ `search` double celle du panneau */
.rcr__in::-webkit-search-cancel-button{-webkit-appearance:none}
.rcr__x{flex:0 0 auto;width:44px;height:44px;border:none;background:none;
  font-size:26px;line-height:1;color:#111;cursor:pointer;font-family:inherit}

.rcr__conta{margin:0;padding:14px 20px 0;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#767676;flex:0 0 auto}
.rcr__conta:empty{padding:0}

.rcr__out{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 20px 24px;flex:1 1 auto}

.rcr__card{display:flex;align-items:center;gap:14px;padding:10px 0;
  border-bottom:1px solid #f0f0ee;text-decoration:none;color:inherit}
.rcr__card:last-of-type{border-bottom:none}
.rcr__foto{flex:0 0 auto;width:64px;height:64px;background:#f5f4ef;border-radius:2px;
  overflow:hidden;display:block}
.rcr__foto img{width:100%;height:100%;object-fit:cover;display:block}
.rcr__testo{display:flex;flex-direction:column;gap:3px;min-width:0}
.rcr__nome{font-size:13.5px;line-height:1.35;letter-spacing:.02em;color:#111;
  text-transform:uppercase}
.rcr__prezzo{font-size:13px;color:#111;font-weight:500}
/* Le prix plein, barre, a la suite du prix remise. Il reste discret :
   dans une liste de resultats, c'est le prix a payer qu'on lit. */
.rcr__prezzo-barre{margin-left:7px;color:#8a8a8a;font-weight:400}

.rcr__vuoto{margin:26px 0;font-size:14.5px;line-height:1.7;color:#555;
  text-align:center}

/* --- telephone : plein ecran --- */
@media(max-width:767px){
  .rcr__box{max-width:none;height:100%}
  .rcr__testa{padding:0 15px}
  .rcr__in{height:58px;font-size:16px}   /* 16px : sous cette taille, iOS
                                            zoome sur le champ au focus */
  .rcr__out{padding:8px 15px 20px}
  .rcr__conta{padding:12px 15px 0}
}

/* --- ordinateur : boite centree, descendue du haut --- */
@media(min-width:768px){
  .rcr__box{margin-top:8vh;max-height:80vh;
    box-shadow:0 18px 60px rgba(0,0,0,.18)}
}

@media(prefers-reduced-motion:reduce){.rcr__box{transition:none}}
