/* ═══════════════════════════════════════════════════════════
   LA FLAMME D'OR — « Le fil d'or » (passages entre les rubriques)
   À chaque jonction (Accueil → Nos assiettes, Nos assiettes → La
   carte, La carte → phrase finale) : un fil doré se trace depuis le
   centre, la petite flamme s'y allume, une lueur descend, puis le
   titre de la rubrique s'embrase. La phrase finale s'embrase aussi.
   Sans JavaScript ou avec « réduire les animations », on voit
   directement l'état final (fil + flamme), sans mouvement.
   ═══════════════════════════════════════════════════════════ */

/* calque de jonction posé ENTRE deux sections, au-dessus des deux */
.pc-sep { position: relative; z-index: 20; height: 0; pointer-events: none; }

.pc-edge {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  z-index: 2; pointer-events: none;
}
/* le fil : doré au centre, qui s'évanouit vers les bords */
.pc-line {
  position: absolute; left: 0; right: 0; top: -0.5px; height: 1px;
  background: linear-gradient(90deg, rgba(230,199,122,0) 0%, rgba(230,199,122,.55) 22%, #f3d58c 50%, rgba(230,199,122,.55) 78%, rgba(230,199,122,0) 100%);
  box-shadow: 0 0 10px rgba(230,170,70,.45);
  transform-origin: 50% 50%;
}
/* la lueur posée sous le fil */
.pc-glow {
  position: absolute; left: 50%; top: 0;
  width: min(900px, 120vw); height: 38vh; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(230,170,70,.12), rgba(230,170,70,0) 70%);
}
/* la petite flamme au centre du fil */
.pc-flame {
  position: absolute; left: 50%; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: var(--bone);
  border: 1px solid rgba(230,199,122,.55);
  display: grid; place-items: center;
}
.pc-flame svg { width: 16px; height: 16px; fill: #e6c77a; filter: drop-shadow(0 0 6px rgba(255,170,60,.7)); }

/* ─── état de départ (seulement si l'animation est active) ─── */
html.pc-anim .pc-line { transform: scaleX(0); }
html.pc-anim .pc-glow { opacity: 0; }
html.pc-anim .pc-flame { opacity: 0; transform: scale(.3); }
html.pc-anim .pc-title .pcc { color: #2a1c10; }

/* ─── le passage se joue ─── */
html.pc-anim .pc-in .pc-line {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}
html.pc-anim .pc-in .pc-flame {
  opacity: 1; transform: scale(1);
  transition: opacity .35s ease-out .15s, transform .6s cubic-bezier(.2, 1.5, .4, 1) .15s;
}
html.pc-anim .pc-in .pc-flame svg { animation: pcFlicker 1.2s ease-in-out .4s 2; }
html.pc-anim .pc-in .pc-glow { opacity: 1; transition: opacity 1.6s ease-out .5s; }
html.pc-anim .pc-title.pc-lit .pcc {
  animation: pcIgnite .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(150ms + var(--i) * 55ms);
}

/* ─── la phrase finale : les lettres montent (moteur du site), puis s'embrasent ─── */
html.pc-anim .footer-name .chi { color: #2a1c10; }
html.pc-anim .footer-name.in-view .chi {
  animation: pcIgnite .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(350ms + var(--i, 0) * 32ms);
}

@keyframes pcFlicker {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,170,60,.7)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,190,80,.95)); transform: scale(1.12); }
}
@keyframes pcIgnite {
  0%   { color: #2a1c10; text-shadow: none; }
  40%  { color: #ff9a3c; text-shadow: 0 0 16px rgba(255,140,40,.8); }
  75%  { color: #f3d58c; text-shadow: 0 0 10px rgba(230,199,122,.5); }
  100% { color: var(--ink); text-shadow: none; }
}

.pc-title .pcw { display: inline-block; white-space: nowrap; }
.pc-title .pcc { display: inline-block; }

@media (max-width: 480px) {
  .pc-flame { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .pc-flame svg { width: 13px; height: 13px; }
}