/* ══════════════════════════════════════════════════════════════════
   GROOMLY — socle commun des pages vitrine
   Utilise par /proprietaires, /tarifs et /devenir-groom.

   POURQUOI UN SOCLE
   Les trois pages partagent le meme hero, le meme degrade, les memes
   boutons, le meme appel final. Ecrits trois fois, ils auraient
   diverge au premier changement de teinte — c'est exactement ce qui
   etait arrive aux deux pieds de page. Ici, une seule definition.
   Ce qui distingue chaque page vit dans SA feuille : l'empilement des
   etapes pour les proprietaires, le calculateur pour les tarifs, le
   simulateur pour les Grooms.

   INDEPENDANCE
   Aucune valeur n'est empruntee a vitrine.css ni a groomly.css : les
   deux jeux de variables n'ont ni les memes noms ni les memes valeurs.
   Tout est declare ici, prefixe --pg-*. Et jamais « --pg-x: var(--pg-x,
   …) » : une variable ne peut pas se citer elle-meme, c'est un cycle
   invalide et la declaration entiere est jetee, sans erreur visible.

   CE QUI EST ANIME
   Seules « opacity » et « transform ». Le compositeur s'en charge :
   pas de recalcul de mise en page, pas de repeinture. Le halo qui suit
   le pointeur est la seule exception — une repeinture, limitee a un
   element, et inexistante sur ecran tactile.
   ══════════════════════════════════════════════════════════════════ */

.pg {
  --pg-encre:      #18181b;
  --pg-gris:       #6b6b74;
  --pg-gris-clair: #a1a1aa;
  --pg-trait:      #e4e4e7;
  --pg-blanc:      #ffffff;
  --pg-fond:       #fbfbfd;
  --pg-rose:       #f43f5e;
  --pg-rose-fonce: #e11d48;
  --pg-violet:     #8b5cf6;
  --pg-ambre:      #fbbf24;
  --pg-max:        1180px;
  --pg-sortie:     cubic-bezier(.25,.4,.25,1);
}

.pg-env { width: 100%; max-width: var(--pg-max); margin: 0 auto; position: relative; z-index: 1; }

/* Une ancre visee depuis un lien de la page (« Calculer mon prix »)
   atterrit SOUS la barre collee si on ne lui reserve pas sa hauteur :
   le haut de la cible disparait derriere. On la lui reserve ici, une
   fois pour toutes les pages du socle. */
main [id] { scroll-margin-top: calc(var(--nv-hauteur, 68px) + 18px); }

/* ── Les trois niveaux de titre d'une section ─────────────────── */
.pg-sur {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 14px; color: var(--pg-rose-fonce);
}
.pg-titre {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.035em; margin: 0;
  color: var(--pg-encre); max-width: 21ch; text-wrap: balance;
}
.pg-intro {
  margin: 18px 0 0; max-width: 58ch;
  font-size: 1.02rem; line-height: 1.65; color: var(--pg-gris);
}

/* ── Le calque de decor ───────────────────────────────────────────
   Tout ce qui deborde du cadre vit ici, dans une boite qui le rogne.
   JAMAIS en pseudo-element sur la section : un ::before decale de
   « -12% » ajoute une barre de defilement horizontale, et il est
   invisible a l'inspection — querySelectorAll('*') ne renvoie pas les
   pseudo-elements. Trois debordements du projet sont venus de la. */
.pg-halo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pg-halo span { position: absolute; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════════
   LE HERO
   ══════════════════════════════════════════════════════════════════ */
.pg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--pg-fond); color: var(--pg-encre);
  padding: 72px 20px 84px;
}
@media (min-width: 900px) { .pg-hero { padding: 104px 24px 118px; } }

/* Le hero remonte SOUS la barre. Sans cela, la barre transparente
   occupe sa propre bande de 68 px et laisse voir le fond du corps au
   lieu du degrade. Il recupere sa hauteur en padding pour que le
   contenu ne finisse pas cache derriere. Meme regle que l'accueil. */
.nv ~ main > .pg-hero {
  margin-top: calc(var(--nv-hauteur, 68px) * -1);
  padding-top: calc(72px + var(--nv-hauteur, 68px));
}
@media (min-width: 900px) {
  .nv ~ main > .pg-hero { padding-top: calc(104px + var(--nv-hauteur, 68px)); }
}

