/* ============================================================
   Fabrique - Homepage (home.css)
   Hero immersif "énergie claire" : mesh, produit flottant, chips.
   ============================================================ */

.hero { position: relative; padding: clamp(1rem, 0.6rem + 1.2vw, 1.9rem) 0 clamp(1rem, 0.6rem + 1.2vw, 1.9rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px 460px at 82% -8%, rgba(20, 224, 176, .22), transparent 60%),
    radial-gradient(640px 520px at 6% 4%, var(--brand-soft), transparent 58%),
    radial-gradient(520px 420px at 50% 120%, rgba(10, 184, 154, .12), transparent 60%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(21, 127, 102, .06) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}
.hero__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; }
/* Eyebrow : petit, sans fond, sans pastille (façon EcransPC) */
.hero__eyebrow { display: block; color: var(--brand-dark); font-weight: 600; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.hero__title { margin-bottom: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 3.85rem); text-wrap: balance; }
.hero__subtitle { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem); line-height: 1.6; color: var(--muted); max-width: 50ch; margin-bottom: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(1.8rem, 1.2rem + 1.6vw, 2.75rem); }
/* CTA hero : plus carré et propre (rayon doux, pas en gélule) */
.hero__cta .btn { border-radius: 12px; }
.hero__cta .btn--lg { padding: 15px 28px; font-size: 1rem; }
/* Stats : nombre + libellé sur la même ligne, séparateurs fins */
.hero__stats { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 1rem + 1vw, 34px); }
.hero__stat { display: flex; align-items: baseline; gap: 9px; }
.hero__stat-num { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.85rem); font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
.hero__stat-label { font-size: .875rem; color: var(--muted); }
.hero__stat-sep { width: 1px; height: 24px; background: var(--line); }

/* ── Scène hero : 3 produits flottants (centre devant agrandi + 2 côtés
   estompés/floutés derrière + halo qui suit). Disposition reprise d'EcransPC,
   couleurs de marque (halo, ombres adaptées fond clair). ── */
.hero__scene { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(16rem, 11rem + 14vw, 22rem); }
.hero__scene-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(16rem, 10rem + 20vw, 23rem); aspect-ratio: 1 / 1; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-mint-rgb), .30) 0%, transparent 70%);
  filter: blur(56px); transition: left .4s ease;
}
/* Liens : positionnement éventail (centre devant + 2 côtés estompés derrière) */
.hero__scene-link { position: absolute; display: block; cursor: pointer; text-decoration: none;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease, filter .4s ease; }
.hero__scene-link--center { z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero__scene-link--left  { z-index: 5; left: -1%;  top: 50%; transform: translateY(-50%); opacity: .62; filter: blur(.8px); }
.hero__scene-link--right { z-index: 5; right: -1%; top: 50%; transform: translateY(-50%); opacity: .62; filter: blur(.8px); }

/* Carte : contour net + petite étiquette en haut (lisible sur fond clair) */
.hero__scene-card { display: flex; flex-direction: column; align-items: center;
  gap: clamp(.4rem, .3rem + .4vw, .7rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(.7rem, .5rem + .7vw, 1.05rem); box-shadow: var(--shadow-md);
  transition: box-shadow .3s ease, transform .3s ease; }
.hero__scene-card--center { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--brand-mint-rgb), .28); }
.hero__scene-tag { align-self: flex-start; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--brand-dark); background: rgba(20,224,176,.14); border: 1px solid rgba(21,127,102,.20);
  padding: .22em .7em; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.hero__scene-img { display: block; width: auto; object-fit: contain; margin: 0 auto; }
.hero__scene-img--center { max-height: clamp(9.5rem, 7rem + 9vw, 13.5rem); max-width: 100%; }
.hero__scene-img--left, .hero__scene-img--right { max-height: clamp(7rem, 5rem + 7vw, 10rem); max-width: 100%; }

/* Focus au survol : le côté survolé avance (net), le centre recule, le halo suit */
.hero__scene-link--left:hover, .hero__scene-link--right:hover { opacity: 1; filter: none; z-index: 20; }
.hero__scene-link--left:hover .hero__scene-card,
.hero__scene-link--right:hover .hero__scene-card { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.hero__scene:has(.hero__scene-link--left:hover)  .hero__scene-link--center,
.hero__scene:has(.hero__scene-link--right:hover) .hero__scene-link--center { opacity: .5; filter: blur(.8px); }
.hero__scene-link--center:hover .hero__scene-card { transform: scale(1.03);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--brand-mint-rgb), .45); }
.hero__scene:has(.hero__scene-link--left:hover)  .hero__scene-glow { left: 25%; }
.hero__scene:has(.hero__scene-link--right:hover) .hero__scene-glow { left: 75%; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
/* Téléphone : best-practices -> titre (proposition de valeur) + 1 CTA d'abord.
   La scène 3-produits (décorative) est réservée au desktop ; sur mobile, c'est
   la 1re carte coup de cœur (avec specs = "testé") qui sert de visuel produit. */
@media (max-width: 600px) {
  /* Hero inspiré d'écranspc (gardé compact) : titre 2 lignes + sous-titre court
     + 2 boutons empilés compacts + stats EN LIGNE (chiffre gras + libellé). */
  .hero { padding: var(--space-md) 0 var(--space-md); }
  .hero__grid { gap: 0; }
  .hero__scene { display: none; }
  /* eyebrow discret */
  .hero__eyebrow { margin-bottom: var(--space-sm); }
  /* titre sur ~2 lignes, accent vert plein */
  .hero__title { margin-bottom: var(--space-sm); font-size: clamp(1.55rem, 1.15rem + 2.3vw, 2.1rem); }
  .hero__title .accent { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); }
  /* sous-titre court qui explique (façon écranspc) */
  .hero__subtitle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--fs-sm); max-width: none; margin-bottom: var(--space-md); }
  /* 2 boutons empilés pleine largeur, compacts -> chacun sur 1 ligne */
  .hero__cta { flex-direction: column; flex-wrap: nowrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
  .hero__cta .btn { width: 100%; }
  .hero__cta .btn--lg { padding: .68em 1em; font-size: var(--fs-sm); border-radius: 11px; }
  /* stats EN LIGNE : chiffre gras + libellé à côté, séparateurs fins */
  .hero__stats { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
  .hero__stat { flex-direction: row; align-items: baseline; gap: .4em; }
  .hero__stat-num { font-size: var(--fs-md); color: var(--ink); }
  .hero__stat-label { font-size: var(--fs-2xs); margin-top: 0; }
  .hero__stat-sep { display: block; width: 1px; height: 1em; align-self: center; }
}

/* ============================================================
   Encart promo calculateur (home) : .calc-promo (texte | visuel).
   Renvoie vers une page calculateur. Piloté par [data-accent].
   ============================================================ */
.calc-promo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: center; background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }
.calc-promo__text .eyebrow { color: var(--acc, var(--brand)); }
.calc-promo__text h2 { margin: 8px 0 12px; }
.calc-promo__text p { color: var(--text); max-width: 52ch; margin-bottom: 20px; }
.calc-promo__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.calc-promo__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.calc-promo__small { font-size: .82rem; color: var(--muted); }
@media (max-width: 720px) { .calc-promo { grid-template-columns: 1fr; gap: 20px; } .calc-promo__visual { order: -1; } }