/* ============================================================
   BLOC HERO v2 (structure neutre) : photo + preuve immediate.
   Colonne contenu / colonne visuelle, carte d'avis flottante
   sur la photo. Zero couleur, zero police nominale : les roles
   semantiques font tout, les packs sculptent le reste.
   ============================================================ */

.bloc-hero {
  background: var(--surface);
  padding-block: var(--sp-8);
  overflow: hidden; /* les debords decoratifs des packs restent contenus */
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: center;
}

/* ---- Colonne contenu ---- */
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
  text-wrap: balance;
  color: var(--ink);
}

.hero-lede {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  color: var(--ink-muted);
  max-width: 42ch;
}

.hero-actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.hero-proof {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero-proof li strong {
  color: var(--ink);
  font-weight: var(--w-strong);
}

/* ---- Colonne visuelle : photo + carte d'avis flottante ---- */
.hero-visuel {
  position: relative;
  /* l'espace bas accueille le debord de la carte d'avis */
  padding-bottom: var(--sp-6);
}

.hero-photo {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: var(--bw-1) solid var(--border);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}

/* Carte d'avis : preuve sociale posee SUR la photo */
.hero-avis {
  position: absolute;
  left: calc(-1 * var(--sp-5));
  bottom: 0;
  max-width: min(21rem, 85%);
  background: var(--surface-raised);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  padding: var(--sp-4) var(--sp-5);
}

.hero-avis-etoiles {
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
}

.hero-avis-texte {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

.hero-avis-auteur {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.hero-avis-auteur strong {
  color: var(--ink);
  font-weight: var(--w-strong);
}

/* ---- Paliers ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visuel { margin-top: var(--sp-2); }
  .hero-avis { left: var(--sp-4); }
}

@media (max-width: 640px) {
  .bloc-hero { padding-block: var(--sp-7); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-proof { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
  .hero-photo img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   VARIANTES STRUCTURELLES (revue design du 01/08/2026 :
   chaque flagship choisit un archetype different, la variance
   de composition fait partie du produit).
   ============================================================ */

/* ---- Variante PLEIN : photo cover pleine largeur, voile
   sombre, contenu pose dessus. Archetype flotte/industrie. ---- */
.bloc-hero--plein {
  position: relative;
  padding-block: 0;
}
.bloc-hero--plein .hero-fond {
  position: absolute;
  inset: 0;
}
.bloc-hero--plein .hero-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bloc-hero--plein .hero-fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg,
    color-mix(in srgb, var(--surface-invert) 90%, transparent) 0%,
    color-mix(in srgb, var(--surface-invert) 55%, transparent) 55%,
    color-mix(in srgb, var(--surface-invert) 18%, transparent) 100%);
}
.bloc-hero--plein .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  min-height: min(86vh, 40rem);
  align-content: center;
  padding-block: var(--sp-9);
}
.bloc-hero--plein .hero-inner { max-width: 38rem; }
.bloc-hero--plein .hero-title { color: var(--ink-invert); }
.bloc-hero--plein .hero-lede { color: var(--ink-invert-muted); }
.bloc-hero--plein .hero-proof { color: var(--ink-invert-muted); }
.bloc-hero--plein .hero-proof li strong { color: var(--ink-invert); }
.bloc-hero--plein .btn-secondary {
  color: var(--ink-invert);
  border-color: color-mix(in srgb, var(--ink-invert) 55%, transparent);
}

/* Carte d'avis en coin, sur coque (double liseret) */
.bloc-hero--plein .hero-avis {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-6);
  left: auto;
  max-width: 20rem;
  border: none;
  box-shadow: var(--sh-3),
    0 0 0 6px color-mix(in srgb, var(--ink-invert) 10%, transparent),
    0 0 0 7px color-mix(in srgb, var(--ink-invert) 22%, transparent);
}

@media (max-width: 900px) {
  .bloc-hero--plein .hero-grid { min-height: 0; }
  .bloc-hero--plein .hero-avis {
    position: static;
    margin-top: var(--sp-5);
    max-width: 100%;
  }
}

/* ---- Variante PILE : titre massif centre, bande photo
   panoramique dessous. Archetype urgence/typo forte. ---- */
.bloc-hero--pile .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.bloc-hero--pile .hero-inner { max-width: none; }
.bloc-hero--pile .hero-title {
  font-size: calc(var(--fs-3xl) * 1.18);
  max-width: 16ch;
  margin-inline: auto;
}
.bloc-hero--pile .hero-lede { margin-inline: auto; }
.bloc-hero--pile .hero-actions,
.bloc-hero--pile .hero-proof { justify-content: center; }
.bloc-hero--pile .hero-visuel {
  width: 100%;
  margin-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}
/* Coque de la bande photo (double liseret, rythme physique) */
.bloc-hero--pile .hero-photo {
  padding: 6px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: calc(var(--r-card) + 6px);
}
.bloc-hero--pile .hero-photo img {
  aspect-ratio: 21 / 8;
  border-radius: var(--r-card);
}
.bloc-hero--pile .hero-avis { left: var(--sp-6); }

@media (max-width: 640px) {
  .bloc-hero--pile .hero-photo img { aspect-ratio: 4 / 3; }
  .bloc-hero--pile .hero-actions .btn { flex: 1 1 100%; }
  .bloc-hero--pile .hero-proof { align-items: center; }
}

/* ---- Variante BORD : la photo file jusqu'au bord droit de
   l'ecran, sans cadre ni rayon. Archetype paysage/toiture. ---- */
.bloc-hero--bord { overflow: visible; padding-block: 0; }
.bloc-hero--bord .hero-grid { align-items: stretch; gap: 0; }
.bloc-hero--bord .hero-inner {
  padding-block: var(--sp-9);
  padding-right: clamp(var(--sp-5), 4vw, var(--sp-8));
}
.bloc-hero--bord .hero-visuel {
  padding-bottom: 0;
  margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
}
.bloc-hero--bord .hero-photo {
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.bloc-hero--bord .hero-photo img {
  height: 100%;
  aspect-ratio: auto;
  min-height: 24rem;
}
.bloc-hero--bord .hero-avis {
  left: calc(-1 * var(--sp-6));
  bottom: var(--sp-6);
}
@media (max-width: 900px) {
  .bloc-hero--bord .hero-inner { padding-block: var(--sp-7) var(--sp-5); padding-right: 0; }
  .bloc-hero--bord .hero-visuel { margin-right: calc(-1 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .bloc-hero--bord .hero-photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .bloc-hero--bord .hero-avis { left: var(--sp-4); }
}