/*
Theme Name: Isis Garden
Theme URI: https://pedantic-albattani.72-60-89-93.plesk.page
Author: Isis Garden Festival
Description: Thème officiel du festival Isis Garden — World Techno & Chill-Out en Cévennes. Deux ambiances : Nuit du Dôme (accueil) et Lumière Dorée (pages de jour), autour de la charte de l'affiche 2026.
Version: 1.8.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isis-garden
*/

/* ======================================================
   Échelle — la boutique est rendue à 80 %
   ======================================================
   Le thème étant dimensionné en rem, abaisser l'unité de base suffit à
   réduire textes, marges et rayons dans les mêmes proportions. Les points
   de rupture des media queries sont en pixels : ils ne bougent pas, donc
   le passage en une colonne reste au même endroit. */
html.ig-echelle-reduite { font-size: 80%; }

/* ======================================================
   Variables d'ambiance — nuit par défaut, jour surchargé
   ====================================================== */
body {
    --ig-fond: #0d0b1f;
    --ig-fond-2: #141433;
    --ig-grad-a: #191542;
    --ig-grad-b: #171034;
    --ig-dore: #e0b551;
    --ig-dore-clair: #f0d189;
    --ig-lueur: #8b6fc9;
    --ig-texte-soft: #b6a3e3;
    --ig-texte: #f2effa;
    --ig-btn-texte: #141433;
    --ig-glow: 224, 181, 81;
    --ig-glow-2: 139, 111, 201;
    --font-display: 'Marcellus', serif;
    --font-body: 'Jost', sans-serif;
    background: var(--ig-fond);
    color: var(--ig-texte);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: hidden;
    margin: 0;
}

body.page-template-page-lumiere,
body.page-template-page-elementor,
body.page-template-page-interieur,
body.ig-jour {
    --ig-fond: #eedfb6;
    --ig-fond-2: #f8f2de;
    --ig-grad-a: #f5ebc9;
    --ig-grad-b: #f0e3ba;
    --ig-dore: #a87a1c;
    --ig-dore-clair: #c39a2e;
    --ig-lueur: #8fae62;
    --ig-texte-soft: #5f7245;
    --ig-texte: #1d3a32;
    --ig-btn-texte: #fdf8ea;
    --ig-glow: 168, 122, 28;
    --ig-glow-2: 143, 174, 98;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ig-dore);
}

/* ============ HEADER ============ */
.ig-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ig-fond) 88%, transparent), transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: igHeaderDescend 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
body.admin-bar .ig-header { top: 32px; }

@keyframes igHeaderDescend {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ig-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.ig-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.ig-brand-seal {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ig-glow), 0.55);
    position: relative;
    flex-shrink: 0;
}
.ig-brand-seal::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 68% 40%, transparent 58%, var(--ig-dore) 60%);
}
.ig-brand img { display: block; height: 26px; width: auto; }
/* Un seul logo à la fois : les sélecteurs doivent être au moins aussi
   spécifiques que « .ig-brand img » ci-dessus, sinon les deux s'affichent. */
.ig-brand img.ig-logo-jour { display: none; }
body.page-template-page-lumiere .ig-brand img.ig-logo-nuit,
body.page-template-page-elementor .ig-brand img.ig-logo-nuit,
body.page-template-page-interieur .ig-brand img.ig-logo-nuit,
body.ig-jour .ig-brand img.ig-logo-nuit { display: none; }
body.page-template-page-lumiere .ig-brand img.ig-logo-jour,
body.page-template-page-elementor .ig-brand img.ig-logo-jour,
body.page-template-page-interieur .ig-brand img.ig-logo-jour,
body.ig-jour .ig-brand img.ig-logo-jour { display: block; }

.ig-nav { display: flex; align-items: center; gap: 2.2rem; }
.ig-nav a.ig-nav-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ig-texte);
    text-decoration: none;
    position: relative;
    padding: 0.35rem 0;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
.ig-nav a.ig-nav-link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 1px;
    background: var(--ig-dore);
    box-shadow: 0 0 8px rgba(var(--ig-glow), 0.8);
    transition: width 0.5s ease, left 0.5s ease;
}
.ig-nav a.ig-nav-link:hover, .ig-nav a.ig-nav-link:focus-visible {
    color: var(--ig-dore-clair);
    text-shadow: 0 0 18px rgba(var(--ig-glow), 0.55);
}
.ig-nav a.ig-nav-link:hover::after, .ig-nav a.ig-nav-link:focus-visible::after { width: 100%; left: 0; }

.ig-btn-billetterie {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    text-decoration: none;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    transition: box-shadow 0.6s ease, transform 0.6s ease;
    white-space: nowrap;
}
.ig-btn-billetterie:hover, .ig-btn-billetterie:focus-visible {
    box-shadow: 0 0 28px rgba(var(--ig-glow), 0.55), 0 0 60px rgba(var(--ig-glow-2), 0.35);
    transform: translateY(-1px);
}

/* ============ HERO ============ */
.ig-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(175deg, var(--ig-fond-2) 0%, var(--ig-grad-a) 42%, var(--ig-grad-b) 68%, var(--ig-fond) 100%);
    background-size: 100% 160%;
    animation: igNightShift 26s ease-in-out infinite alternate;
    margin: 0;
}
@keyframes igNightShift {
    from { background-position: 50% 0%; }
    to   { background-position: 50% 100%; }
}

.ig-halo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.5;
    animation: igHaloBreathe 14s ease-in-out infinite alternate;
}
.ig-halo-1 {
    width: 44vw; height: 44vw; max-width: 620px; max-height: 620px;
    left: -12vw; top: 8vh;
    background: radial-gradient(circle, rgba(var(--ig-glow-2), 0.42), transparent 70%);
}
.ig-halo-2 {
    width: 38vw; height: 38vw; max-width: 540px; max-height: 540px;
    right: -10vw; bottom: -6vh;
    background: radial-gradient(circle, rgba(var(--ig-glow-2), 0.34), transparent 70%);
    animation-delay: -7s;
}
.ig-halo-3 {
    width: 26vw; height: 26vw; max-width: 380px; max-height: 380px;
    right: 14vw; top: 4vh;
    background: radial-gradient(circle, rgba(var(--ig-glow), 0.18), transparent 70%);
    animation-delay: -3s;
}
@keyframes igHaloBreathe {
    from { opacity: 0.32; transform: scale(0.94); }
    to   { opacity: 0.6;  transform: scale(1.08); }
}

.ig-particles { position: absolute; inset: 0; pointer-events: none; }
.ig-particle {
    position: absolute;
    bottom: -4vh;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ig-glow), 0.95) 0%, rgba(var(--ig-glow), 0.4) 55%, transparent 75%);
    filter: blur(1px);
    opacity: 0;
    animation-name: igFloatUp;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.ig-particle:nth-child(1)  { left: 6%;  width: 5px; height: 5px; animation-duration: 22s; animation-delay: 0s; }
