/* Accueil — styles propres à la page d'accueil (chargés uniquement sur le front). */

/* 1) HERO */
.hero { position: relative; height: 520px; background: var(--tile); border-bottom: 1px solid var(--border-light); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,241,225,.94) 0%, rgba(247,241,225,.72) 34%, rgba(31,58,52,.12) 62%, rgba(31,58,52,.55) 100%); }
.hero__content { position: absolute; left: 0; right: 0; top: 44px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 120px; }
.hero__title { font: 600 54px/1.04 var(--font-serif); color: var(--forest); margin: 0; }
.hero__lead { font: 400 16px/1.6 var(--font-sans); color: var(--forest-text); max-width: 520px; margin: 0; }
.hero__actions { display: flex; gap: 12px; margin-top: 6px; }
.hero__btn-call { display: none; }
.hero__mentions { position: absolute; left: 44px; right: 44px; bottom: 22px; display: flex; justify-content: space-between; gap: 16px; font: 500 12.5px var(--font-sans); color: var(--offwhite); }

/* 2) PRESTATIONS */
.prestations { display: flex; flex-direction: column; gap: 34px; align-items: center; }
.prestations__head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.prestations__intro { font: 400 15px/1.65 var(--font-sans); color: var(--forest-text); max-width: 560px; margin: 0; }
.prestations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; }
.presta-card { background: var(--cream); border: 1px solid var(--border-light); border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; }
.presta-card:hover { transform: translateY(-2px); border-color: var(--border-field); }
.presta-card__img { width: 100%; height: 150px; object-fit: cover; object-position: 52% 42%; display: block; }
.presta-card__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.presta-card__teaser { font: 400 14px/1.6 var(--font-sans); color: var(--forest-text); flex: 1; margin: 0; }
.presta-card__link { font: 600 13px var(--font-sans); color: var(--terracotta); }

/* 3) BANDEAU TRIPORTEURS */
.triporteurs { display: flex; gap: 44px; align-items: center; }
.triporteurs__text { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.triporteurs__title { font: 600 34px/1.15 var(--font-serif); color: var(--cream); margin: 0; }
.triporteurs__lead { font: 400 14.5px/1.7 var(--font-sans); color: var(--cream-text); margin: 0; }
.triporteurs__link { align-self: flex-start; font: 600 13px var(--font-sans); color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--ocre); padding-bottom: 3px; }
.triporteurs__gallery { flex: 1.15; display: flex; gap: 16px; }
.vignette { flex: 1; background: var(--cream); border-radius: 4px; overflow: hidden; margin: 0; }
.vignette__img { width: 100%; height: 190px; object-fit: cover; display: block; }
.vignette__caption { padding: 12px 14px; font: 600 13px var(--font-sans); color: var(--forest); }

/* 4) COMMENT ÇA SE PASSE */
.comment { display: flex; gap: 40px; align-items: center; }
.comment__img { width: 400px; height: 250px; object-fit: cover; border-radius: 4px; flex: none; }
.comment__steps-wrap { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.comment__steps { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step__num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 1px solid var(--olive); color: var(--olive); font: 600 13px var(--font-sans); display: flex; align-items: center; justify-content: center; }
.step__title { font: 600 15px var(--font-sans); color: var(--forest); }
.step__text { font: 400 13.5px/1.55 var(--font-sans); color: var(--forest-text); }

/* 5) ZONE */
.zone-section { border-top: 1px solid var(--border-light); }
.zone { display: flex; gap: 40px; align-items: center; }
.zone__text { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.zone__title { font: 600 30px/1.15 var(--font-serif); color: var(--forest); margin: 0; }
.zone__lead { font: 400 14px/1.7 var(--font-sans); color: var(--forest-text); margin: 0; }
.zone__map { width: 400px; max-width: 100%; height: auto; flex: none; }

/* 6) APPEL FINAL */
.cta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cta__title { font: 600 36px/1.15 var(--font-serif); color: var(--forest); margin: 0; }
.cta__lead { font: 400 15px/1.6 var(--font-sans); color: var(--forest-text); max-width: 480px; margin: 0; }
.cta__actions { display: flex; gap: 12px; margin-top: 8px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero { height: 400px; }
  .hero__img { object-position: 42% 45%; }
  .hero__veil { background: linear-gradient(180deg, rgba(247,241,225,.95) 0%, rgba(247,241,225,.6) 40%, rgba(31,58,52,.55) 100%); }
  .hero__content { top: 26px; left: 20px; right: 20px; padding: 0; gap: 11px; }
  .hero__title { font-size: 33px; line-height: 1.08; }
  .hero__lead { font-size: 13.5px; line-height: 1.55; }
  .hero__actions { position: absolute; left: 20px; right: 20px; bottom: 20px; flex-direction: column; gap: 9px; margin-top: 0; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__btn-outline { display: none; }
  .hero__btn-call { display: inline-flex; }
  .hero__mentions { display: none; }
  .prestations__grid { grid-template-columns: 1fr; }
  .triporteurs { flex-direction: column; align-items: stretch; }
  .comment { flex-direction: column; align-items: stretch; }
  .comment__img { width: 100%; height: auto; }
  .zone { flex-direction: column; align-items: stretch; }
  .zone__map { width: 100%; }
}