/*
 * pz-embers.css — section "FOUR" : #carte-preview en four a bois sombre + braises.
 *
 * EXCEPTION THEMATIQUE ASSUMEE au DS public (PUBLIC-DS.md §1/§5 : le sombre
 * `--pz-ink`/`--pz-bg-dark` n'est pas un fond de page pleine largeur). Ici le sombre
 * est SCOPE a UNE section decorative (la "bouche du four") en tokens `--pz-*` (jamais
 * `--adm-*` -> public-context-purity.js reste vert), pour faire RESSORTIR les pizzas
 * (appetit) et les braises (chaleur). Tous les overrides de carte sont scopes sous
 * #carte-preview : le composant partage `.pizza-card` (carte.php, fiche) reste ivoire.
 *
 * Doctrine : no inline styles (cccode-css-no-inline). pointer-events:none sur le canvas
 * (anti-fabric-bug). position:absolute (zero CLS). z-index 0 (sous le contenu).
 */

/* ── La section-four : fond sombre chaud, braises ressortent, pizzas glow ──────── */
#carte-preview {
  position: relative;
  overflow: hidden;
  /* Interieur de brasier : charbon quasi-noir + GRAIN DE PIERRE ORGANIQUE (bruit fractal,
     PAS un quadrillage). Le feu (canvas additif) domine par-dessus ; la pierre ne se voit
     que dans les zones sombres. 0 asset reseau (SVG inline). */
  background:
    /* lueur de braise (fallback no-JS, en bas) */
    radial-gradient(ellipse 120% 80% at 50% 104%,
      rgba(150, 56, 12, 0.5) 0%, rgba(40, 20, 12, 0.0) 58%),
    /* grain de pierre : bruit fractal sombre tuile (roche, pas de lignes regulieres) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.06  0 0 0 0 0.04  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>"),
    /* base charbon quasi-noir */
    linear-gradient(180deg, #120c09 0%, #17100b 55%, #1e130c 100%);
  background-size: auto, 260px 260px, auto;
}

/* Titres : lisibles par-dessus le feu anime (ombre chaude profonde) */
#carte-preview .section-title h2 {
  color: var(--pz-ivory);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 36px rgba(0, 0, 0, 0.55);
}
#carte-preview .section-title p {
  color: rgba(251, 246, 236, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* Halo de four permanent en ::before — visible meme sans JS, sous le canvas */
#carte-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 60% at 50% 100%,
    rgba(255, 110, 25, 0.22) 0%,
    rgba(210, 120, 30, 0.10) 45%,
    transparent 78%
  );
}

/* Le canvas decoratif : fond absolu, zero impact layout/LCP */
.pz-embers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
  /* Fallback statique chaud — visible meme sans JS (prefers-reduced-motion) */
  background: radial-gradient(
    ellipse 92% 70% at 50% 94%,
    rgba(255, 95, 20, 0.20) 0%,
    rgba(220, 130, 35, 0.10) 40%,
    transparent 80%
  );
}

/* Le contenu reste au-dessus du canvas */
#carte-preview > .container {
  position: relative;
  z-index: 1;
}

/* ── Accent-line en or sur le four (titres + ombre : voir plus haut) ───────────── */
#carte-preview .section-title .accent-line { background: var(--pz-gold-3); }

/* ── Pizza du Moment : texte clair sur le four ────────────────────────────────── */
#carte-preview .pizza-moment-content h3 { color: var(--pz-ivory); }
#carte-preview .pizza-moment-content p  { color: rgba(251, 246, 236, 0.74); }

/* ── Cards anthracite : carbone chaud, pizzas qui ressortent ───────────────────── */
#carte-preview .pizza-card {
  background: #241c16;                              /* anthracite chaud (carbone) */
  border-color: rgba(201, 161, 74, 0.22);          /* liseré or discret */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}
#carte-preview .pizza-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 22px rgba(255, 120, 30, 0.18);    /* halo de chaleur au survol */
}
#carte-preview .pizza-card-body h3 { color: var(--pz-ivory); }
#carte-preview .pizza-card-ingredients { color: rgba(251, 246, 236, 0.62); }
#carte-preview .pizza-card-base { color: rgba(251, 246, 236, 0.55); }
#carte-preview .pizza-card-base strong { color: var(--pz-red-3); }
#carte-preview .pizza-card .size { color: rgba(251, 246, 236, 0.55); }
#carte-preview .pizza-card .price { color: var(--pz-gold-3); }

/* ── Mobile : four plus profond + cards plus carbone (demande Vincent) ─────────── */
@media (max-width: 640px) {
  #carte-preview {
    background:
      radial-gradient(ellipse 130% 75% at 50% 103%,
        rgba(135, 52, 12, 0.6) 0%,
        rgba(40, 22, 14, 0.0) 58%),
      linear-gradient(180deg, #160f0b 0%, #1d130d 60%, #24160d 100%);
  }
  #carte-preview .pizza-card {
    background: #1b140f;                            /* carbone plus profond */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  /* Canvas plus present (l'effet etait trop discret en mobile) */
  .pz-embers-canvas {
    background: radial-gradient(
      ellipse 110% 60% at 50% 100%,
      rgba(255, 100, 25, 0.22) 0%,
      transparent 72%
    );
  }
}