.ig-particle:nth-child(2)  { left: 14%; width: 3px; height: 3px; animation-duration: 28s; animation-delay: 6s; }
.ig-particle:nth-child(3)  { left: 23%; width: 7px; height: 7px; animation-duration: 19s; animation-delay: 2s; filter: blur(2px); }
.ig-particle:nth-child(4)  { left: 31%; width: 4px; height: 4px; animation-duration: 26s; animation-delay: 11s; }
.ig-particle:nth-child(5)  { left: 40%; width: 3px; height: 3px; animation-duration: 31s; animation-delay: 4s; }
.ig-particle:nth-child(6)  { left: 49%; width: 6px; height: 6px; animation-duration: 21s; animation-delay: 9s; filter: blur(2px); }
.ig-particle:nth-child(7)  { left: 58%; width: 4px; height: 4px; animation-duration: 27s; animation-delay: 1s; }
.ig-particle:nth-child(8)  { left: 66%; width: 3px; height: 3px; animation-duration: 33s; animation-delay: 14s; }
.ig-particle:nth-child(9)  { left: 74%; width: 8px; height: 8px; animation-duration: 18s; animation-delay: 5s; filter: blur(3px); }
.ig-particle:nth-child(10) { left: 82%; width: 4px; height: 4px; animation-duration: 24s; animation-delay: 8s; }
.ig-particle:nth-child(11) { left: 90%; width: 5px; height: 5px; animation-duration: 29s; animation-delay: 3s; }
.ig-particle:nth-child(12) { left: 96%; width: 3px; height: 3px; animation-duration: 25s; animation-delay: 12s; }
.ig-particle:nth-child(13) { left: 12%; width: 6px; height: 6px; animation-duration: 30s; animation-delay: 16s; filter: blur(2px); }
.ig-particle:nth-child(14) { left: 53%; width: 3px; height: 3px; animation-duration: 35s; animation-delay: 18s; }
.ig-particle:nth-child(15) { left: 86%; width: 6px; height: 6px; animation-duration: 23s; animation-delay: 15s; filter: blur(2px); }

@keyframes igFloatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    8%   { opacity: 0.9; }
    50%  { transform: translateY(-52vh) translateX(2.5vw); opacity: 0.55; }
    92%  { opacity: 0.15; }
    100% { transform: translateY(-104vh) translateX(-1.5vw); opacity: 0; }
}

.ig-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 8% 18%, rgba(var(--ig-glow), 0.8) 50%, transparent 55%),
        radial-gradient(1px 1px at 21% 9%,  rgba(var(--ig-glow), 0.6) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 34% 26%, rgba(var(--ig-glow), 0.7) 50%, transparent 55%),
        radial-gradient(1px 1px at 47% 12%, rgba(var(--ig-glow), 0.55) 50%, transparent 55%),
        radial-gradient(1px 1px at 63% 20%, rgba(var(--ig-glow), 0.75) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 76% 8%,  rgba(var(--ig-glow), 0.6) 50%, transparent 55%),
        radial-gradient(1px 1px at 88% 24%, rgba(var(--ig-glow), 0.7) 50%, transparent 55%),
        radial-gradient(1px 1px at 94% 14%, rgba(var(--ig-glow), 0.5) 50%, transparent 55%),
        radial-gradient(1px 1px at 16% 36%, rgba(var(--ig-glow), 0.45) 50%, transparent 55%),
        radial-gradient(1px 1px at 70% 34%, rgba(var(--ig-glow), 0.5) 50%, transparent 55%);
    animation: igTwinkle 9s ease-in-out infinite alternate;
}
@keyframes igTwinkle {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

.ig-geometry {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -52%);
    width: min(68vh, 82vw);
    height: min(68vh, 82vw);
    pointer-events: none;
    opacity: 0;
    animation: igGeoReveal 4s ease 1.2s forwards, igGeoSpin 120s linear 1.2s infinite;
}
@keyframes igGeoReveal { to { opacity: 1; } }
@keyframes igGeoSpin {
    from { transform: translate(-50%, -52%) rotate(0deg); }
    to   { transform: translate(-50%, -52%) rotate(360deg); }
}
.ig-geometry .ig-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(var(--ig-glow), 0.28);
}
.ig-geometry .ig-ring-outer { inset: 0; border-style: dashed; border-color: rgba(var(--ig-glow), 0.18); }
.ig-geometry .ig-ring-mid   { inset: 7%; }
.ig-geometry .ig-ring-inner { inset: 16%; border-color: rgba(var(--ig-glow-2), 0.35); }
.ig-geometry .ig-node {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ig-dore);
    box-shadow: 0 0 12px rgba(var(--ig-glow), 0.9);
    left: 50%; top: 7%;
    margin-left: -3.5px; margin-top: -3.5px;
}
.ig-geometry .ig-node-2 { top: auto; bottom: 7%; margin-top: 0; margin-bottom: -3.5px; }
.ig-geometry .ig-node-3 { top: 50%; left: 7%; margin-left: -3.5px; }
.ig-geometry .ig-node-4 { top: 50%; left: auto; right: 7%; margin-right: -3.5px; }

.ig-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 7rem 1.5rem 4rem;
    max-width: 1280px;
    margin: 0 auto;
}
.ig-hero-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 2rem;
    opacity: 0;
    animation: igNightfall 2.6s ease 0.8s forwards;
}
.ig-hero-title { margin: 0; opacity: 0; animation: igNightfall 3.2s ease 1.4s forwards; }
.ig-hero-logo {
    width: min(560px, 84vw);
    height: auto;
    filter: drop-shadow(0 0 40px rgba(var(--ig-glow), 0.35)) drop-shadow(0 0 90px rgba(var(--ig-glow-2), 0.35));
}
.ig-hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-transform: uppercase;
    color: var(--ig-dore-clair);
    text-shadow: 0 0 30px rgba(var(--ig-glow), 0.4);
    margin: 1.4rem 0 0;
    opacity: 0;
    animation: igNightfall 3s ease 1.9s forwards;
}
.ig-divider {
    width: 130px; height: 1px;
    margin: 1.9rem auto;
    background: linear-gradient(to right, transparent, var(--ig-dore), transparent);
    position: relative;
    opacity: 0;
    animation: igNightfall 2.6s ease 2.2s forwards;
}
.ig-divider::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 6px; height: 6px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--ig-dore);
    box-shadow: 0 0 10px rgba(var(--ig-glow), 0.9);
}
.ig-hero-dates {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: var(--ig-texte);
    margin: 0 0 0.9rem;
    opacity: 0;
    animation: igNightfall 2.8s ease 2.6s forwards;
}
.ig-hero-place {
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 3rem;
    opacity: 0;
    animation: igNightfall 2.8s ease 3s forwards;
}
.ig-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: igNightfall 3s ease 3.4s forwards;
}
.ig-btn {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.8rem;
    border-radius: 999px;
    transition: box-shadow 0.7s ease, transform 0.7s ease, background-color 0.7s ease, color 0.7s ease;
    display: inline-block;
}
.ig-btn-primary {
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    box-shadow: 0 0 24px rgba(var(--ig-glow), 0.3);
}
.ig-btn-primary:hover, .ig-btn-primary:focus-visible {
    box-shadow: 0 0 40px rgba(var(--ig-glow), 0.65), 0 0 90px rgba(var(--ig-glow-2), 0.4);
    transform: translateY(-2px);
}
.ig-btn-ghost {
    color: var(--ig-dore-clair);
    border: 1px solid rgba(var(--ig-glow), 0.55);
    background: transparent;
}
.ig-btn-ghost:hover, .ig-btn-ghost:focus-visible {
    box-shadow: 0 0 26px rgba(var(--ig-glow), 0.35), inset 0 0 18px rgba(var(--ig-glow), 0.12);
    border-color: var(--ig-dore);
    transform: translateY(-2px);
}

/* ============ COMPTE À REBOURS BILLETTERIE ============ */
.ig-countdown {
    text-align: center;
}
.ig-countdown-units {
    display: flex;
    gap: clamp(1rem, 4vw, 2.4rem);
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
}
.ig-countdown-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.4vw, 2.8rem);
    color: var(--ig-dore-clair);
    text-shadow: 0 0 30px rgba(var(--ig-glow), 0.4);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ig-countdown-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-top: 0.5rem;
}
.ig-countdown-note {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-top: 1.1rem;
}

