/* ===========================================================================
   DEVENIR PARRAIN — page publique (/devenir-parrain)

   LE MOTIF : LA PROPAGATION. /decouvrir a son ciel étoilé et parle d'un
   logiciel à un gérant. Celle-ci parle à quelqu'un qui connaît des écuries et
   se demande s'il en dira du bien : le sujet est une recommandation qui part
   d'une personne et gagne les autres. D'où un réseau de points reliés, traversé
   par des ondes (assets/js/parrain.js), et non un fond décoratif de plus.

   PREMIÈRE VERSION, LE DÉFAUT : tout en CSS, sans une ligne de script. Les
   animations jouaient une fois au chargement et plus rien ne bougeait ensuite —
   on descendait la page devant des blocs inertes. Ce qui donne vie à une
   landing, c'est qu'elle se construise SOUS le regard, au défilement. Cela
   demande un observateur, donc du JavaScript.

   LES COULEURS. Marine et or de la marque, mais en profondeur : un marine qui
   descend vers l'indigo, un or qui passe du bronze au miel dans les titres, et
   du verre dépoli sur fond sombre. Le blanc pur est banni des grandes surfaces,
   il écrase tout le reste.
   ======================================================================== */

.par-page{
  --p-nuit:#0E1830;          /* marine profond, fond du héros */
  --p-nuit-2:#18274A;
  --p-indigo:#22335C;
  --p-or:#D6A858;            /* or clair, pour le texte sur fond sombre */
  --p-or-2:#F0CF92;          /* miel, pour les dégradés de titre */
  --p-or-d:#8F6526;          /* or foncé, lisible sur fond clair */
  --p-creme:#FAF6EE;
  --p-sable:#F2EADA;
  --p-ligne:#E6DECE;
  --p-encre:#16203A;
  --p-gris:#67718A;
  /* Couleurs relevées sur les images du film : c'est lui qui donne le ton de
     la page, et non l'inverse. */
  --p-vert:#1F3A2E;          /* vert profond des titres */
  --p-orange:#E0702B;        /* orange des accents */
  --p-orange-d:#B8441A;
  --p-peche:#F7E4D4;
  --p-sauge:#DDE6D9;
  background:var(--p-creme);
  color:var(--p-encre);
  overflow-x:hidden;
}

/* Barre de progression : dit où l'on en est, discrètement. */
.par-prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;background:transparent;pointer-events:none}
.par-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--p-or-d),var(--p-or),var(--p-or-2));
  transition:transform .12s linear}

/* ---------- Apparition au défilement ----------
   L'état final est celui par défaut quand la page n'a pas pu se préparer
   (pas de JS, pas d'observateur) : on ne cache jamais du contenu derrière une
   animation qui pourrait ne pas se jouer. */
.par-rev,[data-stagger]{opacity:1;transform:none}
.par-page.pret .par-rev,
.par-page.pret [data-stagger]{opacity:0;transform:translateY(34px) scale(.975);
  transition:opacity .9s cubic-bezier(.16,.84,.24,1),transform .9s cubic-bezier(.16,.84,.24,1)}
.par-page.pret .par-rev.vu,
.par-page.pret [data-stagger].vu{opacity:1;transform:none}

/* ---------- Héros ----------
   CLAIR, comme le film. L'ancien héros était une nuit bleue reprise de
   /decouvrir : il s'adressait à un gérant qui cherche un logiciel. Celui-ci
   parle à quelqu'un qui connaît une écurie, et il contient un film sur fond
   crème — deux univers dans un même écran se voyaient d'un coup d'œil. */
/* UN PREMIER ÉCRAN ENTIER. 100svh et non 100vh : sur mobile, vh compte la
   barre d'adresse rétractée, donc la scène dépassait de soixante pixels et son
   bas se trouvait coupé au chargement. svh compte la hauteur réellement
   visible, et vh reste en repli pour les navigateurs qui l'ignorent. */
