/* ══════════════════════════════════════════════════════════════════
   GROOMLY — « Pourquoi Groomly », le bloc sous le hero de l'accueil
     .ch  la chronologie d'un samedi de rotation, puis trois points

   Le calculateur de prix qui suivait a ete retire : sa section vit
   maintenant dans etapes.css (« Ce que ca donne sur votre telephone »).
   Les regles .tr sont parties avec lui — du CSS mort est du CSS qu'on
   finit par avoir peur de toucher.

   Aucun indicateur d'activite nulle part : ni clients, ni note, ni
   logements geres. Ces chiffres-la se verifient.
   ══════════════════════════════════════════════════════════════════ */

.ch {
  --bl-encre:      var(--encre, #18181b);
  --bl-nuit:       var(--nuit-2, #12121d);
  --bl-gris:       var(--gris, #71717a);
  --bl-gris-clair: var(--gris-clair, #a1a1aa);
  --bl-trait:      var(--trait, #e7e7ec);
  --bl-fond:       var(--fond, #fbfbfd);
  --bl-blanc:      var(--blanc, #ffffff);
  --bl-rose:       var(--rose, #f43f5e);
  --bl-rose-fonce: var(--rose-fonce, #e11d48);
  --bl-max:        var(--max, 1180px);
}

/* ── Le fond colore de la chronologie ────────────────────────────
   Un blanc plein entre le hero (qui a son degrade anime) et la suite
   faisait un trou dans la page. Deux nappes fixes, tres diluees,
   reprennent les couleurs du hero sans bouger : le mouvement reste
   la propriete du hero, sinon deux fonds animes se disputent l'oeil. */
.ch {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bl-blanc); padding: 76px 20px;
}
.ch::before, .ch::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.ch::before {
  top: -22%; right: -12%; width: 52vw; height: 52vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(244,63,94,.16) 0%, rgba(244,63,94,0) 70%);
}
.ch::after {
  bottom: -26%; left: -14%; width: 48vw; height: 48vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(139,92,246,.15) 0%, rgba(139,92,246,0) 70%);
}

@media (min-width: 900px) { .ch { padding: 108px 24px; } }

.bl-env { width: 100%; max-width: var(--bl-max, 1180px); margin: 0 auto; position: relative; z-index: 1; }
.bl-sur {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bl-rose-fonce); margin: 0 0 14px;
}
.bl-titre {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.035em; margin: 0;
  color: var(--bl-encre); max-width: 20ch; text-wrap: balance;
}
.bl-intro {
  margin: 18px 0 0; color: var(--bl-gris); max-width: 58ch;
  font-size: 1.02rem; line-height: 1.65;
}

/* ══ LA CHRONOLOGIE ══════════════════════════════════════════════
   Cinq moments d'une meme journee. Une frise porte une information que
   cinq cartes cote a cote ne portent pas : l'ordre, et l'ecart de temps.
   C'est exactement ce que le proprietaire achete — savoir que ce sera
   pret AVANT l'arrivee, pas seulement que ce sera fait.

   Horizontale au-dela de 900 px, verticale en dessous : cinq colonnes
   sur un telephone donneraient des colonnes de deux mots. */
.ch-frise { margin-top: 52px; }

/* <ol> pour l'ordre, qui est une information : un lecteur d'ecran
   annonce « 1 sur 5 ». Les numeros affiches feraient double emploi avec
   les points de la frise, d'ou list-style: none. */
.ch-rail { display: grid; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .ch-rail { grid-template-columns: repeat(5, 1fr); gap: 0 18px; } }

.ch-pas { position: relative; padding: 0 0 28px 30px; min-width: 0; }
.ch-pas:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .ch-pas { padding: 34px 0 0; } }

/* Le trait s'arrete au dernier point au lieu de courir dans le vide.
   Il prend la couleur au fil de la journee : gris au depart, rose a
   l'arrivee — la teinte suit le recit au lieu de le decorer. */
.ch-pas::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--bl-trait), var(--fil, var(--bl-trait)));
}
.ch-pas:last-child::before { display: none; }
@media (min-width: 900px) {
  .ch-pas::before {
    left: 6px; right: -18px; top: 5px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--bl-trait), var(--fil, var(--bl-trait)));
  }
}
.ch-pas:nth-child(2) { --fil: rgba(244,63,94,.28); }
.ch-pas:nth-child(3) { --fil: rgba(244,63,94,.44); }
.ch-pas:nth-child(4) { --fil: var(--bl-rose); }

.ch-pas::after {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bl-blanc); border: 2px solid var(--bl-trait);
}
@media (min-width: 900px) { .ch-pas::after { top: -1px; } }
.ch-pas-cle::after {
  background: var(--bl-rose); border-color: var(--bl-rose);
  box-shadow: 0 0 0 5px rgba(244,63,94,.16);
}

.ch-heure {
  display: block; font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--bl-encre); font-variant-numeric: tabular-nums;
}
.ch-pas-cle .ch-heure { color: var(--bl-rose-fonce); }
.ch-quoi { display: block; margin-top: 5px; font-size: .9375rem; font-weight: 600; color: var(--bl-encre); }
.ch-pas p { margin: 7px 0 0; font-size: .875rem; line-height: 1.55; color: var(--bl-gris); }

/* ── Les trois points ────────────────────────────────────────────
   Volontairement PAS des cartes : la section contient deja une frise,
   empiler deux systemes encadres les met en concurrence. Trois
   colonnes separees par un filet, avec une pastille teintee chacune. */
.ch-points {
  display: grid; grid-template-columns: 1fr;
  margin-top: 54px; border-top: 1px solid var(--bl-trait);
}
@media (min-width: 780px) { .ch-points { grid-template-columns: repeat(3, 1fr); } }

.ch-point { padding: 26px 0; border-bottom: 1px solid var(--bl-trait); min-width: 0; }
.ch-point:last-child { border-bottom: 0; }
@media (min-width: 780px) {
  .ch-point { padding: 30px 28px 6px 0; border-bottom: 0; border-right: 1px solid var(--bl-trait); }
  .ch-point + .ch-point { padding-left: 28px; }
  .ch-point:last-child { border-right: 0; padding-right: 0; }
}
.ch-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
  background: var(--teinte, rgba(244,63,94,.1)); color: var(--sur-teinte, var(--bl-rose-fonce));
}
.ch-pastille svg { width: 18px; height: 18px; display: block; }
.ch-point:nth-child(2) .ch-pastille { --teinte: rgba(139,92,246,.12); --sur-teinte: #6d28d9; }
.ch-point:nth-child(3) .ch-pastille { --teinte: rgba(251,191,36,.18); --sur-teinte: #b45309; }
.ch-point h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--bl-encre); }
.ch-point p { margin: 9px 0 0; font-size: .9rem; line-height: 1.6; color: var(--bl-gris); }