@keyframes igNightfall {
    from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.ig-scroll-hint {
    position: absolute;
    left: 50%; bottom: 2.2rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    opacity: 0;
    animation: igNightfall 3s ease 4.2s forwards;
}
.ig-scroll-hint span {
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
}
.ig-scroll-hint .ig-beam {
    width: 1px; height: 44px;
    background: linear-gradient(to bottom, var(--ig-dore), transparent);
    animation: igBeamPulse 3.4s ease-in-out infinite;
}
@keyframes igBeamPulse {
    0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
    50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ============ SECTIONS ============ */
.ig-section {
    position: relative;
    padding: 6rem 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}
.ig-section-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    text-align: center;
    margin: 0 0 1rem;
}
.ig-section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 1.2rem;
}
.ig-section-intro {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
    color: var(--ig-texte);
    opacity: 0.85;
}

/* Cartes dancefloors */
.ig-floors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.ig-floor-card {
    border: 1px solid rgba(var(--ig-glow), 0.3);
    border-radius: 8px;
    padding: 2.2rem 1.8rem;
    background: color-mix(in srgb, var(--ig-fond-2) 55%, transparent);
    transition: box-shadow 0.6s ease, transform 0.6s ease, border-color 0.6s ease;
}
.ig-floor-card:hover {
    border-color: rgba(var(--ig-glow), 0.7);
    box-shadow: 0 0 34px rgba(var(--ig-glow), 0.25);
    transform: translateY(-4px);
}
.ig-floor-card h3 {
    font-size: 1.35rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.8rem;
}
.ig-floor-card p { margin: 0; font-size: 0.98rem; opacity: 0.85; }
.ig-floor-tag {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-bottom: 1rem;
}

/* Deux colonnes image / texte */
.ig-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
.ig-split img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(var(--ig-glow), 0.35);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4);
}
.ig-split h2 { text-align: left; }
@media (max-width: 800px) {
    .ig-split { grid-template-columns: 1fr; gap: 2rem; }
}

/* Bande CTA */
.ig-cta-band {
    text-align: center;
    padding: 6rem 1.5rem;
    background:
      radial-gradient(ellipse 60% 80% at 50% 50%, rgba(var(--ig-glow), 0.12), transparent 70%);
}
.ig-cta-band h2 { margin: 0 0 1rem; }
.ig-cta-band p { max-width: 560px; margin: 0 auto 2.4rem; opacity: 0.85; }

/* ============ FOOTER ============ */
.ig-footer {
    border-top: 1px solid rgba(var(--ig-glow), 0.25);
    padding: 3.5rem 1.5rem 2.5rem;
    text-align: center;
}
.ig-footer img { height: 30px; width: auto; margin-bottom: 1.4rem; }
.ig-footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}
.ig-footer-links a {
    color: var(--ig-texte-soft);
    text-decoration: none;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}
.ig-footer-links a:hover { color: var(--ig-dore-clair); }
.ig-footer-note { font-size: 0.82rem; opacity: 0.55; margin: 0; }

/* ============ CONTENU DE PAGE PAR DÉFAUT ============ */
.ig-page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 9rem 1.5rem 5rem;
}

/* ============ BOUTON DU MENU MOBILE ============ */
.ig-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(var(--ig-glow), 0.45);
    border-radius: 999px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    line-height: 0;
}
.ig-nav-toggle-bars { display: inline-block; width: 20px; }
.ig-nav-toggle-bars span {
    display: block;
    height: 1.5px;
    background: var(--ig-dore);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.ig-nav-toggle-bars span + span { margin-top: 4.5px; }

/* Le bouton devient une croix une fois le panneau ouvert. */
.is-nav-open .ig-nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-nav-open .ig-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.is-nav-open .ig-nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ig-nav-toggle:focus-visible,
.ig-nav a:focus-visible,
.ig-btn:focus-visible,
.ig-btn-billetterie:focus-visible {
    outline: 2px solid var(--ig-dore);
    outline-offset: 3px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .ig-header-inner { gap: 1rem; }
    .ig-nav-toggle { display: inline-block; }

    /* Les liens ne sont plus supprimés mais repliés : ils redeviennent
       atteignables au doigt, ce qui n'était pas le cas auparavant. */
    .ig-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 1.5rem;
        background: color-mix(in srgb, var(--ig-fond) 96%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(var(--ig-glow), 0.2);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease, visibility 0s linear 0.4s;
    }
    .ig-header.is-nav-open .ig-nav {
        max-height: 80vh;
        padding: 0.5rem 1.5rem 1.5rem;
        visibility: visible;
        transition: max-height 0.4s ease, padding 0.4s ease, visibility 0s;
        overflow-y: auto;
    }
    .ig-nav a.ig-nav-link {
        padding: 0.95rem 0;
        border-bottom: 1px solid rgba(var(--ig-glow), 0.12);
    }
    .ig-nav a.ig-nav-link::after { display: none; }
    .ig-btn-billetterie {
        margin-top: 1.2rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ig-brand img { height: 20px; }
    .ig-hero-dates { letter-spacing: 0.2em; text-indent: 0.2em; }
    .ig-hero-subtitle { letter-spacing: 0.32em; text-indent: 0.32em; }
    .ig-btn { padding: 0.9rem 2rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ig-particle { display: none; }
    .ig-hero-eyebrow, .ig-hero-title, .ig-hero-subtitle, .ig-divider,
    .ig-hero-dates, .ig-hero-place, .ig-hero-actions, .ig-scroll-hint,
    .ig-geometry, .ig-header {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .ig-geometry { transform: translate(-50%, -52%); }
    .ig-scroll-hint { transform: translateX(-50%); }
}

/* ======================================================
   PAGE ELEMENTOR — équivalent du template Lumière Dorée
   Elementor pose les classes ig-* sur le conteneur du widget
   et non sur l'élément de texte, et son "kit" global réimpose
   sa propre palette et sa police : ces règles rétablissent la
   charte du thème sur les pages construites avec Elementor.
   ====================================================== */

/* Le texte du widget hérite du conteneur porteur de la classe ig-* */
.elementor .elementor-widget-heading .elementor-heading-title {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-indent: inherit;
    text-shadow: inherit;
    margin: 0;
}
/* …sauf les vrais titres, qui gardent la police display dorée */
.elementor .elementor-widget-heading h1.elementor-heading-title,
.elementor .elementor-widget-heading h2.elementor-heading-title,
.elementor .elementor-widget-heading h3.elementor-heading-title,
.elementor .elementor-widget-heading h4.elementor-heading-title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ig-dore);
}

/* Le kit Elementor impose sa police sur les paragraphes */
.elementor .elementor-widget-text-editor {
    font-family: var(--font-body);
    color: var(--ig-texte);
}

/* Hero pleine hauteur */
.elementor .ig-hero {
    flex-direction: row;
    margin: 0;
    padding: 0;
    max-width: none;
    --width: 100%;
}
/* Elementor impose la hauteur du conteneur via --min-height */
.elementor .ig-hero {
    --min-height: 100svh;
}
/* Seul le premier widget HTML (halos, particules, géométrie) est en fond ;
   l'indicateur de défilement doit rester ancré au bas du hero. */
.elementor .ig-hero > .elementor-widget-html:first-child {
    position: absolute;
    inset: 0;
    margin: 0;
    width: auto;
}
/* L'indicateur de défilement est sorti du flux pour ne pas décentrer le hero */
.elementor .ig-hero > .elementor-widget-html:last-child {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    width: auto;
}
.elementor .ig-hero-content {
    --width: 100%;
    /* Réserve la place de l'indicateur « Entrer dans le jardin » sous les boutons */
    padding-bottom: 9rem;
}
.elementor .ig-hero-title img {
    width: min(560px, 84vw);
    height: auto;
    filter: drop-shadow(0 0 40px rgba(var(--ig-glow), 0.35)) drop-shadow(0 0 90px rgba(var(--ig-glow-2), 0.35));
}
.elementor .ig-hero-actions {
    flex-direction: row;
    --width: auto;
}

/* Elementor pose les classes ig-btn* sur le CONTENEUR du widget, qui hérite
   donc de tout l'habillage du bouton (fond, pilule, ombre) en plus du lien
   interne : on neutralise le conteneur pour ne garder qu'un seul bouton. */
.elementor .elementor-widget-button.ig-btn {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: block;
    width: auto;
    transition: none;
}
.elementor .elementor-widget-button.ig-btn:hover {
    box-shadow: none;
    transform: none;
}

/* Boutons : Elementor rend un <a> interne au conteneur ig-btn */
.elementor .ig-btn .elementor-button {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.8rem;
    border-radius: 999px;
    display: inline-block;
    background-image: none;
    transition: box-shadow 0.7s ease, transform 0.7s ease, background-color 0.7s ease, color 0.7s ease;
}
.elementor .ig-btn-primary .elementor-button {
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    box-shadow: 0 0 24px rgba(var(--ig-glow), 0.3);
}
.elementor .ig-btn-primary .elementor-button:hover,
.elementor .ig-btn-primary .elementor-button:focus-visible {
    box-shadow: 0 0 40px rgba(var(--ig-glow), 0.65), 0 0 90px rgba(var(--ig-glow-2), 0.4);
    transform: translateY(-2px);
}
.elementor .ig-btn-ghost .elementor-button {
    color: var(--ig-dore-clair);
    border: 1px solid rgba(var(--ig-glow), 0.55);
    background: transparent;
}
.elementor .ig-btn-ghost .elementor-button:hover,
.elementor .ig-btn-ghost .elementor-button:focus-visible {
    box-shadow: 0 0 26px rgba(var(--ig-glow), 0.35), inset 0 0 18px rgba(var(--ig-glow), 0.12);
    border-color: var(--ig-dore);
    transform: translateY(-2px);
}

/* Sections et grilles de cartes */
.elementor .ig-section {
    --width: 100%;
}
.elementor .ig-floors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    --width: 100%;
}
.elementor .ig-floor-card {
    border: 1px solid rgba(var(--ig-glow), 0.3);
    border-radius: 8px;
    padding: 2.2rem 1.8rem;
    background: color-mix(in srgb, var(--ig-fond-2) 55%, transparent);
    transition: box-shadow 0.6s ease, transform 0.6s ease, border-color 0.6s ease;
}
.elementor .ig-floor-card:hover {
    border-color: rgba(var(--ig-glow), 0.7);
    box-shadow: 0 0 34px rgba(var(--ig-glow), 0.25);
    transform: translateY(-4px);
}

.elementor .ig-cta-band {
    max-width: none;
    --width: 100%;
}

/* ============ BILLETTERIE (WooCommerce) ============ */
/* WooCommerce arrive avec des composants pensés pour un fond clair ; on les
   ramène sur la palette du festival. */
.woocommerce,
.wc-block-components-notice-banner {
    color: var(--ig-texte);
}
.woocommerce .page-title,
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
    font-family: var(--font-display);
    color: var(--ig-dore);
}

