/* ══════════════════════════════════════════════════════════════════
   GROOMLY — L'HABIT (12 octobre 2026)

   La couche qui donne a toutes les pages publiques le meme habit que
   le nouvel accueil : un heros centre sur fond sable qui court sous la
   barre en pilule, des boutons en pilule, des cartes aux coins ronds,
   des sections sans filet, et le mouvement a la descente (le fil rose
   de progression en haut de l'ecran, les blocs qui apparaissent quand
   ils entrent dans l'ecran).

   Ce fichier est charge EN DERNIER, apres la feuille de la page
   (proprietaires.css, tarifs.css, faq.css, devenir-groom.css…) : il
   ne remplace pas ces feuilles, il les recouvre la ou l'habit change.
   Les familles de classes se repondent (pr-haut, tf-haut, fa-haut,
   dg-haut, dv-haut ; pr-btn, tf-btn…), ce qui permet de les habiller
   d'un seul geste. L'accueil (accueil.css) a son propre jeu, taille
   sur mesure, et ne charge que le mouvement d'ici.

   Les couleurs sont celles de la plaquette : encre #0d0d10, sable
   #f4f1ec, rose #e11d48 (l'action), lac #0b6b5b (ce qui est fait).

   Toute modification de ce fichier doit changer son « ?v= » dans
   chaque gabarit qui le charge.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --hb-encre:   #0d0d10;
  --hb-encre-2: #3f3f46;
  --hb-gris:    #65656e;
  --hb-gris-2:  #9a9aa3;
  --hb-filet:   #e4e4e7;
  --hb-filet-f: #d4d4d8;
  --hb-papier:  #ffffff;
  --hb-bande:   #f6f6f4;
  --hb-sable:   #f4f1ec;
  --hb-sable-2: #ebe6dd;
  --hb-rose:    #e11d48;
  --hb-rose-2:  #be123c;
  --hb-lac:     #0b6b5b;
  --hb-lac-p:   #e6f2ef;
  --hb-max:     1160px;
  /* La hauteur de la zone de la barre (14 px + 66 px) : les heros
     remontent d'autant pour que leur fond coure sous la pilule. */
  --hb-barre:   80px;
}

/* ══ LE MOUVEMENT ══════════════════════════════════════════════════
   1. Le fil rose en haut de l'ecran, qui s'allonge a la descente.
   2. Les blocs qui apparaissent en entrant dans l'ecran.
   Les deux sont lies au defilement, en CSS seul (animation-timeline)
   la ou c'est pris en charge ; sinon defilement.js observe les memes
   blocs et pose « est-vu » (html.hb-js), et sans script du tout, tout
   est simplement affiche. Les gens qui ont coupe les animations n'en
   voient aucune. Les titres et les textes ne s'animent jamais : ils
   restent lisibles pour tout le monde, moteurs de recherche compris ;
   seuls les blocs (cartes, lignes) bougent.
   ═════════════════════════════════════════════════════════════════ */
