/*
Theme Name: CFPC Halloween
Description: Habillage saisonnier du thème CFPC Campus du Haut Berry : même mise en page, mêmes menus, mêmes couleurs de rubriques, avec un décor d'Halloween (bandeau, chauves-souris, araignée, rangée de citrouilles en haut de page). Page d'accueil : « CFPC accueil » tant que ce thème est actif. Retour automatique au thème CFPC à la date de fin choisie dans Apparence → Personnaliser → Décor Halloween.
Template: cfpc-site
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cfpc
*/

/* ==========================================================================
   Palette saisonnière, accordée à la charte CFPC (Encre, Argile, Blé mûr, Sauge)
   ========================================================================== */
:root{
  --hw-citrouille: #D9731A;
  --hw-citrouille-ink: #A4510F;   /* texte orange sur fond clair : contraste AA */
  --hw-citrouille-soft: #F7E1C8;
  --hw-nuit: #14213D;             /* = Encre de la charte */
  --hw-crepuscule: #33244A;
  --hw-lueur: #FCE3A4;
  --hw-blanc: #FAF9F5;
}

/* Tout le décor ne s'applique que pendant la période (classe ajoutée par functions.php). */

/* ---------- Bandeau saisonnier ---------- */
.hw-bandeau{
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 10px 52px 10px 16px;
  background: linear-gradient(100deg, var(--hw-nuit) 0%, var(--hw-crepuscule) 100%);
  color: var(--hw-blanc);
  font: 500 15px/1.4 "Work Sans", system-ui, sans-serif;
  text-align: center;
  overflow: hidden;
}
.hw-bandeau[hidden]{ display: none; }
.hw-bandeau__toile{
  position: absolute; left: 0; top: 0; width: 70px; height: 70px; color: rgba(250,249,245,.28); pointer-events: none;
}
.hw-bandeau__citrouille{ width: 22px; height: 22px; flex: none; }
.hw-bandeau__texte{ margin: 0; }
.hw-bandeau__lien{
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--hw-citrouille); color: var(--hw-nuit) !important;
  font-weight: 600; font-size: 14px; text-decoration: none !important;
}
.hw-bandeau__lien:hover, .hw-bandeau__lien:focus-visible{ background: var(--hw-lueur); }
.hw-bandeau__fermer{
  all: unset; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  color: var(--hw-blanc); cursor: pointer; font-size: 20px; line-height: 1;
}
.hw-bandeau__fermer:hover{ background: rgba(250,249,245,.14); }
.hw-bandeau__fermer:focus-visible, .hw-bandeau__lien:focus-visible{ outline: 2px solid var(--hw-lueur); outline-offset: 2px; }
.hw-bandeau--bas{ position: fixed; left: 0; right: 0; bottom: 0; }

/* ---------- Accents de la charte, passés en orange citrouille ---------- */
.cfpc-halloween ::selection{ background: var(--hw-citrouille-soft); color: var(--hw-nuit); }

/* Filet sous l'en-tête (en-tête du thème et en-tête Elementor) */
.cfpc-halloween .site-header{ border-bottom-color: var(--hw-citrouille) !important; }
.cfpc-halloween .elementor-location-header .elementor-top-section:not(:has(.cfpc-fil)){ border-bottom-color: var(--hw-citrouille) !important; }

/* Motif « sillons » : en orange (version thème et version Elementor) */
.cfpc-halloween .sillons{ color: var(--hw-citrouille) !important; }
.cfpc-halloween svg[viewBox="0 0 1200 46"] path{ stroke: var(--hw-citrouille); opacity: .75; }

/* Fil d'Ariane : séparateurs orange */
.cfpc-halloween .cfpc-fil li + li::before{ color: var(--hw-citrouille-ink); }

/* Filet du pied de page */
.cfpc-halloween .site-footer{ border-top-color: var(--hw-citrouille) !important; }
.cfpc-halloween .elementor-location-footer .elementor-top-section:nth-child(2){ border-top-color: var(--hw-citrouille) !important; }