/* Boutons : même traitement que les boutons du site vitrine. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
    font-family: var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    box-shadow: 0 0 24px rgba(var(--ig-glow), 0.3);
    transition: box-shadow 0.6s ease, transform 0.6s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    box-shadow: 0 0 40px rgba(var(--ig-glow), 0.6);
    transform: translateY(-2px);
}

/* Prix et étiquettes. */
.woocommerce .price,
.woocommerce span.amount,
.wc-block-components-product-price {
    color: var(--ig-dore-clair);
    font-family: var(--font-display);
}

/* Champs de formulaire (panier, commande, compte). */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input {
    background: var(--ig-fond-2);
    border: 1px solid rgba(var(--ig-glow), 0.3);
    border-radius: 8px;
    color: var(--ig-texte);
    padding: 0.7rem 0.9rem;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    outline: none;
    border-color: var(--ig-dore);
    box-shadow: 0 0 0 3px rgba(var(--ig-glow), 0.18);
}

/* Encarts d'information et messages. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
    background: var(--ig-fond-2);
    border-top: 3px solid var(--ig-dore);
    color: var(--ig-texte);
}

/* Tableaux (panier, commandes). */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
    border-color: rgba(var(--ig-glow), 0.22);
    color: var(--ig-texte);
}
.woocommerce table.shop_table thead th {
    color: var(--ig-dore);
    font-family: var(--font-display);
    font-weight: 400;
}

/* Fiches produit dans la grille. */
.woocommerce ul.products li.product {
    background: var(--ig-fond-2);
    border: 1px solid rgba(var(--ig-glow), 0.18);
    border-radius: 14px;
    padding: 1.2rem;
    transition: border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}
.woocommerce ul.products li.product:hover {
    border-color: rgba(var(--ig-glow), 0.55);
    box-shadow: 0 0 30px rgba(var(--ig-glow), 0.2);
    transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    color: var(--ig-texte);
}

/* Le contenu de la boutique respire sous l'en-tête fixe. */
.ig-shop-page .entry-content,
body:not(.home) .woocommerce {
    padding-top: 2rem;
}

/* ============ GRILLE TARIFAIRE DES PASS ============ */

.ig-shop {
    padding: 9rem 1.5rem 5rem;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* La grille ne déborde jamais de son conteneur, quelle que soit la largeur
   que WooCommerce tente d'imposer à ses blocs. */
.ig-pricing,
.ig-pricing .wp-block-woocommerce-product-template {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.ig-shop-intro {
    text-align: center;
    margin-bottom: 3.5rem;
}

.ig-shop-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 1rem;
}

.ig-shop-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--ig-dore);
    margin: 0 0 1rem;
}

.ig-shop-lede {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--ig-texte-soft);
}

/* Les trois paliers, côte à côte. */
.ig-pricing .wp-block-woocommerce-product-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ig-pricing .wp-block-woocommerce-product-template > li {
    display: flex;
    flex-direction: column;
    background: var(--ig-fond-2);
    border: 1px solid rgba(var(--ig-glow), 0.22);
    border-radius: 16px;
    padding: 1.6rem 1.2rem 1.3rem;
    text-align: center;
    position: relative;
    transition: border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}

.ig-pricing .wp-block-woocommerce-product-template > li:hover {
    border-color: rgba(var(--ig-glow), 0.5);
    box-shadow: 0 0 34px rgba(var(--ig-glow), 0.16);
    transform: translateY(-4px);
}

/* Le premier palier est le moins cher : la grille est triée par prix
   croissant, donc « premier » et « meilleur tarif » désignent la même carte. */
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock) {
    border-color: rgba(var(--ig-glow), 0.55);
    box-shadow: 0 0 30px rgba(var(--ig-glow), 0.14);
}

.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock)::before {
    content: "Meilleur tarif";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    color: var(--ig-btn-texte);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Le nom du pass : on retire le suffixe « — Festival Isis Garden 2027 »,
   redondant sur une page qui ne parle que de ça. */
.ig-pass-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}

.ig-pass-name a {
    color: var(--ig-texte);
    text-decoration: none;
}

.ig-pass-price {
    margin: 0 0 1.2rem;
}

.ig-pass-price .woocommerce-Price-amount {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.1rem);
    color: var(--ig-dore-clair);
    text-shadow: 0 0 30px rgba(var(--ig-glow), 0.3);
    line-height: 1;
}

.ig-pass-note {
    font-size: 0.92rem;
    color: var(--ig-texte-soft);
    margin: 0 0 1.2rem;
    /* Pousse le bouton en bas : les trois cartes s'alignent malgré des
       descriptions de longueurs différentes. */
    flex-grow: 1;
}

