/* Cœurs Métisses: accueil : mouvement et survols par rubrique */

/* Menu : lien qui s'allume */
.menu a{transition:color .3s}
.menu a:hover{color:var(--terracotta)}

/* Héros : titre au reflet doré, éventails qui respirent et suivent la souris */
.hero h1{background:linear-gradient(110deg,var(--cacao) 38%,#C08A4A 48%,var(--terracotta) 52%,var(--cacao) 62%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cm-lustre 7s linear infinite}
@keyframes cm-lustre{from{background-position:100% 0}to{background-position:-160% 0}}
.hero-texte .cm-piece{display:block;width:110px;margin:0 auto 30px}
.hero-image{overflow:hidden}
.hero-image img{scale:1.1;translate:calc(var(--px,0)*-22px) calc(var(--py,0)*-16px);transition:translate .5s ease-out,filter .5s;animation:cm-respire 8s ease-in-out infinite alternate}
.hero-image img+img{animation-delay:-4s;translate:calc(var(--px,0)*-34px) calc(var(--py,0)*-22px)}
.hero-image img:hover{filter:saturate(1.15) brightness(1.04)}
@keyframes cm-respire{from{rotate:-1.2deg;scale:1.1}to{rotate:1.2deg;scale:1.15}}

/* Bandeau : pause et mots qui s'allument */
.bandeau:hover div{animation-play-state:paused}
.bandeau span{transition:color .3s,letter-spacing .3s;cursor:default}
.bandeau span:hover{color:#FFE7C7;letter-spacing:.42em}

/* Image encadrée (manifeste, créateurs) */
.cadre{position:relative;overflow:visible}
.cadre::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--bronze);transition:inset .6s cubic-bezier(.2,.8,.3,1);z-index:0}
.cadre img{position:relative;z-index:1;width:100%;transition:transform .8s cubic-bezier(.2,.8,.3,1),filter .8s}
.manifeste .cadre img{aspect-ratio:4/5;object-fit:cover}
.cadre:hover::before{inset:-14px 14px 14px -14px;border-color:var(--terracotta)}
.cadre:hover img{transform:scale(1.025);filter:saturate(1.08)}

/* Manifeste : mots à survoler */
.mots{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px}
.mot{position:relative;border:1px solid var(--ligne);padding:8px 16px;cursor:default;transition:.35s;outline:none}
.mot b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--cacao);transition:color .3s}
.mot em{position:absolute;left:50%;bottom:calc(100% + 10px);width:210px;transform:translate(-50%,8px);background:var(--cacao);color:var(--ivoire);font-style:normal;font-size:13px;line-height:1.45;padding:10px 12px;opacity:0;pointer-events:none;transition:.35s;z-index:5;text-align:center}
.mot em::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--cacao)}
.mot:hover,.mot:focus{background:var(--terracotta);border-color:var(--terracotta)}
.mot:hover b,.mot:focus b{color:var(--papier)}
.mot:hover em,.mot:focus em{opacity:1;transform:translate(-50%,0)}

/* Piliers */
.pilier{padding:26px 18px;border:1px solid transparent;background:transparent;transition:background .4s,border-color .4s}
.pilier .num{display:block;width:max-content;margin:0 auto 4px;transition:transform .5s cubic-bezier(.2,.8,.3,1),color .3s}
.pilier h3{position:relative;display:inline-block}
.pilier h3::after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:1px;background:var(--terracotta);transition:.45s}
.pilier .plus{max-height:0;opacity:0;overflow:hidden;margin-top:0;font-size:14px!important;color:var(--cacao)!important;transition:max-height .5s,opacity .5s,margin .5s}
.pilier:hover{background:var(--papier);border-color:var(--ligne)}
.pilier:hover .num{transform:scale(1.6) rotate(-8deg);color:var(--terracotta)}
.pilier:hover h3::after{left:0;right:0}
.pilier:hover .plus{max-height:120px;opacity:1;margin-top:12px}
@media (hover:none){.pilier .plus{max-height:none;opacity:1;margin-top:10px}}

/* Univers */
.carte-u img{transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.carte-u:hover img{transform:translateY(-8px) rotate(-4deg) scale(1.06)}
.carte-u:hover{border-color:var(--terracotta)}
.carte-u .badge{transition:.3s}
.carte-u:hover .badge{background:var(--terracotta);border-color:var(--terracotta);color:var(--papier)}
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.tags span{font-size:12px;letter-spacing:.06em;padding:4px 10px;background:rgba(184,155,112,.14);color:var(--texte-doux);transition:.3s}
.tags span:hover{background:var(--sauge);color:var(--papier)}
.tags.grands{justify-content:flex-start;margin:12px 0 30px}
.tags.grands span{font-size:13px;padding:7px 14px;border:1px solid var(--ligne);background:none}
.tags.grands span:hover{border-color:var(--sauge)}

/* Éventails : histoire et vote au survol */
.produit .img{position:relative}
.histoire{position:absolute;left:0;right:0;bottom:0;padding:46px 14px 14px;background:linear-gradient(transparent,rgba(74,55,46,.94) 38%);color:var(--ivoire);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.3,1);text-align:center}
.histoire p{font-size:13px;line-height:1.45;margin-bottom:10px}
.voter{background:none;border:1px solid var(--ivoire);color:var(--ivoire);font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;cursor:pointer;transition:.3s}
.voter:hover{background:var(--ivoire);color:var(--cacao)}
.produit:hover .histoire,.produit:focus-within .histoire{transform:none}
.produit .prix{transition:letter-spacing .4s}
.produit:hover .prix{letter-spacing:.06em}

