/* ==========================================================================
   Retours d'action et animations : toutes les pages (photographe compris), chargée après style.css et a11y.css.
   Ne change pas la DA : réutilise ses couleurs (--orange, --forest…).
   Principes : retour immédiat de chaque action, gradient d'objectif, reconnaissance plutôt que mémorisation,
   seuil de Doherty (< 400 ms, squelettes de chargement), animations courtes et fluides.
   « Réduire les animations » : style.css coupe déjà toutes les transitions/animations ; ux.js saute confettis et fondus.
   ========================================================================== */
:root{--spring:cubic-bezier(.2,.9,.25,1.15);--out:cubic-bezier(.2,.8,.2,1)}

/* ---------- Appui : chaque commande réagit sous le doigt ---------- */
.btn,.btn-primary,.fold-btns button,.chip,.icon-btn,.mini-cta,.cd-link,.seg button,.tuto-prev,.to-top,.af,.af-all,.toast-act,.group-head .chev,.hub-go{transition:transform .15s var(--out),background .15s,border-color .15s,color .15s}
.btn:active,.btn-primary:active,.fold-btns button:active,.chip:active,.icon-btn:active,.mini-cta:active,.cd-link:active,.seg button:active,.tuto-prev:active,.to-top:active,.af:active,.af-all:active,.toast-act:active{transform:scale(.94)}
a.tile:active,.hub-card:active,.stat:active{transform:scale(.985)}
a.tile,.stat{transition:border-color .15s,transform .15s var(--out)}
.chip[aria-pressed="true"]{animation:pop .28s var(--spring)}
@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---------- Bulle de confirmation ---------- */
.toast-zone{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));z-index:120;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(560px,100%);min-height:48px;padding:8px 10px 8px 14px;border-radius:var(--r-pill);background:var(--base-900);color:#fff;font:600 14px/1.3 var(--font);box-shadow:var(--shadow-2xl);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .2s var(--out),transform .32s var(--spring)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(8px) scale(.98);transition-duration:.18s}
.dark .toast{background:#f4f4f5;color:var(--base-950)}
.toast-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-size:15px;line-height:1}
.toast.in .toast-ico{animation:pop .4s .05s var(--spring) both}
.toast-msg{padding-right:6px}
.toast-act{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:rgb(255 255 255/.14);color:#fff;font:700 14px var(--font);cursor:pointer}
.toast-act:hover{background:rgb(255 255 255/.24)}
.dark .toast-act{background:rgb(9 9 11/.08);color:var(--base-950)}
.dark .toast-act:hover{background:rgb(9 9 11/.16)}

/* ---------- Confettis ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:130;overflow:hidden}
.confetti i{position:absolute;left:var(--x);top:var(--y);width:8px;height:5px;border-radius:2px;animation:confetti 1.15s var(--out) both}
@keyframes confetti{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}75%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 110px)) rotate(var(--r));opacity:0}}

/* ---------- Thème : révélation en cercle ; pages : fondu enchaîné ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
html.vt-theme::view-transition-old(root){animation:none}
html.vt-theme::view-transition-new(root){animation:vt-reveal .5s var(--out)}
@keyframes vt-reveal{from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}to{clip-path:circle(150vmax at var(--vt-x) var(--vt-y))}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Catégories : cascade à l'ouverture, fondu à la fermeture, résultats qui arrivent ---------- */
.group.opening .bento,.group.opening .group-desc{animation:none}
.group.opening .group-desc{animation:rise .3s var(--out) both}
.group.opening .tile{animation:rise .38s var(--out) both;animation-delay:calc(var(--i,0) * 30ms + 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.group.closing .bento,.group.closing .group-desc{animation:sink .16s ease forwards}
.group.closing .chev{transform:rotate(-90deg)}
@keyframes sink{to{opacity:0;transform:translateY(-6px)}}
#main.refresh .group{animation:rise .3s var(--out) both;animation-delay:calc(var(--i,0) * 35ms)}
.group-head .chev{transition:transform .3s var(--spring),border-color .15s}
.g-seen{font:700 12px var(--font);text-transform:uppercase;color:#008236}
.dark .g-seen{color:#05DF72}
.immersive .g-seen{color:#05DF72}

/* ---------- Nombre de résultats : petit rebond à chaque changement ---------- */
#status{display:inline-block;transform-origin:left center}
#status.bump{animation:bump .3s var(--spring)}
@keyframes bump{40%{transform:scale(1.06);color:var(--heading)}}

/* ---------- Filtres actifs, retirables d'un clic ---------- */
.status>#status{flex:none}
.active-filters{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-right:auto}
.active-filters:empty{display:none}
.af,.af-all{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--r-pill);font:600 12px var(--font);cursor:pointer;animation:pop .25s var(--spring)}
.af{border:1px solid rgb(255 105 0/.35);background:rgb(255 105 0/.1);color:var(--eyebrow-fg)}
.af:hover{background:rgb(255 105 0/.18)}
.af-all{border:0;background:none;color:var(--muted-fg);text-decoration:underline;text-underline-offset:3px}
.af-all:hover{color:var(--heading)}
.status{justify-content:flex-start}
.status .status-r{margin-left:auto}

/* ---------- Aucun résultat : suggestions cliquables ---------- */
.suggest{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.suggest:empty{display:none}

/* ---------- Outils déjà consultés ---------- */
.tag.seen{background:var(--base-100);border-color:transparent;color:var(--base-700);font-weight:600}
.dark .tag.seen{background:var(--base-800);color:var(--base-200)}
.immersive .tag.seen{background:rgb(255 255 255/.12);color:#fff}
.tag.pop{animation:pop .4s var(--spring)}

/* ---------- Checklist : case qui « claque », barre qui avance et brille ---------- */
.checklist input:checked{animation:check .35s var(--spring)}
@keyframes check{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.checklist input:checked::before{animation:tick .25s .08s var(--out) both}
@keyframes tick{from{opacity:0;transform:translateY(-1px) rotate(-45deg) scale(.4)}}
.progress i{transition:width .45s var(--spring),background .3s}
.progress.bump i{animation:glow .6s var(--out)}
@keyframes glow{40%{box-shadow:0 0 0 3px rgb(255 105 0/.35),0 0 14px rgb(255 105 0/.6)}}
.progress.full i{background:#00A63E}
.immersive .progress.full i{background:#05DF72}

/* ---------- Accueil : dernier métier consulté, avancement ---------- */
.hub-card.is-last{border-color:rgb(255 105 0/.45)}
.hub-last{display:block;width:fit-content;margin:0 0 2px;padding:2px 8px;border-radius:var(--r-sm);background:var(--orange);color:#fff;font:700 11px/1.5 var(--font);text-transform:uppercase;letter-spacing:.03em}
.hub-prog{display:flex;align-items:center;gap:8px;margin-top:4px;font:600 12px var(--font);color:var(--muted-fg)}
.hub-bar{flex:none;width:64px;height:5px;border-radius:5px;background:var(--base-200);overflow:hidden}
.dark .hub-bar{background:var(--base-800)}
.hub-bar i{display:block;height:100%;width:var(--p,0);background:var(--orange);border-radius:inherit;animation:fill .8s .2s var(--out) both}
.hub-prog.full .hub-bar i{background:#00A63E}
@keyframes fill{from{width:0}}
.hub-go{transition:transform .2s var(--spring)}
.hub-card:hover .hub-go{transform:translateX(3px)}

/* ---------- Journal : entrées qui arrivent en douceur ---------- */
.timeline .entry{animation:rise .4s var(--out) both}
.timeline .entry:nth-child(2){animation-delay:.06s}.timeline .entry:nth-child(3){animation-delay:.12s}.timeline .entry:nth-child(n+4){animation-delay:.16s}

/* ---------- Squelettes de chargement (perçu comme instantané) ---------- */
.skel-list{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.skel-list .skel{height:112px;border-radius:var(--r-lg)}
.skel-list .skel:first-child{height:140px;border-radius:var(--r-2xl)}
.skel-news{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.skel-news{grid-template-columns:repeat(2,1fr)}}
.skel-news .skel{height:280px;border-radius:var(--r-lg)}
.skel{background:linear-gradient(100deg,var(--base-100) 30%,var(--base-50) 50%,var(--base-100) 70%) 0 0/300% 100%;animation:shimmer 1.3s linear infinite}
.dark .skel{background:linear-gradient(100deg,var(--base-900) 30%,var(--base-800) 50%,var(--base-900) 70%) 0 0/300% 100%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- Impression / PDF : rien de tout ça ---------- */
@media print{
  .toast-zone,.confetti,.active-filters,.suggest,.tag.seen,.g-seen,.skel-list,.hub-last,.hub-prog{display:none!important}
  *{animation:none!important}
}