/* ==========================================================================
   Hero — fond photo, titre, barre d'atouts, cartes avantages
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Espacements liés à la hauteur d'écran : le premier écran tient en entier à 100 % */
  padding-block: clamp(16px, 3vh, 32px) clamp(24px, 4vh, 64px);
}

/* Fond photo --------------------------------------------------------------
   Remplacer le fichier assets/img/hero-garde-meuble-rennes.jpg par la photo HD.
   Le dégradé assure la lisibilité du texte à gauche et le fondu vers le bas.
   Les couleurs de repli (--hero-fallback) s'affichent tant que la photo manque. */
.hero__bg {
  --hero-image: url("../assets/img/hero-garde-meuble-rennes.jpg");
  --hero-fallback: radial-gradient(ellipse 60% 70% at 55% 35%, #f3e3cf 0%, #f7efe4 45%, #fbf8f4 75%);

  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* fondu blanc à gauche (zone texte) */
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 22%, rgba(255,255,255,0) 48%),
    /* fondu blanc en bas (zone cartes) */
    linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.85) 68%, #fff 82%),
    /* photo calée à droite, ~85% de la largeur : la famille apparaît entre le titre et le formulaire */
    var(--hero-image) right top / 85% auto no-repeat,
    var(--hero-fallback);
}

/* Grille : contenu | formulaire */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 44px;
  align-items: start;
}

.hero__content { padding-top: clamp(8px, 4vh, 60px); }

/* Localisation */
.hero__location {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--c-navy);
}
.hero__location svg { width: 22px; height: 22px; color: var(--c-red); }

/* Titre */
.hero__title {
  margin-top: 10px;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--c-navy);
}

.hero__lead {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--c-navy);
}
.hero__lead strong { font-weight: var(--fw-medium); }

/* Barre d'atouts ---------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  margin-top: clamp(18px, 3.2vh, 36px);
  padding: clamp(14px, 2.2vh, 24px) 32px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.features__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-inline: 18px;
  text-align: center;
}
.features__item + .features__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--c-divider);
}

.features__icon {
  display: grid;
  place-items: center;
  width: clamp(52px, 7vh, 70px);
  height: clamp(52px, 7vh, 70px);
  border-radius: 50%;
  background: var(--c-icon-bg);
  color: var(--c-navy);
}
.features__icon svg { width: 66%; height: 66%; }

.features__label {
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  white-space: nowrap;
}

/* Cartes avantages -------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(16px, 3vh, 36px);
}

.benefit {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: clamp(110px, 15vh, 160px);
  padding: clamp(16px, 2.4vh, 24px) 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  color: var(--c-navy);
}
.benefit--warm  { background: var(--c-warm-bg); }
.benefit--cool  { background: var(--c-cool-bg); }
.benefit--fresh { background: var(--c-fresh-bg); }

.benefit__icon { flex-shrink: 0; width: 76px; height: 76px; }

.benefit__body {
  padding-left: 16px;
  border-left: 1px solid rgba(20, 32, 46, .12);
}
.benefit__title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.benefit__title .text-red { display: block; }
.benefit__text {
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1.35;
}