/* Un éventail, trois vies */
.gestes{background:var(--papier)}
.gestes-grille{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.gestes-visuel{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivoire)}
.gestes-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s,transform 1.4s cubic-bezier(.2,.8,.3,1)}
.gestes-visuel img.on{opacity:1;transform:scale(1)}
.gestes-visuel:hover img.on{transform:scale(1.04)}
.onglets{display:flex;gap:8px;margin:26px 0 22px;flex-wrap:wrap}
.onglet{background:none;border:1px solid var(--ligne);padding:10px 20px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux);cursor:pointer;transition:.3s}
.onglet:hover{border-color:var(--terracotta);color:var(--terracotta)}
.onglet.on{background:var(--terracotta);border-color:var(--terracotta);color:var(--papier)}
.panneau{display:none}
.panneau.on{display:block;animation:cm-glisse .55s ease}
.panneau p{color:var(--texte-doux);margin-bottom:14px}
.panneau ul{list-style:none}
.panneau li{padding:9px 0 9px 26px;border-bottom:1px solid var(--ligne);position:relative;transition:padding .3s,color .3s}
.panneau li::before{content:"✦";position:absolute;left:0;color:var(--terracotta);transition:transform .4s}
.panneau li:hover{padding-left:34px;color:var(--terracotta)}
.panneau li:hover::before{transform:rotate(180deg)}
@keyframes cm-glisse{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* Liste privée */
.attente{overflow:hidden}
.attente .visuel{transition:transform 1.6s cubic-bezier(.2,.8,.3,1),filter 1.6s}
.attente:hover .visuel{transform:scale(1.05);filter:saturate(1.1)}
.apercu-vote{width:74px;height:74px;border-radius:50%;object-fit:cover;float:right;margin:-34px 0 0 10px;border:2px solid var(--bronze);opacity:.0;transition:opacity .4s}
.apercu-vote.montre{opacity:1;animation:cm-pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cm-pop{from{transform:scale(.3) rotate(-90deg)}to{transform:none}}
.choix label{transition:transform .25s,background .3s,border-color .3s}
.choix label:hover{transform:translateY(-3px);border-color:var(--bronze)}
form input,form textarea,form select{transition:border-color .3s,padding .3s}
form input:focus,form textarea:focus{padding-left:6px}

/* Bâtir une vision : trois étapes */
.pas-vision{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:6px 0 34px;text-align:center}
.pas-v{background:var(--papier);padding:30px 20px 24px;border:1px solid var(--ligne);transition:border-color .3s}
.pas-v .n{display:block;font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:18px}
.pas-v svg{width:46px;height:46px;margin:8px auto 10px;display:block;fill:none;stroke:var(--terracotta);stroke-width:1.4;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.pas-v h3{font-size:22px}
.pas-v p{font-size:14px;color:var(--texte-doux);margin-top:6px}
.pas-v:hover{border-color:var(--terracotta)}
.pas-v:hover svg{transform:scale(1.18) rotate(-6deg)}

/* Créateurs */
.designers li{transition:padding .35s,background .35s}
.designers li b{transition:transform .4s}
.designers li:hover{padding-left:12px;background:linear-gradient(90deg,rgba(173,73,40,.07),transparent)}
.designers li:hover b{transform:scale(1.25)}

/* FAQ */
summary{transition:color .3s,padding .3s}
summary:hover{color:var(--terracotta);padding-left:8px}
details[open] p{animation:cm-glisse .45s ease}

/* Contact */
.cartes-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.carte-contact{background:var(--creme);border:1px solid var(--ligne);padding:22px 14px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;transition:border-color .3s}
.carte-contact svg{width:34px;height:34px;fill:none;stroke:var(--terracotta);stroke-width:1.5;margin-bottom:6px;transition:transform .5s}
.carte-contact b{font-family:var(--serif);font-weight:500;font-size:20px}
.carte-contact span{font-size:13px;color:var(--texte-doux);word-break:break-word}
.carte-contact:hover{border-color:var(--terracotta)}
.carte-contact:hover svg{transform:translateY(-4px) scale(1.12)}

/* Pied de page */
footer .cm-piece{display:block;width:84px;margin-bottom:18px}

@media (max-width:900px){
  .gestes-grille{grid-template-columns:minmax(0,1fr);gap:40px}
  .pas-vision,.cartes-contact{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none;color:var(--cacao);background:none}}