/* =========================================================
   IMPOLIE SITE — FONDATIONS
   Chargé sur toutes les pages. Remplace le « CSS additionnel »
   de WordPress (qui peut rester vide).
   Retirés par rapport à l'ancien CSS additionnel :
   - règles du thème Astra (le site utilise Hello Elementor)
   - effet papillon et lueur du logo
   - tailles forcées sur l'accueil (.imp-title, .imp-compagnie),
     désormais gérées par accueil.css
   ========================================================= */

/* ---------------------------------------------------------
   0. POLICES
   --------------------------------------------------------- */
/* GT Alpina (textes courants) */
@font-face {
    font-family: "GT Alpina";
    src: url("/wp-content/uploads/2026/08/GT-Alpina-Standard-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GT Alpina";
    src: url("/wp-content/uploads/2026/08/GT-Alpina-Standard-Regular-Italic-1.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Canon Grotesque (titres) */
@font-face {
    font-family: "Canon Grotesque";
    src: url("/wp-content/uploads/2026/08/CanonGrotesqueV0.2-Bold-2.ttf") format("truetype");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------
   1. VARIABLES (mode clair par défaut)
   Toutes les pages utilisent ces variables.
   --------------------------------------------------------- */
:root {
    color-scheme: light dark;

    --imp-bg-main: #ffffff;
    --imp-bg-alt: #ffffff;
    --imp-text-main: #000000;
    --imp-text-muted: #000000;
    --imp-border: #000000;

    --font-titre: "Canon Grotesque", sans-serif;
    --font-texte: "GT Alpina", serif;
}

/* ---------------------------------------------------------
   2. MODE SOMBRE (blanc pur sur fond noir pur)
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --imp-bg-main: #000000;
        --imp-bg-alt: #000000;
        --imp-text-main: #ffffff;
        --imp-text-muted: #ffffff;
        --imp-border: #ffffff;
    }

    /* Titres (accueil et spectacles) */
    h1, h2, h3, h4, h5, h6,
    .spec-title,
    .imp-home-big-title,
    .imp-title,
    .imp-acc-title-text,
    .elementor-heading-title,
    .entry-title {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    /* Menus Elementor éventuels */
    .elementor-nav-menu a,
    .menu-item a {
        color: #ffffff !important;
    }
}

/* ---------------------------------------------------------
   3. STRUCTURE
   --------------------------------------------------------- */
/* En-tête au-dessus de tout */
header, .elementor-location-header {
    position: relative !important;
    z-index: 999999 !important;
}

/* Menus Elementor éventuels : noirs en mode clair */
.elementor-nav-menu a,
.menu-item a {
    color: #000000;
}

/* Couleurs de fond globales */
body, html, .site-content, .elementor-page {
    background-color: var(--imp-bg-main) !important;
    color: var(--imp-text-main) !important;
}
.footer-impolie { z-index: 10 !important; }

/* Menus déroulants Elementor éventuels : fond noir, texte clair */
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown ul {
    background-color: #000000 !important;
}
.elementor-nav-menu--dropdown a,
.elementor-menu-toggle.elementor-active i {
    color: #ffffff !important;
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease !important;
}
.elementor-nav-menu--dropdown a:hover {
    color: transparent !important;
    -webkit-text-stroke: 1.5px var(--imp-text-main) !important;
}

/* ---------------------------------------------------------
   4. MISE EN PAGE DES COMPOSANTS
   --------------------------------------------------------- */
.imp-home, .spec-v8-container, .apropos-v3-container {
    margin-top: 60px !important;
    padding-top: 20px !important;
}

/* Fonds */
.spec-v8-container, .imp-acc-content-padder, .spec-prep-banner, .gal-item {
    background-color: var(--imp-bg-main) !important;
}

/* Textes */
.spec-title, .spec-quote, .synopsis-text p, .imp-acc-title-text,
.imp-acc-icon, .date-lieu, .footer-logo, .distribution-grid p,
.imp-home-big-title {
    color: var(--imp-text-main) !important;
}
.spec-infos, .synopsis-inspiration, .footer-nav-links a, .footer-legal p, .spec-prep-text p {
    color: var(--imp-text-muted) !important;
}

/* Bordures */
.imp-acc-item, .date-list-item, .spec-prep-banner, .footer-impolie, .sous-distribution {
    border-color: var(--imp-border) !important;
}

@media (max-width: 850px) {
    .imp-home, .spec-v8-container { margin-top: 40px !important; }
}

/* Alignement du contenu sur le logo, sur tout le site */
.imp-home,
.spec-v8-container,
.apropos-v3-container,
.entry-content {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   5. POLICES APPLIQUÉES
   --------------------------------------------------------- */
/* Titres : Canon Grotesque */
.spec-title,
.spec-sous-titre,
.spec-subtitle,
.imp-acc-title-text,
.imp-home-big-title,
.imp-title,
.imp-compagnie,
.spec-prep-text h3,
.distribution-grid strong,
.distribution-grid h4,
.date-time,
.spec-quote-author,
.archives-toggle,
.btn-download,
.date-btn,
.main-title-agenda,
.contact-header-title,
.footer-logo {
    font-family: "Canon Grotesque", sans-serif !important;
}

/* Textes courants : GT Alpina */
.spec-v8-container,
.spec-v8-container p,
.spec-v8-container span,
.spec-v8-container div,
.spec-v8-container li,
.synopsis-text p,
.spec-quote,
.spec-infos,
.synopsis-inspiration,
.distribution-grid p,
.sous-distribution,
.date-lieu,
.audio-desc,
.media-legend,
.hero-credits,
.imp-home,
.apropos-v3-container,
.contact-col-left,
.imp-agenda-v2 {
    font-family: "GT Alpina", serif !important;
}

/* ---------------------------------------------------------
   6. ACCORDÉONS ET TITRES DES PAGES SPECTACLE
   --------------------------------------------------------- */
.imp-acc-title-text {
    font-family: "Canon Grotesque", sans-serif !important;
    font-weight: 900 !important;
    font-size: 32px !important;
    text-transform: uppercase !important;
}
body .spec-v8-container .imp-acc-item .imp-acc-header .imp-acc-title-text {
    font-family: "Canon Grotesque", sans-serif !important;
    font-weight: 700 !important;
}
/* Titres « Coproduction » et « Partenaires & Soutiens » */
.spec-v8-container strong,
.spec-v8-container .imp-acc-content-padder strong {
    font-family: var(--font-titre) !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
/* Titres de la distribution (placés après : ne réduit que la distribution) */
.distribution-grid strong,
.distribution-grid h4 {
    font-size: 24px !important;
}

/* ---------------------------------------------------------
   7. SOUS-MENUS ET DATES DE SPECTACLE
   --------------------------------------------------------- */
.elementor-nav-menu--dropdown a,
.sub-menu .menu-item a {
    font-family: var(--font-titre) !important;
}
/* Dates en Canon Grotesque, lieux en GT Alpina */
.date-list-item .date-time,
.date-list-item .date,
.date-list-item time {
    font-size: 28px !important;
    font-family: var(--font-titre) !important;
}
.date-list-item .date-lieu,
.date-list-item .lieu {
    font-family: var(--font-texte) !important;
}

/* ---------------------------------------------------------
   8. TITRES DE PAGE (même taille pour Agenda, Compagnie, Contact)
   --------------------------------------------------------- */
.main-title-agenda,
.apropos-v3-container .spec-title,
.contact-header-title {
    font-size: clamp(40px, 8vw, 80px) !important;
    font-family: var(--font-titre) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0px !important;
    line-height: 0.9 !important;
}
/* Le titre du spectacle garde sa taille XXL */
.spec-v8-container .spec-title {
    font-size: clamp(50px, 18vw, 210px) !important;
}

/* ---------------------------------------------------------
   9. BOUTONS — STYLE COMMUN DU SITE
   Plein au repos, vide au survol. On déclare background ET
   background-color, car certains composants utilisent l'un ou l'autre.
   --------------------------------------------------------- */
.imp-btn,
.imp-btn-reserve,
.imp-dummy-btn,
.btn-download,
.date-btn,
.contact-dummy-btn,
body .contact-col-right .contact-dummy-btn,
body .contact-dummy-form .contact-dummy-btn,
.spec-v8-container a.btn-download,
.spec-v8-container a.date-btn {
    display: inline-block;
    padding: 16px 28px !important;
    font-family: "Canon Grotesque", sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid var(--imp-text-main) !important;
    background: var(--imp-text-main) !important;
    background-color: var(--imp-text-main) !important;
    color: var(--imp-bg-main) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}
.imp-btn:hover,
.imp-btn-reserve:hover,
.imp-dummy-btn:hover,
.btn-download:hover,
.date-btn:hover,
.contact-dummy-btn:hover,
body .contact-col-right .contact-dummy-btn:hover,
body .contact-dummy-form .contact-dummy-btn:hover,
.spec-v8-container a.btn-download:hover,
.spec-v8-container a.date-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--imp-text-main) !important;
    border-color: var(--imp-text-main) !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   10. ÉCRAN DE CHARGEMENT
   --------------------------------------------------------- */
.site-loader {
    position: fixed;
    inset: 0;
    background-color: #111111;
    z-index: 9999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loader-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #ffffff;
    border-radius: 50%;
    animation: impolie-spin 0.8s linear infinite;
}
@keyframes impolie-spin {
    to { transform: rotate(360deg); }
}
body.page-loaded .site-loader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .loader-spinner { animation-duration: 2s; }
}