/* ===========================================================
   ENGAGE — "Vos locaux à [Ville], entre de bonnes mains."
   Parti pris ÉDITORIAL TYPOGRAPHIQUE : zéro conteneur, zéro
   ombre, zéro icône. 4 engagements en liste verticale aérée,
   séparés UNIQUEMENT par de fins filets 1px brun à 16 %.
   L'accent corail ne vit que dans le TEXTE : index 01-04
   (ultra-léger) + mot-clé de chaque intitulé. Tranche
   volontairement avec le motif carte-bordure-ombre saturé du
   reste de la page-ville (why, pricing-pro, localintro__zones,
   verticals, services). Respiration par le vide.

   La section vit sur le beige nu : la classe "testimonial"
   (fond vert menthe + padding 100px) a été retirée du markup.

   Sémantique <dl> : <dt> = engagement, <dd> = preuve.
   Gabarit identique sur toutes les pages-ville pro.
   =========================================================== */

.engage {
  padding: 110px 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  /* Cassure de couleur dans la page : fond bleu-vert (mint) au lieu du
     beige. Le corps reste en brun (#352D2C) = contraste ~7:1 sur le mint,
     parfaitement lisible. Le corail (index + mots-clés) devient un accent
     plus doux (pairing sauge+corail) — assumé. */
  background-color: var(--color-mint);
}

/* ---- En-tête : eyebrow discrète + titre 36px ---- */
.engage__head {
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.engage__eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Crème (couleur du fond beige du site) : ressort en clair sur le mint,
     mise en valeur tone-on-tone. Le corail reste sur le gros titre. */
  color: var(--color-bg);
}

.engage__heading {
  margin: 0;
  font-size: 36px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  text-wrap: balance;
  color: var(--color-text);
}

.engage__heading-accent {
  color: var(--color-accent);
}

/* ---- Liste éditoriale : pas de fond, pas de bordure-conteneur ---- */
.engage__list {
  width: 100%;
  max-width: 860px;
  margin: 0;
  padding: 0;
}

/* Chaque engagement : grille [index | corps]. Le SEUL trait
   visible est un filet 1px brun à 16 % en haut. Le dernier
   item ferme la liste avec un filet bas symétrique. */
.engage__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 42px;
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid rgba(53, 45, 44, 0.24);
}

.engage__item:last-child {
  border-bottom: 1px solid rgba(53, 45, 44, 0.24);
}

/* Index 01-04 : discret, léger, corail. Rythme de sommaire. */
.engage__index {
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--color-bg);
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}

.engage__body {
  min-width: 0;
}

.engage__term {
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text);
}

/* Mot-clé en corail : accent chaud qui ressort sur le mint (choix Walid —
   le crème ne tranchait pas assez sur ces mots). */
.engage__key {
  color: var(--color-accent);
}

.engage__desc {
  margin: 0;
  max-width: 60ch;
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: var(--color-text);
}

/* ============================ TABLETTE (768-1199px) ============================ */
@media (max-width: 1199px) {
  .engage { padding: 96px 50px; gap: 50px; }
  .engage__item { column-gap: 34px; padding: 32px 0; }
  .engage__term { font-size: 23px; }
  .engage__desc { font-size: 17px; }
}

/* ============================ MOBILE (< 768px) ============================ */
@media (max-width: 767px) {
  .engage { padding: 60px 22px; gap: 34px; align-items: stretch; }
  .engage__head { text-align: left; max-width: 480px; }
  .engage__heading { font-size: 28px; line-height: 1.4; }
  .engage__list { max-width: 480px; margin: 0 auto; }
  /* L'index passe au-dessus de l'intitulé, sur sa propre ligne :
     plus de colonne étroite qui écrase le texte sur petit écran. */
  .engage__item {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 26px 0;
  }
  .engage__index {
    padding-top: 0;
    font-size: 15px;
    letter-spacing: 0.22em;
  }
  .engage__term { margin: 0 0 9px; font-size: 21px; line-height: 1.25; }
  .engage__desc { font-size: 16px; line-height: 1.6; max-width: none; }
}

/* ============================ REVEAL au scroll ============================ */
/* Réutilise js/reveal.js : data-reveal -> .is-visible.
   Sans JS (pas de .js sur <html>), tout reste visible. */
@keyframes engage-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.js .engage[data-reveal] .engage__head,
.js .engage[data-reveal] .engage__item {
  opacity: 0;
}

.engage.is-visible .engage__head {
  animation: engage-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.engage.is-visible .engage__item {
  animation: engage-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.engage.is-visible .engage__item:nth-child(1) { animation-delay:  60ms; }
.engage.is-visible .engage__item:nth-child(2) { animation-delay: 160ms; }
.engage.is-visible .engage__item:nth-child(3) { animation-delay: 260ms; }
.engage.is-visible .engage__item:nth-child(4) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .js .engage[data-reveal] .engage__head,
  .js .engage[data-reveal] .engage__item {
    opacity: 1;
    animation: none;
  }
}