/* Accueil KV Eats — haut de page « La cloche » (piste E) : titre au mot changeant, carte d'adresse, scène animée. */
.heros-cloche { position: relative; overflow: hidden; background: var(--orange); color: var(--charbon); padding: 40px 0 56px; }
.heros-cloche::before { content: ""; position: absolute; right: -120px; top: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 150, .55), rgba(242, 140, 40, 0) 65%); pointer-events: none; }
.heros-cloche__grille { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
.heros-cloche__texte { min-width: 0; }
.heros-cloche h1 { margin: 0 0 16px; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.heros-cloche__mots { display: inline-grid; vertical-align: top; height: 1.05em; overflow: hidden; color: #FFFFFF; }
.heros-cloche__mots span { grid-area: 1 / 1; animation: hc-mot 9s infinite both; }
.heros-cloche__mots span:nth-child(2) { animation-delay: 3s; }
.heros-cloche__mots span:nth-child(3) { animation-delay: 6s; }
.heros-cloche__mots span:first-child { animation-name: hc-mot1; }
@keyframes hc-mot { 0%, 6% { transform: translateY(100%); opacity: 0; } 10%, 30% { transform: translateY(0); opacity: 1; } 33.3%, 100% { transform: translateY(-100%); opacity: 0; } }
@keyframes hc-mot1 { 0%, 30% { transform: translateY(0); opacity: 1; } 33.3%, 95% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.heros-cloche__sous { margin: 0 0 22px; font-size: 1.05rem; color: #3D260E; max-width: 42ch; }

.heros-cloche__carte { background: var(--blanc-casse); color: var(--charbon); border-radius: 22px; padding: 20px; box-shadow: 0 22px 50px rgba(61, 38, 14, .25); max-width: 620px; }
.heros-cloche .champ-adresse { margin: 0; max-width: none; height: 60px; padding: 0 8px 0 16px; border: 2px solid var(--charbon); border-radius: 16px; box-shadow: none; background: #fff; }
.heros-cloche .champ-adresse input { font-size: 1rem; }
.heros-cloche__voir { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--orange); color: var(--charbon); font: inherit; font-weight: 800; font-size: .88rem; white-space: nowrap; text-decoration: none; cursor: pointer; }
.heros-cloche__voir .icone { width: 16px; height: 16px; }
.heros-cloche__position { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; font-size: .9rem; }
.heros-cloche__position .lien-action { color: var(--charbon); padding: 4px 0; }
.heros-cloche__position .lien-banniere { font-size: .88rem; opacity: .75; }
.heros-cloche__services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.heros-cloche__service { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--charbon); border-radius: 999px; background: none; color: var(--charbon); font: inherit; font-weight: 800; font-size: .84rem; text-decoration: none; cursor: pointer; }
.heros-cloche__service .icone { width: 16px; height: 16px; }
.heros-cloche__service--actif { background: var(--orange); border-color: var(--orange); }
.heros-cloche__service small { font-weight: 600; opacity: .7; }

.e-scene { position: relative; min-width: 0; }
.e-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.e-scene svg * { transform-box: view-box; }

@media (max-width: 860px) {
  .heros-cloche { padding: 12px 0 40px; }
  .heros-cloche__grille { grid-template-columns: 1fr; gap: 8px; }
  .heros-cloche .e-scene { order: -1; width: min(100%, 420px); margin: 30px auto -6px; }
  .heros-cloche .e-cloche { --ex: 72px; --ey: -74px; }
  .heros-cloche__carte { padding: 14px; }
  .heros-cloche .champ-adresse { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 8px 8px 14px; }
  .heros-cloche .champ-adresse input { flex-basis: 60%; }
}
@media (max-width: 420px) {
  .heros-cloche__voir { width: 100%; justify-content: center; }
}

/* Animations réduites : plat burger découvert, cloche levée, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  .heros-cloche *, .heros-cloche *::before, .heros-cloche *::after { animation: none !important; }
  .heros-cloche__mots span { opacity: 0; }
  .heros-cloche__mots span:first-child, .heros-cloche .e-plat.p1 { opacity: 1; }
  .heros-cloche .e-cloche { transform: translate(108px, -86px) rotate(20deg); }
  .heros-cloche .e-halo { opacity: .6; }
  .heros-cloche .e-ombre { opacity: .1; }
}

/* ==== SCÈNE GÉNÉRÉE ==== */
/* Copiée de la maquette validée (piste E). */
.e-scene { position:relative }
.e-scene svg { width:100%; height:auto; display:block; overflow:visible }
.e-scene svg * { transform-box:view-box }

/* Un plat par tiers du cycle de 9 s, échangé pendant que la cloche est fermée */
.e-plat { opacity:0; animation:e-plat 9s infinite steps(1, end) }
.e-plat.p2 { animation-delay:3s } .e-plat.p3 { animation-delay:6s }
@keyframes e-plat { 0% { opacity:1 } 33.33% { opacity:0 } 100% { opacity:0 } }
.e-plat.p1 { animation-name:e-plat1 }
@keyframes e-plat1 { 0% { opacity:1 } 33.33% { opacity:0 } 99.9% { opacity:0 } 100% { opacity:1 } }

/* Cloche — cycle de 3 s : la vapeur la fait trembler, elle se tasse, bondit en arc,
   flotte, redescend, s'écrase un peu en se posant puis se stabilise */
.e-cloche { --ex:108px; --ey:-86px; transform-origin:200px 262px; animation:e-cloche 3s infinite }
@keyframes e-cloche {
  0%   { transform:translate(0,0) rotate(0) scale(1,1); animation-timing-function:ease-in-out }
  4%   { transform:translate(0,-2px) rotate(-1.6deg) scale(1,1) }
  6%   { transform:translate(0,0) rotate(1.4deg) scale(1,1) }
  8%   { transform:translate(0,-1px) rotate(-1deg) scale(1,1) }
  10%  { transform:translate(0,0) rotate(0) scale(1,1); animation-timing-function:cubic-bezier(.5,0,.8,.5) }
  15%  { transform:translate(-3px,4px) rotate(-3deg) scale(1.05,.92); animation-timing-function:cubic-bezier(.2,.7,.3,1) }
  22%  { transform:translate(calc(var(--ex) * .35),calc(var(--ey) * .85)) rotate(8deg) scale(.96,1.05); animation-timing-function:cubic-bezier(.3,.6,.4,1) }
  32%  { transform:translate(var(--ex),var(--ey)) rotate(22deg) scale(1,1); animation-timing-function:ease-in-out }
  44%  { transform:translate(calc(var(--ex) + 3px),calc(var(--ey) - 7px)) rotate(19deg) scale(1,1) }
  56%  { transform:translate(calc(var(--ex) - 2px),calc(var(--ey) + 1px)) rotate(23deg) scale(1,1) }
  68%  { transform:translate(calc(var(--ex) + 2px),calc(var(--ey) - 6px)) rotate(20deg) scale(1,1); animation-timing-function:cubic-bezier(.6,0,.9,.6) }
  78%  { transform:translate(calc(var(--ex) * .45),calc(var(--ey) * .8)) rotate(10deg) scale(.97,1.04); animation-timing-function:cubic-bezier(.5,0,1,1) }
  85%  { transform:translate(0,3px) rotate(-1deg) scale(1.07,.9); animation-timing-function:cubic-bezier(.2,.8,.4,1) }
  90%  { transform:translate(0,-7px) rotate(.8deg) scale(.97,1.04); animation-timing-function:ease-in }
  94%  { transform:translate(0,1px) rotate(-.4deg) scale(1.02,.98); animation-timing-function:ease-out }
  100% { transform:translate(0,0) rotate(0) scale(1,1) }
}
/* Reflet qui glisse sur le dôme pendant le mouvement */
.e-reflet { animation:e-reflet 3s infinite cubic-bezier(.4,0,.2,1) }
@keyframes e-reflet { 0%,12% { transform:translateX(-170px) } 34%,100% { transform:translateX(200px) } }
/* Plateau : il encaisse le choc quand la cloche se repose */
.e-plateau { transform-origin:200px 286px; animation:e-plateau 3s infinite }
@keyframes e-plateau { 0%,84% { transform:translateY(0) scale(1,1) } 86% { transform:translateY(3px) scale(1.012,.985) } 91% { transform:translateY(-1px) scale(1,1) } 95%,100% { transform:translateY(0) scale(1,1) } }
/* Ombre de la cloche : elle s'élargit et pâlit quand la cloche monte */
.e-ombre { transform-origin:200px 262px; animation:e-ombre 3s infinite ease-in-out }
@keyframes e-ombre { 0%,10% { opacity:.34; transform:translateX(0) scale(1,1) } 15% { opacity:.4; transform:translateX(0) scale(1.06,1) } 32%,68% { opacity:.1; transform:translateX(60px) scale(1.25,1.3) } 85% { opacity:.42; transform:translateX(0) scale(1.08,1) } 100% { opacity:.34; transform:translateX(0) scale(1,1) } }

/* Découverte : halo, rayons, plat qui se soulève */
.e-halo { transform-origin:200px 214px; opacity:0; animation:e-halo 3s infinite ease-out }
@keyframes e-halo { 0%,16% { opacity:0; transform:scale(.3) } 30% { opacity:.95; transform:scale(1.08) } 50% { opacity:.6; transform:scale(1) } 74% { opacity:.5; transform:scale(1) } 84%,100% { opacity:0; transform:scale(.6) } }
.e-rayons { transform-origin:200px 214px; opacity:0; animation:e-rayons 3s infinite linear }
@keyframes e-rayons { 0%,18% { opacity:0; transform:rotate(-20deg) scale(.6) } 32% { opacity:.55; transform:rotate(0) scale(1) } 74% { opacity:.4; transform:rotate(26deg) scale(1.02) } 84%,100% { opacity:0; transform:rotate(32deg) scale(.8) } }
.e-pop { transform-origin:200px 258px; animation:e-pop 3s infinite }
@keyframes e-pop {
  0%,16% { transform:translateY(4px) scale(.94); animation-timing-function:cubic-bezier(.2,.9,.3,1.3) }
  30% { transform:translateY(-8px) scale(1.07) } 40% { transform:translateY(0) scale(.99) }
  48% { transform:translateY(-2px) scale(1.01) } 56%,76% { transform:translateY(0) scale(1) }
  84%,100% { transform:translateY(4px) scale(.94) }
}
/* Bouffée de vapeur libérée à l'ouverture, puis volutes continues */
.e-bouffee ellipse { opacity:0; transform-origin:var(--ox) 236px; animation:e-bouffee 3s infinite ease-out }
.e-bouffee ellipse:nth-child(2) { animation-delay:.06s } .e-bouffee ellipse:nth-child(3) { animation-delay:.12s } .e-bouffee ellipse:nth-child(4) { animation-delay:.04s }
@keyframes e-bouffee { 0%,15% { opacity:0; transform:translate(0,0) scale(.3) } 22% { opacity:.85 } 46%,100% { opacity:0; transform:translate(var(--bx),-46px) scale(1.6) } }
.e-vapeur path { stroke-dasharray:80; stroke-dashoffset:80; opacity:0; animation:e-vap 3s infinite ease-out }
.e-vapeur path:nth-child(2) { animation-delay:.22s } .e-vapeur path:nth-child(3) { animation-delay:.44s }
@keyframes e-vap { 0%,26% { stroke-dashoffset:80; opacity:0; transform:translateY(10px) } 42% { opacity:.9 } 66% { stroke-dashoffset:0; opacity:.5; transform:translateY(-16px) } 78%,100% { opacity:0; transform:translateY(-26px) } }
/* Petites fuites de vapeur sous le rebord pendant que la cloche tremble */
.e-fuite path { opacity:0; animation:e-fuite 3s infinite ease-out }
.e-fuite path:nth-child(2) { animation-delay:.08s }
@keyframes e-fuite { 0%,2% { opacity:0; transform:translate(0,0) } 6% { opacity:.8 } 13%,100% { opacity:0; transform:translate(var(--fx),-14px) } }
/* Étincelles au moment de la découverte */
.e-etincelle { opacity:0; animation:e-etin 3s infinite cubic-bezier(.2,.9,.3,1.4) }
.e-etincelle:nth-child(2) { animation-delay:.1s } .e-etincelle:nth-child(3) { animation-delay:.2s } .e-etincelle:nth-child(4) { animation-delay:.28s }
@keyframes e-etin { 0%,24% { opacity:0; transform:scale(0) rotate(0) } 34% { opacity:1; transform:scale(1.15) rotate(45deg) } 50%,100% { opacity:0; transform:scale(.4) rotate(90deg) } }
/* Tintement quand la cloche se repose */
.e-tinte path { opacity:0; animation:e-tinte 3s infinite ease-out }
@keyframes e-tinte { 0%,84% { opacity:0; transform:scale(.7) } 87% { opacity:1; transform:scale(1) } 96%,100% { opacity:0; transform:scale(1.25) } }
.e-tinte .g { transform-origin:96px 256px } .e-tinte .d { transform-origin:304px 256px }