/* ══════════════════════════════════════════════════════════════════
   GROOMLY — la page d'accueil (refaite le 12 octobre 2026)

   D'apres la maquette « Accueil Groomly » : une promesse centree sur
   un fond sable qui court sous la barre en pilule, deux objets qui
   flottent de chaque cote (la chambre prete, le releve de fin de
   mission), quatre faits, quatre portes en photos, une liste qui se
   deplie, un parcours en cinq temps avec son trait qui se trace, les
   derniers logements prets, le prix, les questions, les Grooms,
   l'application, la fin. Un seul bouton plein : le rose.

   Ce fichier ne porte QUE l'accueil. Le mouvement a la descente (le
   fil rose, les blocs .hb-anim) est dans habit.css, charge apres.

   Les couleurs sont celles de la plaquette : encre #0d0d10, sable
   #f4f1ec, rose #e11d48 (l'action), lac #0b6b5b (ce qui est fait).
   Les montants de la section « prix » sont ceux de Tarifs.java.
   ══════════════════════════════════════════════════════════════════ */

.hp {
  --hp-encre:    #0d0d10;
  --hp-encre-2:  #3f3f46;
  --hp-gris:     #65656e;
  --hp-gris-2:   #9a9aa3;
  --hp-filet:    #e4e4e7;
  --hp-filet-fort: #d4d4d8;
  --hp-papier:   #ffffff;
  --hp-bande:    #f6f6f4;
  --hp-sable:    #f4f1ec;
  --hp-sable-2:  #ebe6dd;
  --hp-nuit:     #0d0d10;
  --hp-rose:     #e11d48;
  --hp-rose-2:   #be123c;
  --hp-lac:      #0b6b5b;
  --hp-lac-pale: #e6f2ef;
  --hp-max:      1160px;
  --hp-barre:    80px;   /* la zone de la barre en pilule (14 + 66) */
  --hp-sortie:   cubic-bezier(.16, 1, .3, 1);
  accent-color: var(--hp-rose); caret-color: var(--hp-rose);
}
body.hp { background: var(--hp-papier); color: var(--hp-encre); }
.hp ::selection { background: #fff1f3; color: var(--hp-encre); }
.hp b, .hp th, .hp td, .hp time { font-variant-numeric: tabular-nums; }

.hp-env { width: 100%; max-width: var(--hp-max); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ── Les mots communs ──────────────────────────────────────────── */
.hp-micro {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--hp-gris-2);
}
.hp-h2 {
  margin: 12px 0 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.04em;
  color: var(--hp-encre); max-width: 22ch;
}
.hp-h2-centre { margin-left: auto; margin-right: auto; text-align: center; }
.hp-intro { margin: 16px 0 0; font-size: 1.06rem; line-height: 1.6; color: var(--hp-gris); max-width: 60ch; }
.hp-intro-centre { margin-left: auto; margin-right: auto; text-align: center; }
.hp-centre { text-align: center; }

.hp-sect { padding: 80px 0; }
@media (min-width: 900px) { .hp-sect { padding: 100px 0; } }
.hp-sect-bande { background: var(--hp-bande); }

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

/* ══ 1 · LA PROMESSE ═══════════════════════════════════════════════
   Le fond sable remonte sous la barre (margin-top negatif) et
   s'eclaircit vers le blanc. Le texte est centre dans une colonne
   etroite ; la photo et le releve sont poses en absolu de chaque
   cote, et n'existent qu'a partir de 980 px.
   ═════════════════════════════════════════════════════════════════ */
.hp-haut {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--hp-barre));
  padding: calc(var(--hp-barre) + 56px) 0 64px;
  background: linear-gradient(180deg, var(--hp-sable) 0%, var(--hp-papier) 100%);
}
@media (min-width: 980px) { .hp-haut { padding: calc(var(--hp-barre) + 92px) 0 96px; } }
.hp-haut-scene { position: relative; }
.hp-haut-texte {
  max-width: 600px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.hp-pastille {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 14px; border-radius: 999px;
  background: var(--hp-lac-pale); color: var(--hp-lac);
  font-size: .82rem; font-weight: 700; line-height: 1.3;
}
.hp-pastille svg { width: 14px; height: 14px; flex: none; }
.hp-h1 {
  margin: 0;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 3.6rem);
  line-height: 1.04; font-weight: 800; letter-spacing: -.045em;
  color: var(--hp-encre);
}
.hp-sous { margin: 0; max-width: 540px; font-size: 1.14rem; line-height: 1.55; color: var(--hp-gris); }
.hp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.hp-note { margin: 2px 0 0; font-size: .86rem; color: var(--hp-gris-2); }

