/* ═══════════════════════════════════════════════════════════════════════════
   POP : structure du RESTAURANT (templates/Restaurant/_structures/)
   Aplats de couleurs franches (les deux couleurs du client), photos rondes qui
   débordent, une teinte par catégorie, titres en contour, horaires en ticket.
   Aucune couleur en dur hors blanc et noir.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-structure="pop"] {
  --bg: #fff;
  --r: 30px;
  --sh: 0 14px 30px -18px rgba(0,0,0,.35);
}

/* Barre sombre, franche. */
[data-structure="pop"] nav { background: var(--dark); backdrop-filter: none; }
[data-structure="pop"] .nav-logo { color: #fff; }
[data-structure="pop"] .nav-logo span { color: var(--accent2); }
[data-structure="pop"] .nav-tel { color: #fff; }

/* Haut de page : deux aplats, une grande photo ronde à cheval. */
[data-structure="pop"] #hero {
  background: linear-gradient(90deg, var(--accent-strong) 0 58%, var(--accent2) 58% 100%);
}
@media (max-width: 899px) {
  [data-structure="pop"] #hero { background: linear-gradient(180deg, var(--accent-strong) 0 62%, var(--accent2) 62% 100%); }
}
[data-structure="pop"] #hero h1 { color: #fff; text-transform: uppercase; font-size: clamp(2.6rem, 7.6vw, 5.2rem); line-height: .92; }
[data-structure="pop"] #hero h1 em { color: var(--dark); background: #fff; padding: 0 .18em; border-radius: 12px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-structure="pop"] #hero p { color: #fff; }
[data-structure="pop"] .hero-chip { background: var(--dark); color: #fff; box-shadow: none; }
[data-structure="pop"] .hero-chip .ic { color: var(--accent2); }
[data-structure="pop"] .ouvert { background: #fff; }
[data-structure="pop"] #hero .btn-main { background: var(--dark); box-shadow: none; }
[data-structure="pop"] #hero .btn-ghost { background: #fff; box-shadow: none; }
[data-structure="pop"] .hero-media .m1 { border: 12px solid #fff; box-shadow: 0 30px 60px -25px rgba(0,0,0,.5); }
[data-structure="pop"] .hero-media .m2, [data-structure="pop"] .hero-media .m3 { border: 8px solid #fff; }

/* Ruban sombre aux lettres de la seconde couleur. */
[data-structure="pop"] .ruban { background: var(--dark); color: var(--accent2); }
[data-structure="pop"] .ruban-in span::after { color: #fff; }

/* Titres en contour. */
[data-structure="pop"] h2 { text-transform: uppercase; }
[data-structure="pop"] .cat-t h3 {
  text-transform: uppercase; font-size: clamp(1.7rem, 6vw, 3.6rem); color: var(--paper);
  -webkit-text-stroke: 2px var(--dark); paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 2px black) { [data-structure="pop"] .cat-t h3 { color: var(--dark); } }

/* Catégories en tuiles de couleur. */
[data-structure="pop"] .cats { gap: .6rem; }
[data-structure="pop"] .cats button { flex-direction: row; gap: .5rem; min-height: 52px; padding: .4rem 1rem .4rem .4rem; border-radius: 16px; background: var(--tint1); color: var(--dark); }
[data-structure="pop"] .cats button:nth-child(3n+2) { background: var(--tint2); }
[data-structure="pop"] .cats button:nth-child(3n) { background: var(--tint3); }
[data-structure="pop"] .cat-vign { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; box-shadow: none; }
[data-structure="pop"] .cats button.on { background: var(--dark); color: #fff; }
[data-structure="pop"] .cats button.on .cat-vign { box-shadow: none; }

/* Une teinte par catégorie ; la photo ronde dépasse du haut de la carte. */
[data-structure="pop"] .cat-bloc { --tinte: var(--tint1); }
[data-structure="pop"] .cat-bloc:nth-child(3n+2) { --tinte: var(--tint2); }
[data-structure="pop"] .cat-bloc:nth-child(3n) { --tinte: var(--tint3); }
[data-structure="pop"] .plats { row-gap: 3.2rem; padding-top: 2.4rem; }
[data-structure="pop"] .plat { background: var(--tinte); box-shadow: none; overflow: visible; text-align: center; }
[data-structure="pop"] .plat.a-photo { padding-top: 0; }
[data-structure="pop"] .plat-img {
  width: 72%; aspect-ratio: 1; margin: -2.4rem auto 0; border-radius: 50%; border: 6px solid #fff; box-shadow: var(--sh);
}
[data-structure="pop"] .plat-corps { align-items: center; }
[data-structure="pop"] .plat-pied { flex-direction: column; gap: .4rem; }
[data-structure="pop"] .plat-prix { font-family: var(--fh); font-size: 1.35rem; color: var(--dark); }
[data-structure="pop"] .plat:hover .plat-img { transform: rotate(-8deg) scale(1.03); }
[data-structure="pop"] .plat-img { transition: transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { [data-structure="pop"] .plat:hover .plat-img { transform: none; } }
[data-structure="pop"] .scan { background: var(--tint2); }

/* Galerie ronde, horaires en ticket de caisse. */
[data-structure="pop"] .galerie { grid-auto-columns: min(70%, 300px); }
[data-structure="pop"] .galerie img { aspect-ratio: 1; border-radius: 50%; }
[data-structure="pop"] .horaires {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92rem;
  border-radius: 6px; box-shadow: var(--sh); background: #fff;
}
[data-structure="pop"] .horaires td { border-bottom: 1.5px dashed var(--line); }
[data-structure="pop"] .horaires tr.auj td { background: var(--tint1); }
[data-structure="pop"] .contact a { background: var(--tint2); box-shadow: none; }
[data-structure="pop"] footer { background: var(--accent-strong); }
[data-structure="pop"] footer .f-logo span { color: var(--dark); }
[data-structure="pop"] .f-bas { border-top-color: rgba(255,255,255,.35); }