/* =====================================================================
   css/themes.css : décors des thèmes (Noël, Nouvel An, Halloween, Été)
   Les couleurs viennent de l'onglet Admin > Thèmes (variables --th-...).
   ===================================================================== */

/* ---------- Fond de page ---------- */
.zad-theme-fond{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, var(--th-fond1, #fff), var(--th-fond2, #fff)) var(--th-fond1, #fff);
}
/* image du thème (illustration ou image envoyée) */
.zad-theme-image{
  position: absolute; inset: 0;
  background-image: var(--th-image, none);
  background-size: var(--th-image-taille, cover);
  background-repeat: var(--th-image-repet, no-repeat);
  background-position: var(--th-image-pos, center);
}
/* Sur téléphone, le paysage du bas reste discret pour ne pas gêner la lecture */
@media (max-width: 740px){
  .zad-image-bas .zad-theme-image{ background-size: 100% auto; opacity: .7; }
}
/* motif propre à chaque décor (très léger) */
.zad-theme-fond::before{ content: ""; position: absolute; inset: 0; }
/* « voile blanc » réglable pour garder le texte lisible */
.zad-theme-fond::after{ content: ""; position: absolute; inset: 0; background: var(--th-voile, transparent); }

/* Le fond du thème doit se voir derrière les contenus */
body.zad-theme{ background: transparent !important; }
html:has(body.zad-theme){ background: var(--th-fond1, #fff); }

/* ---------- Bandeau ---------- */
body.zad-theme .zad-bandeau{ background: var(--th-bandeau, rgba(255,255,255,.95)); }
body.zad-theme .zad-bandeau .zad-nom{ color: var(--th-bandeau-texte, #424242); }
body.zad-theme .zad-bandeau .zad-menu a:not(.actif){ color: var(--th-bandeau-texte, #3F51B5); }
body.zad-bandeau-sombre .zad-bandeau .zad-deconnexion img{ filter: invert(1); }
@media (max-width: 1024px){
  /* menu déroulant mobile : fond blanc, texte normal */
  body.zad-theme .zad-bandeau .zad-menu{ background: #fff; }
  body.zad-theme .zad-bandeau .zad-menu a:not(.actif){ color: #3F51B5; }
}

/* bande décorative sous le bandeau */
body.zad-theme .zad-bandeau::after{
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 0; pointer-events: none;
}

/* Image perso (ex. guirlande) répétée sur toute la largeur */
body.zad-theme-guirlande .zad-bandeau::after{
  height: 30px;
  background: var(--th-guirlande) repeat-x left top / auto 100%;
}

/* ===================== NOËL ===================== */
.zad-decor-noel .zad-theme-fond::before{
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23c62828' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 18v24M18 30h24M21.5 21.5l17 17M38.5 21.5l-17 17'/%3E%3Cpath d='M90 78v20M80 88h20M83 81l14 14M97 81L83 95'/%3E%3C/g%3E%3Cg stroke='%232e7d32' stroke-opacity='.18' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M92 14v14M85 21h14M87 16l10 10M97 16L87 26'/%3E%3Cpath d='M24 84v16M16 92h16M18.5 86.5l11 11M29.5 86.5l-11 11'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-noel:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 12px;
  background:
    linear-gradient(#556b55, #556b55) 0 2px / 100% 1px no-repeat,
    radial-gradient(circle at 10px 7px, #e53935 3.5px, transparent 4.5px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 30px 7px, #43a047 3.5px, transparent 4.5px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 50px 7px, #fdd835 3.5px, transparent 4.5px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 70px 7px, #1e88e5 3.5px, transparent 4.5px) 0 0 / 80px 12px repeat-x;
  animation: zad-scintille 1.6s ease-in-out infinite alternate;
}
@keyframes zad-scintille{ from{ filter: brightness(.85) saturate(.9); } to{ filter: brightness(1.25) saturate(1.2); } }

/* ===================== NOUVEL AN ===================== */
.zad-decor-nouvel_an .zad-theme-fond::before{
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23c9a227' fill-opacity='.35'%3E%3Cpath d='M30 20l2.4 6.6 6.6 2.4-6.6 2.4L30 38l-2.4-6.6-6.6-2.4 6.6-2.4z'/%3E%3Cpath d='M105 85l1.8 5 5 1.8-5 1.8-1.8 5-1.8-5-5-1.8 5-1.8z'/%3E%3Ccircle cx='100' cy='30' r='1.6'/%3E%3Ccircle cx='60' cy='70' r='1.3'/%3E%3Ccircle cx='25' cy='110' r='1.8'/%3E%3Ccircle cx='75' cy='120' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-nouvel_an:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 4px;
  background: linear-gradient(90deg, #b8860b, #ffd700, #fff3b0, #ffd700, #b8860b, #ffd700, #fff3b0, #ffd700, #b8860b);
  background-size: 200% 100%;
  animation: zad-brille 4s linear infinite;
}
@keyframes zad-brille{ from{ background-position: 0 0; } to{ background-position: -200% 0; } }

/* ===================== HALLOWEEN ===================== */
.zad-decor-halloween .zad-theme-fond::before{
  background:
    radial-gradient(circle at 88% 12%, rgba(255,236,179,.9) 0 46px, rgba(255,236,179,.35) 47px 70px, transparent 120px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%236a1b9a' fill-opacity='.10'%3E%3Cpath d='M40 40c4-6 10-6 12-2 2-4 8-4 12 2-5-1-8 1-12 5-4-4-7-6-12-5z'/%3E%3Cpath d='M110 110c3-5 8-5 10-2 2-3 7-3 10 2-4-1-7 1-10 4-3-3-6-5-10-4z'/%3E%3C/g%3E%3Cg fill='%23ef6c00' fill-opacity='.12'%3E%3Ccircle cx='120' cy='40' r='2'/%3E%3Ccircle cx='30' cy='120' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-halloween:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 5px;
  background: repeating-linear-gradient(135deg, #ef6c00 0 12px, #4a148c 12px 24px);
}

/* ===================== ÉTÉ / CINÉSCÉNIE ===================== */
.zad-decor-ete .zad-theme-fond::before{
  background:
    radial-gradient(circle at 12% 0%, rgba(255,213,79,.55) 0, rgba(255,213,79,0) 380px),
    radial-gradient(circle at 100% 100%, rgba(255,138,101,.25) 0, rgba(255,138,101,0) 420px);
}
body.zad-decor-ete:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 4px;
  background: linear-gradient(90deg, #ff7043, #ffb74d, #ffd54f, #ffb74d, #ff7043);
}

/* ===================== SOIRÉE COCKTAIL ===================== */
.zad-decor-cocktail .zad-theme-fond::before{
  background:
    radial-gradient(circle at 90% 0%, rgba(240,98,146,.30) 0, rgba(240,98,146,0) 380px),
    radial-gradient(circle at 0% 100%, rgba(126,87,194,.20) 0, rgba(126,87,194,0) 420px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ab47bc' stroke-opacity='.18' stroke-width='1.4'%3E%3Cpath d='M20 30h24l-12 14z M32 44v12 M26 56h12'/%3E%3Ccircle cx='110' cy='105' r='9'/%3E%3Cpath d='M101 105h18 M110 96v18'/%3E%3C/g%3E%3Cg fill='%23ff7043' fill-opacity='.16'%3E%3Ccircle cx='100' cy='30' r='3'/%3E%3Ccircle cx='40' cy='115' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-cocktail:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 10px;
  background:
    radial-gradient(circle at 10px 6px, #ffd54f 3px, rgba(255,213,79,.35) 4px, transparent 6px) 0 0 / 40px 10px repeat-x,
    radial-gradient(circle at 30px 6px, #ff8a65 3px, rgba(255,138,101,.35) 4px, transparent 6px) 0 0 / 40px 10px repeat-x,
    linear-gradient(#5d4037, #5d4037) 0 1px / 100% 1px no-repeat;
}

/* ===================== PRINTEMPS ===================== */
.zad-decor-printemps .zad-theme-fond::before{
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='%23f48fb1' fill-opacity='.35'%3E%3Ccircle cx='30' cy='26' r='4'/%3E%3Ccircle cx='36' cy='30' r='4'/%3E%3Ccircle cx='33' cy='37' r='4'/%3E%3Ccircle cx='26' cy='36' r='4'/%3E%3Ccircle cx='24' cy='29' r='4'/%3E%3C/g%3E%3Ccircle cx='30' cy='32' r='2.4' fill='%23ffd54f' fill-opacity='.6'/%3E%3Cg fill='%2381c784' fill-opacity='.35'%3E%3Cellipse cx='96' cy='92' rx='7' ry='3' transform='rotate(-30 96 92)'/%3E%3Cellipse cx='86' cy='30' rx='5' ry='2.4' transform='rotate(25 86 30)'/%3E%3C/g%3E%3Cg fill='%23ce93d8' fill-opacity='.3'%3E%3Ccircle cx='40' cy='100' r='3'/%3E%3Ccircle cx='45' cy='104' r='3'/%3E%3Ccircle cx='40' cy='108' r='3'/%3E%3Ccircle cx='35' cy='104' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-printemps:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 8px;
  background:
    radial-gradient(circle at 8px 4px, #f48fb1 3px, transparent 3.6px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 24px 4px, #ffffff 3px, transparent 3.6px) 0 0 / 48px 8px repeat-x,
    radial-gradient(circle at 40px 4px, #ce93d8 3px, transparent 3.6px) 0 0 / 48px 8px repeat-x,
    linear-gradient(#81c784, #81c784) 0 3px / 100% 2px no-repeat;
}

/* ===================== AUTOMNE ===================== */
.zad-decor-automne .zad-theme-fond::before{
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill-opacity='.28'%3E%3Cpath fill='%23e65100' d='M30 20c10 2 16 10 14 22-12-2-18-10-14-22z'/%3E%3Cpath fill='%23f9a825' d='M110 40c-8 6-9 15-2 24 7-7 8-16 2-24z'/%3E%3Cpath fill='%23bf360c' d='M70 105c10-4 20 0 24 10-10 5-20 1-24-10z'/%3E%3Cpath fill='%23ff8f00' d='M20 120c4-8 12-11 20-7-4 8-12 11-20 7z'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-automne:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 5px;
  background: linear-gradient(90deg, #bf360c, #ef6c00, #f9a825, #8d6e63, #ef6c00, #bf360c);
}

/* ===================== HIVER ===================== */
.zad-decor-hiver .zad-theme-fond::before{
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%2364b5f6' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 18v24M18 30h24M21.5 21.5l17 17M38.5 21.5l-17 17'/%3E%3Cpath d='M90 78v20M80 88h20M83 81l14 14M97 81L83 95'/%3E%3C/g%3E%3Cg stroke='%2390a4ae' stroke-opacity='.22' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M92 14v14M85 21h14M87 16l10 10M97 16L87 26'/%3E%3Cpath d='M24 84v16M16 92h16M18.5 86.5l11 11M29.5 86.5l-11 11'/%3E%3C/g%3E%3C/svg%3E");
}
body.zad-decor-hiver:not(.zad-theme-guirlande) .zad-bandeau::after{
  height: 7px;
  background:
    radial-gradient(ellipse at 10px 0, #ffffff 0 5px, transparent 6px) 0 0 / 20px 7px repeat-x,
    linear-gradient(#bbdefb, #e3f2fd);
}

/* ---------- Animations (neige, confettis...) ---------- */
.zad-anim{
  position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden;
}
.zad-anim span{ position: absolute; top: -40px; will-change: transform; }

.zad-anim-neige span{
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px rgba(96,125,139,.7);
  animation: zad-tombe linear infinite;
}
@keyframes zad-tombe{
  0%  { transform: translate3d(0, -40px, 0); }
  50% { transform: translate3d(var(--dx, 20px), 50vh, 0); }
  100%{ transform: translate3d(0, 105vh, 0); }
}

.zad-anim-confettis span{
  width: 7px; height: 12px; border-radius: 2px; opacity: .85;
  animation: zad-confetti linear infinite;
}
@keyframes zad-confetti{
  0%  { transform: translate3d(0, -40px, 0) rotate(0deg); }
  100%{ transform: translate3d(var(--dx, 30px), 105vh, 0) rotate(720deg); }
}

.zad-anim-chauves_souris span{
  top: auto; left: -60px; width: 34px; height: 18px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cpath fill='%233b1a4a' d='M17 6c1-2 2-3 2-3l.6 2.2C21 4 23 3 25 1c0 3 2 5 9 6-4 0-6 2-7 5-1-2-3-3-5-2-1 1-2 3-5 5-3-2-4-4-5-5-2-1-4 0-5 2-1-3-3-5-7-5 7-1 9-3 9-6 2 2 4 3 5.4 4.2L15 3s1 1 2 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: zad-vole linear infinite;
}
@keyframes zad-vole{
  0%  { transform: translate3d(0, 0, 0) scaleY(1); }
  25% { transform: translate3d(28vw, -30px, 0) scaleY(.6); }
  50% { transform: translate3d(55vw, 10px, 0) scaleY(1); }
  75% { transform: translate3d(82vw, -20px, 0) scaleY(.6); }
  100%{ transform: translate3d(112vw, 0, 0) scaleY(1); }
}

.zad-anim-lucioles span{
  top: auto; width: 6px; height: 6px; border-radius: 50%;
  background: #ffeb3b; box-shadow: 0 0 8px 3px rgba(255,214,0,.7);
  animation: zad-luciole ease-in-out infinite alternate;
}
@keyframes zad-luciole{
  0%  { transform: translate3d(0, 0, 0); opacity: .1; }
  50% { opacity: .9; }
  100%{ transform: translate3d(var(--dx, 40px), var(--dy, -60px), 0); opacity: .2; }
}

/* pétales de fleurs qui tombent en tournoyant */
.zad-anim-petales span{
  width: 10px; height: 7px; border-radius: 70% 0 70% 0; opacity: .8;
  animation: zad-confetti linear infinite;
}
/* feuilles d'automne */
.zad-anim-feuilles span{
  width: 16px; height: 16px; opacity: .85;
  background: center / contain no-repeat;
  animation: zad-confetti linear infinite;
}
/* papillons qui volettent */
.zad-anim-papillons span{
  top: auto; width: 22px; height: 18px; opacity: .8;
  background: center / contain no-repeat;
  animation: zad-papillon ease-in-out infinite alternate;
}
.zad-anim-papillons span::after{ content: none; }
@keyframes zad-papillon{
  0%  { transform: translate3d(0, 0, 0) scaleX(1); }
  25% { transform: translate3d(calc(var(--dx, 60px) * .3), -30px, 0) scaleX(.4); }
  50% { transform: translate3d(calc(var(--dx, 60px) * .6), 10px, 0) scaleX(1); }
  75% { transform: translate3d(calc(var(--dx, 60px) * .8), -20px, 0) scaleX(.4); }
  100%{ transform: translate3d(var(--dx, 60px), var(--dy, -40px), 0) scaleX(1); }
}

/* bulles de cocktail qui remontent */
.zad-anim-bulles span{
  top: auto; bottom: -30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.12) 22%);
  box-shadow: 0 0 2px rgba(171,71,188,.6);
  animation: zad-bulle linear infinite;
}
@keyframes zad-bulle{
  0%  { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate3d(var(--dx, 20px), -55vh, 0); }
  90% { opacity: .7; }
  100%{ transform: translate3d(0, -110vh, 0); opacity: 0; }
}

/* Personnes qui ont demandé moins d'animations (réglage du téléphone / PC) */
@media (prefers-reduced-motion: reduce){
  .zad-anim{ display: none; }
  body.zad-theme .zad-bandeau::after{ animation: none !important; }
}

/* Bandeau d'aperçu (admin) */
.zad-apercu-theme{
  position: relative; z-index: 79;
  background: #263238; color: #fff; font: 600 13px Arial, sans-serif;
  padding: 8px 12px; text-align: center;
}
.zad-apercu-theme a{ color: #ffd54f; margin-left: 10px; }