.ig-pass-stock {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 1.2rem;
}

.ig-pass-button .wp-block-button__link,
.ig-pass-button a.button {
    display: inline-block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ig-btn-texte);
    background: linear-gradient(135deg, var(--ig-dore-clair), var(--ig-dore));
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    box-shadow: 0 0 24px rgba(var(--ig-glow), 0.28);
}

.ig-shop-footnote {
    max-width: 38rem;
    margin: 3rem auto 0;
    font-size: 0.85rem;
    color: var(--ig-texte-soft);
}

/* Tablette : on garde les trois colonnes mais on resserre, sinon les cartes
   deviennent trop étroites pour leur contenu. */
@media (max-width: 1100px) and (min-width: 861px) {
    .ig-pricing .wp-block-woocommerce-product-template { gap: 1rem; }
    .ig-pricing .wp-block-woocommerce-product-template > li { padding: 2rem 1.1rem 1.5rem; }
    .ig-pass-name { font-size: 1.15rem; }
}

@media (max-width: 860px) {
    /* Sur une colonne, les cartes sont resserrées : à la taille du bureau,
       une seule remplissait l'écran et les deux autres passaient sous la
       ligne de flottaison. */
    .ig-pricing .wp-block-woocommerce-product-template {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .ig-pricing .wp-block-woocommerce-product-template > li {
        max-width: 23rem;
        margin-inline: auto;
        width: 100%;
        padding: 1.1rem 1rem 1rem;
        border-radius: 12px;
    }
    /* Le badge de la première carte a besoin d'air au-dessus. */
    .ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock) { margin-top: 0.7rem; }

    .ig-pass-name { font-size: 1rem; margin-bottom: 0.25rem; }
    .ig-pass-price { margin-bottom: 0.4rem; }
    .ig-pass-price .woocommerce-Price-amount { font-size: 1.55rem; }
    .ig-pass-note { font-size: 0.78rem; line-height: 1.45; margin-bottom: 0.5rem; }
    .ig-pass-stock { font-size: 0.64rem; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
    .ig-pass-button .wp-block-button__link,
    .ig-pass-button a.button { padding: 0.6rem 1rem; font-size: 0.8rem; letter-spacing: 0.12em; }

    .ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock)::before {
        font-size: 0.6rem;
        padding: 0.28rem 0.8rem;
    }

    /* L'en-tête est fixe : sans cette réserve, le titre passait dessous. */
    .ig-shop { padding: 8.5rem 1.2rem 3.5rem; }
    .ig-shop-intro { margin-bottom: 2rem; }
    .ig-shop-lede { font-size: 0.95rem; }
    .ig-shop-footnote { margin-top: 2rem; }
}

/* ============ GARDE-FOUS RESPONSIVE ============ */

/* WooCommerce injecte ses blocs de notifications en « alignwide », soit
   1280 px imposés : sur un téléphone, ce bloc dépasse le viewport, la page
   devient plus large que l'écran et tout le contenu paraît décalé vers la
   droite. On les ramène à la largeur disponible — sur toute la boutique,
   pas seulement sur la grille tarifaire : panier, commande et compte
   embarquent les mêmes blocs. */
body.ig-jour .alignwide,
body.ig-jour .alignfull,
body.ig-jour .wc-block-store-notices,
body.ig-jour .wc-block-components-notices,
.ig-shop .alignwide,
.ig-shop .alignfull {
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
}

/* Réserve sous l'en-tête fixe pour les pages de la boutique qui n'ont pas
   le conteneur .ig-shop : panier, commande, compte, et les pages simples
   (FAQ, CGV, mentions légales). Sans elle, leur premier titre passe
   dessous. */
body.ig-jour.woocommerce-cart .wp-site-blocks,
body.ig-jour.woocommerce-checkout .wp-site-blocks,
body.ig-jour.woocommerce-account .wp-site-blocks,
body.ig-jour.page .wp-site-blocks {
    padding-top: 7.5rem;
    padding-bottom: 3rem;
}

/* Le contenu respire sur les bords, comme la grille. Restreint aux
   conteneurs de premier niveau : appliqué à tous les groupes, chaque
   imbrication ajouterait sa propre marge. */
body.ig-jour.woocommerce-cart .wp-site-blocks > main,
body.ig-jour.woocommerce-checkout .wp-site-blocks > main,
body.ig-jour.woocommerce-account .wp-site-blocks > main,
body.ig-jour.woocommerce-cart .wp-site-blocks > .wp-block-group,
body.ig-jour.woocommerce-checkout .wp-site-blocks > .wp-block-group,
body.ig-jour.woocommerce-account .wp-site-blocks > .wp-block-group,
body.ig-jour.page .wp-site-blocks > main,
body.ig-jour.page .wp-site-blocks > .wp-block-group {
    padding-inline: clamp(1.2rem, 4vw, 1.5rem);
    box-sizing: border-box;
}

/* Rien ne doit dépasser en largeur : le corps masque le débordement, ce qui
   cacherait le symptôme sans régler la cause. */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Les tableaux de commande défilent dans leur propre cadre. */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* Les longues adresses de courriel ne débordent plus des cartes. */
.woocommerce, .ig-shop, .ig-page-content { overflow-wrap: anywhere; }

/* ======================================================
   ANIMATIONS D'APPARITION
   ======================================================
   Les éléments marqués .ig-reveal montent en fondu quand ils entrent dans
   l'écran. L'état de départ n'est posé QUE si le JS a pris la main (classe
   .ig-js sur <html>) : sans cette précaution, un échec du script laisserait
   la page définitivement invisible. */
.ig-js .ig-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ig-delay, 0s);
    will-change: opacity, transform;
}
.ig-js .ig-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============ PIED DE PAGE — BOUTONS ============ */
.ig-footer-links { gap: 0.8rem 1rem; }
.ig-footer-links a.ig-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 1.15rem;
    border: 1px solid rgba(var(--ig-glow), 0.35);
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    background: transparent;
    transition: color 0.35s ease, border-color 0.35s ease,
                background-color 0.35s ease, transform 0.35s ease;
}
.ig-footer-links a.ig-footer-btn:hover,
.ig-footer-links a.ig-footer-btn:focus-visible {
    color: var(--ig-dore-clair);
    border-color: rgba(var(--ig-glow), 0.75);
    background: rgba(var(--ig-glow), 0.08);
    transform: translateY(-2px);
}
.ig-footer-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.ig-footer .ig-footer-logo { height: 44px; }

/* ============ PAGES INTÉRIEURES ============ */
.ig-page {
    /* L'en-tête est fixe : sans cette réserve, le titre passe dessous. */
    padding: clamp(7rem, 14vw, 9.5rem) clamp(1.2rem, 5vw, 2rem) 4rem;
    max-width: 1180px;
    margin: 0 auto;
}
.ig-page-hero { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.ig-page-eyebrow {
    font-size: 0.76rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 0.9rem;
}
.ig-page-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 1.1;
    color: var(--ig-dore);
    margin: 0 0 1rem;
}
.ig-page-lede {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--ig-texte-soft);
    font-size: 1.02rem;
}
.ig-section { margin-top: clamp(2.6rem, 7vw, 4.4rem); }
.ig-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    color: var(--ig-dore);
    text-align: center;
    margin: 0 0 0.6rem;
}
.ig-section-lede {
    text-align: center;
    color: var(--ig-texte-soft);
    max-width: 44rem;
    margin: 0 auto 2rem;
}

