/* Gabarit « Journée festive ». Couleurs noir et or par défaut, nuit et citrouille avec le thème Halloween. Les styles communs viennent de site.css. */
:root { --nuit: var(--noir); --violet: #2a0407; --citrouille: var(--or); --citrouille-fonce: var(--or-fonce); --citrouille-halo: rgba(234,196,20,.28); }
.theme-halloween { --nuit: #120a1c; --violet: #3b1557; --citrouille: #ff7a1a; --citrouille-fonce: #e0600a; --citrouille-halo: rgba(255,122,26,.28); }

/* Hero nocturne */
.hw-hero { position: relative; overflow: hidden; color: var(--blanc); padding: clamp(2.6rem, 6vw, 4.6rem) 0; background: radial-gradient(ellipse at 78% 18%, var(--citrouille-halo), transparent 45%), linear-gradient(160deg, var(--nuit) 0%, var(--violet) 100%); }
.theme-halloween .hw-hero { background: radial-gradient(ellipse at 78% 18%, var(--citrouille-halo), transparent 45%), linear-gradient(160deg, var(--nuit) 0%, var(--violet) 70%, #5a1f4a 100%); }
.hw-lune { position: absolute; top: clamp(1.5rem, 5vw, 3rem); right: clamp(1rem, 8vw, 7rem); width: clamp(90px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4d6, #ffd27a 60%, #f0a93a); box-shadow: 0 0 80px rgba(255,200,110,.45); opacity: .9; }
.hw-deco { position: absolute; color: rgba(255,255,255,.14); font-size: clamp(1.4rem, 3vw, 2.4rem); animation: flotte 6s ease-in-out infinite; }
.hw-deco--1 { top: 18%; left: 55%; }
.hw-deco--2 { bottom: 16%; right: 12%; animation-delay: -2s; color: rgba(255,122,26,.3); }
.hw-deco--3 { top: 62%; left: 46%; animation-delay: -4s; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.hw-hero__inner { position: relative; display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
.hw-hero__inner > * { min-width: 0; }
@media (min-width: 940px) { .hw-hero__inner { grid-template-columns: 1.5fr 1fr; } }
.hw-kicker { display: inline-flex; align-items: center; gap: .5rem; background: var(--citrouille); color: var(--nuit); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: .3rem .75rem; }
.hw-hero h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); margin-top: 1rem; overflow-wrap: break-word; }
.hw-hero h1 span { display: block; color: var(--citrouille); text-shadow: 0 0 30px rgba(255,122,26,.45); }
.hw-hero__sub { margin-top: 1rem; font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255,255,255,.88); }
.hw-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.btn--citrouille { background: var(--citrouille); color: var(--nuit); }
.btn--citrouille:hover { background: var(--citrouille-fonce); color: var(--nuit); }
.btn--fantome { border: 2px solid rgba(255,255,255,.55); color: var(--blanc); }
.btn--fantome:hover { border-color: var(--citrouille); color: var(--citrouille); }
@media (max-width: 599px) { .hw-cta .btn { flex: 1 1 100%; padding: .85rem .5rem; font-size: .88rem; } }
.hw-prix { background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); border-radius: var(--radius); padding: 1.6rem; }
.hw-prix .montant { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--citrouille); }
.hw-prix .montant small { font-size: 1.1rem; color: var(--blanc); }
.hw-prix ul { list-style: none; margin-top: 1rem; display: grid; gap: .45rem; font-size: .93rem; }
.hw-prix li i { color: var(--citrouille); width: 1.3em; }
.hw-tarifs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.hw-tarif { background: rgba(0,0,0,.25); border-radius: 8px; padding: .8rem; text-align: center; }
.hw-tarif b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--citrouille); }
.hw-tarif span { font-size: .82rem; font-weight: 700; }
.hw-prix > p { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: 1rem; }
.hw-famille { margin-top: 1.4rem; background: var(--violet); color: var(--blanc); border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; gap: 1rem; align-items: center; }
.hw-famille i { font-size: 1.8rem; color: var(--citrouille); flex-shrink: 0; }
.hw-famille p { font-size: .95rem; }
.hw-prix .jauge { height: 8px; background: rgba(255,255,255,.15); border-radius: 99px; margin-top: .45rem; overflow: hidden; }
.hw-prix .jauge span { display: block; height: 100%; background: var(--citrouille); border-radius: 99px; }

/* Bande infos */
.hw-bande { background: var(--citrouille); color: var(--nuit); }
.hw-bande ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .hw-bande ul { grid-template-columns: repeat(4, 1fr); } }
.hw-bande li { text-align: center; padding: 1.05rem .6rem; }
.hw-bande li + li { border-left: 1px solid rgba(18,10,28,.18); }
@media (max-width: 759px) { .hw-bande li:nth-child(3) { border-left: none; } .hw-bande li:nth-child(n+3) { border-top: 1px solid rgba(18,10,28,.18); } }
.hw-bande b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.hw-bande span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }


