/* ═══════════════════════════════════════════════════════════════
   MAISON OLIVIER — HABILLAGE DE NOËL
   Actif uniquement quand <html> porte la classe .noel
   (posée par noel.js du 1er novembre au 6 janvier).
   Aucun texte du site n'est modifié : uniquement de la forme.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --noel-rouge:#B3262E;
  --noel-rouge-vif:#D7263D;
  --noel-vert:#1E5B3A;
  --noel-vert-vif:#2F8A57;
  --noel-or:#E3B04B;
  --noel-neige:#FFFDF8;
}

/* ── Fond crème piqué de petites étoiles dorées ── */
html.noel body{
  background-color:var(--creme);
  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 fill='%23B08D2A' fill-opacity='.10'%3E%3Cpath d='M20 14l1.6 4.4L26 20l-4.4 1.6L20 26l-1.6-4.4L14 20l4.4-1.6z'/%3E%3Cpath d='M82 70l1.2 3.3 3.3 1.2-3.3 1.2L82 79l-1.2-3.3-3.3-1.2 3.3-1.2z'/%3E%3Ccircle cx='96' cy='22' r='1.4'/%3E%3Ccircle cx='38' cy='92' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
html.noel ::selection{background:var(--noel-rouge);color:var(--noel-neige)}

/* ── Petits labels : houx + rouge de Noël ── */
html.noel .kicker{color:var(--noel-rouge)}
html.noel .kicker.pale,
html.noel .contact .kicker,
html.noel .commande .kicker,
html.noel .resa .kicker,
html.noel .confiance .kicker,
html.noel .band-in .kicker,
html.noel .hero .eyebrow{color:var(--noel-or)!important}
html.noel .kicker::before,
html.noel .hero .eyebrow::before{
  content:"";display:inline-block;width:1.7em;height:1.15em;margin-right:.7em;vertical-align:-.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M2 12C6 6 10 10 14 4c1 4 4 6 6 8-4 2-8 1-10 5-2-3-5-4-8-5z' fill='%231E5B3A'/%3E%3Cpath d='M32 12c-4-6-8-2-12-8-1 4-4 6-6 8 4 2 8 1 10 5 2-3 5-4 8-5z' fill='%232F8A57'/%3E%3Ccircle cx='15' cy='15' r='3' fill='%23D7263D'/%3E%3Ccircle cx='20' cy='16' r='3' fill='%23B3262E'/%3E%3Ccircle cx='17.5' cy='11' r='3' fill='%23D7263D'/%3E%3Ccircle cx='16.6' cy='10.2' r='.9' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Menu : lien actif et survol en rouge ── */
html.noel .nav-links a:hover{color:var(--noel-rouge)!important;opacity:1}
html.noel .nav-links a.active{color:var(--noel-rouge)!important}
html.noel #nav:not(.scrolled) .nav-links a:hover{color:var(--noel-or)!important}



/* ── Boutons : rouge de Noël, vert sapin au survol ── */
html.noel .cta,
html.noel .band-btn,
html.noel .btn-mail,
html.noel .ligne button,
html.noel .form-card button,
html.noel .btn-solid,
html.noel .btn-cream,
html.noel .btn-dl,
html.noel .voir-tout a{
  background:var(--noel-rouge)!important;color:var(--noel-neige)!important;border-color:var(--noel-rouge)!important;
  box-shadow:0 3px 0 #7d151c, 0 8px 18px rgba(179,38,46,.25);position:relative;
}
html.noel .cta:hover,
html.noel .band-btn:hover,
html.noel .btn-mail:hover,
html.noel .ligne button:hover,
html.noel .form-card button:hover,
html.noel .btn-solid:hover,
html.noel .btn-cream:hover,
html.noel .btn-dl:hover,
html.noel .voir-tout a:hover{
  background:var(--noel-vert)!important;border-color:var(--noel-vert)!important;box-shadow:0 3px 0 #0f3622,0 10px 22px rgba(30,91,58,.3);
}

/* ── Cartes : légère danse et halo doré au survol ── */
html.noel .card,html.noel .acard,html.noel .formule,html.noel .idee,html.noel .featured,html.noel .coffret{
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s ease!important;
}
html.noel .card:hover,html.noel .acard:hover,html.noel .idee:hover,html.noel .featured:hover,html.noel .coffret:hover{
  transform:translateY(-6px) rotate(-.6deg)!important;
  box-shadow:0 14px 34px rgba(10,34,64,.12),0 0 0 2px rgba(227,176,75,.55)!important;
}
html.noel .formule:hover{transform:translateY(-6px)!important}

/* ── Nœud de cadeau sur les éléments vedettes ── */
html.noel .formule.star,html.noel .featured,html.noel .noel-cadeau{position:relative}
html.noel .formule.star::after,html.noel .featured::after,html.noel .noel-cadeau::after{
  content:"";position:absolute;top:-26px;right:24px;width:78px;height:55px;pointer-events:none;z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 84%27%3E%3Cdefs%3E%3ClinearGradient id=%27v1%27 x1=%270%27 y1=%270%27 x2=%270%27 y2=%271%27%3E%3Cstop offset=%270%27 stop-color=%27%23D33A43%27/%3E%3Cstop offset=%27.55%27 stop-color=%27%23A51E27%27/%3E%3Cstop offset=%271%27 stop-color=%27%236E1219%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27v2%27 x1=%270%27 y1=%270%27 x2=%271%27 y2=%270%27%3E%3Cstop offset=%270%27 stop-color=%27%237E141C%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23C02D36%27/%3E%3Cstop offset=%271%27 stop-color=%27%237E141C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M56 40 L36 80 L46 74 L52 83 L60 44 Z%27 fill=%27url(%23v2)%27 stroke=%27%23C9A24A%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M64 40 L84 80 L74 74 L68 83 L60 44 Z%27 fill=%27url(%23v2)%27 stroke=%27%23C9A24A%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M58 38 C40 14 12 6 6 20 C2 32 16 46 58 44 Z%27 fill=%27url(%23v1)%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M62 38 C80 14 108 6 114 20 C118 32 104 46 62 44 Z%27 fill=%27url(%23v1)%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M54 37 C40 24 22 18 14 24%27 fill=%27none%27 stroke=%27%236E1219%27 stroke-width=%271.4%27 opacity=%27.55%27/%3E%3Cpath d=%27M66 37 C80 24 98 18 106 24%27 fill=%27none%27 stroke=%27%236E1219%27 stroke-width=%271.4%27 opacity=%27.55%27/%3E%3Cpath d=%27M14 18 C22 12 34 14 44 22%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.6%27 opacity=%27.28%27/%3E%3Cpath d=%27M106 18 C98 12 86 14 76 22%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.6%27 opacity=%27.22%27/%3E%3Crect x=%2751%27 y=%2733%27 width=%2718%27 height=%2715%27 rx=%275%27 fill=%27%23A51E27%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M54 36 C58 34 62 34 66 36%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.2%27 opacity=%27.3%27/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
  animation:noel-noeud 3.5s ease-in-out infinite;
}
@keyframes noel-noeud{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
html.noel .formule.star>*{position:relative}
html.noel .featured{overflow:visible!important}

/* ── Ruban de velours à liseré doré (façon paquet de vieille maison) ── */
.noel-ruban{position:relative;height:30px;width:100%;
  background:linear-gradient(180deg,#C9A24A 0 2px,#7E141C 2px 4px,#B3262E 4px,#D33A43 45%,#B3262E 60%,#8E1A22 calc(100% - 4px),#7E141C calc(100% - 4px) calc(100% - 2px),#C9A24A calc(100% - 2px));
  box-shadow:0 2px 6px rgba(10,34,64,.18)}
.noel-ruban::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(232,203,126,.55)}
.noel-ruban.avec-noeud::after{content:"";position:absolute;left:50%;top:50%;width:96px;height:67px;transform:translate(-50%,-50%);z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 84%27%3E%3Cdefs%3E%3ClinearGradient id=%27v1%27 x1=%270%27 y1=%270%27 x2=%270%27 y2=%271%27%3E%3Cstop offset=%270%27 stop-color=%27%23D33A43%27/%3E%3Cstop offset=%27.55%27 stop-color=%27%23A51E27%27/%3E%3Cstop offset=%271%27 stop-color=%27%236E1219%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27v2%27 x1=%270%27 y1=%270%27 x2=%271%27 y2=%270%27%3E%3Cstop offset=%270%27 stop-color=%27%237E141C%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23C02D36%27/%3E%3Cstop offset=%271%27 stop-color=%27%237E141C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M56 40 L36 80 L46 74 L52 83 L60 44 Z%27 fill=%27url(%23v2)%27 stroke=%27%23C9A24A%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M64 40 L84 80 L74 74 L68 83 L60 44 Z%27 fill=%27url(%23v2)%27 stroke=%27%23C9A24A%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M58 38 C40 14 12 6 6 20 C2 32 16 46 58 44 Z%27 fill=%27url(%23v1)%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M62 38 C80 14 108 6 114 20 C118 32 104 46 62 44 Z%27 fill=%27url(%23v1)%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M54 37 C40 24 22 18 14 24%27 fill=%27none%27 stroke=%27%236E1219%27 stroke-width=%271.4%27 opacity=%27.55%27/%3E%3Cpath d=%27M66 37 C80 24 98 18 106 24%27 fill=%27none%27 stroke=%27%236E1219%27 stroke-width=%271.4%27 opacity=%27.55%27/%3E%3Cpath d=%27M14 18 C22 12 34 14 44 22%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.6%27 opacity=%27.28%27/%3E%3Cpath d=%27M106 18 C98 12 86 14 76 22%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.6%27 opacity=%27.22%27/%3E%3Crect x=%2751%27 y=%2733%27 width=%2718%27 height=%2715%27 rx=%275%27 fill=%27%23A51E27%27 stroke=%27%23C9A24A%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M54 36 C58 34 62 34 66 36%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.2%27 opacity=%27.3%27/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 5px rgba(0,0,0,.25))}
.noel-ruban.bas-hero{position:absolute;left:0;right:0;bottom:0;z-index:4}

/* ── Neige ── */
canvas.noel-neige{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
html.noel .hero,html.noel .band-plateaux,html.noel .contact,html.noel .commande,html.noel .resa,html.noel .confiance{position:relative;overflow:hidden}

/* ── Brins de houx à côté du logo (sans jamais le recouvrir) ── */
.noel-logo-wrap{position:relative;display:inline-block}
#nav .noel-logo-wrap,#topnav .noel-logo-wrap{display:block;line-height:0}
html.noel #nav:not(.scrolled) .noel-logo-wrap{display:none}
.noel-houx{position:absolute;pointer-events:none;z-index:5;line-height:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.noel-houx svg{width:100%;height:auto;display:block}
.noel-houx.droite{left:calc(100% + 4px)}
.noel-houx.gauche{right:calc(100% + 4px)}

/* ── Traîneau vintage (une fois par visite, quelle que soit la page) ── */
.noel-ciel{position:fixed;inset:0;pointer-events:none;z-index:8000;overflow:hidden}
.noel-traineau{position:absolute;left:0;top:0;width:min(560px,78vw);will-change:transform}
.noel-traineau svg{width:100%;height:auto;display:block;overflow:visible}
.noel-traineau .galop{transform-box:fill-box;transform-origin:50% 60%;animation:noel-galop .5s ease-in-out infinite alternate}
@keyframes noel-galop{from{transform:translateY(-2px) rotate(-3deg)}to{transform:translateY(3px) rotate(2deg)}}
.noel-etoile{position:absolute;pointer-events:none;width:10px;height:10px;
  background:radial-gradient(circle,#FFF6D8 0 25%,rgba(232,203,126,.9) 45%,transparent 70%);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:noel-pouf 1.6s ease-out forwards}
@keyframes noel-pouf{to{opacity:0;transform:translateY(18px) scale(.3) rotate(60deg)}}

/* ── Étoiles qui suivent la souris (ordinateur uniquement) ── */
.noel-poussiere{position:fixed;pointer-events:none;z-index:9999;font-size:12px;line-height:1;color:var(--noel-or);
  text-shadow:0 0 6px rgba(227,176,75,.9);animation:noel-poussiere .9s ease-out forwards}
@keyframes noel-poussiere{to{opacity:0;transform:translate(var(--dx),24px) rotate(90deg) scale(.4)}}

/* ── Boutons neige et musique ── */
.noel-boutons{position:fixed;left:16px;bottom:16px;z-index:9000;display:flex;gap:10px}
.noel-bouton{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid var(--noel-neige);
  background:var(--noel-rouge);color:var(--noel-neige);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(10,34,64,.3);transition:transform .25s,background .25s}
.noel-bouton:hover{transform:scale(1.07);background:var(--noel-vert)}
.noel-bouton svg{width:23px;height:23px}
.noel-bouton.off{background:#8a8a8a}
.noel-bouton.off::after{content:"";position:absolute;width:30px;height:2px;background:var(--noel-neige);transform:rotate(-45deg)}
.noel-bouton.musique.joue svg{animation:noel-note 1.2s ease-in-out infinite alternate}
@keyframes noel-note{to{transform:translateY(-2px) rotate(-8deg)}}

/* ── Pied de page ── */
html.noel footer{position:relative}

/* ── Moins d'animations si l'utilisateur l'a demandé ── */
@media (prefers-reduced-motion:reduce){
  html.noel .formule.star::after,html.noel .featured::after,html.noel .noel-cadeau::after{animation:none!important}
  canvas.noel-neige,.noel-ciel,.noel-poussiere{display:none!important}
}
html.noel-calme canvas.noel-neige,html.noel-calme .noel-ciel,html.noel-calme .noel-poussiere{display:none!important}

@media(max-width:700px){
  .noel-ruban{height:24px}
  .noel-ruban.avec-noeud::after{width:76px;height:53px}
  .noel-boutons{left:12px;bottom:12px;gap:8px}
  .noel-bouton{width:40px;height:40px}
}

/* Houx du grand logo : même entrée que le logo, au même moment */
html.noel .hero .noel-logo-wrap .noel-houx{opacity:0;animation:logoIn 1.1s cubic-bezier(.22,.9,.3,1) .15s forwards}
@media (prefers-reduced-motion:reduce){html.noel .hero .noel-logo-wrap .noel-houx{opacity:1;animation:none}}