/* Bandeau « à venir » — la programmation n'est pas encore annoncée. */
.ig-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.15rem;
    border: 1px dashed rgba(var(--ig-glow), 0.55);
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ig-dore);
}
.ig-soon::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ig-dore);
    animation: igSoonPulse 2.4s ease-in-out infinite;
}
@keyframes igSoonPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* ============ GRILLES DE CARTES ============ */
.ig-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: clamp(1rem, 2.4vw, 1.6rem);
}
.ig-cards.ig-cards-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.ig-card {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid rgba(var(--ig-glow), 0.25);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--ig-fond-2) 70%, transparent);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.45s ease, box-shadow 0.45s ease;
}
.ig-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--ig-glow), 0.6);
    box-shadow: 0 14px 40px -18px rgba(var(--ig-glow), 0.55);
}
.ig-card-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin: 0 0 0.5rem;
}
.ig-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ig-dore);
    margin: 0 0 0.6rem;
}
.ig-card p { margin: 0; color: var(--ig-texte-soft); font-size: 0.95rem; }
.ig-card ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--ig-texte-soft); font-size: 0.93rem; }
.ig-card li { margin-bottom: 0.28rem; }

/* ============ HÉBERGEMENTS ============ */
.ig-lodging-intro {
    max-width: 52rem;
    margin: 0 auto 2rem;
    color: var(--ig-texte-soft);
    text-align: center;
}
.ig-lodging-meta {
    font-size: 0.86rem;
    color: var(--ig-texte-soft);
    margin: 0.6rem 0 0;
}
.ig-price-tag {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ig-dore);
    margin-top: 0.9rem;
}
.ig-price-tag small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-top: 0.15rem;
}

/* ============ F.A.Q. ============ */
.ig-faq { max-width: 52rem; margin: 0 auto; }
.ig-faq-group { margin-bottom: 2.4rem; }
.ig-faq-group > h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ig-dore);
    border-bottom: 1px solid rgba(var(--ig-glow), 0.25);
    padding-bottom: 0.6rem;
    margin: 0 0 1rem;
}
.ig-faq details {
    border: 1px solid rgba(var(--ig-glow), 0.22);
    border-radius: 0.8rem;
    margin-bottom: 0.7rem;
    background: color-mix(in srgb, var(--ig-fond-2) 55%, transparent);
    transition: border-color 0.35s ease;
}
.ig-faq details[open] { border-color: rgba(var(--ig-glow), 0.5); }
.ig-faq summary {
    cursor: pointer;
    padding: 1rem 3rem 1rem 1.2rem;
    position: relative;
    font-size: 0.99rem;
    color: var(--ig-texte);
    list-style: none;
}
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::after {
    content: "";
    position: absolute;
    right: 1.2rem; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ig-dore);
    border-bottom: 2px solid var(--ig-dore);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.35s ease;
}
.ig-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ig-faq-answer {
    padding: 0 1.2rem 1.1rem;
    color: var(--ig-texte-soft);
    font-size: 0.95rem;
    animation: igFaqOpen 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ig-faq-answer p { margin: 0 0 0.7rem; }
.ig-faq-answer ul { margin: 0 0 0.7rem; padding-left: 1.15rem; }
@keyframes igFaqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ============ FORMULAIRE ============ */
.ig-form { max-width: 38rem; margin: 2rem auto 0; }
.ig-form label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-bottom: 0.45rem;
}
.ig-form input[type="text"],
.ig-form input[type="email"],
.ig-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    margin-bottom: 1.2rem;
    background: color-mix(in srgb, var(--ig-fond-2) 70%, transparent);
    border: 1px solid rgba(var(--ig-glow), 0.3);
    border-radius: 0.7rem;
    color: var(--ig-texte);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.ig-form input:focus, .ig-form textarea:focus {
    outline: none;
    border-color: rgba(var(--ig-glow), 0.8);
    box-shadow: 0 0 0 3px rgba(var(--ig-glow), 0.15);
}
.ig-form textarea { min-height: 9rem; resize: vertical; }
/* Piège à robots : invisible à l'œil, rempli par les automates. */
.ig-form .ig-hp { position: absolute; left: -9999px; opacity: 0; }
.ig-form-note { font-size: 0.84rem; color: var(--ig-texte-soft); }
.ig-form-message {
    padding: 0.9rem 1.1rem;
    border-radius: 0.7rem;
    margin-bottom: 1.4rem;
    font-size: 0.94rem;
}
.ig-form-message.is-ok {
    border: 1px solid rgba(var(--ig-glow-2), 0.6);
    background: rgba(var(--ig-glow-2), 0.12);
}
.ig-form-message.is-error {
    border: 1px solid #c2543f;
    background: rgba(194, 84, 63, 0.12);
}

/* ============ ACCUEIL — INFOS ET VIDÉO ============ */
.ig-home-band {
    padding: clamp(3rem, 8vw, 5rem) clamp(1.2rem, 5vw, 2rem);
    max-width: 1180px;
    margin: 0 auto;
}
.ig-key-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.9rem 2.2rem;
    margin-bottom: 2.6rem;
    text-align: center;
}
.ig-key-fact {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    color: var(--ig-dore);
}
.ig-key-fact small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    margin-top: 0.2rem;
}
.ig-schedule {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.94rem;
    color: var(--ig-texte-soft);
}
.ig-schedule li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    border-bottom: 1px dashed rgba(var(--ig-glow), 0.18);
}
.ig-schedule li:last-child { border-bottom: 0; }
.ig-schedule span:last-child { color: var(--ig-texte); white-space: nowrap; }
.ig-included {
    margin-top: 2.4rem;
    padding: clamp(1.3rem, 3vw, 1.8rem);
    border: 1px solid rgba(var(--ig-glow), 0.3);
    border-radius: 1.1rem;
    text-align: center;
    color: var(--ig-texte-soft);
}
.ig-included strong { color: var(--ig-dore); font-weight: 400; }

/* Vidéo : le cadre garde ses proportions même quand le film n'est pas
   encore là, pour que la page ne saute pas le jour de la mise en ligne. */
.ig-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--ig-glow), 0.3);
    background: color-mix(in srgb, var(--ig-fond-2) 80%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ig-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ig-video-placeholder { padding: 1.5rem; color: var(--ig-texte-soft); }
.ig-video-placeholder .ig-soon { margin-bottom: 1rem; }
.ig-cta-center { text-align: center; margin-top: 2.2rem; }

@media (max-width: 700px) {
    .ig-key-facts { gap: 1.2rem; flex-direction: column; }
    .ig-schedule li { flex-direction: column; gap: 0.15rem; }
    .ig-schedule span:last-child { white-space: normal; }
}

/* Mouvement réduit : les apparitions ne doivent jamais retenir le contenu. */
@media (prefers-reduced-motion: reduce) {
    .ig-js .ig-reveal { opacity: 1; transform: none; transition: none; }
    .ig-soon::before { animation: none; opacity: 1; }
}

/* ============ FICHE PASS (description produit) ============ */
.ig-pass-fiche h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ig-dore);
    margin: 1.8rem 0 0.7rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(var(--ig-glow), 0.22);
}
.ig-pass-fiche h3:first-child { margin-top: 0; }
.ig-pass-fiche ul { margin: 0 0 0.9rem; padding-left: 1.15rem; }
.ig-pass-fiche li { margin-bottom: 0.4rem; }
.ig-pass-fiche strong { color: var(--ig-texte); font-weight: 500; }

/* ======================================================
   PALIERS DE VENTE — un seul pass ouvert à la fois
   ======================================================
   Early, Normal et Late se succèdent : le palier suivant n'ouvre qu'à
   l'épuisement du précédent. Les paliers fermés restent visibles, pour que le
   visiteur comprenne la mécanique des prix et voie qu'attendre coûte plus
   cher — mais nettement mis en retrait.

   On s'appuie sur les classes que le bloc WooCommerce écrit lui-même :
   « purchasable » ne subsiste que sur le palier ouvert, « outofstock » marque
   celui qui est épuisé. Rien à synchroniser, l'affichage suit l'état réel du
   produit. */
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product:not(.purchasable),
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.outofstock {
    opacity: 0.45;
    filter: grayscale(0.9);
    border-color: rgba(var(--ig-glow), 0.16);
    box-shadow: none;
}