/* La photo de gauche et sa puce. */
.hp-photo-g { display: none; position: absolute; left: 0; top: 110px; width: 240px; margin: 0; }
.hp-photo-g img {
  display: block; width: 240px; height: 320px; border-radius: 24px; object-fit: cover;
  box-shadow: 0 24px 48px rgba(13, 13, 16, .12);
}
.hp-puce {
  position: relative; z-index: 1;   /* peinte par-dessus l'image, fond compris */
  margin: -34px 0 0 36px; width: 226px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(13, 13, 16, .14);
  font-size: .86rem; line-height: 1.3; color: var(--hp-gris);
}
.hp-puce b { color: var(--hp-encre); font-weight: 700; }
.hp-puce-ok {
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-lac-pale); color: var(--hp-lac);
}
.hp-puce-ok svg { width: 16px; height: 16px; }

/* Le releve de droite : ce que le client recoit, tel quel. */
.hp-releve {
  display: none; position: absolute; right: 0; top: 40px; width: 252px; box-sizing: border-box;
  padding: 20px 20px 18px; background: #fff;
  border: 1px solid var(--hp-filet); border-radius: 24px;
  box-shadow: 0 24px 48px rgba(13, 13, 16, .12);
  flex-direction: column; gap: 12px;
}
.hp-releve-tete { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.hp-releve-tete .hp-micro { font-size: .64rem; }
.hp-releve-tete b { font-size: .88rem; color: var(--hp-encre); }
.hp-releve ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hp-encre); }
.hp-releve li {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--hp-filet); font-size: .82rem;
}
.hp-releve li:last-child { border-bottom: 0; }
.hp-releve li img { width: 34px; height: 34px; flex: none; border-radius: 8px; object-fit: cover; }
.hp-releve li span { flex: 1 1 auto; font-weight: 600; color: var(--hp-encre); }
.hp-releve li time { font-size: .78rem; color: var(--hp-gris); }
.hp-releve li svg { width: 14px; height: 14px; flex: none; color: var(--hp-lac); }
.hp-releve-pied {
  margin: 0; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: var(--hp-lac-pale); color: var(--hp-lac); font-size: .78rem; font-weight: 700;
}
.hp-releve-pied svg { width: 12px; height: 12px; }
@media (min-width: 980px) {
  .hp-photo-g { display: block; }
  .hp-releve { display: flex; }
}

/* ══ 2 · CE QUI EST GARANTI ════════════════════════════════════════ */
.hp-confiance-sect { padding: 0 0 56px; }
.hp-confiance {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1px;
  border: 1px solid var(--hp-filet); border-radius: 24px; background: var(--hp-filet); overflow: hidden;
}
@media (min-width: 620px) { .hp-confiance { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hp-confiance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-confiance li {
  display: flex; gap: 14px; align-items: flex-start; padding: 24px;
  background: #fff; font-size: .9rem; line-height: 1.45; color: var(--hp-gris);
}
.hp-confiance b { display: block; font-size: .96rem; color: var(--hp-encre); }
.hp-conf-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-lac-pale); color: var(--hp-lac);
}
.hp-conf-ico svg { width: 20px; height: 20px; }

