/*
Theme Name: Livres en Scène
Theme URI: https://paysderibeauville.fr
Author: CCPR - Communauté de Communes du Pays de Ribeauvillé
Description: Thème OnePage pour le festival culturel familial "Livres en Scène" - Réseau des bibliothèques du Pays de Ribeauvillé.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: livres-en-scene
*/

:root {
    --les-navy: #1B2F7A;
    --les-teal: #1D9A8A;
    --les-orange: #E8562F;
    --les-orange-grad-start: #FF3131;
    --les-orange-grad-end: #FF914D;
    --les-cream: #EDE6D3;
    --les-terracotta: #C0603A;
    --les-white: #FFFFFF;
    --les-text: #2B2B2B;
    --font-heading: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--les-text);
    background: var(--les-white);
    line-height: 1.6;
}

#page {
    overflow-x: hidden;
}

/* Retire la marge par défaut de WPBakery sur la dernière ligne de contenu,
   pour éviter le bandeau blanc entre la dernière section et le footer. */
#page > *:last-child,
#page .vc_row:last-child,
#page .wpb_row:last-child,
#page .vc_section:last-child,
#page .wpb_content_element:last-child,
#page .wpb_text_column:last-child {
    margin-bottom: 0 !important;
}

/* ---------- Correctif WPBakery : lignes "Stretch row / Pleine largeur" ----------
   WPBakery calcule la largeur de ces lignes en JS (window.innerWidth), ce qui
   provoque souvent un léger débordement horizontal (barre de défilement fantôme).
   On neutralise ce calcul pour repasser en pleine largeur via CSS pur, fiable. */
.vc_row-full-width,
.vc_row.vc_row-o-full-height,
body .vc_row-full-width.vc_clearfix {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--les-navy);
    line-height: 1.15;
    margin-top: 0;
}

/* "Titre 1" utilisé dans le contenu des pages (WPBakery / éditeur) */
h1 {
    font-size: 1.5rem;
    background: linear-gradient(90deg, var(--les-orange-grad-start), var(--les-orange-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--les-orange-grad-start); /* repli si le dégradé n'est pas supporté */
}

a { color: var(--les-orange-grad-start); text-decoration: none; }

/* Utilitaire : texte en dégradé orange (remplace les anciens textes orange unis) */
.text-gradient-orange,
a,
.ville-group h3.ville-heading,
.contact-card h4 {
    background: linear-gradient(90deg, var(--les-orange-grad-start), var(--les-orange-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--les-orange-grad-start); /* repli si le dégradé n'est pas supporté */
}
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

section { scroll-margin-top: 80px; }

/* ---------- HEADER / NAV ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--les-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-branding img {
    height: 56px;
    width: auto;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    color: var(--les-navy);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--les-navy);
}

.main-nav a:hover { text-decoration: none; color: var(--les-navy); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--les-navy);
    cursor: pointer;
}

/* ---------- HERO ---------- */
.hero {
    background: linear-gradient(135deg, var(--les-orange), #F4A13A);
    color: var(--les-white);
    text-align: center;
    padding: 70px 20px;
}

.hero img.hero-visual {
    max-width: 520px;
    margin: 0 auto 24px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.hero h1 {
    color: var(--les-white);
    font-size: 2.4rem;
    margin-bottom: 8px;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--les-white);
}

.hero p.hero-sub {
    font-size: 1.25rem;
    max-width: 640px;
    margin: 0 auto 24px;
}

.btn {
    display: inline-block;
    background: var(--les-navy);
    color: var(--les-white);
    padding: 14px 30px;
    border-radius: 40px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; background: var(--les-teal); color: var(--les-white); }

/* ---------- SECTIONS GENERIC ---------- */
.section { padding: 70px 0; }
.section--alt { background: var(--les-cream); }
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 8px;
}
.section-subtitle {
    text-align: center;
    color: var(--les-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

/* Dates/périodes du programme : plus grandes, Baloo 2, dégradé rouge-orangé */
#temps-fort .section-subtitle,
#itinerant .section-subtitle {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    background: linear-gradient(90deg, var(--les-orange-grad-start), var(--les-orange-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--les-orange-grad-start); /* repli si le dégradé n'est pas supporté */
}

/* ---------- ABOUT ---------- */
.about-content {
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
}
.about-text { flex: 1 1 420px; font-size: 1.1rem; }
.about-image { flex: 1 1 340px; }
.about-image img { border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,0.15); }

/* ---------- EVENT CARDS ---------- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Programme Temps fort : 2 colonnes fixes */
#temps-fort .events-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Programme Itinérant : 1 colonne */
#itinerant .events-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 700px) {
    #temps-fort .events-grid {
        grid-template-columns: 1fr;
    }
}

