/* ==========================================================
   MA CHANSON PERSO - Themes saisonniers
   Charge uniquement pendant un theme (voir includes/themes.php).
   Chaque theme ne change que les accents : couleurs, lueurs de fond,
   petite decoration discrete et bandeau. Le reste du site reste identique.
   ========================================================== */

/* ---------- Bandeau ---------- */
.theme-bar {
  background: var(--degrade);
  color: #1a0d14;
  font-size: 0.92rem;
  font-weight: 600;
  position: relative;
  z-index: 101;
}
.theme-bar[hidden] { display: none; }
.theme-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 8px; padding-bottom: 8px; padding-right: 44px; text-align: center;
  position: relative;
}
.theme-bar p { margin: 0; line-height: 1.35; }
.theme-ico { width: 20px; height: 20px; flex: none; color: #1a0d14; }
.theme-bar-cta {
  flex: none; background: #1a0d14; color: #fff; text-decoration: none;
  padding: 5px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  white-space: nowrap;
}
.theme-bar-cta:hover { background: #000; }
.theme-bar-close {
  position: absolute; right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: #1a0d14; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
}
.theme-bar-close:hover { background: rgba(0, 0, 0, 0.12); }
.theme-bar-preview {
  display: inline-block; background: rgba(0, 0, 0, 0.18); border-radius: 6px;
  padding: 1px 8px; margin-right: 6px; font-weight: 700;
}
@media (max-width: 700px) {
  .theme-bar-inner { flex-wrap: wrap; gap: 6px 10px; padding-right: 40px; padding-top: 6px; padding-bottom: 6px; }
  .theme-bar { font-size: 0.82rem; }
  .theme-bar p { line-height: 1.3; }
  .theme-bar-cta { display: none; } /* le bouton fixe et l'en-tete portent deja l'appel a l'action */
  .theme-ico { display: none; }
}

/* ---------- Decor commun : couche fixe, sans effet sur les clics ---------- */
body[class*="theme-"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
body[class*="theme-"] main, body[class*="theme-"] .site-footer { position: relative; z-index: 1; }

/* ---------- HALLOWEEN : orange et violet ---------- */
body.theme-halloween {
  --rose: #ff7a1a; --soleil: #ffb938; --lavande: #b9a6d6;
  --degrade: linear-gradient(100deg, #ff6a00 0%, #ff9a1f 55%, #ffc24a 100%);
  --nuit: #0b0716; --nuit-2: #150d26;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(255, 122, 26, 0.16), transparent 60%),
    radial-gradient(1100px 900px at -15% 35%, rgba(120, 50, 230, 0.22), transparent 60%),
    radial-gradient(800px 600px at 110% 75%, rgba(255, 140, 30, 0.1), transparent 60%),
    linear-gradient(180deg, #170c2a 0%, var(--nuit) 28%);
  background-attachment: fixed;
}
body.theme-halloween .btn-gold { box-shadow: 0 4px 24px rgba(255, 122, 26, 0.4); }
body.theme-halloween .btn-gold:hover { box-shadow: 0 8px 32px rgba(255, 122, 26, 0.55); }
body.theme-halloween .site-header { background: rgba(11, 7, 22, 0.82); }
body.theme-halloween::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 122, 26, 0.1) 0, transparent 22%),
    radial-gradient(circle at 90% 60%, rgba(150, 80, 255, 0.1) 0, transparent 26%);
  animation: th-pulse 7s ease-in-out infinite alternate;
}
@keyframes th-pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* ---------- HALLOWEEN : citrouille du bandeau ---------- */
.theme-ico-pumpkin { width: 32px; height: 32px; margin: -5px 0; color: inherit; filter: drop-shadow(0 1px 2px rgba(26, 13, 20, 0.35)); }
.theme-ico-pumpkin .pk-face { animation: th-bougie 3.4s ease-in-out infinite alternate; }
@keyframes th-bougie { 0% { fill: #ffd43b; } 55% { fill: #ffe873; } 100% { fill: #fff3a8; } }

/* ---------- NOEL : rouge, or et vert sapin, neige legere ---------- */
body.theme-noel {
  --rose: #ff5566; --soleil: #f5d37a; --lavande: #a9c4b8;
  --degrade: linear-gradient(100deg, #e8334a 0%, #f0705a 50%, #f5c46a 100%);
  --nuit: #08140f; --nuit-2: #0f221a;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(232, 51, 74, 0.12), transparent 60%),
    radial-gradient(1100px 900px at -15% 35%, rgba(20, 130, 85, 0.2), transparent 60%),
    radial-gradient(800px 600px at 110% 75%, rgba(245, 196, 106, 0.08), transparent 60%),
    linear-gradient(180deg, #0f241b 0%, var(--nuit) 28%);
  background-attachment: fixed;
}
body.theme-noel .btn-gold { box-shadow: 0 4px 24px rgba(232, 51, 74, 0.38); }
body.theme-noel .btn-gold:hover { box-shadow: 0 8px 32px rgba(232, 51, 74, 0.52); }
body.theme-noel .site-header { background: rgba(8, 20, 15, 0.84); }
body.theme-noel::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 2px, transparent 3px);
  background-size: 190px 230px, 270px 310px, 410px 450px;
  background-position: 0 0, 90px 120px, 40px 200px;
  animation: th-neige 28s linear infinite;
  opacity: 0.55;
}
@keyframes th-neige {
  to { background-position: 30px 230px, 60px 430px, 10px 650px; }
}

/* ---------- SAINT-VALENTIN : rose profond et framboise ---------- */
body.theme-saint-valentin {
  --rose: #ff3d7f; --soleil: #ff9aa8; --lavande: #d1a5bb;
  --degrade: linear-gradient(100deg, #ff2d6f 0%, #ff5e8a 55%, #ff9aa8 100%);
  --nuit: #14060f; --nuit-2: #210b19;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(255, 45, 111, 0.18), transparent 60%),
    radial-gradient(1100px 900px at -15% 35%, rgba(190, 20, 90, 0.2), transparent 60%),
    radial-gradient(800px 600px at 110% 75%, rgba(255, 154, 168, 0.08), transparent 60%),
    linear-gradient(180deg, #230a1a 0%, var(--nuit) 28%);
  background-attachment: fixed;
}
body.theme-saint-valentin .btn-gold { box-shadow: 0 4px 24px rgba(255, 45, 111, 0.4); }
body.theme-saint-valentin .btn-gold:hover { box-shadow: 0 8px 32px rgba(255, 45, 111, 0.55); }
body.theme-saint-valentin .site-header { background: rgba(20, 6, 15, 0.82); }
body.theme-saint-valentin::before {
  background-image: 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='%23ff3d7f' fill-opacity='.35'%3E%3Cpath d='M30 52s-12-7.800-12-16.600C18 31 21.300 28 25 28c2.300 0 4.200 1.200 5 3 .8-1.800 2.700-3 5-3 3.700 0 7 3 7 7.400C42 44.200 30 52 30 52z'/%3E%3Cpath transform='translate(88 70) scale(.7)' d='M30 52s-12-7.800-12-16.600C18 31 21.300 28 25 28c2.300 0 4.200 1.200 5 3 .8-1.800 2.700-3 5-3 3.700 0 7 3 7 7.400C42 44.200 30 52 30 52z'/%3E%3Cpath transform='translate(40 100) scale(.5)' d='M30 52s-12-7.800-12-16.600C18 31 21.300 28 25 28c2.300 0 4.200 1.200 5 3 .8-1.800 2.700-3 5-3 3.700 0 7 3 7 7.400C42 44.200 30 52 30 52z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: th-coeurs 60s linear infinite;
  opacity: 0.35;
}
@keyframes th-coeurs { to { background-position: 0 -160px; } }

/* ---------- FETE DES MERES : rose poudre, peche et lavande ---------- */
body.theme-fete-des-meres {
  --rose: #ff7eb6; --soleil: #ffc9a8; --lavande: #c7b3e6;
  --degrade: linear-gradient(100deg, #ff7eb6 0%, #ffa0a8 55%, #ffd2a0 100%);
  --nuit: #140d22; --nuit-2: #1d1432;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(255, 126, 182, 0.15), transparent 60%),
    radial-gradient(1100px 900px at -15% 35%, rgba(150, 110, 230, 0.2), transparent 60%),
    radial-gradient(800px 600px at 110% 75%, rgba(255, 201, 168, 0.1), transparent 60%),
    linear-gradient(180deg, #1f1436 0%, var(--nuit) 28%);
  background-attachment: fixed;
}
body.theme-fete-des-meres .btn-gold { box-shadow: 0 4px 24px rgba(255, 126, 182, 0.38); }
body.theme-fete-des-meres .btn-gold:hover { box-shadow: 0 8px 32px rgba(255, 126, 182, 0.52); }
body.theme-fete-des-meres .site-header { background: rgba(20, 13, 34, 0.82); }
body.theme-fete-des-meres::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ff7eb6' fill-opacity='.3'%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Ccircle cx='52' cy='34' r='6'/%3E%3Ccircle cx='58' cy='46' r='6'/%3E%3Ccircle cx='46' cy='54' r='6'/%3E%3Ccircle cx='34' cy='50' r='6'/%3E%3Ccircle cx='150' cy='140' r='5'/%3E%3Ccircle cx='160' cy='135' r='5'/%3E%3Ccircle cx='164' cy='146' r='5'/%3E%3Ccircle cx='154' cy='152' r='5'/%3E%3Ccircle cx='144' cy='148' r='5'/%3E%3C/g%3E%3Cg fill='%23ffe9a8' fill-opacity='.4'%3E%3Ccircle cx='46' cy='44' r='3'/%3E%3Ccircle cx='154' cy='144' r='2.500'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.4;
}

/* ---------- FETE DES PERES : bleu nuit et turquoise ---------- */
body.theme-fete-des-peres {
  --rose: #4db2ff; --soleil: #7de0d0; --lavande: #9fb8d4;
  --degrade: linear-gradient(100deg, #3d8bff 0%, #4db8ff 55%, #7de0d0 100%);
  --nuit: #07101c; --nuit-2: #0e1b2e;
  background:
    radial-gradient(900px 600px at 85% -5%, rgba(61, 139, 255, 0.16), transparent 60%),
    radial-gradient(1100px 900px at -15% 35%, rgba(30, 90, 190, 0.22), transparent 60%),
    radial-gradient(800px 600px at 110% 75%, rgba(125, 224, 208, 0.08), transparent 60%),
    linear-gradient(180deg, #0d1b30 0%, var(--nuit) 28%);
  background-attachment: fixed;
}
body.theme-fete-des-peres .btn-gold { color: #06121f; box-shadow: 0 4px 24px rgba(61, 139, 255, 0.38); }
body.theme-fete-des-peres .btn-gold:hover { box-shadow: 0 8px 32px rgba(61, 139, 255, 0.52); }
body.theme-fete-des-peres .site-header { background: rgba(7, 16, 28, 0.84); }
body.theme-fete-des-peres .theme-bar,
body.theme-fete-des-peres .theme-ico,
body.theme-fete-des-peres .theme-bar-close { color: #06121f; }
body.theme-fete-des-peres .theme-bar-cta { background: #06121f; }

/* Hero : le degrade du mot accentue suit les couleurs du theme (variables deja utilisees) */

/* Respect des preferences de mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  body[class*="theme-"]::before { animation: none !important; }
}

/* ==========================================================
   ACCESSOIRES DU LOGO ET ANIMATIONS DISCRETES
   ========================================================== */
body[class*="theme-"] .logo-mark { overflow: visible; width: 34px; height: 34px; }

/* Couche de decor : dans <main>, ne capte jamais les clics */
.th-deco { position: absolute; pointer-events: none; z-index: 5; }

/* ---------- HALLOWEEN : toile et araignee chanteuse ---------- */
.th-halloween { top: 0; right: 0; width: 100%; height: 0; }
.th-web { position: absolute; top: 0; right: 0; width: 130px; height: 130px; opacity: .85; }
.th-spider { position: absolute; top: 0; right: 64px; width: 34px; transform: translateY(-260px); animation: th-descend 30s ease-in-out infinite; }
.th-spider svg { display: block; width: 34px; height: auto; transform-origin: 50% 0; animation: th-swing 3.6s ease-in-out infinite alternate; }
.th-wave { transform-origin: 27px 282px; animation: th-coucou .45s ease-in-out infinite alternate; }
@keyframes th-descend {
  0%   { transform: translateY(-260px); }
  10%  { transform: translateY(-78px); }
  42%  { transform: translateY(-78px); }
  50%  { transform: translateY(-116px); }
  54%  { transform: translateY(-116px); }
  66%  { transform: translateY(-260px); }
  100% { transform: translateY(-260px); }
}
@keyframes th-swing { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
@keyframes th-coucou { from { transform: rotate(-22deg); } to { transform: rotate(14deg); } }
@media (max-width: 700px) {
  .th-halloween { display: none; }
}

/* ---------- NOEL : guirlande lumineuse ---------- */
.th-garland {
  top: 0; left: 0; right: 0; height: 34px; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 3 Q60 24 120 3' fill='none' stroke='%2399d6b0' stroke-opacity='.6' stroke-width='1.500'/%3E%3C/svg%3E") repeat-x 0 0;
}
.th-garland i {
  position: absolute; top: 11px; width: 9px; height: 14px; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: var(--c); box-shadow: 0 0 10px 2px var(--c);
  animation: th-twinkle 2.4s ease-in-out infinite alternate; animation-delay: var(--d);
}
.th-garland i::before { content: ""; position: absolute; left: 2px; top: -3px; width: 5px; height: 4px; background: #3a3a3a; border-radius: 1px; }
@keyframes th-twinkle { from { opacity: .35; filter: brightness(.8); } to { opacity: 1; filter: brightness(1.25); } }

/* ---------- Elements flottants (Saint-Valentin, fete des meres, fete des peres) ---------- */
.th-float { position: fixed; inset: 0; overflow: hidden; z-index: 3; }
.th-float span {
  position: absolute; left: var(--x); width: var(--s); height: var(--s);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0; will-change: transform, opacity;
}
.th-hearts span, .th-notes span { bottom: -40px; animation: th-rise var(--t) linear infinite; animation-delay: var(--d); }
.th-petals span { top: -40px; animation: th-fall var(--t) linear infinite; animation-delay: var(--d); }
.th-hearts span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d8d' d='M12 21s-8-5.200-8-11.100C4 6.900 6.200 5 8.600 5c1.500 0 2.800.8 3.400 2 .6-1.200 1.900-2 3.400-2C17.800 5 20 6.900 20 9.900 20 15.800 12 21 12 21z'/%3E%3C/svg%3E"); }
.th-petals span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9fc9' d='M12 2C18 6 19 14 12 22 5 14 6 6 12 2z'/%3E%3Cpath fill='%23ff6fae' fill-opacity='.5' d='M12 2C15 8 15 14 12 22 9 14 9 8 12 2z'/%3E%3C/svg%3E"); }
.th-notes span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237de0d0' d='M9 18V6l11-2v12.200A3 3 0 1 1 18 13.500V7.200L11 8.500V18A3 3 0 1 1 9 18z'/%3E%3C/svg%3E"); }
@keyframes th-rise {
  0%   { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  10%  { opacity: .55; }
  50%  { transform: translate(22px, -55vh) rotate(8deg); }
  88%  { opacity: .4; }
  100% { transform: translate(-10px, -112vh) rotate(-4deg); opacity: 0; }
}
@keyframes th-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .6; }
  50%  { transform: translate(34px, 55vh) rotate(180deg); }
  90%  { opacity: .45; }
  100% { transform: translate(-14px, 112vh) rotate(340deg); opacity: 0; }
}
@media (max-width: 700px) {
  .th-float span:nth-child(n+6) { display: none; }
}

/* Mouvement reduit : plus d'animation, decor fixe et calme */
@media (prefers-reduced-motion: reduce) {
  .th-spider { animation: none; transform: translateY(-86px); }
  .th-spider svg, .th-wave, .th-garland i, .theme-ico-pumpkin .pk-face { animation: none !important; }
  .th-float { display: none; }
}

/* Bouton "Quitter l'apercu" (visible uniquement en apercu ?theme=...) */
.theme-exit {
  position: fixed; left: 14px; bottom: 14px; z-index: 9999;
  padding: 9px 16px; border-radius: 999px; font: 600 13px/1 inherit;
  background: #fff; color: #111; text-decoration: none; box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.theme-exit:hover { background: #f1f1f1; }
@media (max-width: 700px) { .theme-exit { bottom: 150px; } } /* au-dessus du bandeau cookies et du bouton fixe */

/* Securite : aucun debordement horizontal pendant un theme (evite une bande vide a droite) */
html { overflow-x: clip; }
body[class*="theme-"] { overflow-x: clip; max-width: 100vw; }
.th-deco { max-width: 100%; }