/* ══ 3 · LA FRISE : QUATRE FAÇONS DE NE PLUS Y PENSER ══════════════
   Une frise a l'horizontale, collee a l'ecran le temps de quatre
   arrets (13 octobre 2026, d'apres le composant « Timeline » du
   Hyperiux Vault — GSAP ScrollTrigger + SplitText —, refait sans
   bibliotheque). frise.js pose « hp-frise-js » sur la section et y
   tient --p, l'avancement de la section dans l'ecran, de 0 a 1 ; tout
   le mouvement se calcule ici a partir de --p :
     — le rail glisse vers la gauche (translate) ;
     — la ligne se trace (scaleX) entre 8 % et 92 % ;
     — chaque arret a sa fenetre --a → --b (posee dans le gabarit) et
       en tire --k, de 0 a 1 : sa tige se dresse (scaleY), son point
       s'allume (scale), son texte monte et apparait.
   Sans script (pas de « hp-frise-js »), ou avec le mouvement reduit :
   --k vaut 1, rien n'est colle, le rail defile au doigt, tout est
   affiche. En dessous de 900 px : la meme liste a la verticale, une
   ligne a gauche, chaque arret apparaissant en entrant dans l'ecran
   (frise.js pose « hp-frise-vu »).
   ═════════════════════════════════════════════════════════════════ */
.hp-frise { position: relative; padding: 80px 0; }
.hp-frise-tete { display: flex; flex-direction: column; gap: 18px; }
.hp-frise-tete .hp-h2 { margin: 8px 0 0; max-width: 18ch; }
.hp-frise-note { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--hp-gris); max-width: 44ch; }
.hp-frise-piste { margin-top: 40px; padding: 0 24px; }
.hp-frise-photo { display: none; margin: 0; }
.hp-frise-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-frise-voie { position: relative; }
.hp-frise-ligne { display: none; }
.hp-frise-etapes { list-style: none; margin: 0; padding: 0; }

/* Un arret, a la verticale (telephone et tablette). */
.hp-frise-etape { --k: 1; position: relative; padding: 0 0 40px 30px; }
.hp-frise-etape::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -6px; width: 1px;
  background: var(--hp-filet-fort);
}
.hp-frise-etape:last-child::before { display: none; }
.hp-frise-rond {
  position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 999px;
  background: var(--hp-rose); box-shadow: 0 0 0 4px var(--hp-papier);
}
.hp-frise-tige { display: none; }
.hp-frise-vignette {
  display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0 0 14px; border-radius: 16px; background: var(--hp-sable-2);
}
.hp-frise-texte .hp-micro { color: var(--hp-rose); }
.hp-frise-texte h3 { margin: 6px 0 0; font-size: 1.4rem; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--hp-encre); }
.hp-frise-texte p:not(.hp-micro) { margin: 10px 0 0; font-size: .96rem; line-height: 1.55; color: var(--hp-gris); max-width: 42ch; }
.hp-frise-lien {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding-bottom: 2px;
  font-size: .92rem; font-weight: 700; color: var(--hp-encre); text-decoration: none;
  border-bottom: 1px solid var(--hp-encre); transition: color .14s ease, border-color .14s ease;
}
.hp-frise-lien svg { width: 16px; height: 16px; transition: transform .2s var(--hp-sortie); }
.hp-frise-lien:hover, .hp-frise-lien:focus-visible { color: var(--hp-rose); border-color: var(--hp-rose); }
.hp-frise-lien:hover svg { transform: translateX(3px); }
.hp-frise-lien:focus-visible { outline: 2px solid var(--hp-rose); outline-offset: 4px; }
@media (max-width: 899px) {
  .hp-frise-js .hp-frise-etape { opacity: 0; translate: 0 22px; transition: opacity .55s var(--hp-sortie), translate .55s var(--hp-sortie); }
  .hp-frise-js .hp-frise-etape.hp-frise-vu { opacity: 1; translate: 0 0; }
}

