/* ============================================================
   FANNY CONUS — HERO (galerie + bouton musique flottant)
   Titre + sous-titre centrés, 4 fiches œuvres dispo,
   chiffres centrés bas, bouton bande-son façon WhatsApp.
   ============================================================ */

#hero{min-height:100vh;height:auto;}
#hero .hero-shop.fade-in{opacity:1 !important;transform:none !important;}

/* ---- Contenu centré ---- */
#hero .hero-content.hero-centered{
  position:relative;z-index:5;
  width:100% !important;max-width:980px !important;margin:0 auto !important;
  padding:96px 24px 124px !important;
  display:flex !important;flex-direction:column;align-items:center;gap:14px;
  text-align:center !important;
}
.hero-title{font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.5px;
  white-space:nowrap;color:#fff;margin:0;}
.hero-title em{font-style:italic;font-weight:600;color:var(--turquoise-mid,#4DD0E1);}
.hero-sub{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.82);max-width:520px;margin:0 0 6px;}

/* ---- Galerie de 4 mini-fiches ---- */
.hero-shop{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;width:100%;}
.hp-mini{background:#fff;border-radius:14px;overflow:hidden;width:200px;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.5);text-align:left;
  transition:transform .3s ease, box-shadow .3s ease;}
.hp-mini:hover{transform:translateY(-6px);box-shadow:0 26px 56px -20px rgba(0,0,0,.6);}
.hp-mini-img{position:relative;display:block;overflow:hidden;}
.hp-mini-img img{width:100%;height:140px;object-fit:cover;display:block;transition:transform .55s ease;}
.hp-mini:hover .hp-mini-img img{transform:scale(1.06);}
.hp-mini-tag{position:absolute;top:9px;left:9px;background:var(--gold,#C9A84C);color:#fff;
  font-size:.56rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:30px;box-shadow:0 3px 8px rgba(0,0,0,.2);}
.hp-mini-b{padding:11px 13px 13px;}
.hp-mini-t{display:block;font-family:'Playfair Display',serif;font-size:.98rem;
  color:var(--text-dark,#1a3a3f);text-decoration:none;line-height:1.15;margin-bottom:8px;}
.hp-mini-t:hover{color:var(--turquoise-dark,#007A8A);}
.hp-mini-r{display:flex;align-items:center;justify-content:space-between;}
.hp-mini-p{font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:700;color:var(--text-dark,#1a3a3f);}
.hp-mini-add{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:var(--turquoise-dark,#007A8A);color:#fff;font-size:1.2rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.hp-mini-add:hover{background:#00626f;transform:scale(1.1);}

/* ---- Chiffres : centrés, au-dessus des points ---- */
#hero .hero-mini-stats{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:6;
  margin:0;display:flex;gap:38px;}
.hero-mini-stats .ms{display:flex;flex-direction:column;align-items:center;}
.hero-mini-stats .ms b{font-family:'Playfair Display',serif;font-size:1.2rem;color:#fff;line-height:1;font-weight:600;}
.hero-mini-stats .ms span{font-size:.56rem;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:5px;}

/* ---- Bouton flottant : bande-son (façon WhatsApp) ---- */
.music-fab{position:fixed;left:24px;bottom:24px;z-index:60;width:54px;height:54px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--turquoise,#00B4C8),var(--turquoise-dark,#007A8A));
  color:#fff;box-shadow:0 8px 22px rgba(0,123,138,.5);transition:transform .25s ease, box-shadow .25s ease;}
.music-fab svg{width:24px;height:24px;}
.music-fab:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(0,123,138,.6);}
.music-fab.active{background:linear-gradient(135deg,var(--gold,#C9A84C),#b3922f);}

.music-panel{position:fixed;left:24px;bottom:90px;z-index:60;width:300px;max-width:calc(100vw - 48px);
  background:#fff;border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);
  padding:12px;opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;}
.music-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.music-panel .mp-top{display:flex;align-items:center;justify-content:space-between;
  font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid,#2d6a72);
  font-weight:700;margin-bottom:9px;padding:0 2px;}
.music-panel .mp-close{background:none;border:none;font-size:1.2rem;line-height:1;color:var(--text-mid,#2d6a72);cursor:pointer;}
.music-panel iframe{border-radius:10px;display:block;width:100%;height:152px;border:0;}

/* ---- Responsive ---- */
@media(max-width:900px){
  #hero{min-height:auto;flex-direction:column;justify-content:flex-start;}
  #hero .hero-content.hero-centered{padding:104px 20px 30px !important;gap:14px;max-width:460px !important;}
  .hero-title{white-space:normal;}
  .hero-shop{gap:13px;}
  .hp-mini{width:calc(50% - 7px);}
  #hero .hero-mini-stats{position:static;transform:none;margin:16px auto 4px;justify-content:center;gap:26px;}
}
@media(max-width:380px){
  .hp-mini{width:100%;}
}