/* ══════════════════════════════════════════════════════════════
   ACA · Couche d'animations premium (additive, ne remplace rien)
   Ken Burns · Parallaxe · Lueur curseur · Tilt cartes · Micro-interactions
   ══════════════════════════════════════════════════════════════ */

/* ── Ken Burns : zoom/panoramique lent sur les images ── */
@keyframes acaKenBurns{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.07) translate3d(-1.4%,-1.2%,0)}}
img.aca-kb{animation:acaKenBurns 20s ease-in-out infinite alternate;will-change:transform}

/* ── Parallaxe légère (pilotée en JS) ── */
.aca-par{will-change:transform}

/* ── Hover premium des cartes ── */
.ccard{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s}
.ccard:hover{box-shadow:0 22px 52px rgba(27,42,71,.18)}
.aca-tilt{transform-style:preserve-3d;perspective:900px}

/* ── Micro-interactions : flèches et icônes qui réagissent ── */
.ico{transition:transform .25s cubic-bezier(.16,1,.3,1)}
a:hover>.ico,.cbtn:hover .ico,.cbtnw:hover .ico,.fc-link:hover .ico,a:hover .fc-link .ico{transform:translateX(4px)}
.cbtn,.cbtnw,.chip,.fc-link{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s,color .25s,border-color .25s}

/* ── Lueur douce qui suit le curseur sur les panneaux navy ── */
.npanel{position:relative}
.npanel>.aca-glow{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .45s ease;
 background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),rgba(216,169,83,.12),transparent 62%)}
.npanel:hover>.aca-glow{opacity:1}

/* ══ Afficheur à palettes (split-flap) : bascule mécanique lente ══
   S'applique à .roller.flipper[data-flip]. Surclasse le rouleau de nasapunk. */
.roller.flipper{perspective:900px;perspective-origin:50% 50%}
.roller.flipper .msg{transform:rotateX(-90deg);transform-origin:50% 50%;opacity:0;backface-visibility:hidden;transition:none;text-transform:none;letter-spacing:.11em;font-size:.78rem}
.roller.flipper .msg.in{transform:rotateX(0deg);opacity:1;transition:transform .70s cubic-bezier(.22,1.15,.36,1),opacity .26s ease}
.roller.flipper .msg.out{transform:rotateX(90deg);opacity:0;transition:transform .40s cubic-bezier(.55,0,.75,.1),opacity .3s ease .06s}
/* charnière centrale + ombrage : donne la matière de l'afficheur mécanique */
.roller.flipper::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:3;pointer-events:none;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.roller.flipper::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 44%,rgba(0,0,0,.06) 50%,transparent 56%,rgba(0,0,0,.035))}
.roller.flipper.clack{animation:acaClack .26s ease}
@keyframes acaClack{0%{transform:translateY(0)}40%{transform:translateY(1px)}100%{transform:translateY(0)}}
@media (max-width:880px){.roller.flipper .msg{font-size:.66rem;letter-spacing:.06em}}

/* ── Onglet de contexte, coin supérieur droit des cartes produit ── */
.fun-card{position:relative}
/* posé juste SOUS la bande tricolore (4px), il pend comme un onglet de dossier */
.ctx-tab{position:absolute;top:4px;right:0;z-index:4;max-width:64%;text-align:right;
 font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;
 color:#fff;background:var(--accent);padding:6px 12px 7px 13px;border-radius:0 0 0 12px;
 box-shadow:0 6px 16px rgba(27,42,71,.16);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fun-card.acc-gold .ctx-tab{color:#20160a}
.fun-card:hover .ctx-tab{transform:translateY(-2px)}
@media (max-width:520px){.ctx-tab{font-size:.5rem;max-width:70%}}

/* ── Accordéons FAQ plus fluides ── */
details>summary{cursor:pointer;transition:color .2s ease}
details[open]>summary{color:var(--accent)}

/* ── Respect des préférences d'accessibilité ── */
@media(prefers-reduced-motion:reduce){
 img.aca-kb{animation:none}
 .aca-par{transform:none!important}
 .ccard:hover{transform:none}
 .npanel>.aca-glow{display:none}
}