/* Ordinateur : la frise a l'horizontale. */
@media (min-width: 900px) {
  .hp-frise { padding: 0; }
  .hp-frise-js { height: 260vh; }
  .hp-frise-colle {
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: calc(var(--hp-barre) + 28px) 0 32px;
  }
  .hp-frise-js .hp-frise-colle { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .hp-frise-tete { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .hp-frise-note { text-align: right; max-width: 34ch; padding-bottom: 6px; }
  .hp-frise-piste { flex: 1 1 auto; display: flex; align-items: center; margin-top: 16px; padding: 0; overflow-x: auto; }
  .hp-frise-js .hp-frise-piste { overflow: clip; }
  .hp-frise-rail {
    display: flex; align-items: center; flex: none; gap: 4vw; width: max-content;
    height: clamp(480px, 74vh, 700px); padding: 0 8vw 0 5vw;
    will-change: transform;
  }
  .hp-frise-js .hp-frise-rail { translate: calc(var(--p, 0) * -71vw) 0; }
  .hp-frise-photo {
    display: block; flex: none; width: 30vw; height: 100%; max-height: 30vw;
    border-radius: 24px; overflow: hidden; background: var(--hp-sable-2);
    box-shadow: 0 24px 48px rgba(13, 13, 16, .12);
  }
  .hp-frise-voie { flex: none; width: 124vw; height: 100%; }
  .hp-frise-ligne {
    display: block; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
    background: var(--hp-rose); transform-origin: left; transform: scaleX(var(--kl, 1));
  }
  .hp-frise-js .hp-frise-ligne { --kl: clamp(0, calc((var(--p, 0) - .02) / .86), 1); }
  .hp-frise-ligne::before, .hp-frise-ligne::after {
    content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
    border-radius: 999px; background: var(--hp-rose);
  }
  .hp-frise-ligne::before { left: -5px; }
  .hp-frise-ligne::after { right: -5px; }
  .hp-frise-etapes { position: relative; height: 100%; }
  .hp-frise-etape {
    position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 32vw); width: 28vw; padding: 0;
  }
  .hp-frise-js .hp-frise-etape { --k: clamp(0, calc((var(--p, 0) - var(--a)) / (var(--b) - var(--a))), 1); }
  .hp-frise-etape::before { display: none; }
  .hp-frise-rond {
    left: -5px; top: 50%; margin-top: -5px; box-shadow: none;
    transform: scale(var(--k));
  }
  .hp-frise-tige {
    display: block; position: absolute; left: 0; width: 1px; height: 34px;
    background: var(--hp-rose); transform: scaleY(var(--k));
  }
  .hp-frise-haut .hp-frise-tige { bottom: 50%; transform-origin: bottom; }
  .hp-frise-bas .hp-frise-tige { top: 50%; transform-origin: top; }
  .hp-frise-texte {
    position: absolute; left: 0; width: 100%; box-sizing: border-box; padding-left: 22px;
    opacity: var(--k); translate: 0 calc((1 - var(--k)) * 28px);
  }
  .hp-frise-haut .hp-frise-texte { bottom: calc(50% + 44px); }
  .hp-frise-bas .hp-frise-texte { top: calc(50% + 44px); }
  /* La vignette de chaque arret n'a sa place au-dessus de la ligne
     que sur un ecran assez haut ; ailleurs la grande photo suffit. */
  .hp-frise-vignette { display: none; max-width: 150px; aspect-ratio: 3 / 2; margin-bottom: 12px; border-radius: 12px; }
  @media (min-height: 900px) { .hp-frise-vignette { display: block; } }
  .hp-frise-texte .hp-micro { font-size: .66rem; }
  .hp-frise-texte h3 { font-size: 1.4rem; }
  .hp-frise-texte p:not(.hp-micro) { font-size: .9rem; max-width: 36ch; }
  /* Sur un ecran bas, on resserre la tete. */
  @media (max-height: 839px) {
    .hp-frise-colle { padding: calc(var(--hp-barre) + 12px) 0 24px; }
    .hp-frise-tete .hp-h2 { font-size: 1.6rem; }
    .hp-frise-note { display: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-frise-js { height: auto; }
  .hp-frise-js .hp-frise-colle { position: static; height: auto; overflow: visible; }
  .hp-frise-js .hp-frise-piste { overflow-x: auto; }
  .hp-frise-js .hp-frise-rail { translate: none; }
  .hp-frise-js .hp-frise-ligne { --kl: 1; }
  .hp-frise-js .hp-frise-etape { --k: 1; opacity: 1; translate: none; transition: none; }
}

/* ══ 4 · POURQUOI GROOMLY : une liste qui se deplie ════════════════ */
.hp-pourquoi { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 900px) { .hp-pourquoi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.hp-pourquoi-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hp-pourquoi-texte .hp-h2 { margin: 0; }
.hp-pourquoi-texte .hp-intro { margin: 0; max-width: 40ch; }
.hp-raisons { border-top: 1px solid var(--hp-encre); }
.hp-raison { border-bottom: 1px solid var(--hp-filet); }
.hp-raison summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 16px; padding: 22px 0;
}
.hp-raison summary::-webkit-details-marker { display: none; }
.hp-raison-n { font-size: .82rem; font-weight: 700; color: var(--hp-gris-2); flex: none; width: 24px; }
.hp-raison-t { flex: 1 1 auto; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--hp-encre); }
.hp-plus {
  width: 36px; height: 36px; flex: none; padding: 8px; box-sizing: border-box;
  border: 1px solid var(--hp-filet); border-radius: 999px; color: var(--hp-encre);
  transition: transform .3s var(--hp-sortie), background .2s ease, color .2s ease;
}
.hp-raison[open] .hp-plus { background: var(--hp-encre); color: #fff; transform: rotate(45deg); }
.hp-raison p { margin: 0 0 24px 40px; max-width: 58ch; font-size: 1rem; line-height: 1.6; color: var(--hp-gris); }
.hp-raison summary:focus-visible { outline: 2px solid var(--hp-rose); outline-offset: 2px; border-radius: 8px; }

/* ══ 5 · LE PARCOURS, EN CINQ TEMPS ════════════════════════════════
   Photo a gauche, fil a droite. Le trait se trace et chaque temps
   apparait a la descente : en CSS la ou c'est pris en charge, sinon
   par defilement.js (html.hb-js + est-vu).
   ═════════════════════════════════════════════════════════════════ */
.hp-parcours { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hp-parcours { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.hp-parcours-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 24px; object-fit: cover; }
.hp-parcours-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hp-parcours-texte .hp-h2 { margin: 0; }
.hp-etapes-fil { position: relative; width: 100%; }
.hp-trait {
  position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
  background: var(--hp-encre); transform-origin: top;
}
.hp-etapes { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 34px; }
.hp-etape { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; }
.hp-etape-n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-encre); color: #fff; font-size: 1.05rem; font-weight: 800;
}
.hp-etape-fin { background: var(--hp-lac); }
.hp-etape-n svg { width: 20px; height: 20px; }
.hp-etape b { display: block; padding-top: 8px; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--hp-encre); }
.hp-etape p { margin: 6px 0 0; font-size: 1rem; line-height: 1.6; color: var(--hp-gris); }

@keyframes hp-trace { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@supports (animation-timeline: view()) {
  .hp-etapes-fil .hp-trait { animation: hp-trace linear both; animation-timeline: view(); animation-range: entry 15% cover 55%; }
}
.hb-js .hp-etapes-fil .hp-trait { opacity: 1; transform: scaleY(0); transition: transform 1.2s var(--hp-sortie); }
.hb-js .hp-etapes-fil .hp-trait.est-vu { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hp-etapes-fil .hp-trait { animation: none !important; transform: none !important; transition: none !important; } }

/* ══ 6 · LES DERNIERS LOGEMENTS PRETS ══════════════════════════════ */
.hp-derniers { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 620px) { .hp-derniers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hp-derniers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-dernier {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  border: 1px solid var(--hp-filet); border-radius: 20px; background: #fff;
}
.hp-dernier h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--hp-encre); }
.hp-dernier p { margin: 0; }
.hp-etat {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--hp-lac-pale); color: var(--hp-lac); font-size: .75rem; font-weight: 700;
}
.hp-etat svg { width: 12px; height: 12px; }
.hp-dernier-photos { font-size: .88rem; color: var(--hp-gris); }
.hp-dernier-photos b { color: var(--hp-encre); }

