/* ==========================================================================
   THÈME NOËL — "Nuit au chalet"
   Vert sapin profond · rouge velours · or chaud · papier crème
   Aucune modification HTML/PHP nécessaire : mêmes classes qu'avant.
   ========================================================================== */
 
/* --- Palette (remplace les variables de style.css) --- */
body.theme-noel {
    --bg-cream: #0E2A20;
    --bg-card: #FBF4E6;
    --accent-terracotta: #E63946;
    --accent-sage: #2F7D5B;
    --accent-gold: #F2C14E;
    --accent-sand: rgba(242, 193, 78, 0.28);
    --text-main: #FFF4D6;
    --text-muted: #C9D5C4;
 
    background-color: #0A1F17;
    /* Nuit de sapin : halo doré en haut, lueur rouge braise en bas */
    background-image:
        radial-gradient(ellipse 70% 40% at 50% -5%, rgba(242, 193, 78, 0.16), transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 115%, rgba(176, 24, 44, 0.28), transparent 70%),
        linear-gradient(180deg, #10302A 0%, #0A1F17 55%, #071510 100%);
    background-size: auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}
 
/* ==========================================================================
   NEIGE — deux couches de profondeur (petits flocons lents / gros flocons flous)
   Animation par transform : fluide, sans repaint.
   ========================================================================== */
@keyframes neigeFine   { to { transform: translateY(400px); } }
@keyframes neigeGrosse { to { transform: translateY(640px); } }
@keyframes balancier {
    from { translate: -16px 0; }
    to   { translate: 16px 0; }
}
@keyframes scintille {
    from { opacity: 1; }
    to   { opacity: 0.3; }
}
 
body.theme-noel::before,
body.theme-noel::after {
    content: "";
    position: fixed;
    left: -40px;
    right: -40px;
    bottom: 0;
    pointer-events: none;
    will-change: transform;
}
 
/* Petits flocons : loin, nombreux */
body.theme-noel::before {
    top: -400px;
    z-index: 98;
    background-image:
        radial-gradient(circle at 12% 8%,  rgba(255,255,255,.9) 0, rgba(255,255,255,.9) 1.2px, transparent 2.6px),
        radial-gradient(circle at 47% 22%, rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 1.5px, transparent 3px),
        radial-gradient(circle at 81% 15%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1.2px, transparent 2.6px),
        radial-gradient(circle at 28% 41%, rgba(255,255,255,.8) 0, rgba(255,255,255,.8) 1.4px, transparent 2.8px),
        radial-gradient(circle at 66% 52%, rgba(255,255,255,.65) 0, rgba(255,255,255,.65) 1.2px, transparent 2.6px),
        radial-gradient(circle at 91% 63%, rgba(255,255,255,.9) 0, rgba(255,255,255,.9) 1.5px, transparent 3px),
        radial-gradient(circle at 8% 77%,  rgba(255,255,255,.75) 0, rgba(255,255,255,.75) 1.2px, transparent 2.6px),
        radial-gradient(circle at 38% 68%, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 1.2px, transparent 2.6px),
        radial-gradient(circle at 56% 91%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1.4px, transparent 2.8px);
    background-size: 400px 400px;
    animation: neigeFine 24s linear infinite, balancier 7s ease-in-out infinite alternate;
}
 
/* Gros flocons : proches, doux, plus rapides */
body.theme-noel::after {
    top: -640px;
    z-index: 99;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 2.5px, transparent 6px),
        radial-gradient(circle at 70% 35%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, transparent 7px),
        radial-gradient(circle at 40% 62%, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 2.5px, transparent 6px),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 3px, transparent 7px),
        radial-gradient(circle at 10% 90%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 2.5px, transparent 6px);
    background-size: 640px 640px;
    animation: neigeGrosse 15s linear infinite, balancier 9s ease-in-out infinite alternate-reverse;
}
 
/* ==========================================================================
   HEADER — guirlande lumineuse qui scintille
   ========================================================================== */
body.theme-noel .site-header {
    background: rgba(8, 26, 19, 0.92);
    border-bottom: 1px solid rgba(242, 193, 78, 0.55);
    box-shadow: 0 1px 0 rgba(242, 193, 78, 0.12), 0 14px 34px rgba(0, 0, 0, 0.55);
    padding-top: 1.9rem;
}
 
/* Deux jeux d'ampoules qui clignotent en alternance */
body.theme-noel .site-header::before,
body.theme-noel .site-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    background-size: 120px 22px, 120px 22px, 100% 22px;
    background-repeat: repeat-x, repeat-x, no-repeat;
    animation: scintille 2.4s ease-in-out infinite alternate;
}
 
