/* ══════════════════════════════════════════════════════════════════
   GROOMLY — pour les propriétaires
   Refaite le 16 septembre 2026, dans le registre du reste du site :
   LE TABLEAU DE SERVICE. Le haut de page est celui de l'accueil, au
   pixel près ; le reste suit la même grammaire sans le recopier.

   ══ CE QUI A CHANGE ══════════════════════════════════════════════

   1. LE HERO SOMBRE EST PARTI. Bandeau nuit, trois nappes dérivantes,
      une trame, un projecteur qui suivait le pointeur, et le titre
      découpé mot par mot pour apparaître en décalé. Beaucoup de
      machinerie pour dire une phrase.

   2. LES TROIS ÉTAPES ÉTAIENT DES CARTES QUI S'EMPILAIENT en
      « position: sticky », chacune venant recouvrir la précédente,
      avec un script pour leur faire faire un pas en arrière. C'est un
      effet de site d'agence : on regarde l'empilement, on ne lit plus
      les étapes. Ce sont trois lignes d'une feuille de service.

   3. LES DEUX BOUTONS MENAIENT À L'APP STORE. Sur une page qui
      explique le service à un propriétaire, l'action suivante est de
      réserver — sur le site, sans rien installer.

   La page ne charge plus pages.css, animations.css, pages.js ni
   proprietaires.js : ils ne servaient que ce qui vient d'être retiré.
   ══════════════════════════════════════════════════════════════════ */

.pr {
  --pr-encre:    #0d0d10;
  --pr-encre-2:  #3f3f46;
  --pr-gris:     #65656e;
  --pr-gris-2:   #9a9aa3;
  --pr-filet:    #e4e4e7;
  --pr-filet-f:  #d4d4d8;
  --pr-papier:   #ffffff;
  --pr-bande:    #f6f6f4;
  --pr-nuit:     #12141c;
  --pr-rose:     #e11d48;
  --pr-rose-2:   #be123c;
  --pr-vert:     #0b6b5b;
  --pr-vert-2:   #08594b;
  --pr-max:      1160px;
}

body.pr-page { background: var(--pr-papier); color: var(--pr-encre); }
.pr ::selection { background: #fff1f3; color: var(--pr-encre); }

.pr-env { width: 100%; max-width: var(--pr-max); margin: 0 auto; padding: 0 24px; }
.pr b, .pr th, .pr td { font-variant-numeric: tabular-nums; }

.pr-micro {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pr-gris-2);
}
.pr-h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.4rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.035em;
  color: var(--pr-encre); max-width: 22ch;
}
.pr-intro { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.62; color: var(--pr-gris); max-width: 62ch; }

.pr-sect { padding: 72px 0; border-top: 1px solid var(--pr-filet); }
.pr-sect-bande { background: var(--pr-bande); }
@media (min-width: 900px) { .pr-sect { padding: 96px 0; } }

/* ── Les boutons ───────────────────────────────────────────────── */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.pr-btn svg { width: 18px; height: 18px; flex: none; }
.pr-btn-plein { background: var(--pr-rose); color: #fff; }
.pr-btn-plein:hover { background: var(--pr-rose-2); }
.pr-btn-ligne { background: var(--pr-papier); color: var(--pr-encre); border-color: var(--pr-filet-f); }
.pr-btn-ligne:hover { border-color: var(--pr-encre); }
.pr-btn-blanc { background: #fff; color: var(--pr-nuit); }
.pr-btn-blanc:hover { background: #ededf0; }
.pr-btn:focus-visible { outline: 2px solid var(--pr-rose); outline-offset: 3px; }

/* ══ LE HAUT DE PAGE — identique a celui de l'accueil ══════════════ */
.pr-haut { padding: 44px 0 56px; }
@media (min-width: 900px) { .pr-haut { padding: 60px 0 72px; } }
.pr-fil { margin: 0 0 20px; font-size: .82rem; color: var(--pr-gris-2); }
.pr-fil a { color: var(--pr-gris); text-decoration: none; }
.pr-fil a:hover { color: var(--pr-encre); text-decoration: underline; text-underline-offset: 3px; }
.pr-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.3rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -.045em;
  color: var(--pr-encre); max-width: 17ch;
}
.pr-h1 em { font-style: normal; color: var(--pr-gris); }
.pr-sous { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--pr-encre-2); max-width: 54ch; }
.pr-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.pr-faits { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; max-width: 640px; }
.pr-fait {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--pr-filet);
  font-size: .95rem; line-height: 1.5; color: var(--pr-encre-2);
}
.pr-fait:last-child { border-bottom: 1px solid var(--pr-filet); }
.pr-fait b { color: var(--pr-encre); font-weight: 700; }
.pr-fait svg { width: 15px; height: 15px; flex: none; color: var(--pr-vert); transform: translateY(2px); }

