/* Cœurs Métisses: effets vivants (partagés par toutes les pages) */

/* ---------- Logo CM : pièce qui tourne sur elle-même ---------- */
.cm-piece{display:inline-block;position:relative;perspective:700px;line-height:0;cursor:pointer;flex:none}
.cm-coin{position:relative;display:block;transform-style:preserve-3d;will-change:transform}
.cm-piece img{border-radius:50%!important;clip-path:circle(50% at 50% 50%);margin:0!important;box-shadow:none!important;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(calc(var(--ep,4px)/2))}
.cm-piece img.cm-dos{position:absolute;inset:0;transform:rotateY(180deg) translateZ(calc(var(--ep,4px)/2))}
.cm-piece i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--rim,#8E3A1F) 60%,#3b2a22 100%)}
/* rythmes */
.cm-tourne .cm-coin{animation:cm-tour 5.5s cubic-bezier(.45,.05,.35,1) infinite}
.cm-lent .cm-coin{animation:cm-tour 9s cubic-bezier(.45,.05,.35,1) infinite}
.cm-survol .cm-coin{animation:cm-tour-rare 10s cubic-bezier(.45,.05,.35,1) infinite}
.cm-survol:hover .cm-coin,a:hover>.cm-survol .cm-coin{animation:cm-tour-vite .9s cubic-bezier(.3,.1,.3,1) infinite}
@keyframes cm-tour{0%,8%{transform:rotateY(0)}62%,100%{transform:rotateY(360deg)}}
@keyframes cm-tour-rare{0%,82%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes cm-tour-vite{to{transform:rotateY(360deg)}}
/* pièce lancée au clic */
.cm-piece.lance{animation:cm-saut 1.1s cubic-bezier(.3,.6,.4,1)}
.cm-piece.lance .cm-coin{animation:cm-vrille 1.1s cubic-bezier(.2,.7,.3,1)!important}
@keyframes cm-saut{0%{transform:translateY(0)}45%{transform:translateY(-38px) scale(1.06)}80%{transform:translateY(3px)}100%{transform:translateY(0)}}
@keyframes cm-vrille{from{transform:rotateY(0)}to{transform:rotateY(1440deg)}}
/* ombre douce sous la grande pièce */
.cm-ombre::after{content:"";position:absolute;left:18%;right:18%;bottom:-16px;height:10px;border-radius:50%;background:rgba(74,55,46,.22);filter:blur(5px);animation:cm-ombre 5.5s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes cm-ombre{0%,8%,62%,100%{transform:scaleX(1)}23%,47%{transform:scaleX(.55)}35%{transform:scaleX(.3)}}
/* étincelles */
.cm-etincelle{position:fixed;z-index:9999;pointer-events:none;font-size:14px;color:var(--terracotta,#AD4928);animation:cm-etincelle .9s ease-out forwards}
@keyframes cm-etincelle{from{opacity:1;transform:translate(-50%,-50%) scale(.6)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(120deg)}}

/* ---------- Barre de lecture + en-tête ---------- */
.cm-progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,#AD4928,#B89B70);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
header{transition:box-shadow .4s}
header.defile{box-shadow:0 8px 30px rgba(74,55,46,.10)}
.menu a.actif{color:var(--terracotta)}
.menu a.actif::after{width:100%!important}

/* ---------- Curseur lumineux (souris seulement) ---------- */
.cm-curseur,.cm-point{position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;opacity:0;transition:opacity .3s,width .3s,height .3s,background .3s,border-color .3s}
.cm-curseur{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(173,73,40,.55)}
.cm-point{width:6px;height:6px;margin:-3px 0 0 -3px;background:#AD4928}
.cm-actif .cm-curseur,.cm-actif .cm-point{opacity:1}
.cm-sur .cm-curseur{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(173,73,40,.10);border-color:rgba(173,73,40,.8)}
.cm-cache .cm-curseur,.cm-cache .cm-point{opacity:0!important}

/* ---------- Boutons : reflet + aimant ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,border-color .3s,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-22deg);transition:left .75s ease}
.btn:hover::before{left:140%}
.btn:hover{box-shadow:0 10px 26px rgba(173,73,40,.22)}

/* ---------- Cartes inclinables avec reflet ---------- */
.cm-incl{position:relative;transform-style:preserve-3d}
.cm-incl::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.42),transparent 55%);opacity:0;transition:opacity .35s}
.cm-incl.incline::after{opacity:1}
.incline{transition:transform .12s ease-out,box-shadow .3s,border-color .3s!important;box-shadow:0 22px 45px rgba(74,55,46,.16)}

/* ---------- Apparitions ---------- */
.apparait{transition-delay:var(--d,0s)}
.eyebrow{transition:letter-spacing 1.2s ease}
.apparait:not(.vu) .eyebrow{letter-spacing:.6em}

/* ---------- Liens soulignés ---------- */
footer a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
footer a:hover{background-size:100% 1px;text-decoration:none!important}

@media (prefers-reduced-motion:reduce){
  .cm-coin,.cm-piece,.cm-ombre::after{animation:none!important}
  .cm-curseur,.cm-point{display:none}
}