.pg-ciel { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.pg-nuee { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
@media (min-width: 768px) { .pg-nuee { filter: blur(110px); } }

/* Durees premieres entre elles : les trois nappes ne repassent jamais
   par la meme configuration, le degrade ne « boucle » pas a l'oeil. */
.pg-nuee-1 {
  top: -26%; left: -12%; width: 62vw; height: 62vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(244,63,94,.30) 0%, rgba(244,63,94,0) 70%);
  animation: pgDerive1 29s ease-in-out infinite;
}
.pg-nuee-2 {
  top: 6%; right: -20%; width: 58vw; height: 58vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(139,92,246,.24) 0%, rgba(139,92,246,0) 70%);
  animation: pgDerive2 37s ease-in-out infinite;
}
.pg-nuee-3 {
  bottom: -34%; left: 34%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(251,191,36,.26) 0%, rgba(251,191,36,0) 70%);
  animation: pgDerive3 23s ease-in-out infinite;
}
@keyframes pgDerive1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7%,5%,0) scale(1.1); } }
@keyframes pgDerive2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8%,7%,0) scale(.92); } }
@keyframes pgDerive3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5%,-6%,0) scale(1.08); } }

/* La trame : des lignes fines effacees vers les bords par un masque.
   De la profondeur sans une seule image a telecharger. */
.pg-trame {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(24,24,27,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(24,24,27,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 32%, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 32%, transparent 78%);
}

/* Le projecteur suit le pointeur, et se pose au centre quand il n'y en
   a pas : un ecran tactile ne doit pas heriter d'un halo bloque dans
   le coin superieur gauche. */
.pg-projecteur {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--pg-x, 50%) var(--pg-y, 38%),
              rgba(244,63,94,.18), transparent 62%);
}

.pg-fil {
  display: flex; align-items: center; gap: 8px; margin: 0 0 22px;
  font-size: .82rem; color: var(--pg-gris);
}
.pg-fil a { color: var(--pg-gris); text-decoration: none; }
.pg-fil a:hover { color: var(--pg-encre); text-decoration: underline; text-underline-offset: 3px; }

.pg-h1 {
  font-size: clamp(2.1rem, 6vw, 4rem); font-weight: 900;
  line-height: 1.04; letter-spacing: -.045em; margin: 0;
  color: var(--pg-encre); max-width: 16ch; text-wrap: balance;
}
.pg-h1 em { font-style: normal; color: var(--pg-rose-fonce); }

/* Revelation MOT a mot — l'accueil, lui, revele lettre a lettre. Le
   decoupage est fait en JavaScript ; sans lui, le titre s'affiche d'un
   bloc, ce qui est un etat parfaitement acceptable. */
.pg-mot { display: inline-block; white-space: nowrap; }
.pg-decoupe .pg-mot {
  animation: pgMot .72s var(--pg-sortie) both;
  animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes pgMot {
  from { opacity: 0; transform: translateY(26px) rotate(1.2deg); }
  to   { opacity: 1; transform: none; }
}

/* Le sous-titre, les boutons et les faits montent juste apres le titre.
   Ils s'animent MEME SANS JavaScript, avec un retard fixe : le script
   ne fait qu'ajuster le moment, il ne conditionne pas l'affichage. Une
   animation dont l'existence depend du script laisse une page vide le
   jour ou il ne se charge pas. */
@keyframes pgMonte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pg-hero-sous, .pg-hero .pg-actions, .pg-hero .pg-faits {
  animation: pgMonte .7s var(--pg-sortie) both;
}
.pg-hero-sous { animation-delay: 260ms; }
.pg-hero .pg-actions { animation-delay: 360ms; }
.pg-hero .pg-faits { animation-delay: 460ms; }

.pg-hero-sous {
  margin: 22px 0 0; max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.62;
  color: var(--pg-gris);
}

/* ── Les boutons ─────────────────────────────────────────────── */
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 13px;
  font-size: .98rem; font-weight: 650; letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .22s var(--pg-sortie), box-shadow .22s ease, background .2s ease, border-color .2s ease;
}
.pg-btn svg { width: 18px; height: 18px; flex: none; }
.pg-btn-plein {
  /* Le degrade partait de --pg-rose (#f43f5e) : du blanc dessus ne
     vaut que 3,66 de contraste, sous le seuil de 4,5. Mesure sur les
     pixels rendus, pas sur le DOM — un parcours du DOM s'arrete sur un
     degrade et ne voit rien. On part donc du rose fonce et on descend :
     4,70 d'un bout, 6,23 de l'autre. */
  background: linear-gradient(135deg, var(--pg-rose-fonce), #be123c);
  color: #fff; box-shadow: 0 14px 30px -14px rgba(190,18,60,.75);
}
.pg-btn-plein:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(190,18,60,.85); }
.pg-btn-ligne {
  background: var(--pg-blanc); color: var(--pg-encre);
  border: 1px solid var(--pg-trait);
  box-shadow: 0 2px 8px -4px rgba(20,20,45,.2);
}
.pg-btn-ligne:hover { border-color: var(--pg-gris-clair); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(20,20,45,.32); }
.pg-btn:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 3px; }

