/* =================================================================
   MAISON HUBERT — Page « Confiseries »
   Hero centré/animé (comme Cafés · Thés) · 3 familles, chacune avec
   une présentation différente (vignettes rondes · panneaux éditoriaux
   · index numéroté) · modale fiche produit (6 champs).
   S'appuie sur maison-hubert.css (tokens, header, footer, .ph, .reveal,
   .btn, .overline, .link-ar).
   ================================================================= */

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

/* ===============================================================
   PAGE HERO  (centré + titre animé lettre par lettre)
   =============================================================== */
.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:none; margin-inline:auto; text-align:center; }
.page-hero .display{ margin:.18em 0 0; line-height:.92; font-size:clamp(2.4rem, min(12vw,12vh), 8rem); white-space:nowrap; }
/* Sur mobile/tablette, on autorise le retour à la ligne du titre : en « nowrap »
   il débordait à droite (titre coupé + défilement horizontal de toute la page).
   Desktop (≥1025px) : reste sur une seule ligne. */
@media(max-width:1024px){ .page-hero .display{ white-space:normal; } }
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) auto 0; max-width:96ch; color:var(--cream-soft); }
.page-hero .hero-ph .ph::after{ display:none; }

/* 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; }
  }
  .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; }
}

/* ===============================================================
   ENVELOPPE FAMILLES
   =============================================================== */
.fams{ background:var(--ivory); padding-block:clamp(40px,5vw,84px); }
.fam{ margin-top:0; }
/* séparateur entre familles (filet + ancre laiton) */
.fam-sep{ margin-block:clamp(30px,4.5vw,64px); color:var(--bronze-deep); }

/* En-tête de famille — titre laiton centré + texte (comme les autres pages) */
.fam-head{ margin:0 auto clamp(28px,3.4vw,48px); }
.fam-bar{
  margin-bottom:clamp(38px,4.6vw,64px);
  padding-bottom:clamp(20px,2.5vw,30px); border-bottom:1px solid var(--line-dark);
}
.fb-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px; }
.fb-num{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--bronze-deep); line-height:1; }
.fb-head h3{
  font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,3.1vw,2.5rem);
  text-transform:uppercase; letter-spacing:.05em; line-height:1; margin:0;
}
.fb-count{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bronze-deep); margin-left:auto;
}
.fb-intro{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1.6vw,1.32rem);
  line-height:1.5; color:var(--ink-soft); max-width:64ch; margin:1rem 0 0;
}

/* révélation en escalier (commun) */
@media (prefers-reduced-motion: no-preference){
  .reveal > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in > *{ opacity:1; transform:none; }
  .reveal.in > *:nth-child(2){ transition-delay:.06s; }
  .reveal.in > *:nth-child(3){ transition-delay:.12s; }
  .reveal.in > *:nth-child(4){ transition-delay:.18s; }
  .reveal.in > *:nth-child(5){ transition-delay:.24s; }
}

/* ===============================================================
   SPÉCIALITÉS RÉGIONALES — grille « feature » (comme Boîtes & coffrets)
   =============================================================== */