/* ══ 7 · LE PRIX ═══════════════════════════════════════════════════ */
.hp-paliers { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 700px) { .hp-paliers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-palier {
  display: flex; flex-direction: column; gap: 6px; padding: 28px 26px;
  border: 1px solid var(--hp-filet); border-radius: 24px; background: #fff;
}
.hp-palier .hp-micro { letter-spacing: .1em; }
.hp-palier b { font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--hp-encre); }
.hp-palier span:last-child { font-size: .95rem; color: var(--hp-gris); }
.hp-prix-note { margin: 18px auto 0; max-width: 70ch; text-align: center; font-size: .88rem; line-height: 1.55; color: var(--hp-gris-2); }
.hp-prix-note a { color: var(--hp-gris); font-weight: 600; }
#prix .hp-centre:last-child { margin: 30px 0 0; }

/* ══ 8 · LES QUESTIONS ═════════════════════════════════════════════ */
.hp-faq-env { max-width: 860px; }
.hp-faq { margin-top: 36px; border-top: 1px solid var(--hp-encre); }
.hp-q { border-bottom: 1px solid var(--hp-filet); }
.hp-q summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; color: var(--hp-encre);
}
.hp-q summary::-webkit-details-marker { display: none; }
.hp-q[open] .hp-plus { background: var(--hp-encre); color: #fff; transform: rotate(45deg); }
.hp-q div p { margin: 0 0 22px; max-width: 68ch; font-size: 1rem; line-height: 1.62; color: var(--hp-gris); }
.hp-q summary:focus-visible { outline: 2px solid var(--hp-rose); outline-offset: 2px; border-radius: 8px; }
.hp-faq-plus { margin: 22px 0 0; font-size: .95rem; color: var(--hp-gris); }
.hp-faq-plus a { color: var(--hp-encre); font-weight: 700; }

/* ══ 9 · POUR LES GROOMS ═══════════════════════════════════════════ */
.hp-autre {
  display: grid; gap: 28px; align-items: center;
  padding: 34px; border: 1px solid var(--hp-encre); border-radius: 24px;
}
@media (min-width: 900px) { .hp-autre { grid-template-columns: 1fr auto; gap: 48px; padding: 42px; } }
.hp-autre h2 { margin: 12px 0 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; }
.hp-autre p { margin: 14px 0 0; font-size: 1rem; line-height: 1.6; color: var(--hp-gris); max-width: 58ch; }
.hp-autre-pts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-autre-pts li {
  padding: 7px 12px; border: 1px solid var(--hp-filet); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--hp-encre-2); background: var(--hp-papier);
}

/* ══ 10 · L'APPLICATION ════════════════════════════════════════════ */
.hp-app-grille { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .hp-app-grille { grid-template-columns: 1fr auto; gap: 64px; } }
.hp-app-aide { margin: 18px 0 0; font-size: .9rem; line-height: 1.5; color: var(--hp-gris-2); max-width: 44ch; }
.hp-codes { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hp-carre {
  width: 192px; height: 192px; padding: 16px; box-sizing: border-box;
  border: 1px solid var(--hp-filet); border-radius: 24px; background: #fff;
}
.hp-carre img { display: block; width: 100%; height: 100%; }
.hp-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hp-badges img { display: block; height: 40px; width: auto; }

/* ══ 11 · LA FIN ═══════════════════════════════════════════════════ */
.hp-fin { background: var(--hp-nuit); color: #fff; padding: 96px 0; text-align: center; }
.hp-fin h2 {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: 1.06; font-weight: 800; letter-spacing: -.04em;
}
.hp-fin p { margin: 20px auto 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.55; color: #c9c9cf; }
.hp-fin-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hp-fin .hp-btn-ligne { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.hp-fin .hp-btn-ligne:hover { background: transparent; border-color: #fff; }

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