/*
Theme Name: CFPC Automne
Description: Habillage de fin d'automne 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 de saison (bandeau, guirlande de feuilles de chêne et de glands givrés, feuilles et premiers flocons qui tombent). 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 d'automne.
Template: cfpc-site
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cfpc
*/

/* ==========================================================================
   Palette de saison, accordée à la charte CFPC (Encre, Argile, Blé mûr, Sauge)
   ========================================================================== */
:root{
  --au-rouille: #A4471C;
  --au-rouille-ink: #8A3A16;      /* texte sur fond clair : contraste AA */
  --au-ocre: #E0A84A;
  --au-nuit: #14213D;             /* = Encre de la charte */
  --au-givre: #DCE5EB;
  --au-calcaire: #EDEAE1;
  --au-blanc: #FAF9F5;
}

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

/* ---------- Bandeau saisonnier ---------- */
.au-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, #14213D 0%, #2E4A5C 50%, #6B3A22 100%);
  color: var(--au-blanc);
  font: 500 15px/1.4 "Work Sans", system-ui, sans-serif;
  text-align: center;
  overflow: hidden;
}
.au-bandeau[hidden]{ display: none; }
.au-bandeau__givre{
  position: absolute; left: 14px; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  color: rgba(250,249,245,.22); pointer-events: none;
}
.au-bandeau__feuille{ width: 15px; height: 25px; flex: none; color: var(--au-ocre); transform: rotate(-24deg); }
.au-bandeau__texte{ margin: 0; }
.au-bandeau__lien{
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--au-ocre); color: var(--au-nuit) !important;
  font-weight: 600; font-size: 14px; text-decoration: none !important;
}
.au-bandeau__lien:hover, .au-bandeau__lien:focus-visible{ background: var(--au-blanc); }
.au-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(--au-blanc); cursor: pointer; font-size: 20px; line-height: 1;
}
.au-bandeau__fermer:hover{ background: rgba(250,249,245,.14); }
.au-bandeau__fermer:focus-visible, .au-bandeau__lien:focus-visible{ outline: 2px solid var(--au-ocre); outline-offset: 2px; }
.au-bandeau--bas{ position: fixed; left: 0; right: 0; bottom: 0; }

/* ---------- Accents de la charte, passés en rouille ---------- */
.cfpc-automne ::selection{ background: #F2DCC8; color: var(--au-nuit); }

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

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

/* Fil d'Ariane : séparateurs rouille */
.cfpc-automne .cfpc-fil li + li::before{ color: var(--au-rouille-ink); }

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

/* ---------- Guirlande de feuilles en haut de page (réglage par défaut) ---------- */
.au-guirlande{
  height: 60px; margin: 0;
  background:
    url("assets/guirlande-automne.svg") repeat-x left bottom / auto 60px,
    linear-gradient(180deg, var(--au-givre) 0%, var(--au-calcaire) 100%);
  pointer-events: none;
}

/* ---------- Variante : guirlande posée sur le haut du pied de page ---------- */
.au-guirlande-bas .site-footer,
.au-guirlande-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. */
.au-guirlande-bas .site-footer::before,
.au-guirlande-bas .elementor-location-footer::before{
  content: "" !important; display: block !important; position: absolute !important;
  left: 0; right: 0; width: 100% !important; top: -58px; height: 60px; z-index: 5;
  background: url("assets/guirlande-automne.svg") repeat-x left bottom / auto 60px;
  pointer-events: none; clear: none;
}
/* Si les deux pieds de page coexistent, une seule guirlande */
.au-guirlande-bas .elementor-location-footer .site-footer::before{ display: none !important; }

/* ---------- Feuilles et flocons qui tombent ---------- */
.au-deco{ position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.au-chute{
  position: absolute; top: -60px; left: var(--x); width: var(--w); color: var(--c, #A4471C);
  animation: au-tombe var(--d) linear var(--delai) infinite; will-change: transform;
}
.au-chute span{ display: block; animation: au-balance 4.2s ease-in-out infinite alternate; }
.au-chute svg{ display: block; width: 100%; height: auto; }
.au-chute--feuille{ opacity: .88; }
.au-chute--feuille svg{ animation: au-virevolte 5.5s linear infinite; }
.au-chute--flocon{ color: #86A2B6; opacity: .85; }
.au-chute--flocon span{ animation-duration: 3.4s; }
.au-chute--flocon svg{ animation: au-tourne 9s linear infinite; }
.au-chute:nth-child(2n) span{ animation-delay: -1.8s; }
.au-chute:nth-child(3n) svg{ animation-direction: reverse; }
@keyframes au-tombe{ from{ transform: translateY(0); } to{ transform: translateY(calc(100vh + 120px)); } }
@keyframes au-balance{ from{ transform: translateX(-26px) rotate(-14deg); } to{ transform: translateX(26px) rotate(14deg); } }
@keyframes au-virevolte{ from{ transform: rotate3d(.35, 1, .15, 0deg); } to{ transform: rotate3d(.35, 1, .15, 360deg); } }
@keyframes au-tourne{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* Écrans étroits : décor allégé */
@media (max-width: 767px){
  .au-chute--sup, .au-bandeau__givre, .au-bandeau__feuille{ display: none; }
  .au-bandeau{ font-size: 14px; padding-right: 46px; }
  .au-guirlande{ height: 44px; background-size: auto 44px, auto; }
  .au-guirlande-bas .site-footer::before,
  .au-guirlande-bas .elementor-location-footer::before{ top: -42px; height: 44px; background-size: auto 44px; }
}

/* Animations réduites : rien ne tombe */
@media (prefers-reduced-motion: reduce){
  .au-deco{ display: none; }
}

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