/* css/v4/autocompletion.css — panneau d'autocomplétion de la barre de recherche
   Cf docs/superpowers/specs/2026-06-07-autocompletion-recherche-design.md
   Cf maquette : github/prototypes/autocompletion-recherche.html (itération 4) */

:root {
  --cc-ac-shadow: 0 8px 22px rgba(36,26,18,.10);
  --cc-ac-hover:  var(--c-bg-soft);
}

/* Garde-fou : <template id="cc-ac-icons"> (inc/templates/v4/header.inc.php) est le
   premier <template> du dépôt. Un navigateur qui ne le connaît pas en rend les
   enfants en clair : 5 pictos parasites au bas du header, sur tout le site/blog. */
#cc-ac-icons { display: none; }

.cc-ac-anchor { position: relative; }

.cc-ac-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--cc-ac-shadow);
  border: 1px solid var(--clr-border);
  /* pt6b (recette 0727) — le panneau defile DESORMAIS TOUT SEUL.
     Avant : overflow:hidden et aucune max-height, donc un panneau plus haut que
     l'ecran avait son pied « Voir tous les resultats » hors champ (mesure : 565px
     de panneau pour 695px de viewport, pied a 700px = deja coupe en haut de page).
     Le seul moyen d'atteindre le bas etait de faire defiler la PAGE, ce qui masquait
     l'en-tete et remontait le panneau de 147px — mecanisme supprime par le pt6.
     La max-height est MESUREE en JS (place reelle sous la barre, recalculee au
     resize) et jamais chiffree ici : une valeur devinee rognerait la derniere ligne
     sans le moindre signal. overflow-x reste cache pour preserver les coins arrondis.
     overscroll-behavior:contain = arrive en bas de la liste, la molette ne « deborde »
     pas sur la page (sinon elle declencherait la fermeture au scroll). */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 1000;
  font-family: var(--ff-body);
  color: var(--clr-text);
}
.cc-ac-panel[hidden] { display: none; }

