<!-- ===== Menu Entrée • Plat • Dessert (scopé .rm-menu) ===== -->
<style>
/* Scope strict : rien ne fuit hors de .rm-menu */
.rm-menu { --rm-bg:#faf8f6; --rm-card:#fff; --rm-ink:#222; --rm-muted:#6b6b6b; --rm-accent:#b76e79; --rm-sep:#eee; }
@media (prefers-color-scheme: dark){
.rm-menu { --rm-bg:#111214; --rm-card:#17181b; --rm-ink:#f2f2f2; --rm-muted:#b6b6b6; --rm-accent:#f2a6af; --rm-sep:#292a2d; }
}
.rm-menu {
font: inherit; color: var(--rm-ink); background: var(--rm-bg);
border: 1px solid var(--rm-sep); border-radius: 16px; overflow: hidden;
max-width: 900px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.rm-header { padding: 22px 22px 16px; background: linear-gradient(180deg, rgba(183,110,121,.10), transparent); border-bottom: 1px solid var(--rm-sep); text-align: center; }
.rm-title { margin: 0; font-weight: 700; font-size: clamp(20px,3.5vw,28px); letter-spacing: .3px; }
.rm-sub { margin-top: 6px; color: var(--rm-muted); font-size: 14px; }
.rm-sections { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px){ .rm-sections { grid-template-columns: repeat(3,1fr); } }
.rm-sec { padding: 18px 20px; border-right: 1px solid var(--rm-sep); background: var(--rm-card); }
.rm-sec:last-child { border-right: none; }
.rm-secTitle { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--rm-accent); }
.rm-item { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed var(--rm-sep); }
.rm-item:last-child{ border-bottom:none; }
.rm-left { min-width:0; }
.rm-name { font-weight: 600; }
.rm-desc { color: var(--rm-muted); font-size: 13px; margin-top: 2px; }
.rm-price { white-space: nowrap; font-weight: 600; }
.rm-badge { display:inline-block; font-size:12px; padding:2px 8px; border:1px solid var(--rm-sep); border-radius:999px; color:var(--rm-muted); margin-left:8px }
.rm-footer { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--rm-sep); background: var(--rm-card); color: var(--rm-muted); font-size: 14px; flex-wrap: wrap; }
.rm-cta { margin-left:auto; background:var(--rm-accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
@media print {
.rm-menu { box-shadow:none; border:none; border-radius:0; background:#fff; }
.rm-cta { display:none; }
}
</style>
<div class="rm-menu" role="group" aria-label="Menu du restaurant">
<div class="rm-header">
<h2 class="rm-title">Bistro Demo</h2>
<div class="rm-sub">Formule Entrée + Plat + Dessert</div>
</div>
<div class="rm-sections">
<!-- Entrées -->
<section class="rm-sec" aria-labelledby="entrees-title">
<h3 id="entrees-title" class="rm-secTitle">Entrées</h3>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Velouté de potimarron <span class="rm-badge">Végé</span></div>
<div class="rm-desc">Crème légère, noisettes torréfiées, huile de courge.</div>
</div>
<div class="rm-price">7,50€</div>
</div>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Œuf parfait & asperges</div>
<div class="rm-desc">Mimosa d’herbes fraîches, copeaux de parmesan.</div>
</div>
<div class="rm-price">8,50€</div>
</div>
</section>
<!-- Plats -->
<section class="rm-sec" aria-labelledby="plats-title">
<h3 id="plats-title" class="rm-secTitle">Plats</h3>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Suprême de volaille rôti</div>
<div class="rm-desc">Jus court au thym, purée de pommes de terre, légumes de saison.</div>
</div>
<div class="rm-price">16,90€</div>
</div>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Risotto aux champignons <span class="rm-badge">Sans gluten</span></div>
<div class="rm-desc">Arborio crémeux, shiitakés, pecorino.</div>
</div>
<div class="rm-price">15,50€</div>
</div>
</section>
<!-- Desserts -->
<section class="rm-sec" aria-labelledby="desserts-title">
<h3 id="desserts-title" class="rm-secTitle">Desserts</h3>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Tarte citron meringuée</div>
<div class="rm-desc">Pâte sablée maison, crème au citron, meringue légère.</div>
</div>
<div class="rm-price">6,50€</div>
</div>
<div class="rm-item">
<div class="rm-left">
<div class="rm-name">Mousse au chocolat</div>
<div class="rm-desc">Chocolat noir 70%, éclats de fève de cacao.</div>
</div>
<div class="rm-price">6,00€</div>
</div>
</section>
</div>
<div class="rm-footer">
<span>Formule midi (E+P ou P+D) : 19,90€ • (E+P+D) : 24,90€</span>
<button class="rm-cta" type="button" onclick="window.print()">Imprimer</button>
</div>
</div>
<!-- ===== Fin du fragment ===== -->