/* ══ LE PARCOURS ═══════════════════════════════════════════════════
   Trois lignes, pas trois cartes qui se recouvrent. Le libelle de
   gauche dit ce qu'on fait ; le reste dit comment.
   ═════════════════════════════════════════════════════════════════ */
.pr-pile { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--pr-encre); }
.pr-etape {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 26px 0; border-bottom: 1px solid var(--pr-filet);
}
@media (min-width: 860px) {
  .pr-etape { grid-template-columns: 210px 1fr; gap: 32px; }
}
.pr-quand { font-size: .8rem; font-weight: 700; color: var(--pr-encre); }
.pr-quand span { display: block; margin-top: 4px; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pr-gris-2); }
.pr-etape h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.025em; color: var(--pr-encre); }
.pr-etape p { margin: 9px 0 0; font-size: .95rem; line-height: 1.6; color: var(--pr-gris); max-width: 60ch; }
.pr-marques { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pr-marque {
  padding: 6px 11px; border: 1px solid var(--pr-filet); border-radius: 7px;
  background: var(--pr-papier);
  font-size: .8rem; font-weight: 600; color: var(--pr-encre-2);
}

/* ══ LES GARANTIES ═════════════════════════════════════════════════ */
.pr-gars { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--pr-encre); }
.pr-g {
  display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px;
  padding: 24px 0; border-bottom: 1px solid var(--pr-filet);
}
/* Chaque enfant dit sa colonne : en deux colonnes pour trois enfants,
   le placement automatique renvoie le paragraphe dans la colonne du
   numero, large de 44 px. */
.pr-g-nb { grid-column: 1; grid-row: 1; font-size: .82rem; font-weight: 700; color: var(--pr-vert); padding-top: 2px; }
.pr-g b   { grid-column: 2; grid-row: 1; font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; color: var(--pr-encre); }
.pr-g p   { grid-column: 2; grid-row: 2; margin: 8px 0 0; font-size: .95rem; line-height: 1.6; color: var(--pr-gris); }
@media (min-width: 860px) {
  .pr-g { grid-template-columns: 44px 300px 1fr; gap: 28px; align-items: baseline; }
  .pr-g p { grid-column: 3; grid-row: 1; margin: 0; }
}

/* ══ CE QUI EST COMPRIS ════════════════════════════════════════════ */
.pr-pieces {
  display: grid; gap: 1px; margin-top: 40px; background: var(--pr-filet);
  border-top: 1px solid var(--pr-encre); border-bottom: 1px solid var(--pr-filet);
}
@media (min-width: 620px) { .pr-pieces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pr-pieces { grid-template-columns: repeat(4, 1fr); } }
.pr-piece { background: var(--pr-papier); padding: 24px 22px; }
.pr-piece h3 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.pr-piece p { margin: 9px 0 0; font-size: .92rem; line-height: 1.55; color: var(--pr-gris); }
.pr-inc-pied { margin: 26px 0 0; font-size: .95rem; line-height: 1.6; color: var(--pr-gris); max-width: 72ch; }
.pr-inc-pied a { color: var(--pr-encre); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ══ LE PRIX ═══════════════════════════════════════════════════════
   ATTENTION — ces montants sont ceux de Tarifs.java. Toute evolution
   de la grille doit etre repercutee ici, sinon la page annonce un
   prix que le serveur ne facturera pas.
   ═════════════════════════════════════════════════════════════════ */
.pr-table { width: 100%; border-collapse: collapse; margin-top: 40px; }
.pr-table caption { text-align: left; font-size: .8rem; line-height: 1.55; color: var(--pr-gris);
  padding-bottom: 14px; max-width: 70ch; }
.pr-table th[scope="col"] {
  text-align: left; padding: 0 0 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pr-gris-2);
  border-bottom: 1px solid var(--pr-encre);
}
.pr-table th[scope="row"] {
  text-align: left; padding: 16px 0; font-size: 1rem; font-weight: 700; color: var(--pr-encre);
  border-bottom: 1px solid var(--pr-filet);
}
.pr-table td { padding: 16px 0; border-bottom: 1px solid var(--pr-filet); font-size: .95rem; color: var(--pr-gris); }
.pr-table th:nth-child(2), .pr-table td:nth-child(2) { text-align: right; }
.pr-montant { font-weight: 800; color: var(--pr-encre) !important; font-size: 1.05rem !important; }
.pr-prix-pied { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pr-prix-pied span { font-size: .88rem; color: var(--pr-gris); }

/* ══ L'APPEL FINAL ═════════════════════════════════════════════════ */
.pr-fin { background: var(--pr-nuit); color: #fff; padding: 80px 0; }
.pr-fin h2 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.04em; max-width: 20ch; }
.pr-fin p { margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: #a8a8b2; max-width: 52ch; }
.pr-fin-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.pr-fin .pr-btn-ligne { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.pr-fin .pr-btn-ligne:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pr *, .pr *::before, .pr *::after { transition-duration: .01ms !important; }
}