/* Pages du restaurant — couleurs et polices : kit Elementor (rpg_palette_css). */
.rpg { --rpg-bg: #141210; --rpg-card: #1f1d1b; --rpg-soft: #2a2826; --rpg-line: #3d3a37; --rpg-ink: #f5f5f5; --rpg-muted: #a8a4a0;
  --rpg-accent: #e0262b; --rpg-on-accent: #fff; --rpg-font-h: "Montserrat", system-ui, sans-serif; --rpg-font: "Montserrat", system-ui, sans-serif;
  color: var(--rpg-ink); font-family: var(--rpg-font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
html, body.rpg-body { margin: 0; padding: 0; }
.rpg *, .rpg *::before, .rpg *::after { box-sizing: border-box; }
.rpg [hidden] { display: none !important; }
.rpg img { max-width: 100%; display: block; }
.rpg a { color: inherit; }
.rpg h1, .rpg h2, .rpg h3 { font-family: var(--rpg-font-h); margin: 0; line-height: 1.1; }
.rpg-wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.rpg-main > section { margin-top: 56px; }
@media (max-width: 700px) { .rpg-main > section { margin-top: 40px; } }

/* Boutons */
.rpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 26px; border: 0; border-radius: 999px;
  background: var(--rpg-accent); color: var(--rpg-on-accent) !important; font-family: var(--rpg-font-h); font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; }
.rpg-btn-light { background: #fff; color: #141210 !important; }
.rpg-btn-dark { background: #141210; color: #fff !important; }
.rpg-btn-sm { min-height: 38px; padding: 8px 22px; font-size: 14px; }
.rpg-btn-block { width: 100%; }
.rpg-btn:active { transform: scale(.98); }

/* ── En-tête et grande image ─────────────────────────────────────── */
/* Barre flottante : menu centré à gauche, logo rond qui déborde, « Commander » centré à droite. */
.rpg-top { position: absolute; top: 26px; left: 0; right: 0; z-index: 20; }
.rpg-top-bar { width: min(1240px, calc(100% - 48px)); margin: 0 auto; height: 80px; border-radius: 20px; background: rgba(31,26,23,.97);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.rpg-nav-wrap { position: relative; justify-self: center; z-index: 3; line-height: 0; }
.rpg-burger { width: 48px; height: 48px; border: 0; background: none; color: #fff; cursor: pointer; padding: 10px; }
.rpg-burger svg { width: 100%; height: 100%; }
.rpg-top-logo { justify-self: center; display: block; line-height: 0; }
.rpg-top-logo .rpg-logo { width: 142px; height: 142px; margin: -31px 0; border-radius: 50%; object-fit: cover; }
.rpg-logo-txt { font-family: var(--rpg-font-h); font-weight: 900; font-size: 22px; line-height: 80px; color: #fff; }
.rpg-top-cta { justify-self: center; min-height: 62px; padding: 0 34px; border-radius: 18px; font-size: 20px;
  background: color-mix(in srgb, var(--rpg-accent) 10%, #634a3b); color: #fff !important; }
@media (max-width: 700px) {
  .rpg-top { top: 14px; }
  .rpg-top-bar { width: calc(100% - 24px); height: 58px; border-radius: 16px; }
  .rpg-nav-wrap { justify-self: start; margin-left: 8px; }
  .rpg-top-logo .rpg-logo { width: 96px; height: 96px; margin: -19px 0; }
  .rpg-logo-txt { line-height: 58px; font-size: 18px; }
  .rpg-top-cta { display: none; }   /* sur téléphone : menu + logo, comme la version Elementor */
}
/* Menu déroulant (1.56.0) : une carte blanche sous le bouton, bord fin, lignes séparées par un filet,
   texte gris foncé, dernière ligne (le compte) en gras. Le même dessin sert à tous les menus déroulants. */
.rpg-drawer { position: absolute; top: calc(100% + 20px); left: -6px; width: 232px; max-width: calc(100vw - 32px); margin: 0; padding: 0; overflow: hidden;
  border: 1px solid #c9c9c9; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); display: flex; flex-direction: column; line-height: 1.3; }
.rpg-drawer[hidden] { display: none; }
.rpg .rpg-drawer a, .rpg-drawer a { padding: 13px 16px; border-radius: 0; border-top: 1px solid #e3e3e3; color: #2f2f2f; text-decoration: none; font-family: var(--rpg-font); font-size: 17px; font-weight: 400; }
.rpg-drawer a:first-child { border-top: 0; }
.rpg-drawer a[hidden] { display: none; }
.rpg-drawer a:hover, .rpg-drawer a:focus-visible { background: #f4f4f4; color: #111; }
.rpg .rpg-drawer a.rpg-drawer-strong, .rpg-drawer a.rpg-drawer-strong { font-weight: 800; color: #1f1f1f; }
@media (max-width: 700px) { .rpg-drawer { top: calc(100% + 8px); } }   /* barre plus basse sur téléphone : le menu reste juste sous elle */
.rpg-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; justify-content: center; padding: 150px 16px 70px;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, var(--rpg-bg) 100%), var(--rpg-hero, none) center / cover no-repeat, var(--rpg-soft); }
.rpg-hero-in { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rpg-hero-title { font-size: clamp(44px, 9vw, 96px); font-weight: 900; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
@media (min-width: 900px) { .rpg-hero { min-height: 620px; } }

/* ── Informations + carte ────────────────────────────────────────── */
.rpg-main > .rpg-info { margin-top: 0; border-radius: 12px; overflow: hidden; background: var(--rpg-card); }
.rpg-info-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding: 12px 16px; font-weight: 700; font-size: 15px; text-align: center; }
.rpg-info-line i { color: var(--rpg-muted); font-style: normal; }
.rpg-map { display: block; width: 100%; height: 200px; border: 0; }
/* Carte en image (capture de Google Maps) : même bandeau de 200 px, l'image le remplit. Un clic ouvre Google Maps. */
.rpg-map-img { cursor: pointer; overflow: hidden; }
.rpg-map-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.rpg-map-img:hover img { transform: scale(1.03); }

/* ── Galerie ──────────────────────────────────────────────────────── */
.rpg-gal-title { font-size: 34px; font-weight: 900; }
.rpg-gal-text { margin: 4px 0 16px; color: var(--rpg-muted); }
.rpg-gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rpg-gal-item { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; cursor: zoom-in; background: var(--rpg-soft); }
.rpg-gal-item.big { grid-column: span 2; grid-row: span 2; }
.rpg-gal-item img { width: 100%; height: 100%; object-fit: cover; }
.rpg-gal-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; font-weight: 800; }
@media (max-width: 600px) { .rpg-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
.rpg-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rpg-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.rpg-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; cursor: pointer; }
.rpg-lightbox .x { top: 14px; right: 14px; } .rpg-lightbox .prev { left: 10px; top: 50%; } .rpg-lightbox .next { right: 10px; top: 50%; }

/* ── Plat vedette ─────────────────────────────────────────────────── */
.rpg-feat { display: grid; grid-template-columns: 1.4fr 1fr; border-radius: 14px; overflow: hidden; background: var(--rpg-accent); color: var(--rpg-on-accent); }
/* Hauteur du bloc : 400 px (1.59.0), au lieu de la hauteur naturelle de la photo (630 px pour une photo carrée).
   La photo remplit sa moitié et est recadrée ; si le texte est plus haut que 400 px, le bloc grandit avec lui. */
.rpg-feat-img { position: relative; min-height: 400px; }
.rpg-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rpg-feat-txt { padding: 30px 26px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; }
.rpg-feat-txt h2 { font-size: 30px; font-weight: 900; text-transform: uppercase; }
.rpg-feat-txt p { margin: 0; font-weight: 600; }
@media (max-width: 700px) { .rpg-feat { grid-template-columns: 1fr; } .rpg-feat-img { min-height: 240px; } }

/* ── Deux cartes ──────────────────────────────────────────────────── */
.rpg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rpg-card { display: flex; flex-direction: column; align-items: center; }
.rpg-card-img { width: 100%; border-radius: 14px; overflow: hidden; transform: rotate(-2deg); }
.rpg-card-1 .rpg-card-img { transform: rotate(2deg); }
.rpg-card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rpg-card-box { position: relative; width: 92%; margin-top: -40px; padding: 18px 20px 20px; border-radius: 14px; background: var(--rpg-card-bg); color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; transform: rotate(2deg); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.rpg-card-1 .rpg-card-box { transform: rotate(-2deg); }
.rpg-card-box h3 { font-size: 24px; font-weight: 900; }
.rpg-card-box p { margin: 0; font-size: 14px; }
@media (max-width: 700px) { .rpg-cards { grid-template-columns: 1fr; gap: 40px; } }

/* ── Fidélité ─────────────────────────────────────────────────────── */
.rpg-main > .rpg-loyal { padding: 70px 16px; text-align: center; background: linear-gradient(rgba(10,8,6,.72), rgba(10,8,6,.72)), var(--rpg-loyal, none) center / cover no-repeat, var(--rpg-soft); }
.rpg-loyal-in { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rpg-loyal h2 { font-size: clamp(32px, 6vw, 48px); font-weight: 900; text-transform: uppercase; }
.rpg-loyal-sub { margin: 0; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.rpg-loyal p { margin: 0; }

/* ── Réseaux, recrutement ─────────────────────────────────────────── */
.rpg-social { text-align: center; }
.rpg-social h2 { font-size: 22px; font-weight: 900; text-transform: uppercase; }
.rpg-social-row { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.rpg-social-row a { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #141210; display: flex; align-items: center; justify-content: center; }
.rpg-social-row svg { width: 26px; height: 26px; fill: currentColor; }
.rpg-jobs { padding: 50px 20px; border-radius: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rpg-accent) 30%, #6b4a35) 0%, var(--rpg-bg) 100%); }
.rpg-jobs span { font-size: 34px; }
.rpg-jobs h2 { font-size: clamp(30px, 6vw, 48px); font-weight: 900; text-transform: uppercase; }

/* ── Pied de page ─────────────────────────────────────────────────── */
.rpg-foot { margin-top: 70px; background: #1a1a1a; border-top: 3px solid #e9e9e9; color: #fff; }
.rpg-foot-in { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.rpg-foot a { text-decoration: none; }
.rpg-foot-brand { display: flex; align-items: center; gap: 20px; }
.rpg-foot-brand b { font-family: var(--rpg-font-h); font-size: 26px; font-weight: 900; }
.rpg-foot-logo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }
.rpg-copy { margin: 0; padding: 12px max(16px, calc((100% - 1080px) / 2)); background: #000; font-weight: 700; }

/* ── Page de vente ────────────────────────────────────────────────── */
.rpg-sale { width: min(1000px, calc(100% - 24px)); margin: 0 auto; padding: 14px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 40px; align-items: start; }
/* Page de vente : cinq blocs séparés de 30 px (1.50.0).
   1. bandeau ouvert/fermé + photos + « Voir les avis »   2. titre + sous-titre + prix + étiquettes
   3. formulaire de commande   4. garanties (arguments)   5. avis
   À l'intérieur d'un bloc, les distances d'origine : 12 px (bloc 1) et 14 px (bloc 2).
   Les 30 px = l'espace commun de la colonne (14 px) + 16 px de marge au-dessus des blocs 3, 4 et 5 ;
   entre les blocs 1 et 2, c'est l'espace entre les deux colonnes empilées, sur téléphone. */
.rpg-sale-media { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rpg-status-bar { padding: 10px; border-radius: 14px; background: var(--rpg-soft); display: flex; justify-content: center; }
.rpg-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #141210; font-weight: 800; font-size: 14px; }
.rpg-status i { width: 12px; height: 12px; border-radius: 50%; background: #e0262b; }
.rpg-status.open i { background: #2fb344; }
.rpg-main-img { border-radius: 10px; overflow: hidden; background: var(--rpg-soft); }
.rpg-main-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rpg-main-img picture { display: block; }
.rpg-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rpg-thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--rpg-soft); }
.rpg-thumb.on { border-color: var(--rpg-accent); }
.rpg-thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rpg-thumbs .rpg-thumb:nth-child(4) { display: none; }
.rpg-see-reviews { width: 100%; border-radius: 8px; background: linear-gradient(180deg, var(--rpg-accent), color-mix(in srgb, var(--rpg-accent) 70%, #000)); }
.rpg-sale-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rpg-sale-title { font-size: clamp(34px, 6vw, 48px); font-weight: 900; text-transform: uppercase; }
/* Titre, description et prix forment un seul bloc serré : 6 px sous le titre, 8 px sous la description (1.51.0 : 20 px avant). */
.rpg-sale-sub { margin: -8px 0 -6px; color: var(--rpg-muted); }
.rpg-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rpg-price s { color: var(--rpg-muted); font-weight: 700; }
.rpg-price b { font-size: 26px; font-weight: 900; }
.rpg-off { padding: 2px 8px; border-radius: 6px; background: var(--rpg-accent); color: var(--rpg-on-accent); font-weight: 800; font-size: 14px; }
.rpg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rpg-chip { padding: 4px 10px; border-radius: 6px; background: var(--rpg-soft); font-weight: 700; font-size: 14px; }
.rpg-chip-hot { background: var(--rpg-accent); color: var(--rpg-on-accent); }
.rpg-sale-form { scroll-margin-top: 16px; margin-top: 16px; }
.rpg-sale-form .rckx { max-width: none; }
.rpg-args { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; text-align: center; }
.rpg-arg { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; }
.rpg-arg span { font-size: 30px; line-height: 1; }
.rpg-arg b { font-weight: 600; }
.rpg-sale-reviews { scroll-margin-top: 16px; margin-top: 16px; }
.rpg-more { margin-top: 20px; padding: 60px 20px 30px; border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, transparent 0%, var(--rpg-accent) 45%); }
.rpg-more h2 { font-size: 26px; font-weight: 900; }
.rpg-sticky { display: none; }
@media (max-width: 860px) {
  .rpg-sale { grid-template-columns: minmax(0, 1fr); }
  .rpg-sale-media { position: static; }
  .rpg-sticky { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translateX(-50%); width: min(400px, calc(100% - 32px));
    display: flex; align-items: center; justify-content: center; min-height: 50px; border: 3px solid var(--rpg-accent); border-radius: 8px; background: #fff; color: #141210 !important;
    font-family: var(--rpg-font-h); font-weight: 900; font-size: 20px; text-decoration: none; transition: opacity .2s, transform .2s; }
  .rpg-sticky.away { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
}

/* Téléphone, plat avec au moins 4 photos : 4 photos carrées, deux par ligne, sur toute la largeur,
   sans grande photo. Fichiers chargés en taille « Moyenne », comme sur ordinateur. */
@media (max-width: 600px) {
  .rpg-grid4 .rpg-main-img { display: none; }
  .rpg-grid4 .rpg-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rpg-grid4 .rpg-thumb, .rpg-grid4 .rpg-thumb.on { border: 0; border-radius: 12px; cursor: zoom-in; }
  .rpg-grid4 .rpg-thumbs .rpg-thumb:nth-child(4) { display: block; }
  .rpg-grid4 .rpg-thumb img { width: 100%; aspect-ratio: 1 / 1; }
}

/* Nom du restaurant sans logo : pas de soulignement de lien */
.rpg-top-logo, .rpg-foot-brand, .rpg-top-logo:hover, .rpg-foot-brand:hover { text-decoration: none; }

/* ── Contenu par défaut de l'accueil ─────────────────────────────────── */
.rpg-demo-map { display: grid; place-items: center; height: 200px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 20px, rgba(255,255,255,.08) 20px 40px); }
.rpg-demo-map > span { display: none; }
.rpg-demo-revgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rpg-demo-rev { display: grid; gap: 10px; padding: 22px 18px; border-radius: 16px; background: var(--rpg-soft); }
.rpg-demo-line { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); }
.rpg-demo-line.is-short { width: 45%; }
.rpg-demo-cta { margin-top: 16px; text-align: center; }