/* ============================================
   BIEUSSON FESTIVAL — Identité de marque
   Motifs Dan, textures, séparateurs, micro-interactions
   (Agent 3 — Illustration & Agent 4 — Expérience)
   ============================================ */

/* ============================================
   1. Bandeau des pages intérieures
   Dégradé signature + motifs masques en filigrane
   ============================================ */
main > .section-sm.bg-dark {
    background: var(--bieusson-gradient-hero);
    border-bottom: 3px solid transparent;
    border-image: var(--bieusson-gradient-gold) 1;
    position: relative;
}

main > .section-sm.bg-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cpattern id='danpage' width='160' height='160' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23F5E9D3' stroke-opacity='0.06'%3E%3Cpath d='M0 40h40M80 40h40M0 120h40M80 120h40'/%3E%3Cpath d='M20 0v24M60 0v24M100 0v24M140 0v24'/%3E%3Cpolyline points='20 26 28 18 36 26 44 18 52 26'/%3E%3Cpolyline points='100 26 108 18 116 26 124 18 132 26'/%3E%3Cpath d='M0 80l20-12 20 12 20-12 20 12 20-12 20 12 20-12 20 12'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' fill='url(%23danpage)'/%3E%3C/svg%3E");
}

main > .section-sm.bg-dark h1 {
    color: var(--white);
    text-shadow: 2px 2px 5px rgba(20,38,29,0.4);
}

main > .section-sm.bg-dark p {
    color: rgba(255,255,255,0.78);
}

main > .section-sm.bg-dark .text-gray {
    color: rgba(255,255,255,0.78) !important;
}

/* ============================================
   2. Textures subtiles (fonds clairs)
   Triangles façon toit traditionnel (opacité ~4%)
   ============================================ */
.section.bg-white {
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23D97706' stroke-opacity='0.05'%3E%3Cpath d='M0 0l35 60-35 60z'/%3E%3Cpath d='M70 0l35 60-35 60z'/%3E%3Cpath d='M140 0l35 60-35 60z' transform='translate(-70)'/%3E%3Cpath d='M35 70l35 60-35 60z'/%3E%3Cpath d='M105 70l35 60-35 60z'/%3E%3Cpath d='M35 -70l35 60-35 60z' transform='translate(0 140)'/%3E%3C/g%3E%3C/svg%3E");
}

.section.bg-light {
    background-color: var(--light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 30q20-16 40 0t40 0 40 0 40 0' fill='none' stroke='%232D6A4F' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}

/* Texture sombre discrète pour le footer et les sections profondes */
.footer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23E8C896' stroke-opacity='0.045'%3E%3Cpath d='M0 0l35 60-35 60z'/%3E%3Cpath d='M70 0l35 60-35 60z'/%3E%3Cpath d='M35 70l35 60-35 60z'/%3E%3Cpath d='M105 70l35 60-35 60z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   3. Séparateurs décoratifs (or / orange)
   ============================================ */
.divider-accent {
    background: linear-gradient(90deg, transparent, var(--bieusson-gold-400), var(--primary), transparent);
    height: 2px;
}

.divider-wavy {
    width: 100%;
    height: 14px;
    margin: var(--space-8) 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='14' viewBox='0 0 100 14'%3E%3Cpath d='M0 7h8l3-4 3 4h8l3-4 3 4h8l3-4 3 4h8l3-4 3 4h8l3-4 3 4h8l3-4 3 4h8' fill='none' stroke='%23EF7D1A' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
    background-size: 100px 14px;
    border: none;
    opacity: 0.55;
}

/* ============================================
   4. Badge « 1ère Édition »
   ============================================ */
.badge-premiere {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--bieusson-gold-400);
    background: rgba(20,38,29,0.55);
    color: var(--bieusson-gold-400);
    border-radius: var(--radius-full);
    font-family: var(--font-kicker);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.badge-premiere::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary) 0%, var(--bieusson-gold-400) 100%);
    box-shadow: 0 0 8px rgba(239,125,26,0.7);
}

/* ============================================
   5. Cartes : légendes photo sur overlay vert
   ============================================ */
.artist-card:hover .artist-image,
.tourism-card:hover .tourism-image,
.culture-card:hover .culture-image,
.news-card:hover .news-image {
    filter: saturate(1.08);
}

/* ============================================
   6. Scroll-reveal (déclenché par JS — jamais bloquant)
   ============================================ */
html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   7. Liens & ancres sous navbar fixe
   ============================================ */
[id] {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

/* ============================================
   8. Bouton « retour en haut » signature
   ============================================ */
.back-to-top {
    background: linear-gradient(135deg, var(--primary), var(--accent-dark));
}

.back-to-top:hover {
    background: var(--primary-dark);
}

/* ============================================
   9. Rendu premium des numéros de statistiques
   ============================================ */
.stat-value {
    background: var(--bieusson-gradient-day);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   10. Accessibilité : focus visible doré
   ============================================ */
:focus-visible {
    outline: 2px solid var(--bieusson-gold-400);
    outline-offset: 2px;
}