.cc-ac-sec { padding: 6px 0 8px; }
.cc-ac-sec + .cc-ac-sec { border-top: 1px solid #f0ebde; }

.cc-ac-sec-h {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px 5px;
  font-family: var(--ff-title);
  font-size: 10.5px; font-weight: 600;
  color: #9a8e78; letter-spacing: 1.1px; text-transform: uppercase;
}
.cc-ac-sec-h .count { font-weight: 500; color: #b9b9b9; letter-spacing: 0; font-family: var(--ff-body); font-size: 11px; }
.cc-ac-sec-h .head-action { font-weight: 500; color: var(--clr-text); letter-spacing: 0; text-transform: none; font-family: var(--ff-body); font-size: 11.5px; text-decoration: none; }
.cc-ac-sec-h .head-action:hover { text-decoration: underline; }

.cc-ac-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: background .12s;
}
/* pt11 (retours 28/07) — le survol ne s'applique QU'À un pointeur qui survole.
   Sur un écran tactile, :hover se pose au toucher et y RESTE jusqu'au toucher suivant :
   « selon comment j'effleure avec mon doigt, la ligne devient beige » (Thomas). Ce n'est
   pas propre à cette liste, c'est la mécanique de :hover en tactile — d'où le même
   traitement sur les autres listes du site (annuaire, tiroir panier, récap tunnel…).
   ⚠️ .is-active reste HORS de la media query : c'est l'état de navigation au CLAVIER
   (flèches), pas un survol — il doit se voir sur tous les pointeurs. */
.cc-ac-row.is-active { background: var(--cc-ac-hover); }
@media (hover: hover) {
  .cc-ac-row:hover { background: var(--cc-ac-hover); }
}
.cc-ac-row.is-active { box-shadow: inset 3px 0 0 var(--clr-ink); }

/* Ligne vin + accessoire — MÊME gabarit visuel (thumb | corps | aside prix/badge).
   L'accessoire (.cc-ac-acc) réutilise ces règles : sans elles, la ligne accessoire
   n'héritait que du flex de base et retombait « cassée » (prix collé au nom, thumb
   sans cadre) — recette Thomas 05/07. */
.cc-ac-vin .cc-ac-thumb, .cc-ac-acc .cc-ac-thumb {
  width: 44px; height: 60px; flex-shrink: 0;
  background: #fafafa; border-radius: var(--radius-s); overflow: hidden;
  box-shadow: inset 0 0 0 1px #ececec;
  display: flex; align-items: center; justify-content: center;
}
.cc-ac-vin .cc-ac-thumb img, .cc-ac-acc .cc-ac-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cc-ac-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cc-ac-vin .cc-ac-body, .cc-ac-acc .cc-ac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-ac-vin .cuvee, .cc-ac-acc .cuvee {
  font-family: var(--ff-title); font-size: 14px; font-weight: 600; color: var(--clr-text-dark);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-ac-vin .meta, .cc-ac-acc .meta {
  font-size: 12px; color: var(--clr-text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-ac-vin .meta em, .cc-ac-acc .meta em { font-style: italic; }
.cc-ac-vin .meta .sep, .cc-ac-acc .meta .sep { margin: 0 5px; opacity: .4; }
.cc-ac-vin .cc-ac-aside, .cc-ac-acc .cc-ac-aside { text-align: right; flex-shrink: 0; }
.cc-ac-vin .prix, .cc-ac-acc .prix { font-family: var(--ff-title); font-size: 14px; font-weight: 700; color: var(--clr-or-text); line-height: 1.1; }
/* pt5 (retours 0727) — les mentions valorisantes passent en MÉDAILLON, gabarit repris
   de .wine-card .wc-tag (site.css) pour que le panneau et le catalogue soient la même
   chose : rond crème, liseré or, picto encre. Le panneau étant une LISTE comme le
   catalogue, on reprend sa taille (26/15) et non celle de la fiche vin (32/18).
   Le libellé n'est plus visible qu'au survol (title), d'où l'aria-label côté JS. */
.cc-ac-vin .cc-ac-medal, .cc-ac-acc .cc-ac-medal {
  width: 26px; height: 26px; border-radius: 50%; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clr-bg-light); border: 1.5px solid var(--clr-or);
  box-shadow: 0 1px 2px rgba(138,98,36,.22);
}
.cc-ac-vin .cc-ac-medal .cc-i, .cc-ac-acc .cc-ac-medal .cc-i {
  width: 15px; height: 15px; stroke: var(--clr-ink);
}
/* « Épuisé » garde une chip TEXTE : seule mention qui bloque un achat, et le panneau n'a
   pas de bouton pour la porter. Décision 27/07 — ne pas la convertir en médaillon. */
.cc-ac-vin .badge, .cc-ac-acc .badge { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border: 1px solid #e0d6c2; border-radius: var(--radius-s); margin-top: 4px; color: var(--clr-ink); }
/* #6 20260715 : badge « Épuisé » — état d'indisponibilité, teinte neutre distincte
   (même palette que la pastille épuisé du catalogue, cf site.css .wc-tag--epuise). */
.cc-ac-vin .badge-epuise, .cc-ac-acc .badge-epuise { background: #f2f0ea; border-color: #cfc8ba; color: #8c857a; }

/* Ligne producteur */
/* #8 revue Poune 20/06 : médaillon producteur = grappe de raisin (icône accueil)
   sur fond greige doux + liseré doré, au lieu du cercle encre + initiales. */
.cc-ac-prod .cc-ac-thumb { width: 34px; height: 34px; background: #f4efe6; color: var(--clr-ink); border-radius: var(--radius-s); box-shadow: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-ac-prod .cc-ac-grape { width: 20px; height: 20px; }
.cc-ac-prod .nom { font-family: var(--ff-title); font-size: 13.5px; font-weight: 600; color: var(--clr-text-dark); }
.cc-ac-prod .sub { font-size: 11.5px; color: var(--clr-text); }
.cc-ac-prod .arrow { margin-left: auto; color: #bbb; font-size: 16px; }

/* Chips appellations */
.cc-ac-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.cc-ac-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid #e0d6c2; border-radius: var(--radius-s);
  background: #fff; font-size: 12.5px; color: var(--clr-ink);
  text-decoration: none; cursor: pointer; transition: border-color .12s;
}
@media (hover: hover) { .cc-ac-chip:hover { border-color: var(--clr-ink); background: #fff; } }   /* pt13d — cf. pt11-survol-tactile */
.cc-ac-chip .c-count { font-size: 11px; color: #a89878; }

/* Surlignage du match (gras simple, pas de fond) */
.cc-ac-hl { font-weight: 700; background: none; color: inherit; padding: 0; }

/* Pied : « Voir tous les résultats » */
.cc-ac-foot {
  display: flex; align-items: center; padding: 11px 16px;
  background: #faf6ec; border-top: 1px solid #f0ebde; font-size: 12.5px; gap: 14px;
}
.cc-ac-foot .cta { font-family: var(--ff-title); font-weight: 600; color: var(--clr-ink); text-decoration: none; }
.cc-ac-foot .cta:hover { text-decoration: underline; }
/* pt4 (retours 0727) — .kbd (badge « Entrée ») supprimé avec son markup
   (js/v4/autocompletion.js). .kbd-help partait avec : aucun code ne l'a jamais
   émis, il était orphelin avant ce lot. */

/* Empty state */
.cc-ac-empty { padding: 26px 22px; text-align: center; }
.cc-ac-empty .ic { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: var(--clr-bg-light); color: var(--clr-text); display: flex; align-items: center; justify-content: center; }
.cc-ac-empty p { margin: 0 0 4px; font-family: var(--ff-title); font-size: 14px; color: var(--clr-text-dark); }
.cc-ac-empty .hint { font-family: var(--ff-body); font-size: 12.5px; color: var(--clr-text); font-weight: 400; }
.cc-ac-empty .alt { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* Recherches récentes */
.cc-ac-recents { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.cc-ac-recents .r-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 11px; border: 1px solid #ece3d0; border-radius: var(--radius-s); background: #fff; font-size: 12.5px; color: var(--clr-ink); cursor: pointer; text-decoration: none; }
@media (hover: hover) { .cc-ac-recents .r-chip:hover { border-color: #ddd2bd; } }   /* pt13d — cf. pt11-survol-tactile */
.cc-ac-recents .r-chip .x { width: auto; height: auto; border-radius: 0; background: none; color: #b3a489; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* Populaires */
.cc-ac-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 4px 16px 10px; }
.cc-ac-pop .p-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 13px; color: var(--clr-text-dark); text-decoration: none; border-radius: var(--radius-s); }
/* #13 (retours 22/06-2) : plus de pavé beige au survol — le texte s'assombrit (encre). */
@media (hover: hover) { .cc-ac-pop .p-row:hover { color: var(--clr-ink); } }   /* pt13d — cf. pt11-survol-tactile */
.cc-ac-pop .p-num { font-family: var(--ff-title); font-size: 12px; font-weight: 700; color: var(--clr-ink); width: 14px; text-align: center; }

/* #14 — Catalogue : la barre de filtres (.cc-filtres-bar, position:sticky z:500)
   peint par-dessus le panneau de recherche (.cc-ac-panel, absolute z:1000) malgré
   un z-index supérieur — quirk d'empilement Chromium non corrigeable par z-index ni
   compositing (vérifié au navigateur : ni bump panneau, ni baisse barre, ni
   translateZ/isolation/position:static n'y changent rien ; seul retirer la barre du
   rendu fonctionne). Tant que le panneau est ouvert (classe posée par
   autocompletion.js, desktop), on masque la barre : le panneau la recouvre déjà
   visuellement. La règle ne matche que sur catalogue (seul endroit où la barre existe). */
body.cc-ac-open .cc-filtres-bar { visibility: hidden; }

/* ===== Mobile : intégration dans l'overlay .search-scrim existant ===== */
.search-scrim .cc-ac-panel {
  /* Plein écran : pas d'ombre/bord, sticky en flux */
  position: static; border: none; box-shadow: none; border-radius: 0;
  /* pt6b — l'overlay mobile porte DÉJÀ son propre défilement (.se-body) : on
     annule le plafond et le scroll internes hérités du desktop, sinon on
     obtiendrait deux surfaces de défilement imbriquées. La max-height posée en
     JS est elle aussi neutralisée (le JS ne la pose qu'en desktop, ceci est le
     filet si l'ordre d'attachement changeait). */
  max-height: none !important; overflow: visible;
}
.search-scrim .cc-ac-pop { grid-template-columns: 1fr; }
.search-scrim .cc-ac-row { padding: 12px 16px; min-height: 44px; }
.search-scrim .cc-ac-vin .cc-ac-aside, .search-scrim .cc-ac-acc .cc-ac-aside { width: 72px; }
.search-scrim .cc-ac-foot {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e9e3d3;
  padding: 12px 16px; justify-content: center; box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}
.search-scrim .cc-ac-foot .cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--clr-ink); color: #fff; padding: 13px 22px; border-radius: var(--radius-s);
  font-size: 14px; width: 100%; max-width: 360px;
}
/* pt4 (retours 0727) — le masquage mobile de .kbd/.kbd-help n'a plus d'objet :
   les deux classes ont disparu du markup et de la feuille (cf. plus haut). */