/* ── Les faits du hero : des faits, pas des chiffres de facade ── */
.pg-faits {
  display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 38px;
  padding-top: 26px; border-top: 1px solid var(--pg-trait);
}
.pg-fait { display: flex; align-items: center; gap: 11px; }
/* La pastille porte une CLASSE et n'est jamais visee par « .pg-fait span » :
   un selecteur de balise precede du conteneur vaut (0,1,1) contre (0,1,0)
   pour la classe, il ecraserait « display: flex » et l'icone se collerait
   dans le coin. Ce piege a coute trois corrections sur ce projet. */
.pg-pastille {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pg-blanc); border: 1px solid var(--pg-trait);
  color: var(--pg-rose-fonce);
}
.pg-pastille svg { width: 17px; height: 17px; }
.pg-fait-txt b { display: block; font-size: .95rem; font-weight: 700; color: var(--pg-encre); letter-spacing: -.02em; }
.pg-fait-txt span { display: block; font-size: .8rem; color: var(--pg-gris); margin-top: 1px; }

/* ── Le lien flechhe, commun a toutes les sections ────────────── */
.pg-lien {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 650; color: var(--pg-rose-fonce); text-decoration: none;
}
.pg-lien svg { width: 15px; height: 15px; }
.pg-lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════
   L'APPEL FINAL
   ══════════════════════════════════════════════════════════════════ */
.pg-fin {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--pg-fond); border-top: 1px solid var(--pg-trait);
  color: var(--pg-encre); padding: 86px 20px 94px; text-align: center;
}
@media (min-width: 900px) { .pg-fin { padding: 116px 24px 124px; } }
.pg-fin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 64% 70% at 50% 100%, rgba(244,63,94,.24), transparent 68%);
}
.pg-fin h2 {
  margin: 0 auto; max-width: 18ch;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem); font-weight: 900;
  line-height: 1.1; letter-spacing: -.04em; color: var(--pg-encre); text-wrap: balance;
}
.pg-fin p { margin: 18px auto 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.6; color: var(--pg-gris); }
.pg-fin .pg-actions { justify-content: center; margin-top: 32px; }

/* ══════════════════════════════════════════════════════════════════
   PREFERENCE SYSTEME
   « prefers-reduced-motion » n'est pas un confort : pour une partie
   des gens, ces mouvements donnent la nausee. On supprime, on ne
   ralentit pas — et tout le contenu reste visible.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-nuee { animation: none; }
  .pg-decoupe .pg-mot { animation: none; opacity: 1; transform: none; }
  .pg-hero-sous, .pg-hero .pg-actions, .pg-hero .pg-faits { animation: none; }
  .pg-btn { transition: none; }
  .pg-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SUR TELEPHONE, LES NAPPES NE DERIVENT PLUS

   Trois disques de 700 a 760 px, flous de 80 a 110 px, deplaces en
   boucle et sans fin. Sur un ordinateur, le compositeur garde le flou
   en cache et ne fait que deplacer le calque. Sur un telephone, la
   marge de manoeuvre est bien plus mince : un flou de cette taille
   recalcule en continu, c'est du travail permanent pour un fond que
   personne ne regarde, et de la batterie qui part.

   On garde la composition de couleurs — c'est elle qu'on voit. On
   n'arrete que le mouvement, et seulement sous 768 px. Exactement ce
   que fait deja le bloc « prefers-reduced-motion » juste au-dessus,
   pour la meme raison.

   Honnetete sur la mesure : je n'ai PAS pu chiffrer ce gain ici. Un
   navigateur sans ecran ne produit aucune image quand la page est
   immobile — la trace revient vide, avec ou sans animation. Le
   raisonnement tient, la mesure manque. Si le telephone ne va pas
   mieux, c'est ce changement-la qu'il faut defaire en premier. */
@media (max-width: 767px) {
  /* « will-change: transform » reserve un calque en permanence. Utile
     tant que la nappe bouge ; une fois figee, c'est de la memoire video
     immobilisee pour rien. On la rend. Et un rayon de flou plus petit
     suffit sur 390 px de large : a cette taille, personne ne distingue
     80 px de 56. */
  .pg-nuee { animation: none; will-change: auto; filter: blur(56px); }
}