.coffret-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr; gap:clamp(16px,1.8vw,26px);
}
.coffret-card{
  -webkit-appearance:none; appearance:none; background:none; padding:0;
  position:relative; display:block; overflow:hidden; border-radius:3px;
  cursor:pointer; color:var(--cream); font:inherit; text-align:left;
  border:1px solid var(--line-light); min-height:clamp(170px,25vh,280px);
}
.coffret-card.lead{ grid-column:span 2; grid-row:span 2; min-height:0; }
.coffret-card .ph{ position:absolute; inset:0; border:0; transition:transform 1.1s var(--ease); }
.coffret-card .ph::after{ display:none; } /* pas d'étiquette placeholder derrière le texte */
.coffret-card:hover .ph{ transform:scale(1.05); }
.coffret-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,8,.9) 0%, rgba(20,12,8,.18) 52%, rgba(20,12,8,.34) 100%);
}
.coffret-body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(20px,1.8vw,30px); }
.coffret-tag{
  font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze-lt);
}
.coffret-card h3{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.35rem,1.8vw,1.75rem); line-height:1.04; color:var(--cream); margin:.45rem 0 0;
}
.coffret-card.lead h3{ font-size:clamp(2rem,3.4vw,3rem); }
.coffret-desc{
  font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--cream-soft);
  margin:.55rem 0 0; max-width:42ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s, margin .6s;
}
.coffret-card.lead .coffret-desc, .coffret-card:hover .coffret-desc{ max-height:90px; opacity:1; }
.coffret-card .uc-ar{
  display:inline-flex; align-items:center; gap:.5em; margin-top:14px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-soft);
}
.coffret-card .uc-ar .ar{ transition:transform .4s var(--ease); }
.coffret-card:hover .uc-ar .ar{ transform:translateX(5px); }
/* Variante 2 produits (Confiseries sucrées) : 2 grandes tuiles égales */
.coffret-grid--two{ grid-template-columns:1fr 1fr; }
.coffret-grid--two .coffret-card{ min-height:clamp(200px,29vh,330px); }
/* variante 1 produit : carte unique pleine largeur */
.coffret-grid--solo{ grid-template-columns:1fr; }
.coffret-grid--solo .coffret-card{ min-height:clamp(260px,40vh,440px); }
.coffret-grid--solo .coffret-card .coffret-desc{ max-height:90px; opacity:1; }
@media(max-width:1024px){
  .coffret-grid{ grid-template-columns:repeat(2,1fr); }
  .coffret-card.lead{ grid-column:span 2; grid-row:span 1; }
}
@media(max-width:560px){ .coffret-grid--two{ grid-template-columns:1fr; } }
@media(max-width:560px){
  .coffret-grid{ grid-template-columns:1fr; }
  .coffret-card.lead{ grid-column:span 1; }
  .coffret-desc{ max-height:90px; opacity:1; }
}

/* ===============================================================
   PRÉSENTATION A — VIGNETTES RONDES  (Bloc 1)
   =============================================================== */
.fam-circles{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(30px,3.2vw,52px) clamp(20px,2.4vw,40px);
}
.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);
}
.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); }
.bean-region{
  font-family:var(--body); font-weight:600; font-size:.64rem; 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.28rem; 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:.54rem; 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);
}

/* ===============================================================
   PRÉSENTATION B — PANNEAUX ÉDITORIAUX ALTERNÉS  (Bloc 2)
   =============================================================== */
.fam-split{ display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); }
.show-card{
  -webkit-appearance:none; appearance:none; background:var(--paper); border:1px solid var(--line-dark);
  border-radius:3px; overflow:hidden; cursor:pointer; color:inherit; font:inherit;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  box-shadow:0 30px 70px -52px rgba(32,20,13,.7);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.show-card:nth-child(even){ grid-template-columns:1fr 1.05fr; }
.show-card:nth-child(even) .sc-media{ order:2; }
.show-card:nth-child(even) .sc-body{ order:1; }
.show-card:hover{ transform:translateY(-4px); border-color:rgba(80,43,28,.3); box-shadow:0 44px 90px -50px rgba(32,20,13,.78); }
.show-card:focus-visible{ outline:none; border-color:var(--bronze); box-shadow:0 0 0 3px rgba(224,177,107,.35); }
.sc-media{ position:relative; overflow:hidden; min-height:clamp(200px,27vh,330px); }
.sc-media .ph{ position:absolute; inset:0; border:0; border-radius:0; transition:transform 1.1s var(--ease); }
.show-card:hover .sc-media .ph{ transform:scale(1.06); }
.sc-flag{
  position:absolute; z-index:2; top:18px; left:18px;
  font-family:var(--body); font-weight:600; font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; background:var(--bronze-lt); color:var(--espresso);
  padding:.5em 1em; border-radius:40px;
}
.sc-body{
  display:flex; flex-direction:column; text-align:left;
  padding:clamp(28px,3.2vw,52px);
}
.sc-region{
  font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bronze-deep);
}
.sc-name{
  font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3.3vw,2.8rem);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.02; margin:.55rem 0 0;
}
.sc-desc{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.08rem,1.4vw,1.28rem);
  line-height:1.5; color:var(--ink-soft); margin:1rem 0 0; max-width:46ch;
}
.sc-tags{ display:flex; flex-wrap:wrap; gap:.6em; margin:clamp(1.3rem,2.4vw,1.9rem) 0 0; }
.sc-tag{
  font-family:var(--body); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze-deep);
  border:1px solid var(--line-dark); border-radius:40px; padding:.5em .95em;
}
.sc-cta{ display:inline-flex; margin-top:auto; padding-top:clamp(1.6rem,2.6vw,2.2rem); }

/* ===============================================================
   CONFISERIES SUCRÉES — 2 cartes côte à côte (nom + fiche au clic)
   =============================================================== */
