/* =====================================================================
   Calque crédibilité fixe du hero /production — 9 mini-div par-dessus le carrousel
   Patch : V237b3h-58Zx-bp127 / bp158 / bp160 / bp162
   Chargé après dist/assets_production/css/main.css (var --heading-font / --background-color du thème Groovin).
   Scopé sous .hero pour ne pas affecter le reste de la vitrine.
   bp160 : refonte claire & colorée — cartes blanches, accents or/vert, description révélée
           au survol ET au focus (mobile : tap = focus, aucun JS — R8). Hero légèrement
           éclairci pour laisser ressortir le vert de la forêt ; marque relisée au text-shadow.
   bp162 : hiérarchie visuelle des 9 cartes en 3 niveaux (vert plein 1-3 / blanc 4-6 / translucide 7-9,
           via :nth-child — additif, aucun template/YAML/JS touché) + alignement de la marque
           (h2 « Elsanor » + sous-titre) sur la grille, en neutralisant le max-width:60% du thème (≥1024px).
   ===================================================================== */

/* hero un peu moins sombre (laisse passer le vert) — override scopé du voile du thème */
.hero .carousel-item::before{
  background:color-mix(in srgb, var(--background-color,#060606), transparent 48%);
}
/* marque lisible sur fond plus clair */
.hero .hero-brand h2{ text-shadow:0 2px 22px rgba(0,0,0,.7); }
.hero .hero-brand p{ text-shadow:0 2px 14px rgba(0,0,0,.6); }

/* calque fixe : ne tourne pas avec les slides ; laisse passer les clics vers les contrôles du carrousel */
.hero .hero-overlay{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 40px 60px; pointer-events:none;
}

/* marque (réutilise .hero h2 / .hero p du thème pour le style Playfair) */
.hero .hero-brand{ text-align:center; margin-bottom:26px; }

/* grille 3x3 des mini-div */
.hero .hero-cred{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  width:100%; max-width:1100px; pointer-events:auto;
}

/* carte claire */
.hero .hero-cred .mini{
  position:relative; overflow:hidden; min-height:120px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.85); border-radius:16px;
  padding:18px 20px; cursor:pointer; outline:none;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6);
  opacity:0; transform:translateY(16px);
  animation:credRise .6s cubic-bezier(.2,.9,.25,1) forwards;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s, border-color .4s;
}
/* liseré or -> vert, révélé au survol/focus */
.hero .hero-cred .mini::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:3;
  background:linear-gradient(180deg,#c79327,#16823f);
  transform:scaleY(0); transform-origin:top; transition:transform .4s;
}
.hero .hero-cred .mini:hover,
.hero .hero-cred .mini:focus{
  transform:translateY(-7px);
  border-color:#c79327;
  box-shadow:0 32px 60px -24px rgba(22,130,63,.55);
}
.hero .hero-cred .mini:hover::after,
.hero .hero-cred .mini:focus::after{ transform:scaleY(1); }

.hero .hero-cred .mini .mt{
  font-family:var(--heading-font); font-weight:700; font-size:18px; color:#0f5d2d; line-height:1.14;
}
.hero .hero-cred .mini .ms{
  font-size:13px; color:#5a6e62; margin-top:6px; font-weight:600;
}

/* panneau vert : description révélée par-dessus la carte */
.hero .hero-cred .mini .reveal{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  padding:16px 20px; border-radius:16px;
  background:linear-gradient(135deg,#16823f 0%,#0f5d2d 100%);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s, transform .4s; pointer-events:none;
}
.hero .hero-cred .mini .reveal p{
  margin:0; font-size:13.5px; line-height:1.5; color:#fff; font-weight:400;
}
.hero .hero-cred .mini:hover .reveal,
.hero .hero-cred .mini:focus .reveal{ opacity:1; transform:translateY(0); }

/* entrée échelonnée */
@keyframes credRise{ to{ opacity:1; transform:translateY(0); } }
.hero .hero-cred .mini:nth-child(1){ animation-delay:.05s; }
.hero .hero-cred .mini:nth-child(2){ animation-delay:.10s; }
.hero .hero-cred .mini:nth-child(3){ animation-delay:.15s; }
.hero .hero-cred .mini:nth-child(4){ animation-delay:.20s; }
.hero .hero-cred .mini:nth-child(5){ animation-delay:.25s; }
.hero .hero-cred .mini:nth-child(6){ animation-delay:.30s; }
.hero .hero-cred .mini:nth-child(7){ animation-delay:.35s; }
.hero .hero-cred .mini:nth-child(8){ animation-delay:.40s; }
.hero .hero-cred .mini:nth-child(9){ animation-delay:.45s; }

@media (max-width:992px){
  .hero .hero-cred{ grid-template-columns:1fr 1fr; }
}
@media (max-width:576px){
  .hero .hero-overlay{ justify-content:flex-start; padding-top:96px; overflow-y:auto; }
  .hero .hero-brand{ margin-bottom:16px; }
  .hero .hero-cred{ grid-template-columns:1fr; gap:10px; }
}

/* =====================================================================
   bp162 — hiérarchie en 3 niveaux + alignement marque (additif, après les règles de base)
   ===================================================================== */

/* ---- Niveau 1 : cartes 1-3 — vert plein, le plus saillant ---- */
.hero .hero-cred .mini:nth-child(-n+3){
  background:linear-gradient(150deg,#16823f 0%,#0f5d2d 100%);
  border-color:rgba(199,147,39,.55);
  box-shadow:0 22px 52px -20px rgba(0,0,0,.7);
}
.hero .hero-cred .mini:nth-child(-n+3) .mt{ color:#fff; font-size:19px; }
.hero .hero-cred .mini:nth-child(-n+3) .ms{ color:rgba(255,255,255,.82); }
.hero .hero-cred .mini:nth-child(-n+3)::after{ background:#c79327; }
.hero .hero-cred .mini:nth-child(-n+3) .reveal{
  background:linear-gradient(135deg,#0f5d2d 0%,#0b3f1f 100%);
  box-shadow:inset 4px 0 0 #c79327;
}

/* ---- Niveau 2 : cartes 4-6 — style blanc de base inchangé (poids intermédiaire) ---- */

/* ---- Niveau 3 : cartes 7-9 — translucide discret (garde le blur de base) ---- */
.hero .hero-cred .mini:nth-child(n+7){
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 12px 30px -22px rgba(0,0,0,.5);
  min-height:104px;
}
.hero .hero-cred .mini:nth-child(n+7) .mt{ color:#fff; font-size:16px; }
.hero .hero-cred .mini:nth-child(n+7) .ms{ color:rgba(255,255,255,.72); }

/* ---- Alignement de la marque sur la grille des 9 cartes ---- */
.hero .hero-overlay .hero-brand{
  width:100%; max-width:1100px; margin-left:auto; margin-right:auto;
}
.hero .hero-brand h2,
.hero .hero-brand p{
  max-width:none;            /* annule .hero h2,.hero p{ max-width:60% } du thème (≥1024px) */
  margin-left:auto; margin-right:auto;
}