.event-card {
    background: var(--les-white);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-top: 6px solid var(--les-teal);
}
.event-card.card-spectacle { border-top-color: var(--les-orange); }
.event-card.card-atelier { border-top-color: var(--les-navy); }

.event-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--les-teal);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.event-meta .event-date {
    font-size: 1.05rem;
    font-weight: 800;
}

.event-card h3 {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

/* Dégradé rouge-orangé réservé aux titres du programme itinérant */
#itinerant .event-card h3 {
    background: linear-gradient(90deg, var(--les-orange-grad-start), var(--les-orange-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--les-orange-grad-start);
}

.event-type {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--les-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-desc { font-size: 0.95rem; color: #444; margin: 2px 0; }
.event-intervenant { font-style: italic; color: var(--les-terracotta); font-size: 0.9rem; margin-top: 6px; }

/* Carte avec image à la une (programme itinérant) */
.event-card.has-image {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.event-card.has-image .event-card-content {
    flex: 1 1 60%;
    min-width: 0;
}

.event-card.has-image .event-card-image {
    flex: 0 0 260px;
    max-width: 260px;
}

.event-card.has-image .event-card-image img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 700px) {
    .event-card.has-image {
        flex-direction: column-reverse;
    }
    .event-card.has-image .event-card-image {
        max-width: 100%;
        flex-basis: auto;
    }
    .event-card.has-image .event-card-image img {
        min-height: 200px;
    }
}

/* ---------- ITINERANT / VILLES ---------- */
.villes-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
}
.ville-badge {
    background: var(--les-navy);
    color: var(--les-white);
    padding: 8px 18px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.ville-group { margin-bottom: 40px; }
.ville-group h3.ville-heading {
    font-size: 1.5rem;
    border-bottom: 3px solid var(--les-orange-grad-start);
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 20px;
}

.itinerant-infos {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--les-navy);
}
.itinerant-infos p { margin: 4px 0; }

/* ---------- CONTACT ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.contact-card {
    background: var(--les-white);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    text-align: center;
}
.contact-card h4 { margin-bottom: 6px; }

.contact-general {
    max-width: 500px;
    margin: 0 auto 40px;
    text-align: center;
    background: var(--les-navy);
    color: var(--les-white);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.contact-general h4 {
    color: var(--les-white);
    margin-bottom: 10px;
    font-size: 1.3rem;
}
.contact-general p { margin: 4px 0; }
.contact-general a {
    color: var(--les-cream);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--les-cream);
}
.contact-card p { margin: 4px 0; font-size: 0.95rem; }

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--les-navy);
    color: var(--les-white);
    text-align: center;
    padding: 36px 20px;
    font-size: 0.9rem;
}
.site-footer a { color: var(--les-cream); }
.site-footer .footer-partners { margin-top: 12px; opacity: 0.85; }

.footer-logo {
    display: block;
    margin: 0 auto 20px;
    width: 250px;
    height: 250px;
}

@media (max-width: 480px) {
    .footer-logo { width: 160px; height: 160px; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 782px) {
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--les-white); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; padding: 16px 24px; gap: 16px; }
    .nav-toggle { display: block; }
    .hero h1 { font-size: 1.8rem; }
    .about-content { flex-direction: column; }
}