/* Ni survol ni relief : un palier fermé ne doit pas sembler cliquable. */
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product:not(.purchasable):hover,
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.outofstock:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(var(--ig-glow), 0.16);
}

/* Prix barré uniquement sur le palier échu : un palier à venir n'a rien
   d'annulé, il n'est simplement pas encore ouvert. */
.ig-pricing li.wc-block-product.outofstock .ig-pass-price .woocommerce-Price-amount {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.ig-pricing li.wc-block-product:not(.purchasable) .ig-pass-button .wp-element-button,
.ig-pricing li.wc-block-product.outofstock .ig-pass-button .wp-element-button,
.ig-pricing li.wc-block-product.outofstock .ig-pass-button a,
.ig-pricing li.wc-block-product:not(.purchasable) .ig-pass-button a {
    background: transparent;
    border: 1px solid rgba(var(--ig-glow), 0.4);
    color: var(--ig-texte-soft);
    cursor: not-allowed;
    pointer-events: none;
}

/* Sur la fiche produit, même mise en retrait du bouton. */
body.single-product .ig-phase-avenir .single_add_to_cart_button {
    opacity: 0.5;
    pointer-events: none;
}

/* ======================================================
   MISE EN PAGE — affinages
   ====================================================== */

/* ---- Cartes de la grille tarifaire ---- */

/* Le badge est centré sur la bordure haute : sans dégagement, il chevauche
   le nom du pass. La réserve n'est ajoutée qu'à la carte qui le porte, pour
   que les trois cartes gardent le même appui visuel en bas. */
.ig-pricing .wp-block-woocommerce-product-template > li {
    padding: 1.9rem 1.35rem 1.5rem;
}
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock) {
    padding-top: 2.5rem;
    background: color-mix(in srgb, var(--ig-fond-2) 100%, var(--ig-dore) 4%);
}

/* Le nom respire au-dessus du prix, le prix domine la carte. */
.ig-pass-name { margin-bottom: 0.35rem; }
.ig-pass-price { margin-bottom: 0.9rem; }

/* La phrase d'accroche ne pousse plus le bouton : c'est la liste qui occupe
   l'espace variable, sinon les trois cartes se décalent dès qu'une
   description est plus courte qu'une autre. */
.ig-pass-note {
    flex-grow: 0;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Ce que comprend le pass — identique aux trois paliers : c'est le prix qui
   change, jamais la prestation. Répétée dans chaque carte, la liste rend la
   comparaison immédiate au lieu d'obliger à ouvrir la fiche. */
.ig-pass-inclus {
    flex-grow: 1;
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(var(--ig-glow), 0.18);
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ig-texte-soft);
}
.ig-pass-inclus li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.42rem;
}
.ig-pass-inclus li:last-child { margin-bottom: 0; }
.ig-pass-inclus li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.42em;
    width: 0.42rem;
    height: 0.72rem;
    border-right: 2px solid var(--ig-dore);
    border-bottom: 2px solid var(--ig-dore);
    transform: rotate(45deg);
}

/* Sur un palier fermé, la liste s'efface avec le reste de la carte. */
.ig-pricing li.wc-block-product:not(.purchasable) .ig-pass-inclus li::before,
.ig-pricing li.wc-block-product.outofstock .ig-pass-inclus li::before {
    border-color: var(--ig-texte-soft);
}

/* ---- Pages intérieures : rythme vertical ---- */

/* Une section se distingue de la précédente par un filet discret plutôt que
   par un simple écart : sur les pages longues (hébergements, F.A.Q.), l'œil
   perdait la frontière entre deux blocs de cartes. */
.ig-section + .ig-section {
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid rgba(var(--ig-glow), 0.16);
}

/* Les listes internes aux cartes s'alignent sur la même grammaire que la
   grille tarifaire. */
.ig-card ul {
    list-style: none;
    padding-left: 0;
}
.ig-card ul li {
    position: relative;
    padding-left: 1.1rem;
}
.ig-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ig-dore);
    opacity: 0.75;
}
/* Les horaires gardent leur mise en page à deux colonnes. */
.ig-card ul.ig-schedule li { padding-left: 0; }
.ig-card ul.ig-schedule li::before { display: none; }

/* Le bandeau récapitulatif et les blocs de mise en avant respirent
   davantage que le corps de texte. */
.ig-included {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .ig-pass-inclus { font-size: 0.82rem; }
    .ig-pricing .wp-block-woocommerce-product-template > li { padding: 1.7rem 1.1rem 1.3rem; }
}

/* ======================================================
   GRILLE TARIFAIRE — agrandissement
   ======================================================
   La grille vit dans un <main> « constrained » (800 px), puis le site est
   rendu à 80 % : elle paraissait petite et perdue au milieu. On élargit le
   cadre et on grossit chaque carte. Le .ig-shop est l'enfant direct du main
   contraint ; lui donner un max-width plus grand desserre la contrainte de
   mise en page (règle de faible spécificité de WordPress). */
/* Pleine largeur jusqu'à un plafond, puis centrée : la grille occupe tout
   l'écran sur un portable ou un moniteur courant, mais au-delà de 1500 px
   elle se recentre au lieu de continuer à s'étirer — trois cartes larges
   comme des affiches se liraient mal. Le <main> « constrained » plafonnerait
   sinon à 800 px ; on desserre au niveau du .ig-shop (enfant direct). */
.ig-shop {
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 4rem);
}
.ig-shop .ig-pricing,
.ig-shop .ig-pricing .wp-block-woocommerce-product-template { max-width: 100%; }

.ig-pricing .wp-block-woocommerce-product-template {
    gap: 2rem;
}
.ig-pricing .wp-block-woocommerce-product-template > li {
    padding: 2.6rem 1.9rem 2.1rem;
    border-radius: 20px;
}
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock) {
    padding-top: 3.2rem;
}

/* Le nom et le prix prennent plus de présence. */
.ig-pass-name { font-size: 1.5rem; margin-bottom: 0.5rem; }
.ig-pass-price { margin-bottom: 1.1rem; }
.ig-pass-price .woocommerce-Price-amount {
    font-size: clamp(2.5rem, 4.4vw, 3.1rem);
}

.ig-pass-note { font-size: 1rem; margin-bottom: 1.3rem; }

.ig-pass-inclus {
    font-size: 0.98rem;
    padding-top: 1.3rem;
    margin-bottom: 1.7rem;
}
.ig-pass-inclus li { padding-left: 1.6rem; margin-bottom: 0.58rem; }
.ig-pass-inclus li::before { width: 0.5rem; height: 0.85rem; top: 0.4em; }

.ig-pass-button .wp-block-button__link,
.ig-pass-button a.button {
    font-size: 1.05rem;
    padding: 0.95rem 1.4rem;
}

/* Le badge « Meilleur tarif » suit l'agrandissement. */
.ig-pricing .wp-block-woocommerce-product-template > li.wc-block-product.purchasable:not(.outofstock)::before {
    font-size: 0.78rem;
    padding: 0.45rem 1.25rem;
}

/* L'intro de la boutique grandit d'autant, pour rester en proportion. */
.ig-shop-title { font-size: clamp(2.2rem, 5vw, 3rem); }
.ig-shop-lede { font-size: 1.1rem; max-width: 44rem; }

