/* Micro-interactions validées (docs/08-animations.md), partie socle (cœur de favoris, boutons).
   Uniquement transform et opacity. Tout est coupé par prefers-reduced-motion: reduce (règle globale en bas). */

.pcc-btn,.pcc-heart,.pcc-filter__btn,.pcc-alpha__l{transition:transform 120ms ease-out}
.pcc-btn:active,.pcc-filter__btn:active{transform:scale(.97)}
.pcc-heart:active,.pcc-alpha__l:active{transform:scale(.9)}
@media (hover:hover){.pcc-heart:hover{transform:scale(1.08)}}

/* Cœur : battement quand le nom entre dans les favoris */
@keyframes pccPop{0%{transform:scale(.6)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.pcc-heart[aria-pressed="true"] svg{animation:pccPop 280ms ease-out}

/* Cœur : petite gerbe au clic (classe is-burst ajoutée puis retirée par main.js, jamais au chargement) */
.pcc-heart{position:relative}
.pcc-heart::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(51.2 11.1) rotate(-25) scale(1.15)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(69.6 30.8) rotate(12) scale(1.5)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(65.7 57.4) rotate(-1) scale(1.15)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(42.4 70.9) rotate(-14) scale(1.5)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(17.3 61.2) rotate(23) scale(1.15)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(9.3 35.5) rotate(10) scale(1.5)'/%3E%3Cpath d='M0 3.4s-3.1-1.9-3.1-4.2A1.8 1.8 0 0 1 0-2a1.8 1.8 0 0 1 3.1 1.2C3.1 1.5 0 3.4 0 3.4z' fill='%23ff3b30' transform='translate(24.4 13.2) rotate(-3) scale(1.15)'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none}
.pcc-heart.is-burst::after{animation:pccBurst 650ms ease-out}
@keyframes pccBurst{0%{opacity:1;transform:scale(.35)}60%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(8deg)}}

/* Compteur de favoris de l'en-tête : petit rebond à chaque changement (classes is-a/is-b alternées par main.js) */
.pcc-fav__count{display:inline-block}
.pcc-fav__count.is-a{animation:pccBumpA 450ms cubic-bezier(.3,1.8,.5,1)}
.pcc-fav__count.is-b{animation:pccBumpB 450ms cubic-bezier(.3,1.8,.5,1)}
@keyframes pccBumpA{40%{transform:scale(1.45)}}
@keyframes pccBumpB{40%{transform:scale(1.45)}}

/* Bouton « nouveau nom » : l'icône de relance tourne à l'appui */
.home-go svg{transition:transform 420ms cubic-bezier(.2,.8,.2,1)}
.home-go:active svg{transform:rotate(200deg);transition-duration:80ms}
@media (hover:hover){.home-go:hover svg{transform:rotate(40deg)}}
@keyframes pccNameIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.home-result__name{animation:pccNameIn 220ms ease-out}

/* Cartes : soulèvement au survol (souris), carte prénom/sélection/partenaire (docs/08-animations.md, table « Ce qui est animé »). Propriété transform, réservée au survol : la carte peut aussi être une cible de l'apparition en cascade ci-dessous, qui utilise translate (les deux se cumulent sans se gêner). */
.dc-card,.pil-sel,.pcc-aff{transition:transform 160ms ease-out}
@media (hover:hover){
  .dc-card:not(.is-open):hover{transform:translateY(-3px)}
  .pil-sel:hover,.pcc-aff:hover{transform:translateY(-3px)}
}
.pil-sel:active{transform:scale(.98)}

/* 1. Mascottes vivantes : clignement des yeux, queue qui remue, petit saut au survol (docs/08, effet 1) */
.pcc-mascot .pcc-eye{transform-box:fill-box;transform-origin:center;animation:pccBlink 4.5s infinite}
.pcc-mascot .pcc-eye--b{animation-delay:1.7s}
@keyframes pccBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.pcc-mascot .pcc-tail--l{animation:pccWagL 1.6s ease-in-out infinite}
.pcc-mascot .pcc-tail--r{animation:pccWagR 2.4s ease-in-out infinite}
@keyframes pccWagL{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes pccWagR{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
.pcc-mascot{transition:translate 300ms cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover){.pcc-mascot:hover{translate:0 -10px}}

/* 4. Surligneur : le trait sous le mot clé du titre se dessine de gauche à droite une fois au
   chargement (docs/08, effet 4). Base utilisable partout (pcc-components est chargé sur toutes
   les pages) ; version pleine hauteur quand le mot est dans un bandeau (.pcc-banner, .art-hero). */
.home-hl{box-shadow:none;background:linear-gradient(var(--dog),var(--dog)) 0 100%/0% .32em no-repeat;animation:pccDraw 700ms cubic-bezier(.6,.1,.3,1) 200ms forwards}
.home-hl--chat{background-image:linear-gradient(var(--cat),var(--cat));animation-delay:550ms}
.pcc-banner .home-hl,.art-hero .home-hl{box-shadow:none;padding:0 .14em;border-radius:6px;background:linear-gradient(var(--dog),var(--dog)) 0 0/0% 100% no-repeat;color:var(--ink);text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation-name:pccDrawFull}
.pcc-banner .home-hl--chat,.art-hero .home-hl--chat{background-image:linear-gradient(var(--cat),var(--cat))}
@keyframes pccDraw{to{background-size:100% .32em}}
@keyframes pccDrawFull{to{background-size:100% 100%}}

/* 5. Sections et cartes en cascade à l'entrée dans l'écran (docs/08-animations.md, règle
   « Apparition au défilement » et effet 5). Maquettes : animation-timeline liée au défilement
   (Chrome/Edge seulement). Site : un seul IntersectionObserver (main.js), qui pose la classe
   is-in sur .home-section / .let-list / .home-guides dès l'entrée à l'écran, jamais sur le
   premier écran (.pcc-banner et .home-hero n'ont pas ces classes). Sans JavaScript (pas de
   classe js sur <html>), rien n'est masqué. « translate » et non « transform », pour ne pas
   gêner le survol des cartes (qui utilise transform, voir plus haut). */
.js .home-section:not(.home-entries):not(.is-in){opacity:0;translate:0 18px}
.js .home-section:not(.home-entries){transition:opacity 260ms ease-out,translate 260ms ease-out}
.js .home-section:not(.home-entries).is-in{opacity:1;translate:none}

.js .let-list:not(.is-in) > li,
.js .home-guides:not(.is-in) > .home-guide,
.js .home-entries:not(.is-in) > .home-entry{opacity:0;translate:0 18px}
.js .let-list > li{transition:opacity 260ms ease-out,translate 260ms ease-out}
/* home-guide et home-entry sont aussi des cibles de l'effet 6 (inclinaison au survol, transform
   et box-shadow) : une seule déclaration transition réunit les quatre propriétés, sinon l'une
   des deux règles effacerait l'autre (transition ne se cumule pas entre deux règles). */
.js .home-guides > .home-guide,
.js .home-entries > .home-entry{transition:opacity 260ms ease-out,translate 260ms ease-out,transform 200ms ease-out,box-shadow 200ms ease-out}
.js .let-list.is-in > li,
.js .home-guides.is-in > .home-guide,
.js .home-entries.is-in > .home-entry{opacity:1;translate:none}
.js .let-list.is-in > li:nth-child(8n+2),.js .home-guides.is-in > .home-guide:nth-child(8n+2),.js .home-entries.is-in > .home-entry:nth-child(8n+2){transition-delay:60ms}
.js .let-list.is-in > li:nth-child(8n+3),.js .home-guides.is-in > .home-guide:nth-child(8n+3){transition-delay:120ms}
.js .let-list.is-in > li:nth-child(8n+4),.js .home-guides.is-in > .home-guide:nth-child(8n+4){transition-delay:180ms}
.js .let-list.is-in > li:nth-child(8n+5){transition-delay:240ms}
.js .let-list.is-in > li:nth-child(8n+6){transition-delay:300ms}
.js .let-list.is-in > li:nth-child(8n+7){transition-delay:360ms}
.js .let-list.is-in > li:nth-child(8n+8){transition-delay:420ms}

/* 7. Bandeau photo qui respire : zoom très lent (8 % en 20 s, aller-retour). Sur l'<img> lui-même
   (pas un pseudo-élément : le bandeau utilise une vraie image, pas un fond CSS). Démarre seulement
   une fois l'image chargée (classe is-ready posée par main.js), pour ne jamais retarder le LCP. */
.pcc-banner__photo img,.art-hero__photo img{will-change:transform}
.pcc-banner__photo img.is-ready,.art-hero__photo img.is-ready{animation:pccKenBurns 20s ease-in-out infinite alternate}
@keyframes pccKenBurns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}

/* 8. Alphabet : vague très légère qui parcourt les lettres au survol de la barre, la lettre
   pointée se soulève en jaune (docs/08, effet 8). Repris tel quel de design/css/home.css. */
.pcc-alpha li:nth-child(1)>.pcc-alpha__l{--i:1}.pcc-alpha li:nth-child(2)>.pcc-alpha__l{--i:2}.pcc-alpha li:nth-child(3)>.pcc-alpha__l{--i:3}.pcc-alpha li:nth-child(4)>.pcc-alpha__l{--i:4}.pcc-alpha li:nth-child(5)>.pcc-alpha__l{--i:5}.pcc-alpha li:nth-child(6)>.pcc-alpha__l{--i:6}.pcc-alpha li:nth-child(7)>.pcc-alpha__l{--i:7}.pcc-alpha li:nth-child(8)>.pcc-alpha__l{--i:8}.pcc-alpha li:nth-child(9)>.pcc-alpha__l{--i:9}.pcc-alpha li:nth-child(10)>.pcc-alpha__l{--i:10}.pcc-alpha li:nth-child(11)>.pcc-alpha__l{--i:11}.pcc-alpha li:nth-child(12)>.pcc-alpha__l{--i:12}.pcc-alpha li:nth-child(13)>.pcc-alpha__l{--i:13}.pcc-alpha li:nth-child(14)>.pcc-alpha__l{--i:14}.pcc-alpha li:nth-child(15)>.pcc-alpha__l{--i:15}.pcc-alpha li:nth-child(16)>.pcc-alpha__l{--i:16}.pcc-alpha li:nth-child(17)>.pcc-alpha__l{--i:17}.pcc-alpha li:nth-child(18)>.pcc-alpha__l{--i:18}.pcc-alpha li:nth-child(19)>.pcc-alpha__l{--i:19}.pcc-alpha li:nth-child(20)>.pcc-alpha__l{--i:20}.pcc-alpha li:nth-child(21)>.pcc-alpha__l{--i:21}.pcc-alpha li:nth-child(22)>.pcc-alpha__l{--i:22}.pcc-alpha li:nth-child(23)>.pcc-alpha__l{--i:23}.pcc-alpha li:nth-child(24)>.pcc-alpha__l{--i:24}.pcc-alpha li:nth-child(25)>.pcc-alpha__l{--i:25}.pcc-alpha li:nth-child(26)>.pcc-alpha__l{--i:26}.pcc-alpha li:nth-child(27)>.pcc-alpha__l{--i:27}
@media (hover:hover){
  .pcc-alpha ol:hover .pcc-alpha__l{animation:pccWave 500ms ease-out calc(var(--i,0) * 18ms)}
  .pcc-alpha .pcc-alpha__l:hover{translate:0 -3px;background:var(--cat);border-color:var(--ink);animation:none}
  .pcc-alpha__l{transition:transform 120ms ease-out,translate 180ms ease-out,background-color 150ms}
}
@keyframes pccWave{0%,100%{translate:none}40%{translate:0 -2px}}

@media (prefers-reduced-motion:reduce){
  .pcc-viewport *,.pcc-viewport *::before,.pcc-viewport *::after{animation:none !important;transition:none !important}
  .home-hl{background-size:100% .32em}
  .pcc-banner .home-hl,.art-hero .home-hl{background-size:100% 100%}
  .art-hero .art-hl{background-size:100% 100%}
}