/* ─────────────────────────────────────────────────────────────
   B.R.M — recherche instantanée
   Couche plein écran ouverte par la loupe du header.
   Reprend les jetons et les classes de site.css (.prod, .btn…).
   Aucune règle ne sort de la couche : tout est préfixé .rch.
   ───────────────────────────────────────────────────────────── */

/* La page ne défile plus derrière la couche */
html.rch-fige, html.rch-fige body{ overflow:hidden }

.rch{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column }
.rch[hidden]{ display:none }

/* Fond sombre translucide */
.rch-fond{
  position:absolute; inset:0; background:rgba(11,11,13,.66);
  backdrop-filter:blur(5px) saturate(1.2); -webkit-backdrop-filter:blur(5px) saturate(1.2);
  opacity:0; transition:opacity .2s var(--ease,ease);
}

/* Panneau clair posé en haut */
.rch-panneau{
  position:relative; width:100%; background:var(--papier,#fff); color:var(--encre,#111114);
  /* On laisse toujours voir un bandeau de fond : c'est la zone
     de sortie au clic. */
  max-height:88dvh; display:flex; flex-direction:column;
  border-bottom:1px solid var(--trait,#E3E0DB);
  box-shadow:0 22px 60px rgba(11,11,13,.22);
  transform:translateY(-14px); opacity:0;
  transition:transform .24s var(--ease,ease), opacity .2s var(--ease,ease);
}
.rch.ouverte .rch-fond{ opacity:1 }
.rch.ouverte .rch-panneau{ transform:none; opacity:1 }

/* ── Barre de saisie ─────────────────────────────────────── */
.rch-haut{
  flex:0 0 auto; border-bottom:1px solid var(--trait,#E3E0DB);
  display:flex; align-items:center; gap:clamp(12px,2vw,22px);
  padding-inline:var(--gouttiere,24px); min-height:var(--header,78px);
  padding-block:14px;
  max-width:var(--max,1520px); margin-inline:auto; width:100%;
}
.rch-loupe{ width:22px; height:22px; flex:0 0 auto; color:var(--encre-doux,#6E727B) }
.rch-champ{
  flex:1 1 auto; min-width:0; border:0; background:none; color:var(--encre,#111114);
  font-family:var(--display,Impact,sans-serif); text-transform:uppercase;
  font-size:clamp(1.35rem,3.6vw,2.5rem); line-height:1.12; letter-spacing:.015em;
  padding:6px 0; -webkit-appearance:none; appearance:none;
}
.rch-champ::placeholder{ color:var(--encre-tres-doux,#9AA0A8) }
.rch-champ:focus{ outline:0 }
.rch-champ::-webkit-search-cancel-button{ display:none }
.rch-vider,.rch-croix{
  flex:0 0 auto; font-size:var(--micro,.68rem); letter-spacing:var(--piste,.22em);
  text-transform:uppercase; font-weight:600; color:var(--encre-doux,#6E727B);
  transition:color .25s var(--ease,ease);
}
.rch-vider:hover,.rch-croix:hover{ color:var(--laque,#C8102E) }
.rch-croix{ display:inline-flex; align-items:center; gap:9px; border-left:1px solid var(--trait,#E3E0DB); padding-left:clamp(12px,2vw,22px) }
.rch-croix span{ font-size:1.05rem; line-height:1 }
.rch-vider[hidden]{ display:none }

/* ── Corps défilant ──────────────────────────────────────── */
.rch-corps{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding-inline:var(--gouttiere,24px); padding-block:clamp(22px,3vw,38px) clamp(34px,5vw,60px);
  max-width:var(--max,1520px); margin-inline:auto; width:100%;
}
.rch-titre{
  font-size:var(--micro,.68rem); letter-spacing:var(--piste,.22em); text-transform:uppercase;
  font-weight:600; color:var(--encre-tres-doux,#9AA0A8); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.rch-titre::after{ content:''; flex:1 1 auto; height:1px; background:var(--trait,#E3E0DB) }
.rch-titre b{ color:var(--laque,#C8102E); font-weight:600 }

/* Recherches fréquentes */
.rch-puces{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,4vw,46px) }
.rch-puce{
  border:1px solid var(--trait,#E3E0DB); padding:10px 17px;
  font-size:var(--micro,.68rem); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--encre,#111114); background:none;
  transition:color .25s var(--ease,ease), border-color .25s var(--ease,ease), background .25s var(--ease,ease);
}
.rch-puce:hover,.rch-puce:focus-visible{ color:#fff; background:var(--encre,#111114); border-color:var(--encre,#111114) }

/* ── Les raccourcis ──────────────────────────────────────── */
/* Collections, univers, pages de service : ce que la recherche trouve
   qui n'est pas un produit. Une ligne par destination, le genre à
   droite — on lit la liste en diagonale. */
.rch-raccourcis{ margin-bottom:clamp(24px,3vw,38px) }
.rch-raccourcis[hidden]{ display:none }
/* Le filet est porté par les LIGNES, pas par le fond de la grille : à
   trois destinations sur deux colonnes, un fond gris laissait une
   demi-case vide en bout de rangée — une case qui ne mène nulle part. */
.rch-dests{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--trait,#E3E0DB); border-left:1px solid var(--trait,#E3E0DB);
}
.rch-dest{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--papier,#fff); padding:14px 18px; min-height:56px;
  border-right:1px solid var(--trait,#E3E0DB); border-bottom:1px solid var(--trait,#E3E0DB);
  transition:background .2s var(--ease,ease), color .2s var(--ease,ease);
}
.rch-dest-titre{
  font-family:var(--display,Impact,sans-serif); font-weight:500;
  text-transform:uppercase; letter-spacing:.03em; font-size:1rem; line-height:1.15;
}
.rch-dest-genre{
  flex:0 0 auto; font-size:var(--micro,.68rem); letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--encre-tres-doux,#9AA0A8);
}
.rch-dest:hover,.rch-dest:focus-visible,.rch-dest.actif{ background:var(--creme,#F4F2EF) }
.rch-dest:hover .rch-dest-titre,.rch-dest.actif .rch-dest-titre{ color:var(--laque,#C8102E) }
.rch-dest.actif{ box-shadow:inset 2px 0 0 var(--laque,#C8102E) }
@media(max-width:760px){
  .rch-dests{ grid-template-columns:minmax(0,1fr) }
  .rch-dest{ padding:13px 15px }
  .rch-dest-titre{ font-size:.94rem }
}

/* ── Ce qui s'en approche ────────────────────────────────── */
/* Le rattrapage d'une recherche sans résultat : les corrections de
   frappe, puis les articles qui répondent à une partie de la demande.
   Il vient APRÈS le message d'échec, il ne le remplace pas. */
.rch-approche{ padding-top:clamp(20px,2.6vw,32px) }
.rch-approche[hidden]{ display:none }
.rch-approche .rch-puces{ margin-bottom:clamp(24px,3vw,38px) }

/* ── Grille de vignettes ─────────────────────────────────── */
/* Cinq par ligne au plus : au-delà, les vignettes deviennent des
   timbres-poste sur un écran large. */
.rch-grille{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px) clamp(14px,1.8vw,26px);
}
.rch-grille[hidden]{ display:none }
.rch-item{ outline:0 }
.rch-item .prod-img{ background:var(--creme,#F4F2EF); transition:background .25s var(--ease,ease) }
.rch-item .prod-marque{ margin-top:15px }
.rch-item .prod-nom{ font-size:.98rem }
.rch-item .prod-prix{ margin-top:9px }
/* Élément actif au clavier */
.rch-item.actif .prod-img{ background:var(--sable,#EBE8E3); box-shadow:inset 0 0 0 1px var(--laque,#C8102E) }
.rch-item.actif .prod-nom{ color:var(--laque,#C8102E) }
.rch-item:focus-visible .prod-img{ box-shadow:inset 0 0 0 1px var(--laque,#C8102E) }

/* ── Pages de résultats ─────────────────────────────────── */
.rch-pages{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  padding-block:clamp(26px,3.2vw,44px) 0;
}
.rch-pages[hidden],.rch-pages:empty{ display:none }
.rch-pages button{
  min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--trait,#E3E0DB); background:#fff;
  font-size:.76rem; font-weight:500; color:var(--encre-doux,#6E727B);
  transition:.22s var(--ease,ease);
}
.rch-pages button:hover:not(:disabled){ border-color:var(--encre,#111114); color:var(--encre,#111114) }
.rch-pages button.on{ background:var(--encre,#111114); border-color:var(--encre,#111114); color:#fff }
.rch-pages button:disabled{ opacity:.3; cursor:not-allowed }
.rch-pages .rch-pages-ecart{ color:var(--encre-tres-doux,#9AA0A8); padding:0 2px }

/* Aucun résultat */
.rch-vide{ padding-block:clamp(26px,5vw,60px); max-width:56ch }
.rch-vide h3{
  font-family:var(--display,Impact,sans-serif); text-transform:uppercase;
  font-size:var(--t-m,1.4rem); line-height:1.1; margin-bottom:12px;
}
.rch-vide p{ color:var(--encre-doux,#6E727B); font-weight:300; margin-bottom:24px }
.rch-vide[hidden]{ display:none }

/* ── Paliers de la grille ────────────────────────────────── */
@media(max-width:1180px){
  .rch-grille{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media(max-width:900px){
  .rch-grille{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* ── 390 px ──────────────────────────────────────────────── */
@media(max-width:640px){
  .rch-panneau{ height:100dvh; max-height:100dvh }
  .rch-haut{ gap:12px; padding-block:10px }
  .rch-loupe{ width:18px; height:18px }
  .rch-croix{ padding-left:12px }
  .rch-croix b{ display:none }
  .rch-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px }
  .rch-item .prod-nom{ font-size:.86rem }
  .rch-item .prod-marque{ font-size:0.66rem; margin-top:11px }
  .rch-item .prod-prix{ font-size:.82rem }
}
@media(max-width:420px){
  .rch-champ{ font-size:1.25rem }
}

/* ── Le doigt ────────────────────────────────────────────── */
/* La croix de fermeture faisait 29×17 : on ne ferme pas une couche
   plein écran avec une cible de cette taille. On agrandit les zones,
   pas les dessins. */
@media(pointer:coarse){
  .rch-croix,.rch-vider{ min-height:44px; min-width:44px; justify-content:center }
  .rch-puce{ padding:13px 17px }
  .rch-pages button{ min-width:44px; height:44px }
}

/* Sur un téléphone, la marque d'une vignette était à 8,8 px.
   Couché, le même téléphone fait 844 px : la condition le suit. */
@media(max-width:640px),(orientation:landscape) and (max-height:520px){
  .rch-item .prod-marque{ font-size:.82rem; letter-spacing:.16em }
  .rch-item .prod-nom{ font-size:.92rem }
  .rch-item .prod-prix{ font-size:.86rem }
}

@media(prefers-reduced-motion:reduce){
  .rch-fond,.rch-panneau{ transition:none }
}

/* ═══════════════════════════════════════════════════════════
   LA PAGE DE RÉSULTATS — recherche.html
   ═══════════════════════════════════════════════════════════
   La couche ne laisse aucune adresse derrière elle : une recherche
   ne pouvait ni se garder, ni s'envoyer. La page porte la même
   recherche, la même grille et la même barre de pages ; elle ne
   redéfinit que ce qui lui est propre.
   ═══════════════════════════════════════════════════════════ */
/* `section` porte le rythme vertical du site — jusqu'à 132 px en haut
   ET en bas. Ajouté au rembourrage du `.wrap`, cela faisait deux cents
   pixels de vide avant le champ de saisie. On remet la section à plat,
   et c'est le `.wrap` qui décide seul. */
.rchp{ background:#fff; padding-block:0 }
.rchp > .wrap{ padding-block:clamp(18px,2.4vw,30px) clamp(52px,7vw,96px) }

/* Le header est flottant et cette page ne s'ouvre pas sur un visuel :
   elle doit réserver sa hauteur. `.entete-reserve`, que site.js pose ici,
   arrive AVANT `.ariane` dans la feuille commune, à spécificité égale —
   c'est donc `.ariane` qui l'emporte, et le fil d'Ariane passait sous
   l'en-tête. On le dit une fois de plus fort, pour cette page. */
.ariane.rchp-ariane{ padding-top:calc(var(--header,78px) + 16px) }

.rchp-sur{
  font-size:var(--micro,.68rem); letter-spacing:var(--piste,.22em); text-transform:uppercase;
  font-weight:600; color:var(--laque,#C8102E); margin-bottom:10px;
}
.rchp-titre{
  font-family:var(--display,Impact,sans-serif); font-weight:600;
  font-size:clamp(1.8rem,4vw,3rem); text-transform:uppercase; line-height:1.02;
  letter-spacing:.02em; margin-bottom:clamp(18px,2.4vw,28px);
}

/* La barre de saisie : une seule ligne, posée sur un trait. */
.rchp-form{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,18px);
  border-bottom:1px solid var(--encre,#111114);
  padding-block:10px; margin-bottom:clamp(26px,3.5vw,44px);
}
.rchp-loupe{ width:22px; height:22px; flex:0 0 auto; color:var(--encre-doux,#6E727B) }
.rchp-champ{
  flex:1 1 auto; min-width:0; border:0; background:none; color:var(--encre,#111114);
  font-family:var(--display,Impact,sans-serif); text-transform:uppercase;
  font-size:clamp(1.3rem,3.2vw,2.2rem); line-height:1.14; letter-spacing:.015em;
  padding:6px 0; -webkit-appearance:none; appearance:none;
}
.rchp-champ::placeholder{ color:var(--encre-tres-doux,#9AA0A8) }
.rchp-champ:focus{ outline:0 }
.rchp-champ::-webkit-search-cancel-button{ display:none }
.rchp-ok{
  flex:0 0 auto; border:1px solid var(--encre,#111114); background:none;
  padding:12px 20px; font-size:var(--micro,.68rem); letter-spacing:var(--piste,.22em);
  text-transform:uppercase; font-weight:600; color:var(--encre,#111114);
  transition:color .25s var(--ease,ease), background .25s var(--ease,ease);
}
.rchp-ok:hover,.rchp-ok:focus-visible{ background:var(--encre,#111114); color:#fff }

.rchp-puces{ margin-bottom:clamp(26px,3.5vw,44px) }
.rchp-grille[hidden]{ display:none }
.rchp-vide[hidden]{ display:none }
.rchp-pages[hidden],.rchp-pages:empty{ display:none }

/* ── Le doigt ────────────────────────────────────────────── */
@media(pointer:coarse){
  .rchp-ok{ min-height:44px }
  /* Le champ ne faisait que 35 px de haut : c'est la cible principale
     de la page, elle doit se viser du pouce. On agrandit la zone, pas
     la lettre. */
  .rchp-champ{ min-height:44px; padding-block:10px }
  .ariane.rchp-ariane a{ min-height:44px; display:inline-flex; align-items:center }
}

/* ── 390 px ──────────────────────────────────────────────── */
@media(max-width:640px){
  /* Le bouton passe sous le champ : à cette largeur, les deux côte à
     côte ne laissent plus de place pour lire ce qu'on tape. */
  .rchp-form{ flex-wrap:wrap; row-gap:12px }
  .rchp-champ{ font-size:1.25rem; flex:1 1 60% }
  .rchp-ok{ width:100%; order:3 }
}

/* Le lien vers la page, depuis la couche. */
.rch-pleine{ padding-top:clamp(22px,3vw,34px); text-align:center }
.rch-pleine[hidden]{ display:none }
.rch-pleine a{
  font-size:var(--micro,.68rem); letter-spacing:var(--piste,.22em);
  text-transform:uppercase; font-weight:600; color:var(--encre,#111114);
  border-bottom:1px solid var(--trait,#E3E0DB); padding-bottom:4px;
  transition:color .25s var(--ease,ease), border-color .25s var(--ease,ease);
  display:inline-block;
}
.rch-pleine a:hover,.rch-pleine a:focus-visible{ color:var(--laque,#C8102E); border-color:var(--laque,#C8102E) }
@media(pointer:coarse){
  .rch-pleine a{ min-height:44px; display:inline-flex; align-items:center }
}