.hb-progres {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 3px; background: var(--hb-rose);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
@keyframes hb-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hb-apparait { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Les blocs qui apparaissent : une liste par famille, la meme que
   dans defilement.js. Un bloc deja a l'ecran au chargement est
   simplement affiche (sa progression est deja a 1). */
@supports (animation-timeline: view()) {
  .hb-progres { animation: hb-progression linear both; animation-timeline: scroll(root); }
  .hb-anim,
  .pr-piece, .pr-camp, .pr-etape, .pr-g, .pr-fait,
  .tf-piece, .tf-palier, .tf-fait,
  .fa-groupe,
  .dg-piece, .dg-cond, .dg-fait,
  .dv-route {
    animation: hb-apparait linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
/* Le repli, pilote par defilement.js : cache tant que pas vu, puis une
   transition courte. */
.hb-js .hb-anim,
.hb-js .pr-piece, .hb-js .pr-camp, .hb-js .pr-etape, .hb-js .pr-g, .hb-js .pr-fait,
.hb-js .tf-piece, .hb-js .tf-palier, .hb-js .tf-fait,
.hb-js .fa-groupe,
.hb-js .dg-piece, .hb-js .dg-cond, .hb-js .dg-fait,
.hb-js .dv-route {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
.hb-js .est-vu { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hb-progres { animation: none; transform: scaleX(0); }
  .hb-anim, .hb-js .hb-anim,
  .pr-piece, .pr-camp, .pr-etape, .pr-g, .pr-fait,
  .tf-piece, .tf-palier, .tf-fait, .fa-groupe,
  .dg-piece, .dg-cond, .dg-fait, .dv-route {
    animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ══ LE HEROS, LE MEME PARTOUT ═════════════════════════════════════
   Centre, sur un fond sable qui s'eclaircit vers le blanc et qui
   remonte sous la pilule de navigation. Le fil d'Ariane, le titre, la
   phrase, les boutons, puis les faits en cases — le texte change avec
   la page, pas la forme.
   ═════════════════════════════════════════════════════════════════ */
.pr-haut, .tf-haut, .fa-haut, .dg-haut, .dv-haut {
  position: relative;
  margin-top: calc(-1 * var(--hb-barre));
  padding: calc(var(--hb-barre) + 56px) 0 64px;
  background: linear-gradient(180deg, var(--hb-sable) 0%, var(--hb-papier) 100%);
  border-bottom: 0;
  text-align: center;
}
@media (min-width: 900px) {
  .pr-haut, .tf-haut, .fa-haut, .dg-haut, .dv-haut { padding: calc(var(--hb-barre) + 80px) 0 80px; }
}
.pr-fil, .tf-fil, .fa-fil, .dg-fil, .dv-fil {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px;
  margin: 0 0 22px; font-size: .82rem; color: var(--hb-gris-2);
}
.pr-h1, .tf-h1, .fa-h1, .dg-h1, .dv-h1 {
  margin: 0 auto;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.04; font-weight: 800; letter-spacing: -.045em;
  color: var(--hb-encre); max-width: 18ch;
}
.pr-h1 em, .tf-h1 em, .fa-h1 em, .dg-h1 em, .dv-h1 em { font-style: normal; color: var(--hb-gris); }
.pr-sous, .tf-sous, .fa-sous, .dg-sous, .dv-sous {
  margin: 22px auto 0; font-size: 1.14rem; line-height: 1.6;
  color: var(--hb-gris); max-width: 58ch;
}
.pr-actions, .dg-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Les faits du heros : des cases blanches aux coins ronds, en rangee,
   a la place de la liste a filets. */
.pr-faits, .tf-faits, .dg-faits {
  list-style: none; margin: 40px auto 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 1040px; text-align: left;
}
@media (min-width: 620px) { .pr-faits, .tf-faits, .dg-faits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pr-faits, .tf-faits, .dg-faits { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tf-faits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-fait, .tf-fait, .dg-fait {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px; border: 1px solid var(--hb-filet); border-top: 1px solid var(--hb-filet); border-bottom: 1px solid var(--hb-filet);
  border-radius: 18px; background: var(--hb-papier);
  font-size: .93rem; line-height: 1.5; color: var(--hb-gris);
}
.pr-fait:last-child, .tf-fait:last-child, .dg-fait:last-child { border-bottom: 1px solid var(--hb-filet); }
.pr-fait b, .tf-fait b, .dg-fait b { color: var(--hb-encre); font-weight: 700; }
.pr-fait svg, .tf-fait svg, .dg-fait svg {
  width: 32px; height: 32px; flex: none; padding: 8px; box-sizing: border-box;
  border-radius: 999px; background: var(--hb-lac-p); color: var(--hb-lac); transform: none;
}

/* La recherche de l'aide, centree sous le titre. */
.fa-chercher { margin-left: auto; margin-right: auto; max-width: 640px; }
.fa-rubriques { justify-content: center; }

/* ══ LES BOUTONS, EN PILULE ════════════════════════════════════════ */
.pr-btn, .tf-btn, .fa-btn, .dg-btn, .dv-cta, .hp-btn {
  border-radius: 999px; min-height: 54px; padding: 0 26px;
}
.pr-btn-ligne, .tf-btn-ligne, .fa-btn-ligne, .dg-btn-ligne { border-color: var(--hb-encre); }
.pr-btn-ligne:hover, .tf-btn-ligne:hover, .fa-btn-ligne:hover, .dg-btn-ligne:hover { background: var(--hb-bande); }
.pr-fin .pr-btn-ligne, .tf-fin .tf-btn-ligne, .fa-fin .fa-btn-ligne, .dg-fin .dg-btn-ligne { border-color: rgba(255, 255, 255, .35); }
.pr-fin .pr-btn-ligne:hover, .tf-fin .tf-btn-ligne:hover, .fa-fin .fa-btn-ligne:hover, .dg-fin .dg-btn-ligne:hover { background: transparent; border-color: #fff; }

/* ══ LES SECTIONS : PLUS DE FILET, DES BANDES QUI ALTERNENT ════════ */
.pr-sect, .tf-sect, .fa-sect, .dg-sect { border-top: 0; padding: 80px 0; }
@media (min-width: 900px) { .pr-sect, .tf-sect, .fa-sect, .dg-sect { padding: 100px 0; } }
.pr-h2, .tf-h2, .fa-h2, .dg-h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.04em; }

/* ══ LES CARTES, AUX COINS RONDS ═══════════════════════════════════
   La grille a filets de 1 px (fond gris, cases blanches jointives)
   devient des cartes separees, bordees, aux coins de 20 px. */
.pr-pieces, .tf-pieces, .dg-pieces {
  gap: 16px; background: transparent; border-top: 0; border-bottom: 0;
}
.pr-piece, .tf-piece, .dg-piece {
  border: 1px solid var(--hb-filet); border-radius: 20px; padding: 26px 24px;
}
.pr .pr-camp { border-radius: 24px; padding: 28px 26px; }
.pr-marque { border-radius: 999px; }
.pr-fin, .tf-fin, .fa-fin, .dg-fin { background: var(--hb-encre); }

/* ══ LE HÉROS AVEC SON IMAGE ═══════════════════════════════════════
   Demande du 12 octobre (le site tournant en local) : « sur toutes
   les pages, dans le heros, une image, un releve ou autre chose ».
   Le heros garde son fond sable et ses faits en cases, mais le texte
   passe a gauche et une « vue » prend la droite :
     .hb-haut        la grille texte | vue (une colonne et texte centre
                     jusqu'a 1099 px ; deux colonnes et texte a gauche
                     a partir de 1100 px — en dessous, la paire photo +
                     carte serait trop etroite)
     .hb-vue         la vue : une photo aux coins ronds (.hb-vue-photo)
                     et, A COTE d'elle — jamais dessus, Dylan n'a pas
                     voulu de l'empilement —, une carte (.hb-carte) qui
                     dit quelque chose de vrai sur la page : le releve
                     de fin de mission (proprietaires, villes), le prix
                     d'un T2 (tarifs), le cycle du mois (entreprises),
                     une mission proposee (devenir Groom), trois
                     questions (aide), les deux remises (parrainage),
                     le passage hebdomadaire (locaux)… .hb-vue-duo pose
                     la photo (en portrait) et la carte cote a cote,
                     comme sur l'accueil. Sans carte, la photo seule
                     (guides) ; sans photo, un appel d'API
                     (developpeurs : .hb-code).
   La photo du heros se charge tout de suite (c'est la plus grande
   image au-dessus de la ligne de flottaison) ; les vignettes de la
   carte, a la demande. Les chiffres des cartes sont ceux du bareme
   public, jamais des resultats de clients.
   ══════════════════════════════════════════════════════════════════ */
.hb-haut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hb-haut-texte { min-width: 0; }
.hb-vue { position: relative; width: 100%; max-width: 600px; margin: 0 auto; text-align: left; }
.hb-vue-photo {
  margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 5 / 4;
  background: var(--hb-sable-2); box-shadow: 0 24px 48px rgba(13, 13, 16, .12);
}
.hb-vue-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Photo et carte cote a cote : sur telephone l'une sous l'autre, a
   partir de 560 px en deux colonnes, la carte calee en bas. */
.hb-vue-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: end; }
.hb-vue-duo .hb-vue-photo { aspect-ratio: 4 / 5; }
@media (min-width: 560px) {
  .hb-vue-duo { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 20px; }
}
.hb-carte {
  min-width: 0; box-sizing: border-box;
  padding: 18px 18px 16px; background: #fff; border: 1px solid var(--hb-filet); border-radius: 20px;
  box-shadow: 0 18px 40px rgba(13, 13, 16, .12);
  display: flex; flex-direction: column; gap: 10px;
}
.hb-carte-tete { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.hb-carte-tete small { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-gris-2); }
.hb-carte-tete b { font-size: .9rem; line-height: 1.3; color: var(--hb-encre); }
.hb-carte ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hb-encre); }
.hb-carte li {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--hb-filet); font-size: .82rem; line-height: 1.3; color: var(--hb-gris);
}
.hb-carte li:last-child { border-bottom: 0; }
.hb-carte li img { width: 32px; height: 32px; flex: none; border-radius: 8px; object-fit: cover; }
.hb-carte li span { flex: 1 1 auto; font-weight: 600; color: var(--hb-encre); }
.hb-carte li em, .hb-carte li time { flex: 0 1 auto; font-style: normal; font-size: .78rem; color: var(--hb-gris); text-align: right; }
.hb-carte li svg { width: 14px; height: 14px; flex: none; color: var(--hb-lac); }
.hb-carte li a { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; color: inherit; text-decoration: none; }
.hb-carte li a span { flex: 1 1 auto; }
.hb-carte li a:hover span { color: var(--hb-rose); }
.hb-carte li a svg { color: var(--hb-gris-2); }
.hb-carte-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 2px; font-size: .9rem; font-weight: 800; color: var(--hb-encre); }
.hb-carte-total b { font-size: 1.25rem; letter-spacing: -.03em; }
.hb-carte-pied {
  margin: 0; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: var(--hb-lac-p); color: var(--hb-lac); font-size: .78rem; font-weight: 700;
}
.hb-carte-pied svg { width: 12px; height: 12px; }
/* L'appel d'API des developpeurs : une carte sombre, sans photo. */
.hb-code {
  margin: 0; padding: 22px 24px; border-radius: 20px; background: #141418; color: #e8e8ee;
  box-shadow: 0 24px 48px rgba(13, 13, 16, .18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
}
.hb-code b { font-weight: 400; color: #8ee0c9; }
.hb-code i { font-style: normal; color: #9a9aa3; }
@media (min-width: 1100px) {
  .hb-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .hb-haut-texte { text-align: left; }
  .hb-haut .pr-fil, .hb-haut .tf-fil, .hb-haut .fa-fil, .hb-haut .dg-fil, .hb-haut .dv-fil { justify-content: flex-start; }
  .hb-haut .pr-h1, .hb-haut .tf-h1, .hb-haut .fa-h1, .hb-haut .dg-h1, .hb-haut .dv-h1 { margin-left: 0; margin-right: 0; max-width: 15ch; }
  .hb-haut .pr-sous, .hb-haut .tf-sous, .hb-haut .fa-sous, .hb-haut .dg-sous, .hb-haut .dv-sous { margin-left: 0; margin-right: 0; max-width: 52ch; }
  .hb-haut .pr-actions, .hb-haut .dg-actions { justify-content: flex-start; }
  .hb-haut .fa-chercher { margin-left: 0; }
  .hb-haut .fa-rubriques { justify-content: flex-start; }
  .hb-vue { margin: 0 0 0 auto; }
  .hb-vue-code { max-width: 560px; }
}

/* ══ LES PHOTOS À CÔTÉ DES TEXTES ══════════════════════════════════
   Demande du 12 octobre : « des images aussi a cote des textes, au
   milieu », comme sur l'accueil. Dans une section, le texte de tete
   (surtitre, titre, phrase) et une photo se partagent la largeur ; le
   reste de la section (cartes, bareme, liste) garde toute la largeur
   en dessous. Sur telephone : le texte, la photo, puis le reste.
     .hb-duo         texte a gauche, photo a droite
     .hb-duo-inv     photo a gauche
     .hb-duo-colle   la photo accompagne toute la colonne de texte
                     (tete + etapes, questions, article) et reste
                     collee a l'ecran pendant qu'on lit ; a gauche,
                     ou a droite avec .hb-duo-droite
     .hb-illu        la photo : coins de 24 px, 4/3 ; .hb-illu-haut 4/5
   Les photos sont celles de Dylan (static/photos/accueil-*.jpg, de
   vrais logements) et les cinq photos d'options deja sur le site
   (option-*.webp). Pas de legende : elles illustrent, elles ne
   prouvent rien. Le texte garde la lecture ; la photo ne s'anime que
   pour apparaitre (hb-anim).
   ══════════════════════════════════════════════════════════════════ */
.hb-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 44px; }
.hb-duo > * { min-width: 0; }
.hb-tete > :last-child { margin-bottom: 0; }
.hb-illu {
  margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--hb-sable-2);
}
.hb-illu img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-illu-haut { aspect-ratio: 4 / 5; }
/* Un bloc qui suit un duo, ou qui vit dedans, n'a plus besoin de son
   ecart du haut : le duo l'a deja. */
.hb-duo + .pr-pile, .hb-duo + .pr-gars, .hb-duo + .pr-pieces, .hb-duo + .pr-table,
.hb-duo + .tf-outil, .hb-duo + .tf-tab, .hb-duo + .tf-pieces, .hb-duo + .tf-opts,
.hb-duo + .dg-outil, .hb-duo + .dg-conds, .hb-duo + .dg-registre, .hb-duo + .dg-pieces,
.hb-duo + .pr-deux, .hb-duo + .pr-trois, .hb-duo + .pr-jour, .hb-duo + .vl-deps, .hb-duo + .pr-prix-pied,
.hb-duo + .pr-faq, .hb-duo + .lp-six,
.hb-duo-colle > .pr-pile, .hb-duo-colle > .dg-pieces, .hb-duo-colle > .fa-groupes { margin-top: 0; }
.hb-duo-colle > .fa-groupes > .fa-groupe:first-child { margin-top: 0; }
.hb-duo-colle > .pr-article { max-width: none; }
.hb-duo-colle { align-items: start; margin-bottom: 0; }
@media (min-width: 860px) {
  .hb-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; margin-bottom: 52px; }
  .hb-duo-inv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hb-duo-inv > .hb-illu { order: -1; }
  /* Colle : la photo prend la colonne de gauche sur toute la hauteur,
     le texte (tete, puis liste) s'empile a droite. */
  .hb-duo-colle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; }
  .hb-duo-colle > .hb-illu { grid-column: 1; grid-row: 1 / 3; position: sticky; top: calc(var(--hb-barre) + 16px); }
  .hb-duo-colle > :not(.hb-illu) { grid-column: 2; }
  .hb-duo-droite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hb-duo-droite > .hb-illu { grid-column: 2; }
  .hb-duo-droite > :not(.hb-illu) { grid-column: 1; }
  /* Les etapes, plus etroites a cote d'une photo. */
  .hb-duo-colle .pr-etape { grid-template-columns: 150px 1fr; gap: 24px; }
}

/* La doc des developpeurs : les codes d'erreur (PRESTATION_INCONNUE…)
   dans les tableaux ne se coupaient pas et faisaient deborder la page
   sur telephone ; on les laisse se couper. */
.dv-table td code, .dv-table th { overflow-wrap: anywhere; }

/* ══ L'APPEL FINAL ET LE PIED ══════════════════════════════════════
   Le pied de page ne change pas (pied-commun.css) : c'est le choix du
   12 octobre. */