/* =================================================================
   MAISON HUBERT — Page « Thés »
   Filtre par variété (cercles) · grille complète des références · modale fiche
   S'appuie sur maison-hubert.css (tokens, header, footer, .ph, .reveal,
   .btn, .page-hero…). Reprend le composant .bean-card de la page Cafés.
   ================================================================= */

/* ---------- État de nav actif ---------- */
.nav-link.active{ opacity:1; }
.nav-link.active::after{ transform:scaleX(1); }

/* ===============================================================
   PAGE HERO
   =============================================================== */
.page-hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--espresso); color:var(--cream); overflow:clip;
  padding-block:clamp(120px,16vh,180px);
}
.page-hero .hero-ph{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-ph .ph{ position:absolute; inset:0; border:0; }
.page-hero .wrap{ position:relative; z-index:2; width:100%; }
.page-hero-inner{ max-width:820px; margin-inline:auto; text-align:center; }
.page-hero .display{ margin:.18em 0 0; line-height:.92; font-size:clamp(3rem, min(11vw,12vh), 8rem); }
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) 0 0; max-width:80ch; color:var(--cream-soft); }
.page-hero .ph-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-lt);
}
.page-hero .ph-meta .sep{ width:5px; height:5px; border-radius:50%; background:var(--bronze); opacity:.6; }
.page-hero .hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; margin-top:clamp(1.8rem,4vh,2.8rem); }
.page-hero-inner .lead{ margin-inline:auto; }
.page-hero .hero-ph .ph::after{ display:none; } /* pas de label placeholder derrière le contenu centré */

/* titre animé lettre par lettre (même effet que les autres pages) */
.page-hero .display .ltr{ display:inline; }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > .display{ animation:none; }
  .page-hero .display .ltr{
    opacity:0; will-change:opacity, filter;
    animation:ltrReveal .9s var(--ease) both;
    animation-delay:calc(var(--i) * 65ms + .14s);
  }
  @keyframes ltrReveal{
    0%   { opacity:0; filter:blur(12px); text-shadow:0 0 22px rgba(224,177,107,.9); }
    55%  { opacity:1; filter:blur(0);    text-shadow:0 0 10px rgba(224,177,107,.45); }
    100% { opacity:1; filter:blur(0);    text-shadow:none; }
  }
}
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > *{ animation:heroIn .85s var(--ease) both; }
  .page-hero-inner > *:nth-child(1){ animation-delay:.05s; }
  .page-hero-inner > *:nth-child(2){ animation-delay:.13s; }
  .page-hero-inner > *:nth-child(3){ animation-delay:.21s; }
  .page-hero-inner > *:nth-child(4){ animation-delay:.29s; }
  .page-hero-inner > *:nth-child(5){ animation-delay:.37s; }
}

/* ===============================================================
   VIGNETTE THÉ — composant commun (repris de .bean-card)
   =============================================================== */
.bean-card{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; color:inherit; font:inherit;
}
.bean-photo{
  position:relative; display:block; width:100%; aspect-ratio:1;
  border-radius:50%; overflow:hidden;
}
.bean-photo .ph{
  position:absolute; inset:0; border-radius:50%;
  transition:transform 1s var(--ease);
}
.bean-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  /* Léger contour olive autour des produits (rappel DA). */
  border:2px solid rgba(196,193,47,.6);
  box-shadow:0 0 0 0 rgba(196,193,47,0); pointer-events:none;
  transition:border-color .4s var(--ease), box-shadow .45s var(--ease), transform .5s var(--ease);
}
.bean-card:hover .bean-photo .ph{ transform:scale(1.07); }
.bean-card:hover .bean-photo::after{ border-color:var(--olive); box-shadow:0 0 0 7px rgba(196,193,47,.1); }
.bean-card:focus-visible{ outline:none; }
.bean-card:focus-visible .bean-photo::after{ border-color:var(--bronze-lt); box-shadow:0 0 0 4px rgba(224,177,107,.35); }

/* overlay « Infos » au survol — indique que la vignette est cliquable */
.bean-photo .bean-hover{
  position:absolute; inset:0; z-index:3; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55em;
  background:rgba(255,255,255,.55); color:var(--espresso);
  opacity:0; transform:scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}
.bean-photo .bean-hover svg{ width:30px; height:30px; }
.bean-card:hover .bean-photo .bean-hover,
.bean-card:focus-visible .bean-photo .bean-hover{ opacity:1; transform:none; }

.bean-region{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze-deep); margin-top:1.1rem;
}
.bean-name{
  font-family:var(--serif); font-weight:500; font-size:1.32rem; line-height:1.12;
  letter-spacing:.01em; margin-top:.28rem; text-wrap:balance;
}
.bean-note{
  font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-soft);
  margin-top:.4rem; max-width:24ch;
}
.bean-flag{
  position:absolute; z-index:2; left:50%; bottom:9%; transform:translateX(-50%);
  font-family:var(--body); font-weight:600; font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap;
  background:var(--bronze-lt); color:var(--espresso); padding:.42em .9em; border-radius:40px;
  box-shadow:0 8px 20px -10px rgba(20,12,8,.7);
}

