/* ────────────────────────────────────────────────────────────
   Template Classic — template.css
   CSS commune utilisée par page.php, page_advanced.php et le canvas GrapesJS
   Les variables CSS (--header-bg, etc.) sont définies dans chaque page.php
   ──────────────────────────────────────────────────────────── */

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: var(--fs-main, 16px);
    color: var(--main-text, #2c3e50);
    background: var(--main-bg, #fff);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    background: var(--header-bg, #1e2a3b);
    color: var(--header-text, #fff);
    font-size: var(--fs-header, 16px);
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 24px; height: 68px;
    display: flex; align-items: center; gap: 16px;
}
.site-logo {
    display: flex; align-items: center;
    text-decoration: none; color: var(--header-text, #fff); flex-shrink: 0;
}
.site-logo img  { height: 48px; width: auto; object-fit: contain; }
.site-logo-text { font-size: 1.2em; font-weight: 700; }

/* Nav desktop — alignée à droite */
.site-nav {
    flex: 1; display: flex; justify-content: flex-end;
    align-items: center; gap: 4px;
}
.site-nav a {
    display: block; padding: 8px 14px;
    color: var(--header-text, #fff); text-decoration: none;
    border-radius: 6px; font-weight: 500; font-size: .95em;
    transition: background .15s; white-space: nowrap;
}
.site-nav a:hover  { background: rgba(255,255,255,.15); }
.site-nav a.active { background: rgba(255,255,255,.2); }

/* Burger */
.burger {
    display: none; flex-direction: column;
    justify-content: space-between;
    width: 28px; height: 20px;
    background: none; border: none;
    cursor: pointer; padding: 0;
    flex-shrink: 0; margin-left: auto;
}
.burger span {
    display: block; height: 2px;
    background: var(--header-text, #fff); border-radius: 2px;
}

/* ── Main — page basique (max 1200px centré) ────────────────── */
.site-main { flex: 1; background: var(--main-bg, #fff); }
.site-main .container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }

/* ── Footer fixe en bas ─────────────────────────────────────── */
.site-footer {
    background: var(--footer-bg, #1e2a3b);
    color: var(--footer-text, #b8c5d6);
    font-size: var(--fs-footer, 14px);
    position: sticky; bottom: 0; z-index: 100;
}
.footer-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 18px 24px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-copy { opacity: .65; font-size: .9em; }

/* ── Sidebar mobile ─────────────────────────────────────────── */
.mobile-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 300;
}
.mobile-overlay.open { display: block; }
.mobile-sidebar {
    position: fixed; top: 0; right: -300px; bottom: 0;
    width: 280px; background: var(--header-bg, #1e2a3b);
    z-index: 400; transition: right .3s ease;
    display: flex; flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.3);
}
.mobile-sidebar.open { right: 0; }
.mobile-sidebar-head {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-sidebar-head span { color: var(--header-text, #fff); font-weight: 700; }
.mobile-sidebar-links { flex: 1; overflow-y: auto; padding: 12px 0; }
.mobile-sidebar-links a {
    display: block; padding: 13px 20px;
    color: var(--header-text, #fff); text-decoration: none;
    font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .15s;
}
.mobile-sidebar-links a:hover,
.mobile-sidebar-links a.active { background: rgba(255,255,255,.1); }

/* ── Contenu de page (basic) ────────────────────────────────── */
.page-title { font-size: 2em; font-weight: 700; margin-bottom: 24px; color: var(--main-text, #2c3e50); }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.page-content h1, .page-content h2, .page-content h3 { margin: 1.2em 0 .6em; }
.page-content p   { margin-bottom: 1em; }
.page-content a   { color: var(--primary, #3a7bd5); }
.page-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.page-content table th { background: #f4f6f9; padding: 8px 12px; text-align: left; border-bottom: 2px solid #ddd; }
.page-content table td { padding: 8px 12px; border-bottom: 1px solid #eee; }
.page-content blockquote {
    border-left: 4px solid var(--primary, #3a7bd5);
    margin: 1em 0; padding: 12px 20px;
    background: #f8f9fa; font-style: italic;
}

/* ── Carte / Services ───────────────────────────────────────── */
.menu-category { margin-bottom: 40px; }
.menu-category-title {
    font-size: 1.4em; font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary, #3a7bd5);
    margin-bottom: 20px;
}
.menu-item {
    display: grid; grid-template-columns: 1fr auto;
    gap: 12px; padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-name { font-weight: 600; }
.menu-item-desc { font-size: .88em; color: #666; margin-top: 3px; }
.menu-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.menu-price  { font-weight: 600; white-space: nowrap; font-size: .93em; }
.menu-price-label { font-size: .75em; color: #999; font-weight: 400; }
.menu-footer-text {
    margin-top: 32px; padding: 16px 20px;
    background: rgba(0,0,0,.04);
    border-left: 3px solid var(--primary, #3a7bd5);
    border-radius: 0 6px 6px 0;
    font-size: .88em; color: #555; line-height: 1.7;
}

/* ── Contact ────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.contact-info-item i { color: var(--primary, #3a7bd5); font-size: 1.1em; margin-top: 2px; flex-shrink: 0; }
.contact-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.contact-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: var(--primary, #3a7bd5); color: #fff;
    text-decoration: none; transition: opacity .15s;
}
.contact-social:hover { opacity: .8; }
.contact-form input,
.contact-form textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 1em; margin-bottom: 12px; font-family: inherit;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button {
    background: var(--primary, #3a7bd5); color: #fff;
    border: none; padding: 12px 28px; border-radius: 6px;
    font-size: 1em; font-weight: 600; cursor: pointer;
}
.contact-form button:hover { opacity: .9; }
.form-success {
    background: #d4edda; color: #155724;
    padding: 14px 18px; border-radius: 8px; margin-bottom: 20px;
}

/* ── Menu semaine ───────────────────────────────────────────── */
.weekly-menu-header { margin-bottom: 28px; }
.weekly-menu-title  { font-size: 1.8em; font-weight: 700; }
.weekly-menu-date   { color: #666; font-size: .9em; margin-top: 4px; }
.weekly-price-global {
    display: inline-block; padding: 3px 12px;
    background: var(--primary, #3a7bd5); color: #fff;
    border-radius: 20px; font-size: .88em; font-weight: 600;
}
.weekly-day { margin-bottom: 28px; }
.weekly-day-title {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    font-size: 1.1em; font-weight: 700;
    color: var(--primary, #3a7bd5);
    padding: 8px 14px; background: rgba(0,0,0,.04);
    border-radius: 6px; margin-bottom: 12px;
}
.weekly-day-price {
    font-size: .88em; font-weight: 700; color: #fff;
    background: var(--primary, #3a7bd5);
    padding: 3px 12px; border-radius: 20px;
    white-space: nowrap; flex-shrink: 0;
}
.weekly-line {
    display: flex; justify-content: space-between;
    align-items: baseline; padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,.1);
}
.weekly-line:last-child { border-bottom: none; }
.weekly-line-label { font-weight: 600; }
.weekly-line-desc  { font-size: .88em; color: #666; margin-top: 2px; }
.weekly-line-price { font-weight: 600; color: var(--primary, #3a7bd5); flex-shrink: 0; margin-left: 16px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-nav { display: none; }
    .burger   { display: flex; }
    .contact-grid { grid-template-columns: 1fr; }
    .site-main .container { padding: 24px 16px; }
}