.par-hero{position:relative;overflow:hidden;isolation:isolate;color:var(--p-vert);
  /* SOUS L'EN-TÊTE, PAS SOUS LE HAUT DE LA FENÊTRE. Avec 100svh plein, la
     scène mesurait un écran entier EN PLUS de l'en-tête du site : elle
     débordait vers le bas, et le centrage vertical repoussait tout le contenu,
     laissant un grand vide au-dessus du titre. On retranche la hauteur de
     l'en-tête, et le bloc se centre dans ce qui reste réellement visible. */
  min-height:calc(100vh - var(--header-h, 70px));
  min-height:calc(100svh - var(--header-h, 70px));
  display:grid;place-items:center;
  padding:clamp(18px,3vh,40px) 20px clamp(44px,7vh,72px);
  background:
    radial-gradient(90% 70% at 88% 12%, var(--p-peche) 0%, transparent 64%),
    radial-gradient(80% 70% at 6% 92%, var(--p-sauge) 0%, transparent 62%),
    linear-gradient(170deg, #FDF8F0 0%, var(--p-creme) 55%, #F7EFE3 100%);
}

/* La scène : le propos à gauche, le décor à droite. --px/--py sont posées par
   le script au passage du pointeur ; chaque couche s'en sert selon sa
   profondeur --d. Une scène où tout bouge d'un bloc est un autocollant. */
.par-stage{position:relative;width:100%;max-width:1180px;margin:0 auto;
  display:grid;gap:clamp(20px,4vw,54px);align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.par-hero-fade{position:relative;z-index:3;min-width:0;will-change:transform,opacity}

/* ---- Décor : trois nappes de lumière, très en arrière ---- */
.par-aura{position:absolute;inset:-18%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.72}
.par-aura span{position:absolute;border-radius:50%;display:block;
  translate:calc(var(--px,0px) * var(--d)) calc(var(--py,0px) * var(--d))}
.par-aura .a1{width:44vw;height:44vw;left:46%;top:-6%;
  background:radial-gradient(circle,#F6C9A2 0%,transparent 66%);animation:parDerive1 17s ease-in-out infinite alternate}
.par-aura .a2{width:38vw;height:38vw;right:-6%;bottom:4%;
  background:radial-gradient(circle,#CFE0CC 0%,transparent 64%);animation:parDerive2 21s ease-in-out infinite alternate}
.par-aura .a3{width:30vw;height:30vw;left:2%;bottom:-8%;
  background:radial-gradient(circle,#F2D9C4 0%,transparent 68%);animation:parDerive3 25s ease-in-out infinite alternate}
@keyframes parDerive1{to{scale:1.12}}
@keyframes parDerive2{to{scale:.92}}
@keyframes parDerive3{to{scale:1.1}}

/* ---- La scène de droite ---- */
.par-decor{position:relative;z-index:2;display:grid;place-items:center;min-width:0;
  min-height:clamp(320px,46vh,460px)}
/* L'ombre au sol : sans elle la mascotte flotte dans le vide et la scène n'a
   plus de bas. Elle respire au rythme du flottement. */
.par-sol{position:absolute;bottom:4%;width:min(240px,52%);height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(31,58,46,.20) 0%, transparent 70%);
  animation:parOmbre 6s ease-in-out infinite}
@keyframes parOmbre{0%,100%{scale:1 1;opacity:.9}50%{scale:.88 1;opacity:.62}}

/* ---- Les cartes qui gravitent ----
   Elles ne tournent pas autour : elles DÉRIVENT sur place, chacune à son
   rythme. Une orbite régulière attire l'œil et ne le lâche plus ; une dérive
   se remarque sans se regarder. */
.par-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 11px;border-radius:999px;white-space:nowrap;
  font-size:clamp(.74rem,1.5vw,.86rem);font-weight:600;color:var(--p-vert);max-width:46%;
  background:rgba(255,255,255,.94);border:1px solid var(--p-ligne);
  box-shadow:0 12px 32px rgba(31,58,46,.10);
  /* ⚠️ LE PLACEMENT PASSE PAR left/top, PAS PAR translate. Un pourcentage dans
     `translate` se calcule sur la taille de L'ÉLÉMENT, pas sur celle du parent :
     « --x:-46% » déplaçait la carte de 46 % de SA PROPRE largeur, soit une
     vingtaine de pixels, et les cinq se retrouvaient empilées sur la mascotte.
     Dans left/top, le pourcentage se calcule bien sur le bloc conteneur.
     translate ne garde que le recentrage et le relief. */
  left:calc(50% + var(--x));top:calc(50% + var(--y));
  translate:calc(-50% + var(--px,0px) * var(--d))
            calc(-50% + var(--py,0px) * var(--d));
  animation:parChip calc(7s + var(--i) * 1.3s) ease-in-out infinite}
.par-chip i{font-style:normal;font-size:1.05em;line-height:1}
@keyframes parChip{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}

/* ---- L'invitation à descendre ---- */
.par-hint{position:absolute;left:50%;bottom:calc(-1 * clamp(22px,4vh,40px));
  z-index:4;display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  translate:-50% 0;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--p-vert);opacity:.72;text-decoration:none}
.par-hint:hover{opacity:1}
.par-hint i{width:1px;height:26px;background:rgba(31,58,46,.25);position:relative;overflow:hidden}
.par-hint i::after{content:"";position:absolute;inset:0;background:var(--p-orange);
  animation:parFil 1.9s ease-in-out infinite}
@keyframes parFil{0%{translate:0 -100%}60%,100%{translate:0 100%}}

@media (max-width:900px){
  .par-stage{grid-template-columns:minmax(0,1fr);text-align:center;gap:10px}
  .par-hero-fade{order:2}
  .par-decor{order:1;min-height:clamp(250px,32vh,330px)}
  /* Cinq cartes autour d'une mascotte sur un écran étroit, c'est un
     encombrement : on garde les deux bouts du parcours. */
  .par-chip{display:none}
  .par-chip:nth-of-type(1),.par-chip:nth-of-type(5){display:inline-flex;font-size:.72rem}
  .par-hint{display:none}
}

/* ---------- La mascotte ---------- */
.par-masc-wrap{position:relative;z-index:2;display:flex;justify-content:center;min-width:0;
  translate:calc(var(--px,0px) * .08) calc(var(--py,0px) * .08)}
.par-masc{width:min(360px,72vw);height:auto;overflow:visible;
  /* --mx/--my sont posées par le script au passage du pointeur. Valeurs de
     repli à zéro : sans elles, la rotation vaudrait « var(--mx) » littéral et
     la mascotte disparaîtrait. */
  transform:rotateY(var(--mx,0deg)) rotateX(var(--my,0deg));
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1);
  animation:parFlotte 6s ease-in-out infinite}
@keyframes parFlotte{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* transform-box:fill-box sur TOUT LE DESSIN. Sans lui, « transform-origin:50% »
   dans un SVG se calcule sur la boîte de vue entière et non sur la forme : une
   oreille pivotait autour du milieu de l'image, c'est-à-dire n'importe où. */
.par-masc *{transform-box:fill-box}

/* ---- Ce qui bouge sans arrêt, et très peu ----
   Une mascotte parfaitement immobile à côté d'un texte animé a l'air d'une
   image oubliée là ; une mascotte qui gesticule devient le sujet de la page.
   Chaque mouvement est sous les deux degrés et sur une durée différente, pour
   qu'ils ne se synchronisent jamais — c'est la synchronisation qui fait
   mécanique. */
.par-masc-corps{transform-origin:50% 100%;animation:parRespire 5.2s ease-in-out infinite}
@keyframes parRespire{0%,100%{scale:1 1}50%{scale:1.015 .988}}

.par-masc-tete{transform-origin:50% 95%;transition:rotate .6s cubic-bezier(.2,.8,.3,1);
  animation:parTete 7.3s ease-in-out infinite}
@keyframes parTete{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}

/* Les oreilles tressaillent : brèves, décalées, et rarement ensemble. */
.par-masc-or-g{transform-origin:72% 100%;animation:parOrG 5.9s ease-in-out infinite}
.par-masc-or-d{transform-origin:28% 100%;animation:parOrD 7.1s ease-in-out infinite}
@keyframes parOrG{0%,74%,100%{rotate:0deg}80%{rotate:-13deg}86%{rotate:3deg}92%{rotate:0deg}}
@keyframes parOrD{0%,61%,100%{rotate:0deg}67%{rotate:12deg}73%{rotate:-3deg}79%{rotate:0deg}}

/* Le clignement : une paupière qui tombe, pas un œil qui rétrécit — d'où
   l'origine en haut de l'œil. */
.par-masc-yeux{transform-origin:50% 40%;transition:transform .09s ease}
.par-masc-yeux.cligne{transform:scaleY(.08)}
/* Le regard : le script déplace les pupilles de quelques unités. */
.par-masc-pupilles{transition:translate .45s cubic-bezier(.2,.8,.3,1)}

.par-masc-cocarde{transform-origin:50% 10%;animation:parCocarde 9s ease-in-out infinite}
@keyframes parCocarde{0%,100%{rotate:-7deg}50%{rotate:7deg}}
.par-masc-rose{transform-origin:50% 50%;animation:parRose 16s linear infinite}
@keyframes parRose{to{rotate:360deg}}

/* ---- Les expressions ----
   Les trois bouches et les sourcils coexistent dans le dessin ; la classe posée
   sur le <svg> décide de ce qu'on voit. Changer d'expression ne coûte donc ni
   requête ni redessin, et l'état neutre reste juste si le script ne tourne pas. */
.par-masc .par-b,
.par-masc-sourcils,
.par-masc-joue,
.par-masc-bulle,
.par-masc-icone .ic{transition:opacity .28s ease}

.par-masc.est-joie .par-b-neutre{opacity:0}
.par-masc.est-joie .par-b-joie{opacity:1}
.par-masc.est-joie .par-masc-joue{opacity:1}
/* Les yeux se plissent quand elle sourit : sans cela le sourire est une bouche
   posée sur un visage neutre, et ça se voit. */
.par-masc.est-joie .par-masc-yeux{transform:scaleY(.72)}

.par-masc.est-surprise .par-b-neutre{opacity:0}
.par-masc.est-surprise .par-b-oh{opacity:1}
.par-masc.est-surprise .par-masc-or-g,
.par-masc.est-surprise .par-masc-or-d{animation:none;rotate:0deg}
.par-masc.est-surprise .par-masc-yeux{transform:scale(1.12)}

.par-masc.est-pense .par-masc-sourcils{opacity:1}
.par-masc.est-pense .par-masc-pupilles{translate:-5px -6px}
.par-masc.est-pense .par-masc-tete{rotate:-5deg}

/* La bulle : elle monte en apparaissant, les trois ronds l'un après l'autre. */
.par-masc.est-pense .par-masc-bulle{opacity:1}
.par-masc-bulle{transform-origin:70% 100%}
.par-masc.est-pense .par-masc-b1{animation:parBulle .5s ease-out both}
.par-masc.est-pense .par-masc-b2{animation:parBulle .5s ease-out .1s both}
.par-masc.est-pense .par-masc-b3{animation:parBulle .5s ease-out .2s both}
.par-masc.est-pense .par-masc-icone{animation:parBulle .5s ease-out .34s both}
@keyframes parBulle{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.par-masc.icone-lien  .ic-lien,
.par-masc.icone-euro  .ic-euro,
.par-masc.icone-check .ic-check,
.par-masc.icone-coeur .ic-coeur{opacity:1}

.par-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--p-orange-d);margin-bottom:22px;
  padding:7px 15px;border-radius:999px;border:1px solid rgba(224,112,43,.30);
  background:rgba(224,112,43,.08)}
/* Le point qui bat : le signal qui part. */
.par-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p-or);
  background:var(--p-orange);
  box-shadow:0 0 0 0 rgba(224,112,43,.7);animation:par-pouls 2.4s ease-out infinite}
@keyframes par-pouls{
  0%{box-shadow:0 0 0 0 rgba(224,112,43,.6)}
  70%{box-shadow:0 0 0 13px rgba(224,112,43,0)}
  100%{box-shadow:0 0 0 0 rgba(224,112,43,0)}
}

/* LA COULEUR EST ÉCRITE SUR LE TITRE, PAS SEULEMENT HÉRITÉE DU FOND.
   style.css donne une couleur d'encre à h1/h2 ; une couleur héritée ne gagne
   jamais contre une règle posée sur l'élément. Le grand titre s'affichait donc
   en marine sur marine — illisible, et je ne l'avais pas vu faute de regarder
   la page. */
.par-hero h1,.par-title{color:var(--p-vert)}
.par-final h2{color:#fff}
.par-title{font-family:Fraunces,Georgia,serif;font-size:clamp(2.2rem,6.4vw,4.4rem);line-height:1.05;
  margin:0 0 22px;text-wrap:balance;letter-spacing:-.015em}
/* Le chiffre est l'argument : dégradé or, et il se détache du reste. */
.par-title em{font-style:normal;display:inline-block;
  background:linear-gradient(104deg,var(--p-orange-d) 0%,var(--p-orange) 42%,#F0A06A 62%,var(--p-orange) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:par-miroite 4.5s ease-in-out infinite}
@keyframes par-miroite{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.par-lead{font-size:clamp(1rem,2.3vw,1.2rem);line-height:1.65;color:#4A5A52;max-width:56ch;
  margin:0 0 22px}
.par-lead strong{color:var(--p-vert)}
@media (max-width:860px){.par-lead{margin-inline:auto}}

/* Le repère chiffré sous l'accroche : ce qu'une écurie rapporte, tout de suite. */
.par-chiffre{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:0 auto;padding:16px 26px;border-radius:16px;
  border:1px solid var(--p-ligne);background:#fff;box-shadow:0 10px 30px rgba(31,58,46,.07)}
.par-chiffre b{font-family:Fraunces,Georgia,serif;font-size:2rem;color:var(--p-orange);line-height:1}
.par-chiffre span{font-size:.9rem;color:#5B6B63}

.par-cta,.par-hero-cta,.par-video-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
@media (min-width:861px){.par-hero-cta{align-items:flex-start}}
.par-cta-note{font-size:.85rem;color:#6B7A72}
/* Le bouton principal : or, avec un reflet qui passe — une seule fois par
   survol, pas en boucle : une lueur permanente devient du bruit. */
.par-page .btn-primary{position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--p-or-d),#A87A2E);border-color:transparent;color:#fff;
  box-shadow:0 10px 30px rgba(143,101,38,.34)}
.par-page .btn-primary:hover{background:linear-gradient(120deg,#A87A2E,var(--p-or-d));
  border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 36px rgba(143,101,38,.42)}
.par-page .btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%)}
.par-page .btn-primary:hover::after{animation:par-reflet .75s ease}
@keyframes par-reflet{to{transform:translateX(120%)}}
.par-page .btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}

/* Invitation à descendre. */
@keyframes par-descend{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ---------- Sections ---------- */
.par-sec{padding:clamp(60px,9vw,108px) 20px;position:relative}
.par-sec-alt{background:linear-gradient(180deg,#fff 0%,var(--p-sable) 100%);
  border-block:1px solid var(--p-ligne)}
.par-in{max-width:1000px;margin:0 auto}
.par-h2{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,3.9vw,2.5rem);line-height:1.14;
  margin:0 0 12px;text-align:center;text-wrap:balance;letter-spacing:-.01em}
.par-sub{text-align:center;color:var(--p-gris);max-width:56ch;margin:0 auto 42px;line-height:1.65}

/* ---------- La chaîne : trois temps reliés ---------- */
.par-chain{list-style:none;margin:0;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));position:relative}
/* LE TRAIT SE TIRE, il ne s'affiche pas. C'est la propagation, la même idée que
   le réseau du héros, dite en clair : le lien se fait, puis les pastilles
   s'allument l'une après l'autre. */
.par-chain::before{content:"";position:absolute;left:8%;right:8%;top:28px;height:2px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.22,.7,.2,1);
  background:linear-gradient(90deg,transparent,var(--p-or) 14%,var(--p-or) 86%,transparent)}
.par-chain.tracee::before{transform:scaleX(1)}
@media(max-width:780px){.par-chain::before{display:none}}
.par-step{position:relative;text-align:center}
.par-dot{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:linear-gradient(145deg,var(--p-nuit-2),var(--p-indigo));color:var(--p-or-2);
  font-family:Fraunces,Georgia,serif;font-size:1.3rem;margin-bottom:18px;position:relative;
  box-shadow:0 8px 22px rgba(22,32,58,.22),inset 0 1px 0 rgba(255,255,255,.12);
  transform:scale(.45);opacity:0;
  transition:transform .62s cubic-bezier(.34,1.56,.44,1),opacity .4s ease}
/* Le rebond à l'arrivée : c'est lui qui fait qu'on suit les trois du regard. */
.par-step.vu .par-dot{transform:scale(1);opacity:1}
.par-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(214,168,88,.5);opacity:0}
.par-step.vu .par-dot::after{animation:par-halo 2.8s 1.1s ease-out infinite}
@keyframes par-halo{0%{transform:scale(.85);opacity:.85}70%,100%{transform:scale(1.55);opacity:0}}
.par-step h3{font-size:1.08rem;margin:0 0 8px}
.par-step p{margin:0;color:var(--p-gris);font-size:.94rem;line-height:1.65}

/* ---------- Ce que ça représente ---------- */
.par-calc{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:24px}
.par-calc-c{background:#fff;border:1px solid var(--p-ligne);border-radius:18px;padding:30px 22px;
  text-align:center;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 2px 14px rgba(22,32,58,.05);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.par-calc-c{position:relative;overflow:hidden}
.par-calc-c::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 40%,rgba(214,168,88,.16) 50%,transparent 60%)}
.par-calc-c:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(22,32,58,.11)}
.par-calc-c:hover::after{animation:par-reflet .85s ease}
.par-calc-n{font-family:Fraunces,Georgia,serif;font-size:2.7rem;line-height:1;color:var(--p-nuit-2)}
.par-calc-l{font-size:.84rem;color:var(--p-gris)}
.par-calc-e{font-family:Fraunces,Georgia,serif;font-size:1.65rem;margin-top:10px;
  background:linear-gradient(100deg,var(--p-or-d),#B98B3C);-webkit-background-clip:text;background-clip:text;color:transparent}
.par-note{text-align:center;color:var(--p-gris);font-size:.88rem;margin:0 auto;max-width:58ch;line-height:1.65}

/* ---------- Trois raisons ---------- */
.par-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.par-card{background:#fff;border:1px solid var(--p-ligne);border-radius:18px;padding:30px 24px;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
/* Un filet d'or se déploie en haut au survol : discret, et ça répond. */
.par-card::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--p-or-d),var(--p-or))}
.par-card:hover{transform:translateY(-6px);border-color:#DCD0B8;box-shadow:0 20px 46px rgba(22,32,58,.11)}
.par-card:hover::before{transform:scaleX(1)}
.par-ico{font-size:1.9rem;display:block;margin-bottom:14px}
.par-card h3{font-size:1.05rem;margin:0 0 8px}
.par-card p{margin:0;color:var(--p-gris);font-size:.93rem;line-height:1.65}

/* ---------- Appel final ---------- */
.par-final{position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:clamp(60px,9vw,108px) 20px;
  background:
    radial-gradient(74% 100% at 50% 0%, rgba(214,168,88,.20) 0%, transparent 66%),
    linear-gradient(160deg,var(--p-nuit) 0%,var(--p-indigo) 100%)}
.par-final h2{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,3.9vw,2.5rem);margin:0 0 12px;
  letter-spacing:-.01em}
.par-final > .par-in > p{color:#C4D0E6;margin:0 0 26px;font-size:1.02rem}
.par-final-note{font-size:.87rem;color:#93A4C4;margin:30px auto 0!important;max-width:60ch;line-height:1.7}
.par-final-note a{color:var(--p-or-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- Moins de mouvement ----------
   Une page qui parle de propagation ne doit pas donner mal au cœur à qui a
   réglé son système pour l'éviter. Tout s'arrête, rien ne disparaît : le
   script pose lui-même les états finaux avant de s'interrompre. */
@media (prefers-reduced-motion: reduce){
  .par-eyebrow::before,.par-title em,.par-step.vu .par-dot::after,
  .par-masc,.par-masc-corps,.par-masc-tete,.par-masc-or-g,.par-masc-or-d,
  .par-masc-cocarde,.par-masc-rose{animation:none}
  .par-chain::before,.par-chain.tracee::before{transform:none;transition:none}
  .par-dot,.par-step.vu .par-dot{transform:none;opacity:1;transition:none}
  .par-hero-in{opacity:1!important;transform:none!important}
  .par-page.pret .par-rev,.par-page.pret [data-stagger]{opacity:1;transform:none;transition:none}
  .par-card:hover,.par-calc-c:hover,.par-page .btn-primary:hover{transform:none}
  .par-page .btn-primary:hover::after{animation:none}
  }


/* ---------- La vidéo ----------
   SA PROPRE SECTION, SUR SON PROPRE FOND. Elle vivait dans le héros, donc dans
   le bloc que le défilement efface : on descendait pour la regarder et on la
   trouvait à moitié éteinte. Rien ne l'assombrit plus.
   aspect-ratio des deux côtés : la place est réservée avant le premier octet,
   donc aucun décalage de mise en page. */
.par-video-sec{padding:clamp(28px,5vw,56px) 20px;background:var(--p-creme)}
.par-video-sec .par-in{max-width:980px;margin:0 auto}
.mh-parrainage-video{position:relative;margin:0 auto 22px;max-width:960px}
.mh-parrainage-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  border-radius:22px;background:#F6EFE2;box-shadow:0 22px 60px rgba(31,58,46,.13)}
@media (max-width:700px) and (orientation:portrait){
  .mh-parrainage-video video{aspect-ratio:9/16;max-height:78vh;width:auto;margin:0 auto}
}
.mh-pv-son{position:absolute;right:14px;bottom:14px;border:0;border-radius:999px;
  padding:.5em 1em;font:600 14px/1 system-ui,sans-serif;
  background:rgba(31,58,46,.88);color:#F6EFE2;cursor:pointer}
.mh-pv-son:hover{background:var(--p-vert)}
.mh-pv-son:focus-visible{outline:3px solid var(--p-orange);outline-offset:2px}

/* Le chiffre, seul sur sa bande : il suit la vidéo, qui vient de le dire. */
.par-sec-chiffre{text-align:center;padding:clamp(24px,4vw,44px) 20px}

/* ---------- L'ENTRÉE EN SCÈNE ----------
   Les éléments du premier écran arrivent dans l'ordre où on les lit, et pas
   tous ensemble : un écran qui se pose d'un bloc n'a pas de rythme, et on ne
   sait pas par où commencer.

   L'ÉTAT FINAL EST L'ÉTAT PAR DÉFAUT. Tant que la page n'a pas posé .pret —
   script absent, erreur, navigateur ancien — tout est déjà visible et en
   place. On ne cache jamais le contenu derrière une animation qui pourrait ne
   pas se jouer. */
.par-in-1,.par-in-2,.par-in-3,.par-in-4,.par-in-5,.par-in-6,.par-in-7,
.par-chip,.par-masc-wrap,.par-sol,.par-aura{opacity:1}
.par-page.pret .par-in-1,.par-page.pret .par-in-2,.par-page.pret .par-in-3,
.par-page.pret .par-in-4,.par-page.pret .par-in-5,.par-page.pret .par-in-6,
.par-page.pret .par-in-7{opacity:0;animation:parEntre .9s cubic-bezier(.16,.84,.24,1) forwards}
.par-page.pret .par-in-1{animation-delay:.10s}
.par-page.pret .par-in-2{animation-delay:.22s}
.par-page.pret .par-in-3{animation-delay:.32s}
.par-page.pret .par-in-4{animation-delay:.44s}
.par-page.pret .par-in-5{animation-delay:.60s}
.par-page.pret .par-in-6{animation-delay:.74s}
.par-page.pret .par-in-7{animation-delay:1.5s}
@keyframes parEntre{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* Les mots du titre montent chacun à leur tour, d'où le display:block. */
.par-title span,.par-title em{display:block}

/* La mascotte entre en dernier et par le bas, comme si elle arrivait sur la
   scène. Le décor l'accompagne. */
.par-page.pret .par-aura{opacity:0;animation:parFondu 1.4s ease forwards}
.par-page.pret .par-masc-wrap{opacity:0;animation:parArrive 1s cubic-bezier(.16,.84,.24,1) .3s forwards}
.par-page.pret .par-sol{opacity:0;animation:parFondu .8s ease .9s forwards}
@keyframes parFondu{to{opacity:1}}
@keyframes parArrive{from{opacity:0;translate:0 44px;scale:.94}to{opacity:1;translate:0 0;scale:1}}

/* Les cartes se posent une par une, dans l'ordre du parcours : lien partagé,
   l'écurie s'installe, planning, abonnement, versement. C'est l'ordre qui
   raconte — groupées, elles ne seraient qu'un décor. */
.par-page.pret .par-chip{opacity:0;
  animation:parEntre .7s cubic-bezier(.16,.84,.24,1) forwards,
            parChip calc(7s + var(--i) * 1.3s) ease-in-out infinite;
  animation-delay:calc(.85s + var(--i) * .17s), calc(1.6s + var(--i) * .17s)}

@media (prefers-reduced-motion: reduce){
  .par-page.pret .par-in-1,.par-page.pret .par-in-2,.par-page.pret .par-in-3,
  .par-page.pret .par-in-4,.par-page.pret .par-in-5,.par-page.pret .par-in-6,
  .par-page.pret .par-in-7,.par-page.pret .par-chip,
  .par-page.pret .par-masc-wrap,.par-page.pret .par-sol,.par-page.pret .par-aura{
    opacity:1;animation:none;translate:none;scale:none}
  .par-aura span,.par-sol,.par-chip,.par-hint i::after{animation:none}
}

/* ===========================================================================
   LA CHORÉGRAPHIE DE LA MASCOTTE
   ===========================================================================
   Chaque mouvement est une classe posée sur le <svg> par le script, le temps
   de son animation, puis retirée. Aucune n'est en boucle : une boucle fait un
   automate, une suite de gestes fait un personnage.

   SQUASH & STRETCH sur tout ce qui saute ou atterrit. Un corps qui monte et
   descend sans se déformer est un objet qu'on déplace ; un corps qui s'écrase
   en touchant le sol et s'étire en décollant est un corps qui a du poids.
   C'est la seule chose qui sépare une image qu'on bouge d'un dessin animé.
   ======================================================================== */

/* ---- Hochement : oui ---- */
.par-masc.m-oui .par-masc-tete{animation:parOui .9s cubic-bezier(.3,1.4,.4,1)}
@keyframes parOui{
  0%{rotate:0deg;translate:0 0}
  22%{rotate:7deg;translate:0 5px}
  46%{rotate:-3deg;translate:0 -2px}
  68%{rotate:5deg;translate:0 3px}
  100%{rotate:0deg;translate:0 0}}

/* ---- Dénégation : non ---- */
.par-masc.m-non .par-masc-tete{animation:parNon 1s cubic-bezier(.4,0,.2,1)}
@keyframes parNon{
  0%,100%{rotate:0deg}
  20%{rotate:-9deg}45%{rotate:8deg}70%{rotate:-5deg}88%{rotate:3deg}}

/* ---- Petit saut, avec écrasement à l'atterrissage ---- */
.par-masc.m-saut .par-masc-corps{animation:parSaut 1.05s cubic-bezier(.3,.9,.3,1)}
@keyframes parSaut{
  0%{translate:0 0;scale:1 1}
  14%{translate:0 4px;scale:1.07 .92}      /* on se ramasse avant de partir */
  38%{translate:0 -42px;scale:.93 1.09}    /* en l'air, le corps s'étire */
  60%{translate:0 2px;scale:1.1 .89}       /* impact : il s'écrase */
  78%{translate:0 -8px;scale:.98 1.03}
  100%{translate:0 0;scale:1 1}}
.par-masc.m-saut .par-sol-lie{animation:parSolSaut 1.05s cubic-bezier(.3,.9,.3,1)}
@keyframes parSolSaut{0%,100%{scale:1 1;opacity:.9}38%{scale:.6 1;opacity:.35}60%{scale:1.18 1;opacity:1}}

/* ---- Penché vers le texte, puis retour ---- */
.par-masc.m-penche .par-masc-corps{animation:parPenche 2.2s cubic-bezier(.3,.9,.3,1)}
@keyframes parPenche{0%,100%{rotate:0deg;translate:0 0}30%,70%{rotate:-5deg;translate:-12px 0}}

/* ---- Les deux oreilles se dressent d'un coup ---- */
.par-masc.m-oreilles .par-masc-or-g{animation:parOrDresseG .8s cubic-bezier(.3,1.5,.4,1)}
.par-masc.m-oreilles .par-masc-or-d{animation:parOrDresseD .8s cubic-bezier(.3,1.5,.4,1)}
@keyframes parOrDresseG{0%,100%{rotate:0deg}35%{rotate:-18deg}}
@keyframes parOrDresseD{0%,100%{rotate:0deg}35%{rotate:18deg}}

/* ---- Clin d'œil : UN SEUL ŒIL, d'où les deux groupes séparés ---- */
.par-oeil{transform-origin:50% 38%}
.par-masc.m-clin .par-oeil-d{animation:parClin .62s ease-in-out}
@keyframes parClin{0%,100%{scale:1 1}30%,46%{scale:1 .08}}

/* ---- Frisson : tout le corps vibre une demi-seconde ---- */
.par-masc.m-frisson .par-masc-corps{animation:parFrisson .5s linear}
@keyframes parFrisson{
  0%,100%{translate:0 0}
  12%{translate:-3px 0}28%{translate:3px 0}44%{translate:-2px 0}
  62%{translate:2px 0}80%{translate:-1px 0}}

/* ---- La cocarde part en toupie quand elle est payée ---- */
.par-masc.m-toupie .par-masc-rose{animation:parToupie 1.1s cubic-bezier(.2,.9,.3,1)}
@keyframes parToupie{from{rotate:0deg}to{rotate:900deg}}
.par-masc.m-toupie .par-masc-cocarde{animation:parCocardeSaut .9s cubic-bezier(.3,1.5,.4,1)}
@keyframes parCocardeSaut{0%,100%{scale:1}40%{scale:1.3}}

/* ---- Le regard va où il faut ---- */
.par-masc-pupilles{transition:translate .42s cubic-bezier(.2,.8,.3,1)}
.par-masc.r-gauche .par-masc-pupilles{translate:-6px 0}
.par-masc.r-droite .par-masc-pupilles{translate:6px 0}
.par-masc.r-haut   .par-masc-pupilles{translate:0 -6px}
.par-masc.r-bas    .par-masc-pupilles{translate:0 5px}
.par-masc.r-hg     .par-masc-pupilles{translate:-5px -6px}
.par-masc.r-hd     .par-masc-pupilles{translate:5px -6px}

/* ---- La carte que la mascotte regarde se met en avant ---- */
.par-chip{transition:box-shadow .4s ease,border-color .4s ease,scale .5s cubic-bezier(.3,1.4,.4,1)}
.par-chip.vive{scale:1.1;border-color:var(--p-orange);
  box-shadow:0 16px 40px rgba(224,112,43,.26)}

@media (prefers-reduced-motion: reduce){
  .par-masc.m-oui .par-masc-tete,.par-masc.m-non .par-masc-tete,
  .par-masc.m-saut .par-masc-corps,.par-masc.m-penche .par-masc-corps,
  .par-masc.m-frisson .par-masc-corps,.par-masc.m-clin .par-oeil-d,
  .par-masc.m-oreilles .par-masc-or-g,.par-masc.m-oreilles .par-masc-or-d,
  .par-masc.m-toupie .par-masc-rose,.par-masc.m-toupie .par-masc-cocarde{animation:none}
  .par-chip.vive{scale:1}
}

/* ---------- L'estimation, au curseur ----------
   Trois cartes figées disaient « 1, 3, 5 écuries » et laissaient le visiteur
   chercher la sienne entre les deux. Un curseur lui donne SON chiffre : il
   s'arrête sur le nombre d'écuries qu'il connaît vraiment, et le montant suit.
   C'est le même argument, mais il devient le sien. */
.par-estim{max-width:560px;margin:26px auto 0;padding:28px 26px 22px;
  background:#fff;border:1px solid var(--p-ligne);border-radius:22px;
  box-shadow:0 18px 50px rgba(31,58,46,.08);text-align:center}
.par-estim-total b{display:block;font-family:Fraunces,Georgia,serif;
  font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;color:var(--p-orange);
  font-variant-numeric:tabular-nums}
.par-estim-l{display:block;margin:10px 0 22px;font-size:.98rem;color:#4A5A52}
.par-estim-l strong{color:var(--p-vert)}

/* Le curseur, dessiné : celui du navigateur ne se colore pas et jure avec le
   reste. Les deux familles de sélecteurs (WebKit et Firefox) ne peuvent pas
   être groupées — un sélecteur inconnu invalide toute la règle. */
.par-estim-r{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--p-orange) 0%,var(--p-orange) var(--p,30%),
             var(--p-sable) var(--p,30%),var(--p-sable) 100%);
  outline:none;cursor:pointer}
.par-estim-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--p-orange);
  box-shadow:0 4px 14px rgba(224,112,43,.35);cursor:grab;transition:scale .15s ease}
.par-estim-r::-webkit-slider-thumb:active{scale:1.14;cursor:grabbing}
.par-estim-r::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;
  border:3px solid var(--p-orange);box-shadow:0 4px 14px rgba(224,112,43,.35);cursor:grab}
.par-estim-r:focus-visible{outline:3px solid var(--p-orange);outline-offset:6px}
.par-estim-g{display:flex;justify-content:space-between;margin-top:8px;
  font-size:.78rem;color:#8A968F}