/* ===============================================================
   BARRE DE FILTRE — cercles par variété
   =============================================================== */
.filter{ background:var(--paper); padding-block:clamp(54px,7vw,96px) clamp(40px,5vw,72px); }
.filter-head{ text-align:center; margin:0 auto clamp(34px,4.5vw,58px); }
.filter-head .overline{ justify-content:center; }
.filter-head .overline::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.filter-head h2{ margin:.4em 0 0; }
.filter-head .lead{ margin:1rem auto 0; max-width:56ch; }

.filter-bar{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap:clamp(20px,3.4vw,58px);
}
.filter-chip{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:1rem; cursor:pointer;
  color:inherit; font:inherit; width:clamp(108px,12vw,148px);
}
.fc-photo{
  position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  transition:transform .45s var(--ease);
}
.fc-photo .ph{ position:absolute; inset:0; border-radius:50%; transition:transform 1s var(--ease); }
.fc-photo::before{ /* scrim pour la lisibilité du label */
  content:""; position:absolute; inset:0; z-index:1; border-radius:50%;
  background:linear-gradient(0deg, rgba(20,12,8,.62) 0%, rgba(20,12,8,.12) 42%, transparent 70%);
  transition:background .4s var(--ease);
}
.fc-photo::after{ /* anneau */
  content:""; position:absolute; inset:0; z-index:2; border-radius:50%;
  border:1px solid rgba(80,43,28,.18);
  box-shadow:0 0 0 0 rgba(196,193,47,0);
  transition:border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.fc-label{
  position:absolute; z-index:3; left:50%; bottom:13%; transform:translateX(-50%);
  font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; color:var(--cream);
  text-shadow:0 2px 10px rgba(15,9,5,.65);
}
.fc-count{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); transition:color .35s;
}

/* survol */
.filter-chip:hover .fc-photo{ transform:translateY(-4px); }
.filter-chip:hover .fc-photo .ph{ transform:scale(1.07); }
.filter-chip:hover .fc-photo::after{ border-color:var(--olive); box-shadow:0 0 0 6px rgba(196,193,47,.1); }
.filter-chip:focus-visible{ outline:none; }
.filter-chip:focus-visible .fc-photo::after{ border-color:var(--bronze-lt); box-shadow:0 0 0 4px rgba(224,177,107,.35); }

/* actif */
.filter-chip.active .fc-photo::after{ border-color:var(--olive); border-width:2px; box-shadow:0 0 0 5px rgba(196,193,47,.16); }
.filter-chip.active .fc-photo::before{ background:linear-gradient(0deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,.06) 45%, transparent 72%); }
.filter-chip.active .fc-count{ color:var(--bronze-deep); }

/* atténuation des non-sélectionnés quand un filtre est posé */
.filter-bar.has-active .filter-chip:not(.active) .fc-photo{ opacity:.62; }
.filter-bar.has-active .filter-chip:not(.active):hover .fc-photo{ opacity:1; }

/* ===============================================================
   GRILLE DES RÉFÉRENCES
   =============================================================== */
.refs{ background:var(--ivory); padding-block:clamp(56px,7vw,110px); }
.refs-bar{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:16px 24px; margin-bottom:clamp(36px,4.5vw,62px);
  padding-bottom:clamp(20px,2.5vw,30px); border-bottom:1px solid var(--line-dark);
}
.refs-bar .rb-title{ display:flex; align-items:baseline; gap:.7em; }
.refs-bar h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.2rem);
  text-transform:uppercase; letter-spacing:.05em; line-height:1; }
.refs-bar .rb-count{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--bronze-deep); }
.refs-reset{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55em;
  background:transparent; border:1px solid var(--line-dark); border-radius:40px;
  font-family:var(--body); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); padding:.7em 1.2em; transition:background .3s, color .3s, border-color .3s, opacity .35s, transform .35s;
}
.refs-reset svg{ width:14px; height:14px; }
.refs-reset:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.refs-reset[hidden]{ display:none; }

.refs-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(36px,4vw,64px) clamp(24px,2.8vw,48px);
}
.refs-grid .bean-card{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
.refs-grid .bean-card.hide{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .refs-grid .bean-card.show-anim{ animation:teaIn .55s var(--ease) both; }
}
@keyframes teaIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

.refs-empty{
  text-align:center; color:var(--ink-soft); font-family:var(--serif); font-style:italic;
  font-size:1.2rem; padding:clamp(40px,6vw,80px) 0;
}
.refs-empty[hidden]{ display:none; }

/* pagination (16 références par page) */
.refs-pager{ display:flex; justify-content:center; align-items:center; gap:18px; margin-top:clamp(36px,4.5vw,60px); }
.refs-pager[hidden]{ display:none; }
.refs-page{ font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); min-width:4.5em; text-align:center; }