/* Programme : frise */
.frise { list-style: none; margin-top: 1.8rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .frise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .frise { grid-template-columns: repeat(3, 1fr); } }
.etape { background: var(--nuit); color: var(--blanc); border-radius: var(--radius); padding: 1.3rem 1.2rem; position: relative; overflow: hidden; transition: var(--transition); }
.etape:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18,10,28,.35); }
.etape::after { content: ''; position: absolute; inset: auto 0 0; height: 4px; background: var(--citrouille); }
.etape__ico { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255,122,26,.16); color: var(--citrouille); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.etape__h { display: block; margin-top: .9rem; font-weight: 800; font-size: .8rem; color: var(--citrouille); letter-spacing: .04em; }
.etape h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; margin: .2rem 0 .45rem; }
.etape p { font-size: .88rem; color: rgba(255,255,255,.78); }

.hw-hero__tag { margin-top: 1rem; font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--citrouille); }
.hw-hero__sub { margin-top: .5rem !important; }

/* Programme par temps forts */
.temps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; padding: 1.3rem; border-radius: var(--radius); background: var(--blanc); box-shadow: var(--shadow-card); border-left: 5px solid var(--violet); }
@media (min-width: 900px) { .temps { grid-template-columns: 300px 1fr; gap: 2rem; padding: 1.6rem; } }
.temps--halloween { background: linear-gradient(160deg, var(--nuit), var(--violet)); color: var(--blanc); border-left-color: var(--citrouille); }
.temps__tete { display: flex; align-items: center; gap: .9rem; align-self: start; }
.temps__ico { flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--nuit); color: var(--citrouille); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.temps--halloween .temps__ico { background: var(--citrouille); color: var(--nuit); }
.temps__tete small { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--citrouille-fonce); }
.temps--halloween .temps__tete small { color: var(--citrouille); }
.temps__tete h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; line-height: 1.1; }
.temps__liste { list-style: none; display: grid; gap: 1rem; }
.temps__liste li { display: flex; gap: 1rem; align-items: flex-start; }
.temps__h { flex-shrink: 0; min-width: 4.2rem; text-align: center; font-weight: 800; font-size: .9rem; background: var(--gris-05); color: var(--nuit); border-radius: 6px; padding: .3rem .5rem; }
.temps--halloween .temps__h { background: rgba(255,122,26,.18); color: var(--citrouille); }
.temps__liste strong { display: block; font-size: 1rem; }
.temps__liste p { font-size: .92rem; color: var(--gris-80); margin-top: .2rem; }
.temps--halloween .temps__liste p { color: rgba(255,255,255,.8); }
.temps__bonbons { grid-column: 1 / -1; display: flex; gap: .7rem; align-items: center; background: rgba(255,122,26,.14); border-radius: 8px; padding: .8rem 1rem; font-size: .92rem; font-weight: 600; }
.temps__bonbons i { color: var(--citrouille); font-size: 1.2rem; }

/* Bandeau de conclusion */
.hw-final { background: linear-gradient(160deg, var(--violet), var(--nuit)); color: var(--blanc); text-align: center; }
.hw-final i { font-size: 2.4rem; color: var(--citrouille); animation: flotte 6s ease-in-out infinite; }
.hw-final h2 { margin-top: .6rem; }
.hw-final p { color: rgba(255,255,255,.88); font-size: clamp(1rem, 2vw, 1.12rem); margin: .4rem auto 1.4rem; }

/* Infos pratiques */
.pratique { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 640px) { .pratique { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pratique { grid-template-columns: repeat(4, 1fr); } }
.prat { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.3rem; border-top: 4px solid var(--violet); }
.prat i { font-size: 1.5rem; color: var(--citrouille); }
.prat h3 { font-size: 1rem; font-weight: 800; margin: .6rem 0 .3rem; }
.prat p { font-size: .9rem; color: var(--gris-80); }

@media (prefers-reduced-motion: reduce) { .hw-deco { animation: none; } .etape:hover { transform: none; } }

/* Formulaire aux couleurs du thème (structure commune dans site.css) */
.page-journee .fieldset > h3 .num { background: var(--citrouille); color: var(--nuit); }
.page-journee .champ input:focus, .page-journee .champ select:focus, .page-journee .champ textarea:focus { border-color: var(--citrouille); }
.page-journee .enfant { border-left-color: var(--citrouille); }
.page-journee .ajouter { background: var(--nuit); }
.page-journee .ajouter:hover { background: var(--violet); }
.page-journee .autorisations input { accent-color: var(--citrouille); }
.page-journee .recap { background: var(--nuit); }
.page-journee .recap__total small { color: var(--citrouille); }
.page-journee .envoyer { background: var(--citrouille); color: var(--nuit); display: flex; align-items: center; justify-content: center; gap: .6rem; }
.page-journee .envoyer:hover { background: var(--citrouille-fonce); }
.page-journee .contact-stage { border-left-color: var(--citrouille); }
.page-journee .contact-stage a { color: var(--citrouille-fonce); }