/* ---------- Rangée de citrouilles en haut de page (réglage par défaut) ---------- */
.hw-citrouilles{
  height: 56px; margin: 0;
  background: var(--hw-calcaire, #EDEAE1) url("assets/citrouilles.svg") repeat-x left bottom / auto 56px;
  pointer-events: none;
}

/* ---------- Variante : rangée posée sur le haut du pied de page ---------- */
.hw-citrouilles-bas .site-footer,
.hw-citrouilles-bas .elementor-location-footer{ position: relative; overflow: visible !important; }
/* Elementor Pro pose déjà un ::before « clearfix » (display: table, largeur nulle) sur le pied de page :
   on le remplace entièrement, d'où display, width et les !important. */
.hw-citrouilles-bas .site-footer::before,
.hw-citrouilles-bas .elementor-location-footer::before{
  content: "" !important; display: block !important; position: absolute !important;
  left: 0; right: 0; width: 100% !important; top: -54px; height: 56px; z-index: 5;
  background: url("assets/citrouilles.svg") repeat-x left bottom / auto 56px;
  pointer-events: none; clear: none;
}
/* Si les deux pieds de page coexistent, un seul carré */
.hw-citrouilles-bas .elementor-location-footer .site-footer::before{ display: none !important; }

/* ---------- Chauves-souris ---------- */
.hw-deco{ position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.hw-vol{ position: absolute; left: 0; width: 64px; color: var(--hw-crepuscule); opacity: .9;
  animation: hw-traverse 28s linear infinite; will-change: transform; transform: translateX(-80px); }
.hw-vol span{ display: block; animation: hw-ondule 3.2s ease-in-out infinite; }
.hw-vol svg{ display: block; width: 100%; height: auto; transform-origin: 50% 40%; animation: hw-battement .32s ease-in-out infinite alternate; }
.hw-vol--1{ top: 20vh; animation-delay: 1.5s; }
.hw-vol--2{ top: 34vh; width: 46px; animation-duration: 34s; animation-delay: 9s; }
.hw-vol--3{ top: 14vh; width: 54px; animation-duration: 31s; animation-delay: 17s; }
.hw-vol--2 span{ animation-duration: 2.6s; }
.hw-vol--3 span{ animation-duration: 3.8s; }
@keyframes hw-traverse{
  0%   { transform: translateX(-80px); }
  38%  { transform: translateX(calc(100vw + 80px)); }
  100% { transform: translateX(calc(100vw + 80px)); }
}
@keyframes hw-ondule{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-26px); } }
@keyframes hw-battement{ from{ transform: scaleY(1); } to{ transform: scaleY(.45); } }

/* ---------- Araignée qui descend sous l'en-tête ---------- */
.hw-araignee{ position: absolute; top: 0; right: 7vw; width: 30px; display: flex; flex-direction: column; align-items: center;
  animation: hw-descend 9s ease-in-out infinite; transform-origin: top center; }
.hw-araignee__fil{ width: 1px; height: 190px; background: rgba(20,33,61,.45); }
.hw-araignee svg{ width: 30px; height: auto; color: var(--hw-nuit); margin-top: -2px; }
@keyframes hw-descend{
  0%,100%{ transform: translateY(-40px) rotate(0deg); }
  45%    { transform: translateY(40px) rotate(2deg); }
  60%    { transform: translateY(32px) rotate(-2deg); }
}

/* Écrans étroits : décor allégé */
@media (max-width: 767px){
  .hw-araignee, .hw-vol--2, .hw-vol--3, .hw-bandeau__citrouille{ display: none; }
  .hw-bandeau{ font-size: 14px; padding-right: 46px; }
  .hw-citrouilles{ height: 42px; background-size: auto 42px; }
  .hw-citrouilles-bas .site-footer::before,
  .hw-citrouilles-bas .elementor-location-footer::before{ top: -40px; height: 42px; background-size: auto 42px; }
}

/* Animations réduites : décor immobile, chauves-souris retirées */
@media (prefers-reduced-motion: reduce){
  .hw-vol{ display: none; }
  .hw-araignee{ animation: none; transform: none; }
}

/* Impression : aucun décor */
@media print{
  .hw-bandeau, .hw-deco, .hw-citrouilles{ display: none !important; }
  .hw-citrouilles-bas .site-footer::before,
  .hw-citrouilles-bas .elementor-location-footer::before{ display: none !important; }
}