/* ===============================================================
   MODALE FICHE THÉ
   =============================================================== */
.bean-modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.bean-modal[hidden]{ display:none; }
.bm-veil{
  position:absolute; inset:0; background:rgba(15,9,5,.74);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--ease);
}
.bean-modal.open .bm-veil{ opacity:1; }
.bm-card{
  position:relative; z-index:2; width:min(880px,100%); max-height:90svh; overflow:auto;
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px,3vw,48px);
  background:var(--ivory); color:var(--ink); border:1px solid rgba(80,43,28,.18);
  border-radius:3px; padding:clamp(28px,3vw,48px);
  box-shadow:0 50px 120px -40px rgba(15,9,5,.8);
  transform:translateY(18px) scale(.98); opacity:0;
  transition:transform .5s var(--ease), opacity .45s var(--ease);
}
.bean-modal.open .bm-card{ transform:none; opacity:1; }
.bm-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-dark);
  background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.bm-close:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); transform:rotate(90deg); }
.bm-close svg{ width:18px; height:18px; }

.bm-photo{ align-self:center; }
.bm-photo .ph{ display:block; width:100%; aspect-ratio:1; border-radius:50%; position:relative; overflow:hidden; }
#bmPhoto.has-img{ background:var(--cream); }
#bmPhoto.has-img::after{ display:none; }
#bmPhoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bm-body{ display:flex; flex-direction:column; min-width:0; }
.bm-region{ color:var(--bronze-deep); }
.bm-body h3{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,3.4vw,2.8rem); text-transform:uppercase; letter-spacing:.03em; line-height:1.02; margin:.5rem 0 0; }
.bm-desc{ font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.5; color:var(--ink-soft); margin:1rem 0 0; }
.bm-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 30px;
  margin:clamp(1.4rem,3vw,2rem) 0 0; border-top:1px solid var(--line-dark); padding-top:clamp(1.2rem,2vw,1.8rem);
}
.bm-spec span{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep); margin-bottom:6px; }
.bm-spec strong{ font-family:var(--serif); font-weight:500; font-size:1.16rem; line-height:1.25; }
.bm-meter{ display:flex; gap:6px; align-items:center; margin-top:3px; }
.bm-meter span{ width:26px; height:7px; border-radius:2px; background:rgba(80,43,28,.16); }
.bm-meter span.on{ background:var(--olive-deep); }
.bm-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:auto; padding-top:clamp(1.6rem,3vw,2.2rem); }
.bm-foot .btn{ --bg:var(--olive); --fg:var(--espresso); }

/* notes aromatiques (chips) */
.bm-notes{ margin-top:clamp(1.3rem,2.6vw,1.9rem); }
.bm-notes[hidden]{ display:none; }
.bm-notes-lbl{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-deep); margin-bottom:10px; }
.bm-notes-list{ display:flex; flex-wrap:wrap; gap:8px; }
.bm-notes-list .chip{ font-family:var(--serif); font-size:1rem; color:var(--ink); background:var(--ivory); border:1px solid var(--line-dark); border-radius:40px; padding:.32em 1em; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .refs-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .refs-grid{ grid-template-columns:repeat(2,1fr); }
  .bm-card{ grid-template-columns:1fr; max-width:480px; }
  .bm-photo{ width:min(220px,60%); margin-inline:auto; }
}
@media(max-width:560px){
  /* « Par variété » en carrousel horizontal : une seule rangée défilable, bord
     à bord, au lieu de 3 rangées de pastilles → plus lisible sur téléphone. */
  .filter-bar{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:16px; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter); padding-block:4px;
    scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter);
  }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex:0 0 auto; width:clamp(94px,28vw,112px); scroll-snap-align:start; }
  .refs-grid{ grid-template-columns:repeat(2,1fr); gap:30px 18px; }
  .bm-specs{ grid-template-columns:1fr; gap:14px; }
}

/* ===============================================================
   SERVICES À THÉS — présentation (3 photos)
   =============================================================== */
.tea-services{ background:var(--paper); }
.ts-head{ max-width:820px; margin-inline:auto; text-align:center; }
.ts-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px);
  margin-top:clamp(36px,4.5vw,60px);
}
.ts-card{
  margin:0; border-radius:3px; overflow:hidden;
  border:1px solid var(--line-dark); background:var(--ivory);
}
.ts-card img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; transition:transform 1s var(--ease); }
.ts-card:hover img{ transform:scale(1.04); }
/* Sur téléphone : carrousel horizontal pleine largeur (1 photo bien lisible + aperçu). */
@media(max-width:560px){
  .ts-grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
    gap:14px; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .ts-grid::-webkit-scrollbar{ display:none; }
  .ts-card{ flex:0 0 74%; scroll-snap-align:center; }
}