/* Jeu A : rouge + or (porte aussi le fil de la guirlande) */
body.theme-noel .site-header::before {
    background-image:
        radial-gradient(circle at 15px 8px, #FFE3E0 0 1px, #FF4B5C 2px 4px, rgba(255, 75, 92, .45) 5px, transparent 11px),
        radial-gradient(circle at 75px 8px, #FFF7D6 0 1px, #FFC83D 2px 4px, rgba(255, 200, 61, .45) 5px, transparent 11px),
        linear-gradient(rgba(242, 193, 78, 0.55), rgba(242, 193, 78, 0.55));
    background-position: 0 0, 0 0, 0 2px;
    background-size: 120px 22px, 120px 22px, 100% 1px;
}
 
/* Jeu B : vert + blanc chaud, en opposition de phase */
body.theme-noel .site-header::after {
    background-image:
        radial-gradient(circle at 45px 8px,  #E3FFEF 0 1px, #3DDC97 2px 4px, rgba(61, 220, 151, .4) 5px, transparent 11px),
        radial-gradient(circle at 105px 8px, #FFFFFF 0 1px, #FFEFC2 2px 4px, rgba(255, 239, 194, .4) 5px, transparent 11px);
    background-position: 0 0, 0 0;
    animation-direction: alternate-reverse;
}
 
body.theme-noel .brand-title {
    color: #FFF4D6;
    text-shadow: 0 0 22px rgba(242, 193, 78, 0.35);
}
 
body.theme-noel .brand-title span {
    color: var(--accent-gold);
}
 
body.theme-noel .brand-subtitle {
    color: #E8D3A0;
}
 
/* --- Navigation --- */
body.theme-noel .nav-pill {
    color: #FFF4D6;
    background: rgba(255, 244, 214, 0.06);
    border: 1px solid rgba(242, 193, 78, 0.25);
}
 
body.theme-noel .nav-pill:hover,
body.theme-noel .nav-pill.active {
    background: linear-gradient(180deg, #FFD978, #F2C14E);
    color: #3A1D0A;
    border-color: #FFE7A8;
    box-shadow: 0 0 18px rgba(242, 193, 78, 0.45);
}
 
body.theme-noel .sub-nav-bar {
    border-top: 1px dashed rgba(242, 193, 78, 0.3);
}
 
body.theme-noel .sub-nav-label {
    color: #E8D3A0;
}
 
body.theme-noel .sub-nav-pill {
    color: #E7EDE2;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 244, 214, 0.18);
}
 
body.theme-noel .sub-nav-pill:hover,
body.theme-noel .sub-nav-pill.active {
    background: #C8102E;
    border-color: #FF6B7A;
    color: #FFF4D6;
    box-shadow: 0 0 14px rgba(230, 57, 70, 0.45);
}
 
/* ==========================================================================
   HERO — cadre doré sur velours rouge
   ========================================================================== */
body.theme-noel .hero-banner {
    position: relative;
    overflow: visible;
    padding: 3.4rem 2rem 3rem;
    border: 2px solid #F2C14E;
    border-radius: 26px;
    background:
        radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 140, 120, 0.28), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
        linear-gradient(160deg, #7E1022 0%, #4C0914 100%);
    /* double filet intérieur façon cadre */
    box-shadow:
        inset 0 0 0 7px #5A0B18,
        inset 0 0 0 8px rgba(242, 193, 78, 0.7),
        0 24px 60px -18px rgba(190, 20, 45, 0.55),
        0 0 40px rgba(242, 193, 78, 0.12);
}
 
/* Ornement posé sur le filet du haut */
body.theme-noel .hero-banner::before {
    content: "✦  ❄  ✦";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 1rem;
    background: #0F2D22;
    color: #F2C14E;
    font-size: 1.15rem;
    letter-spacing: 6px;
    line-height: 1.6;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(242, 193, 78, 0.6);
}
 
body.theme-noel .hero-banner h1 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 0.8rem;
    color: #FFE9A8; /* repli */
    background: linear-gradient(180deg, #FFF6D6 10%, #F7CF6A 60%, #E3A93A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}
 
body.theme-noel .hero-banner p {
    color: #F9DDD2;
    font-size: 1.02rem;
    max-width: 580px;
}
 
/* ==========================================================================
   CARTES — paquets cadeaux : papier crème, bonnet de neige, ruban rouge
   ========================================================================== */
body.theme-noel .carte-article {
    background-color: #FBF4E6;
    border: 1px solid #E8CF94;
    border-radius: 18px;
    box-shadow:
        0 16px 30px -14px rgba(0, 0, 0, 0.7),
        0 0 0 4px rgba(242, 193, 78, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
 
body.theme-noel .carte-article:hover {
    transform: translateY(-7px);
    border-color: #F2C14E;
    box-shadow:
        0 26px 46px -16px rgba(0, 0, 0, 0.75),
        0 0 0 4px rgba(242, 193, 78, 0.22),
        0 0 36px rgba(242, 193, 78, 0.28);
}
 
body.theme-noel .carte-article.epuise {
    opacity: 0.88;
}
 
body.theme-noel .carte-article.epuise .image-wrapper img {
    filter: grayscale(0.35);
}
 
body.theme-noel .image-wrapper {
    background-color: #EFE3CC;
    border-bottom: none;
}
 
/* Bonnet de neige festonné sur le haut de la photo */
body.theme-noel .image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0, #FFFFFF 0 17px, transparent 18px) 0 0 / 34px 20px repeat-x,
        radial-gradient(circle at 50% 0, #EAF1F8 0 11px, transparent 12px) 14px 0 / 52px 24px repeat-x,
        linear-gradient(#FFFFFF, #FFFFFF) 0 0 / 100% 5px no-repeat;
    filter: drop-shadow(0 2px 2px rgba(20, 30, 40, 0.28));
}
 
/* Ruban satiné en bas de la photo */
body.theme-noel .image-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 13px;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0, transparent 40%),
        linear-gradient(180deg, #E63946, #A4101F);
    border-top: 1px solid #F2C14E;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25);
}
 
body.theme-noel .badge-epuise {
    top: 28px;
    right: 12px;
    z-index: 4;
    background: linear-gradient(180deg, #FFD978, #F2C14E);
    color: #3A1D0A;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
 
body.theme-noel .contenu-carte {
    padding: 1.3rem 1.3rem 1.4rem;
}
 
body.theme-noel .contenu-carte h3 {
    color: #2A1815;
    font-size: 1.5rem;
}
 
body.theme-noel .prix {
    color: #B3122B;
}
 
body.theme-noel .en-stock {
    color: #1F6B4A;
}
 
body.theme-noel .sur-commande {
    color: #9A5B12;
}
 
body.theme-noel .btn-voir {
    background: linear-gradient(135deg, #C8102E 0%, #8E0B1F 100%);
    color: #FFF4D6;
    font-weight: 600;
    border: 1px solid rgba(242, 193, 78, 0.65);
    box-shadow: 0 6px 16px rgba(142, 11, 31, 0.4);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
 
body.theme-noel .btn-voir:hover {
    background: linear-gradient(135deg, #E0263F 0%, #B01227 100%);
    box-shadow: 0 8px 22px rgba(230, 57, 70, 0.5), 0 0 0 2px rgba(242, 193, 78, 0.45);
    transform: translateY(-1px);
}
 
body.theme-noel .no-article {
    color: #E8D3A0;
}
 
/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
body.theme-noel .site-footer {
    background: rgba(5, 16, 11, 0.88);
    border-top: 1px solid rgba(242, 193, 78, 0.45);
    color: #C9D5C4;
}
 
/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */
body.theme-noel a:focus-visible {
    outline: 2px solid #F2C14E;
    outline-offset: 3px;
}
 
@media (prefers-reduced-motion: reduce) {
    body.theme-noel::before,
    body.theme-noel::after,
    body.theme-noel .site-header::before,
    body.theme-noel .site-header::after {
        animation: none;
    }
}
 
@media (max-width: 480px) {
    body.theme-noel .hero-banner {
        padding: 3rem 1.2rem 2.4rem;
    }
    body.theme-noel .hero-banner::before {
        font-size: 1rem;
        letter-spacing: 4px;
    }
}
 
/* ==========================================================================
   AJUSTEMENTS pour le nouveau style de base (franges, arche, etc.)
   ========================================================================== */
/* Pas de franges macramé sous le bandeau de Noël */
body.theme-noel .hero-banner::after {
    display: none;
}
 
/* Retour aux cartes pleine largeur avec photo rectangulaire (bonnet de neige + ruban) */
body.theme-noel .carte-article {
    padding: 0;
}
 
body.theme-noel .image-wrapper {
    border-radius: 0;
}