/* ============================================
   Theme de Noel
   Charge uniquement pendant la periode des fetes : le reste de l'annee, ce
   fichier n'est meme pas telecharge. Il passe apres style.css et remplace ses
   variables de couleur, ce qui recolore tout le site sans toucher a ses regles.
   ============================================ */

:root {
    --mc-accent: #e63946;
    --mc-accent-end: #f0525f;
    --mc-accent-soft: #ffd166;
    --mc-accent-rgb: 230, 57, 70;
    --mc-accent-end-rgb: 240, 82, 95;
    --mc-accent-gradient: linear-gradient(135deg, #e63946, #f0525f);
    --mc-accent-glow: rgba(230, 57, 70, 0.3);
    --mc-accent-glow-strong: rgba(230, 57, 70, 0.5);
    --mc-border-hover: #e63946;
    --mc-text-accent: #f0525f;
    --mc-shadow-accent: 0 4px 30px rgba(230, 57, 70, 0.2);

    --mc-bg-primary: #090b11;
    --mc-bg-secondary: #0d1017;
    --mc-bg-footer: #0b0e14;

    --mc-xmas-gold: #ffd166;
    --mc-xmas-snow: #e4ebf4;
}

/* background-image et non background : le raccourci remettrait a zero le
   background-clip qui decoupe le degrade dans le texte. */
.mc-gradient-text,
.mc-hero-title .mc-gradient-text {
    background-image: linear-gradient(135deg, #e63946 0%, #ff7b72 45%, #ffd166 100%);
}

/* ---------- Guirlande sous la barre de navigation ---------- */

.mc-xmas-lights {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 30px;
    pointer-events: none;
}

.mc-xmas-lights span {
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: 240px 30px;
}

.mc-xmas-lights span:nth-child(1) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='30'><path d='M0 3Q60 20 120 3Q180 20 240 3' fill='none' stroke='%232f5d3e' stroke-width='2'/></svg>");
}

.mc-xmas-lights span:nth-child(2),
.mc-xmas-lights span:nth-child(3) {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
    animation: mcXmasBlink 1.8s ease-in-out infinite;
}

.mc-xmas-lights span:nth-child(2) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='30'><ellipse cx='30' cy='16' rx='4' ry='6' fill='%23ff4d5a'/><ellipse cx='90' cy='16' rx='4' ry='6' fill='%23ffd166'/><ellipse cx='180' cy='18' rx='4' ry='6' fill='%234ade80'/></svg>");
}

.mc-xmas-lights span:nth-child(3) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='30'><ellipse cx='60' cy='18' rx='4' ry='6' fill='%234ade80'/><ellipse cx='150' cy='16' rx='4' ry='6' fill='%2360a5fa'/><ellipse cx='210' cy='16' rx='4' ry='6' fill='%23ff4d5a'/></svg>");
    animation-delay: -0.9s;
}

@keyframes mcXmasBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------- Bonnet sur le logo ---------- */

.mc-navbar .navbar-brand {
    position: relative;
}

.mc-navbar .navbar-brand::before {
    content: "";
    position: absolute;
    left: -7px;
    top: -10px;
    width: 26px;
    height: 22px;
    pointer-events: none;
    transform: rotate(-12deg);
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' shape-rendering='crispEdges'><path fill='%23d62839' d='M4 0h4v1h1v2h2v2H9v2H2V2h1V1h1z'/><path fill='%23a3162e' d='M2 5h2v2H2z'/><path fill='%23f5f7fa' d='M1 7h9v2H1zM10 5h2v2h-2z'/></svg>") center / contain no-repeat;
}

/* ---------- Neige posee ---------- */

.mc-hero,
.mc-footer {
    position: relative;
}

.mc-hero::after,
.mc-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='18' shape-rendering='crispEdges'><path fill='%23e4ebf4' d='M0 18V10h12V6h18v3h16V4h20v5h14V7h16v3h24v8z'/></svg>") repeat-x left bottom;
}

.mc-hero::after {
    bottom: 0;
    z-index: 2;
}

.mc-footer::before {
    top: -18px;
}

/* ---------- Decor du hero ---------- */

/* Les blocs d'origine restent masques le temps que christmas.js les remplace,
   pour ne pas voir l'orange clignoter au chargement. */
.mc-xmas .mc-hero-block svg:not(.mc-xmas-svg) {
    visibility: hidden;
}

/* ---------- Neige qui tombe ---------- */

.mc-xmas-snow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
    pointer-events: none;
}

/* ---------- Pastille des fetes ---------- */

.mc-xmas-pill {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: calc(100vw - 2rem);
    padding: 0.25rem;
    color: var(--mc-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(20, 20, 32, 0.92);
    border: 1px solid rgba(255, 209, 102, 0.35);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.mc-xmas-msg {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding-left: 0.6rem;
}

.mc-xmas-msg i {
    color: var(--mc-xmas-gold);
}

.mc-xmas-pill button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--mc-text-secondary);
    background: transparent;
    border: 0;
    border-radius: 50%;
    transition: var(--mc-transition);
}

.mc-xmas-pill button:hover {
    color: var(--mc-text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.mc-xmas-pill button:focus-visible {
    outline: 2px solid var(--mc-xmas-gold);
    outline-offset: 1px;
}

.mc-xmas-pill button[aria-pressed="true"] {
    color: var(--mc-xmas-snow);
}

.mc-xmas-pill button[aria-pressed="false"] {
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .mc-xmas-lights span:nth-child(2),
    .mc-xmas-lights span:nth-child(3) {
        animation: none;
        opacity: 1;
    }
}