.fam-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,36px); }
.duo-card{
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0;
  cursor:pointer; color:inherit; font:inherit; display:flex; flex-direction:column; text-align:center;
}
.duo-media{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3; border:1px solid var(--line-dark); }
.duo-media .ph{ position:absolute; inset:0; border:0; transition:transform 1s var(--ease); }
.duo-card:hover .duo-media .ph{ transform:scale(1.05); }
.duo-media .bean-hover{
  position:absolute; inset:0; z-index:3; 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(.98); 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;
}
.duo-media .bean-hover svg{ width:30px; height:30px; }
.duo-card:hover .duo-media .bean-hover,
.duo-card:focus-visible .duo-media .bean-hover{ opacity:1; transform:none; }
.duo-name{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.1; margin-top:clamp(.8rem,1.5vw,1.1rem); color:var(--ink);
}
@media(max-width:560px){ .fam-duo{ gap:14px; } }

/* ===============================================================
   PRÉSENTATION C — INDEX TYPOGRAPHIQUE NUMÉROTÉ  (Bloc 3)
   =============================================================== */
.fam-index{ border-top:1px solid var(--line-dark); }
.idx-row{
  -webkit-appearance:none; appearance:none; background:none; border:0; width:100%;
  border-bottom:1px solid var(--line-dark); cursor:pointer; color:inherit; font:inherit;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(20px,3vw,52px); text-align:left;
  padding:clamp(15px,2vw,26px) clamp(8px,1.4vw,20px);
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.idx-row:hover{ background:var(--paper); padding-left:clamp(16px,2vw,32px); }
.idx-row:focus-visible{ outline:none; background:var(--paper); box-shadow:inset 3px 0 0 var(--olive); }
.idx-num{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--bronze-deep); line-height:1; }
.idx-main{ min-width:0; }
.idx-name{
  font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.7vw,2.3rem);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.04;
  transition:color .35s;
}
.idx-row:hover .idx-name{ color:var(--bronze-deep); }
.idx-sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(1rem,1.3vw,1.18rem);
  color:var(--ink-soft); margin-top:.3rem;
}
.idx-thumb{
  position:relative; width:clamp(78px,8vw,108px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; flex:none;
}
.idx-thumb .ph{ position:absolute; inset:0; border-radius:50%; transition:transform 1s var(--ease); }
.idx-thumb::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(224,177,107,.28); box-shadow:0 0 0 0 rgba(196,193,47,0);
  transition:border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.idx-row:hover .idx-thumb .ph{ transform:scale(1.08); }
.idx-row:hover .idx-thumb::after{ border-color:var(--olive); box-shadow:0 0 0 6px rgba(196,193,47,.12); }
.idx-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .35s, color .35s, border-color .35s, transform .35s var(--ease);
}
.idx-arrow svg{ width:18px; height:18px; }
.idx-row:hover .idx-arrow{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); transform:translateX(4px); }

/* ===============================================================
   MODALE FICHE CONFISERIE  (6 champs)
   =============================================================== */
.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(900px,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; }
/* display:block + width:100% manquaient ici -- un <span> reste "inline" par
   défaut, qui ignore width/aspect-ratio : le cadre s'effondrait à la taille
   d'un caractère de texte. Présent sur les autres pages (cafe.css,
   thes.css, creations.css), qui partagent la même modale fiche produit. */
.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.full{ grid-column:1 / -1; }   /* Allergènes sur toute la largeur (texte long) */
.bm-spec span{ display:block; font-size:.62rem; 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.1rem; line-height:1.28; }
.bm-spec[hidden]{ display:none; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .fam-circles{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .show-card,
  .show-card:nth-child(even){ grid-template-columns:1fr; }
  .show-card:nth-child(even) .sc-media{ order:0; }
  .show-card:nth-child(even) .sc-body{ order:0; }
  .sc-media{ min-height:clamp(220px,52vw,320px); }
  .bm-card{ grid-template-columns:1fr; max-width:480px; }
  .bm-photo{ width:min(220px,60%); margin-inline:auto; }
}
@media(max-width:640px){
  .fam-circles{ grid-template-columns:repeat(2,1fr); gap:30px 18px; }
  .fb-count{ margin-left:0; flex-basis:100%; }
  .idx-row{ grid-template-columns:auto 1fr auto; gap:16px; }
  .idx-thumb{ display:none; }
  .bm-specs{ grid-template-columns:1fr; gap:14px; }
}