/* ═══════════════════════════════════════════════════════════════════════════
   NÉON : structure du RESTAURANT (templates/Restaurant/_structures/)
   Page de nuit façon application : verre dépoli, halos aux couleurs du client,
   plats en lignes nettes. Aucune couleur en dur hors blanc, noir et gris.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-structure="neon"] {
  --bg: #09090b; --paper: rgba(255,255,255,.045); --ink: #f5f5f4;
  --muted: #a1a1aa; --muted-strong: #d4d4d8; --line: rgba(255,255,255,.1);
  --tint1: rgba(255,255,255,.06); --tint2: rgba(255,255,255,.06); --tint3: rgba(255,255,255,.04);
  --verre: rgba(255,255,255,.055); --verre-bord: 1px solid rgba(255,255,255,.1);
  --sh: 0 20px 50px -24px rgba(0,0,0,.9);
  --r: 22px; --nav-h: 66px;
  background: #09090b; color: #f5f5f4;
}
[data-structure="neon"] :is(h2, .cat-t h3, .plat-nom, .nav-logo, #hero h1, .sheet-h h3, .f-logo) { color: #fff; }

/* Barre : verre dépoli sur toute la largeur. */
[data-structure="neon"] nav {
  background: rgba(9,9,11,.72); border-bottom: var(--verre-bord);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
[data-structure="neon"] .nav-tel { color: #e4e4e7; }
[data-structure="neon"] .btn { border-radius: 14px; }
[data-structure="neon"] .btn-main {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 32px -10px rgba(var(--accent-rgb),.75);
}
[data-structure="neon"] .btn-main:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 16px 40px -8px rgba(var(--accent-rgb),.9); }
[data-structure="neon"] .btn-ghost { background: var(--verre); color: #fff; box-shadow: none; border: var(--verre-bord); }

/* Haut de page : centré, halos de lumière, grand titre. */
[data-structure="neon"] #hero { isolation: isolate; }
[data-structure="neon"] #hero::before, [data-structure="neon"] #hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
}
[data-structure="neon"] #hero::before { width: 520px; height: 520px; left: -160px; top: -160px; background: var(--accent); }
[data-structure="neon"] #hero::after { width: 420px; height: 420px; right: -140px; top: 30%; background: var(--accent2); opacity: .32; }
[data-structure="neon"] .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: clamp(3rem, 10vw, 7rem) clamp(2.5rem, 7vw, 5rem); }
[data-structure="neon"] .hero-in { justify-items: center; max-width: 900px; }
[data-structure="neon"] .hero-chip { background: var(--verre); border: var(--verre-bord); color: #e4e4e7; box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-structure="neon"] .hero-chip .ic { color: var(--accent2); }
[data-structure="neon"] #hero h1 { font-size: clamp(2.9rem, 10vw, 6.6rem); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
[data-structure="neon"] #hero h1 em { display: block; color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-structure="neon"] #hero h1 em { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
[data-structure="neon"] #hero p { color: #d4d4d8; margin-inline: auto; }
[data-structure="neon"] .ouvert { background: var(--verre); border: var(--verre-bord); color: #fff; }
[data-structure="neon"] .hero-ctas { justify-content: center; }
/* Photos du haut : trois vignettes en rang, légèrement inclinées. */
[data-structure="neon"] .hero-media { aspect-ratio: auto; min-height: 0; height: clamp(150px, 30vw, 260px); max-width: 760px; }
[data-structure="neon"] .hero-media img { border-radius: 20px; border: var(--verre-bord); box-shadow: var(--sh); }
[data-structure="neon"] .hero-media .m1 { inset: 0 auto 0 33%; width: 34%; height: 100%; z-index: 2; box-shadow: 0 24px 60px -20px rgba(var(--accent-rgb),.8); }
[data-structure="neon"] .hero-media .m2 { left: 2%; bottom: 8%; top: auto; width: 30%; height: 80%; border-radius: 20px; transform: rotate(-6deg); border: var(--verre-bord); }
[data-structure="neon"] .hero-media .m3 { right: 2%; top: 8%; width: 30%; height: 80%; border-radius: 20px; transform: rotate(6deg); border: var(--verre-bord); }

/* Ruban : fine bande en dégradé. */
[data-structure="neon"] .ruban { background: linear-gradient(90deg, var(--accent-strong), var(--accent)); color: #fff; font-size: clamp(.95rem, 2vw, 1.15rem); padding: .6rem 0; }
[data-structure="neon"] .ruban-in span::after { color: var(--accent2); }

/* Titres de section. */
[data-structure="neon"] .s-kick { color: var(--accent2); }
[data-structure="neon"] h2 { text-transform: uppercase; letter-spacing: -.025em; }
[data-structure="neon"] .s-head p { color: var(--muted); }

/* Catégories : pastilles de texte collantes, en verre. */
[data-structure="neon"] .cats {
  gap: .5rem; padding: .7rem .2rem; background: rgba(9,9,11,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: var(--verre-bord);
}
[data-structure="neon"] .cats button {
  flex-direction: row; min-width: 0; min-height: 44px; padding: .5rem 1rem; border-radius: 100px;
  background: var(--verre); border: var(--verre-bord); color: #d4d4d8; font-size: .9rem; white-space: nowrap;
}
[data-structure="neon"] .cats button .cat-vign { display: none; }
[data-structure="neon"] .cats button.on { background: #fff; color: #09090b; border-color: #fff; }

/* Catégories de la carte : titre, compteur en pastille, filet lumineux. */
[data-structure="neon"] .cat-t { position: relative; padding-bottom: .8rem; border-bottom: var(--verre-bord); }
[data-structure="neon"] .cat-t::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
[data-structure="neon"] .cat-t h3 { text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
[data-structure="neon"] .cat-t small { padding: .15rem .6rem; border-radius: 100px; background: var(--verre); border: var(--verre-bord); color: #d4d4d8; font-size: .78rem; }

/* Plats : lignes nettes, photo carrée à droite ; deux colonnes sur grand écran. */
[data-structure="neon"] .plats { grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 820px) { [data-structure="neon"] .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } }
[data-structure="neon"] .plat {
  flex-direction: row-reverse; align-items: stretch; background: var(--verre); border: var(--verre-bord); border-radius: 20px; box-shadow: none;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
[data-structure="neon"] .plat:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.55); background: rgba(255,255,255,.07); }
[data-structure="neon"] .plat-img { flex: none; width: clamp(84px, 24vw, 132px); aspect-ratio: 1; margin: .6rem .6rem .6rem 0; border-radius: 16px; background: rgba(255,255,255,.06); align-self: flex-start; }
[data-structure="neon"] .plat-corps { padding: .9rem 1rem; gap: .3rem; }
[data-structure="neon"] .plat-nom { font-size: 1.06rem; letter-spacing: -.01em; }
[data-structure="neon"] .plat-desc { color: var(--muted); font-size: .86rem; -webkit-line-clamp: 2; }
[data-structure="neon"] .plat-pied { min-height: 0; padding-top: .45rem; justify-content: space-between; }
[data-structure="neon"] .plat-prix { color: var(--accent2); font-family: var(--fh); font-size: 1.08rem; letter-spacing: -.01em; }
/* Tailles : pastilles côte à côte (nom au-dessus, prix dessous). */
[data-structure="neon"] .plat-tailles { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .55rem; }
[data-structure="neon"] .taille {
  flex: 1 1 0; min-width: 76px; min-height: 0; display: grid; gap: .05rem; justify-items: start; align-content: center;
  padding: .4rem .6rem; border: var(--verre-bord); border-radius: 12px; background: rgba(255,255,255,.04);
}
[data-structure="neon"] .taille:first-child { border-top: var(--verre-bord); padding-top: .4rem; }
[data-structure="neon"] .taille-nom { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
[data-structure="neon"] .taille .plat-prix { font-size: 1rem; }
[data-structure="neon"] .taille:has(.pas) { grid-template-columns: 1fr auto; }
/* Plat avec photo : les tailles restent sur une ligne, plus serrées. */
[data-structure="neon"] .plat.a-photo .plat-tailles { flex-wrap: nowrap; gap: .3rem; }
[data-structure="neon"] .plat.a-photo .taille { min-width: 0; padding: .35rem .45rem; }
[data-structure="neon"] .plat.a-photo .taille .plat-prix { font-size: .9rem; }
[data-structure="neon"] .plat.a-photo .taille-nom { font-size: .62rem; letter-spacing: .03em; }
/* Deux photos seulement en haut : on recentre le rang. */
[data-structure="neon"] .hero-media .m1:nth-last-child(2) { left: 50%; }
[data-structure="neon"] .hero-media .m2:last-child { left: 16%; }
[data-structure="neon"] .plat.epuise .plat-nom, [data-structure="neon"] .plat.epuise .plat-prix { color: #71717a; }
[data-structure="neon"] .vide { background: var(--verre); border: var(--verre-bord); color: var(--muted); }

/* Galerie, infos et horaires : cartes de verre. */
[data-structure="neon"] .galerie img { border-radius: 20px; border: var(--verre-bord); }
[data-structure="neon"] .horaires { background: var(--verre); border: var(--verre-bord); box-shadow: none; border-collapse: separate; border-spacing: 0; color: #e4e4e7; }
[data-structure="neon"] .horaires td { border-bottom: var(--verre-bord); }
[data-structure="neon"] .horaires tr.auj td { background: rgba(var(--accent-rgb),.22); color: #fff; }
[data-structure="neon"] .contact a { background: var(--verre); border: var(--verre-bord); box-shadow: none; color: #fff; }
[data-structure="neon"] .contact a .ic { color: var(--accent2); }
[data-structure="neon"] .scan { background: var(--verre); border: var(--verre-bord); color: #fff; }

/* Commande à table (variante avec commande) : panneaux sombres. */
[data-structure="neon"] .sheet, [data-structure="neon"] .sheet-h { background: #141417; color: #f5f5f4; }
[data-structure="neon"] :is(.fermer, textarea, .tables button, .recap) { background: rgba(255,255,255,.06); color: #fff; }
[data-structure="neon"] .barre { background: rgba(20,20,23,.88); border: var(--verre-bord); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Pied de page. */
[data-structure="neon"] footer { background: #050506; border-top: var(--verre-bord); margin-top: 0; }

@media (max-width: 560px) {
  [data-structure="neon"] #hero::before { width: 340px; height: 340px; left: -140px; top: -120px; }
  [data-structure="neon"] #hero::after { width: 280px; height: 280px; right: -120px; }
  [data-structure="neon"] .plat-corps { padding: .8rem .85rem; }
}
/* Mouvement propre à Néon (en plus de bn-motion.js) : halos qui dérivent lentement,
   reflet qui traverse le bouton principal, point « ouvert » qui pulse. */
@keyframes neon-derive1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,60px) scale(1.15); } }
@keyframes neon-derive2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,-50px) scale(.9); } }
@keyframes neon-reflet { 0%,70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes neon-pouls { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 100% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } }
[data-structure="neon"] #hero::before { animation: neon-derive1 16s ease-in-out infinite; }
[data-structure="neon"] #hero::after { animation: neon-derive2 19s ease-in-out infinite; }
[data-structure="neon"] .btn-main { position: relative; overflow: hidden; }
[data-structure="neon"] .btn-main::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: neon-reflet 4.5s ease-in-out infinite;
}
[data-structure="neon"] .ouvert.oui i { animation: neon-pouls 1.8s ease-out infinite; }
[data-structure="neon"] .cats button { transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
[data-structure="neon"] .plat:hover .plat-img img { transform: scale(1.06); }
[data-structure="neon"] .plat-img img { transition: transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  [data-structure="neon"] .plat:hover { transform: none; }
  [data-structure="neon"] #hero::before, [data-structure="neon"] #hero::after,
  [data-structure="neon"] .btn-main::after, [data-structure="neon"] .ouvert.oui i { animation: none; }
  [data-structure="neon"] .plat:hover .plat-img img { transform: none; }
}