/* ========================================
   Template : L'Ardoise
   Fond tableau noir, craie blanche/pastel
   Realistic chalkboard texture, chalk effects
   ======================================== */

.menu-template.ardoise {
    --t-primary: var(--custom-primary, #f5f0e0);
    --t-secondary: var(--custom-secondary, #e8c170);
    --t-bg: var(--custom-bg, #2d4a3e);
    --t-text: var(--custom-text, #d4cfc0);
    --t-heading-font: var(--custom-heading-font, 'Dancing Script', cursive);
    --t-body-font: var(--custom-body-font, 'Lato', sans-serif);

    background: var(--t-bg);
    color: var(--t-text);
    padding: 55px 45px;
    text-align: center;
    position: relative;
    box-shadow:
        inset 0 0 80px rgba(0,0,0,0.25),
        inset 0 0 150px rgba(0,0,0,0.1),
        0 4px 20px rgba(0,0,0,0.3);
}

/* Realistic chalkboard texture: scratches, wear, dust */
.ardoise .menu-texture-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        /* Subtle scratch marks */
        repeating-linear-gradient(
            87deg,
            transparent,
            transparent 8px,
            rgba(255,255,255,0.006) 8px,
            rgba(255,255,255,0.006) 9px
        ),
        repeating-linear-gradient(
            93deg,
            transparent,
            transparent 12px,
            rgba(255,255,255,0.004) 12px,
            rgba(255,255,255,0.004) 13px
        ),
        /* Wear patterns */
        repeating-linear-gradient(
            175deg,
            transparent,
            transparent 15px,
            rgba(255,255,255,0.005) 15px,
            rgba(255,255,255,0.005) 16px
        ),
        /* Light spots from chalk dust */
        radial-gradient(ellipse at 15% 25%, rgba(255,255,255,0.025) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 40%, rgba(255,255,255,0.02) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 75%, rgba(255,255,255,0.015) 0%, transparent 45%),
        /* Edge darkening */
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.15) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.12) 100%);
}

/* Wooden frame effect */
.ardoise::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(255,255,255,0.06);
    pointer-events: none;
    border-radius: 1px;
}

.ardoise .menu-header {
    margin-bottom: 40px;
}

.ardoise .menu-restaurant-logo {
    margin: 0 auto 14px;
    filter: brightness(1.3);
}

.ardoise .menu-restaurant-name {
    font-family: var(--t-heading-font);
    font-size: 3em;
    font-weight: 700;
    color: var(--t-primary);
    margin-bottom: 8px;
    text-shadow:
        0 0 8px rgba(245,240,224,0.15),
        1px 1px 2px rgba(0,0,0,0.4),
        -1px -1px 0 rgba(0,0,0,0.1);
    letter-spacing: 0.02em;
}

.ardoise .menu-restaurant-subtitle {
    font-family: var(--t-body-font);
    font-size: 0.92em;
    color: var(--t-secondary);
    letter-spacing: 0.12em;
    text-shadow: 0 0 6px rgba(232,193,112,0.1);
}

.ardoise .menu-header-deco {
    margin-top: 18px;
    color: var(--t-secondary);
    opacity: 0.5;
}

.ardoise .menu-category {
    margin-bottom: 36px;
}

.ardoise .menu-category-name {
    font-family: var(--t-heading-font);
    font-size: 1.9em;
    font-weight: 700;
    color: var(--t-secondary);
    margin-bottom: 6px;
    text-shadow:
        0 0 10px rgba(232,193,112,0.12),
        1px 1px 2px rgba(0,0,0,0.3);
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(232,193,112,0.25);
    border-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(232,193,112,0.35) 20%,
        rgba(232,193,112,0.4) 50%,
        rgba(232,193,112,0.35) 80%,
        transparent 100%
    ) 1;
}

.ardoise .menu-category-desc {
    font-size: 0.84em;
    font-style: italic;
    color: var(--t-text);
    opacity: 0.45;
    margin-bottom: 16px;
    margin-top: 6px;
}

.ardoise .menu-category-separator {
    width: 70px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--t-secondary), transparent);
    margin: 0 auto 20px;
    opacity: 0.3;
}

.ardoise .menu-item {
    margin-bottom: 16px;
    padding: 2px 8px;
}

.ardoise .menu-item-header {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
}

.ardoise .menu-item-name {
    font-size: 1.02em;
    font-weight: 600;
    color: var(--t-primary);
    text-shadow: 0 0 4px rgba(245,240,224,0.08);
}

.ardoise .menu-item-dots {
    flex: 1;
    border-bottom: 1px dashed var(--t-text);
    opacity: 0.15;
    min-width: 20px;
    margin-bottom: 4px;
}

.ardoise .menu-item-price {
    font-weight: 700;
    color: var(--t-secondary);
    font-size: 0.98em;
    padding: 3px 12px;
    border: 1.5px solid var(--t-secondary);
    border-radius: 14px;
    opacity: 0.75;
    text-shadow: 0 0 4px rgba(232,193,112,0.1);
    background: rgba(232,193,112,0.04);
}

.ardoise .menu-item-description {
    font-size: 0.82em;
    margin-top: 3px;
    opacity: 0.45;
    font-style: italic;
}

.ardoise .menu-footer {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}

.ardoise .menu-footer-deco {
    color: var(--t-secondary);
    opacity: 0.4;
    margin-bottom: 10px;
}

.ardoise .menu-restaurant-info {
    font-size: 0.8em;
    opacity: 0.35;
    letter-spacing: 0.03em;
}

.ardoise .menu-restaurant-info p {
    margin: 3px 0;
}