/* En dessous de trois colonnes, on garde des cartes confortables. */
@media (max-width: 900px) {
    .ig-pricing .wp-block-woocommerce-product-template { gap: 1.4rem; }
    .ig-pricing .wp-block-woocommerce-product-template > li { padding: 2.1rem 1.5rem 1.7rem; }
    .ig-pass-price .woocommerce-Price-amount { font-size: 2.4rem; }
}

/* ======================================================
   RETOURS DU 14 AOÛT — lisibilité et débordement
   ====================================================== */

/* Les liens dans le corps de texte étaient en doré clair sur fond sable :
   contraste insuffisant, le lien « F.A.Q. » se lisait mal. On passe au doré
   foncé, souligné, pour qu'un lien reste identifiable sans la couleur seule. */
body.page-template-page-interieur .ig-page a,
body.page-template-page-lumiere .ig-page a,
body.ig-jour .ig-page a {
    color: #7a5610;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
body.page-template-page-interieur .ig-page a:hover,
body.page-template-page-lumiere .ig-page a:hover,
body.ig-jour .ig-page a:hover {
    color: #5c400b;
}

/* Le bouton d'appel à l'action débordait à droite : « Réserver mon pass
   7 jours » est long, très espacé, et ne pouvait pas se couper à cause du
   nowrap. On l'autorise à passer sur deux lignes sous 600 px plutôt que de
   sortir de l'écran. */
.ig-cta-center { text-align: center; }
.ig-cta-center .ig-btn-billetterie,
.ig-page .ig-btn-billetterie {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}
@media (max-width: 600px) {
    .ig-cta-center .ig-btn-billetterie,
    .ig-page .ig-btn-billetterie,
    .ig-home-band .ig-btn-billetterie {
        white-space: normal;
        line-height: 1.35;
        letter-spacing: 0.1em;
    }
}

/* Le nom du festival est en noir sur les fonds clairs (demande du 14 août). */
body.page-template-page-interieur .ig-page-title,
body.page-template-page-interieur .ig-section-title { color: #14110c; }

/* ---- Photos des hébergements ---- */
.ig-card-photo {
    display: block;
    width: calc(100% + 2 * clamp(1.4rem, 3vw, 2rem));
    margin: calc(-1 * clamp(1.4rem, 3vw, 2rem)) calc(-1 * clamp(1.4rem, 3vw, 2rem)) 1.2rem;
    height: 190px;
    object-fit: cover;
    border-radius: 1.1rem 1.1rem 0 0;
    background: var(--ig-fond-2);
}
/* Cadre d'attente : même encombrement que la photo, pour que la grille ne
   saute pas le jour où l'image arrive. */
.ig-photo-attente {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(var(--ig-glow), 0.2);
}
.ig-photo-attente span {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ig-texte-soft);
    opacity: 0.75;
}

/* ---- Annonce de mise en location ----
   L'ancienne pastille comprimait la phrase sur trois lignes en la coupant
   n'importe où. Un bandeau pleine largeur la garde lisible d'un trait. */
.ig-annonce {
    max-width: 40rem;
    margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    color: var(--ig-texte);
    background: color-mix(in srgb, var(--ig-fond-2) 85%, var(--ig-dore) 8%);
    border: 1px solid rgba(var(--ig-glow), 0.35);
    border-radius: 0.9rem;
    line-height: 1.5;
}
.ig-annonce strong { color: var(--ig-dore); font-weight: 500; white-space: nowrap; }

/* ---- « Voir le panier » plus lisible ----
   Le lien sous le bouton d'ajout était nettement plus petit que tout ce qui
   l'entoure : on l'aligne sur le corps de texte. */
.ig-pricing .added_to_cart,
.ig-pass-button .added_to_cart,
.woocommerce a.added_to_cart {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--ig-dore);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.ig-pricing .added_to_cart:hover,
.woocommerce a.added_to_cart:hover { color: var(--ig-dore-clair); }

/* ======================================================
   PANIER — retours du 14 août
   ====================================================== */

/* Le carré blanc : WooCommerce insère une image de remplacement quand le
   produit n'a pas de visuel, et un pass n'en a pas. On retire l'image, puis
   on récupère la colonne — la condition sur :has garantit que le jour où un
   vrai visuel sera ajouté, il s'affichera normalement. */
.woocommerce-placeholder { display: none !important; }
.wc-block-cart-item__image:has(.woocommerce-placeholder),
.wc-block-components-order-summary-item__image:has(.woocommerce-placeholder) {
    display: none;
}

/* Le total de ligne était coupé à droite : le montant pouvait se césurer et
   la colonne n'avait pas de largeur réservée. */
.wc-block-cart-item__total,
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-totals-item__value {
    white-space: nowrap;
    text-align: right;
}
.wc-block-cart-items__row .wc-block-cart-item__total { padding-right: 0; }

/* La table du panier reste dans son cadre quelle que soit la largeur. */
.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart table.wc-block-cart-items {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar { min-width: 0; }

/* Sous 700 px le bloc passe en deux colonnes : on laisse le libellé se
   couper plutôt que le montant. */
@media (max-width: 700px) {
    .wc-block-cart-items__row { column-gap: 0.6rem; }
    .wc-block-cart-item__product { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- Écart entre le compte à rebours et le report vidéo ----
   Les deux sections sont devenues voisines après la réorganisation du
   14 août : le rembourrage bas du compte à rebours (6 rem) s'ajoutait à
   celui du bandeau vidéo (jusqu'à 5 rem), creusant plus de 150 px de vide.
   On garde l'air au-dessus du compte à rebours, on supprime le doublon
   entre les deux. */
.ig-cta-band { padding-bottom: 2.5rem; }
.ig-home-video .ig-home-band { padding-top: 0; }
.ig-home-video .ig-section-title { margin-top: 0; }

/* Le bandeau d'infos qui suit la vidéo n'a plus besoin d'un grand écart
   haut non plus. */
.ig-home-infos .ig-home-band { padding-top: clamp(2rem, 4vw, 3rem); }

/* ======================================================
   GRILLE TARIFAIRE — proportions sur grand écran
   ======================================================
   Les cartes sortaient en bandes verticales très étroites : le bloc
   WooCommerce impose ses propres largeurs de colonne aux éléments de la
   liste, ce qui écrasait la grille du thème. On réaffirme la grille et on
   neutralise les largeurs posées sur chaque carte, sinon le texte se coupe
   tous les deux mots.

   La largeur est plafonnée plus bas que le bandeau : trois cartes de ~340 px
   sur une hauteur voisine donnent des encarts carrés plutôt qu'allongés. */
.ig-shop .ig-pricing .wp-block-woocommerce-product-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.6rem;
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    align-items: stretch;
}
.ig-shop .ig-pricing .wp-block-woocommerce-product-template > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
}

/* Contenu resserré : la carte gagne en largeur, elle n'a plus besoin
   d'autant de hauteur. */
.ig-pass-name { font-size: 1.35rem; }
.ig-pass-price .woocommerce-Price-amount { font-size: clamp(2.1rem, 3.4vw, 2.6rem); }
.ig-pass-note { font-size: 0.95rem; margin-bottom: 1.1rem; }
.ig-pass-inclus { font-size: 0.92rem; padding-top: 1.1rem; margin-bottom: 1.4rem; }
.ig-pass-inclus li { margin-bottom: 0.46rem; }

@media (max-width: 1000px) {
    .ig-shop .ig-pricing .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 720px;
    }
}
@media (max-width: 680px) {
    .ig-shop .ig-pricing .wp-block-woocommerce-product-template {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 26rem;
    }
}

/* ---- Cartes d'hébergement : plus larges, donc plus carrées ----
   Avec la photo, quatre colonnes donnaient des cartes hautes et étroites. */
.ig-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ig-card-photo { height: 165px; }