/* X-RENT — page d'accueil : hero, ruban, services, chantiers, partenaire. */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 124px;
  overflow: hidden;
  background-image:
    radial-gradient(58% 46% at 74% 42%, rgba(245, 196, 0, .07), transparent 72%),
    var(--grid-tech);
  background-size: auto, var(--grid-size);
}

/* Halo chaud discret derrière la photo, dans l'esprit des aplats du flyer.
   Posé en fond et non en ::after : ce pseudo-élément sert déjà à la bande hazard droite. */

.hero__grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: var(--s6);
  padding-bottom: var(--s6);
  padding-inline: calc(var(--gutter) + 26px);
}

.hero__title {
  display: grid;
  gap: .02em;
  font-size: var(--fs-hero);
  line-height: .94;
  letter-spacing: -.028em;
}

/* Chaque ligne est masquée : l'entrée GSAP fait remonter le texte depuis le bas. */
.ln { display: block; overflow: hidden; padding-bottom: .04em; }
.ln__in { display: block; }

.hero__lede {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--mute);
}

.hero__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }

/* Les deux commerciaux, directement dans le hero */
.hero__tels {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.hero__tels a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--white);
  text-decoration: none;
}
.hero__tels span {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 5px;
}
.hero__tels a:hover { color: var(--amber); }

.hero__shot { margin: 0; justify-self: end; width: 100%; max-width: 620px; }

/* Bandeau des trois familles, au pied du hero */
.hero__foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}
.hero__foot-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: calc(var(--gutter) + 26px);
}

.hero__fam {
  display: block;
  padding: var(--s3) var(--s4) var(--s3) var(--s4);
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: background-color .24s var(--ease);
}
.hero__fam:first-child { border-left: 0; padding-left: 0; }
.hero__fam:hover { background: rgba(255, 255, 255, .03); }

.hero__fam-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero__fam:hover .hero__fam-name { color: var(--amber); }

.hero__fam-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--mute-2);
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; align-content: center; gap: var(--s4); }
  .hero__shot { justify-self: start; max-width: 520px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 100px; }
  .hero__grid { padding-bottom: var(--s5); padding-inline: calc(var(--gutter) + 14px); }
  .hero__lede { font-size: var(--fs-base); margin-top: var(--s3); }
  .hero__actions { margin-top: var(--s4); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__tels { gap: var(--s4); margin-top: var(--s4); }
  .hero__shot { max-width: none; margin-top: var(--s2); }

  .hero__foot-in { grid-template-columns: 1fr; padding-inline: calc(var(--gutter) + 14px); }
  .hero__fam {
    border-left: 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  .hero__fam:first-child { border-top: 0; }
}

/* ---------- Ruban ---------- */

.ribbon {
  border-block: 1px solid var(--line);
  padding: var(--s4) 0;
  overflow: hidden;
  background: var(--carbon);
}

.ribbon__track { display: flex; width: max-content; will-change: transform; }

.ribbon__row {
  margin: 0;
  padding-right: .4em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}
.ribbon__row .dot { -webkit-text-stroke: 0; color: var(--amber); }

/* ---------- Services ---------- */

.pledges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pledge { background: var(--black); padding: var(--s4); }

.pledge h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 12px;
  padding-top: var(--s3);
  position: relative;
}
.pledge h3::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--amber);
}

.pledge p { font-size: var(--fs-sm); color: var(--mute); line-height: 1.55; }

@media (max-width: 1000px) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pledges { grid-template-columns: 1fr; } }

/* ---------- Chantiers ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
}
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 900px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Partenaire ---------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--s6);
  align-items: center;
}

.duo__text h2 + .lede { margin-top: var(--s3); }
.duo__text .marks { margin-top: var(--s4); }
.duo__cta { margin-top: var(--s5); }
.duo__media img { width: 100%; }

.partner-logo { width: 220px; height: auto; }

@media (max-width: 1000px) {
  .duo { grid-template-columns: 1fr; gap: var(--s5); }
  .duo__media { order: -1; }
}

/* ---------- Appel ---------- */

.callout__tels { display: flex; gap: var(--s5); flex-wrap: wrap; }
.callout__tels a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}
.callout__tels span {
  display: block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .68;
  margin-bottom: 5px;
}
.callout__tels a:hover { text-decoration: underline; }

.callout.hazard .callout__in { padding-inline: 26px; }

@media (max-width: 900px) {
  .callout__tels { gap: var(--s4); }
  .callout.hazard .callout__in { padding-inline: 14px; }
}