/* ============================================================= Château des Essarts — Thème HALLOWEEN ------------------------------------------------------------- Le site reste clair. Aucune photo n'est retouchée. Seuls les accents de couleur, les blocs sombres et quelques décors changent. Les noms de variables ci-dessous ont été relevés directement sur chateau-des-essarts.com le 14/09/2026 (Impreza Child). Ce ne sont pas des noms supposés : ce sont ceux du site. La valeur d'origine est rappelée en commentaire. Palette : orange citrouille #d8601b orange foncé #8a3a12 brun bandeau #5e2c14 brun pied de page #2a1a12 nuit (blocs) #1d1017 crème #fdf5ec encre #2b1d14 ============================================================= */ body.season-halloween{ /* --------------------------------------------------------- ENTÊTE Le header du site est blanc en position fixe, et transparent par-dessus le visuel du hero. On garde ce fonctionnement. --------------------------------------------------------- */ --color-header-top-bg: #fdf1e4; /* #f2f4f7 */ --color-header-top-text: #8a6a50; /* #727f9f */ --color-header-top-text-hover: #d8601b; /* #fbd45a */ --color-header-top-transparent-bg: rgba(40,14,0,.28); /* rgba(0,0,0,.2) */ --color-header-top-transparent-text: rgba(255,240,225,.75);/* rgba(255,255,255,.66) */ --color-header-top-transparent-text-hover: #ffbe86; /* #fff */ --color-header-middle-bg: #ffffff; /* #fff */ --color-header-middle-text: #2b1d14; /* #35415b */ --color-header-middle-text-hover: #d8601b; /* #fbd45a */ --color-header-transparent-bg: transparent; /* transparent */ --color-header-transparent-text: #ffffff; /* #fff */ --color-header-transparent-text-hover: #ffbe86; /* #fff */ /* --------------------------------------------------------- CONTENU — le jeu de couleurs principal --------------------------------------------------------- */ --color-content-bg: #ffffff; /* #fff */ --color-content-bg-grad: #ffffff; --color-content-bg-alt: #1d1017; /* #283734 — les blocs sombres */ --color-content-bg-alt-grad: #1d1017; --color-content-border: #d8601b; /* #730a0a */ --color-content-heading: #2b1d14; /* #00715d */ --color-content-heading-grad: #2b1d14; --color-content-faded: #8a5a34; /* #00715d */ --color-content-text: #2b1d14; /* #283734 */ --color-content-link: #d8601b; /* #fbd45a */ --color-content-link-hover: #8a3a12; /* #35415b */ --color-content-primary: #5e2c14; /* #677f5d — bandeau réservation */ --color-content-primary-grad: #5e2c14; --color-content-primary-faded: rgba(94,44,20,.15); /* rgba(103,127,93,.15) */ --color-content-secondary: #2b1d14; /* #283734 */ --color-content-secondary-grad:#2b1d14; --color-content-overlay: rgba(30,12,6,.82); /* rgba(15,19,31,.80) */ --color-content-overlay-grad: rgba(30,12,6,.82); /* --------------------------------------------------------- CONTENU ALTERNATIF — les sections en fond clair alterné Note : --color-alt-content-primary valait #646cfd (un bleu violacé resté du thème d'origine, visiblement jamais utilisé). On le remet dans la ligne éditoriale au passage. --------------------------------------------------------- */ --color-alt-content-bg: #fdf5ec; /* #f2f4f7 */ --color-alt-content-bg-grad: #fdf5ec; --color-alt-content-bg-alt: #ffffff; /* #fff */ --color-alt-content-bg-alt-grad: #ffffff; --color-alt-content-border: #efdfcc; /* #e3e7f0 */ --color-alt-content-heading: #2b1d14; /* #283734 */ --color-alt-content-heading-grad: #2b1d14; --color-alt-content-faded: #8a6a50; /* #727f9f */ --color-alt-content-text: #2b1d14; /* #283734 */ --color-alt-content-link: #d8601b; /* #fbd45a */ --color-alt-content-link-hover: #8a3a12; /* #283734 */ --color-alt-content-primary: #d8601b; /* #646cfd */ --color-alt-content-primary-grad: #d8601b; --color-alt-content-secondary: #2b1d14; /* #283734 */ --color-alt-content-secondary-grad: #2b1d14; --color-alt-content-overlay: rgba(60,25,8,.85); /* rgba(100,108,253,.85) */ --color-alt-content-overlay-grad: rgba(60,25,8,.85); /* --------------------------------------------------------- PIED DE PAGE --------------------------------------------------------- */ --color-footer-bg: #2a1a12; /* #283734 */ --color-footer-bg-grad: #2a1a12; --color-footer-bg-alt: #2a1a12; /* #283734 */ --color-footer-bg-alt-grad:#2a1a12; --color-footer-border: #5e3a22; /* #00715d */ --color-footer-heading: #ffffff; /* #fff */ --color-footer-link: #ef8a3a; /* #fbd45a */ --color-footer-link-hover: #ffffff; /* #fff */ --color-footer-text: #bb9d83; /* #8d9096 */ /* Barre d'outils du navigateur mobile */ --color-chrome-toolbar: #2a1a12; /* #f2f4f7 */ } /* La couleur de la barre du navigateur mobile se pose aussi par meta ; ce sélecteur sert aux navigateurs qui lisent la variable. */ body.season-halloween{ background-color:var(--color-content-bg); } /* ============================================================= BLOCS À COULEUR FIGÉE (voir AUDIT.md) ------------------------------------------------------------- Ces éléments ont une couleur saisie dans l'éditeur WPBakery : ils ne suivent pas la palette. Les classes us_custom_XXXXXXXX sont propres à ce site et restent à relever à l'inspecteur — les sélecteurs génériques ci-dessous couvrent déjà la majorité des cas. ============================================================= */ /* 1. Les trois boutons « En savoir plus » de la section Nos univers (jaune / rouge / vert — les deux derniers sont figés) */ body.season-halloween .w-btn.us-btn-style_2, body.season-halloween .w-btn[class*="us_custom_"]{ background-color:#d8601b !important; border-color:#d8601b !important; color:#ffffff !important; } /* 2. Le fond crème de la section « Rendez-vous magiques » */ body.season-halloween .l-section.cde-evenement{ background-color:#fdf5ec !important; } /* 3. Silhouettes d'herbes et textures vertes décoratives. Alternative : fournir une variante automnale via l'écran « Visuels saisonniers » plutôt que de filtrer. */ body.season-halloween .cde-herbes, body.season-halloween .l-section-img.cde-texture{ filter:sepia(.55) hue-rotate(-18deg) saturate(1.3); } /* 4. La pastille rouge « Le parc est fermé » reste rouge : c'est une alerte, elle doit accrocher. Rien à faire. Si vous préférez l'orange, décommenter : body.season-halloween .cde-status{ background-color:#d8601b !important; } */ /* 5. Le bouton « Réserver » de l'entête garde un fond posé à part (dégradé ou couleur figée). On le force ici. */ body.season-halloween .l-header .w-btn, body.season-halloween .l-subheader .w-btn, body.season-halloween .l-header .menu-item.btn > a, body.season-halloween .w-nav-item.btn > .w-nav-anchor{ background-color:#d8601b !important; background-image:none !important; border-color:#d8601b !important; color:#ffffff !important; } /* ============================================================= DÉCORS ============================================================= */ /* Toiles d'araignée dans les deux angles hauts — SVG en data-URI, aucune image à charger. */ body.season-halloween::before{ content:""; position:fixed; top:0; left:0; right:0; height:180px; pointer-events:none; z-index:100; /* au-dessus des sections, sous l'entête (111) */ background-repeat:no-repeat; background-position:left top, right top; background-size:170px 170px, 170px 170px; /* trait clair + ombre portée : lisible sur photo claire comme sur photo sombre */ filter:drop-shadow(0 1px 2px rgba(35,18,0,.55)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,246,236,.60)' stroke-width='1.7'%3E%3Cpath d='M0 0 L200 200 M0 0 L200 90 M0 0 L90 200 M0 0 L200 145 M0 0 L145 200 M0 0 L200 40 M0 0 L40 200'/%3E%3Cpath d='M34 0 Q20 20 0 34 M68 0 Q40 40 0 68 M102 0 Q60 60 0 102 M140 0 Q82 82 0 140 M182 0 Q108 108 0 182'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,246,236,.60)' stroke-width='1.7'%3E%3Cg transform='translate(200,0) scale(-1,1)'%3E%3Cpath d='M0 0 L200 200 M0 0 L200 90 M0 0 L90 200 M0 0 L200 145 M0 0 L145 200 M0 0 L200 40 M0 0 L40 200'/%3E%3Cpath d='M34 0 Q20 20 0 34 M68 0 Q40 40 0 68 M102 0 Q60 60 0 102 M140 0 Q82 82 0 140 M182 0 Q108 108 0 182'/%3E%3C/g%3E%3C/svg%3E"); } /* Une araignée qui descend et remonte lentement au fil */ body.season-halloween::after{ content:""; position:fixed; top:0; right:11%; width:30px; height:150px; pointer-events:none; z-index:100; background-repeat:no-repeat; filter:drop-shadow(0 1px 2px rgba(35,18,0,.5)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 150' fill='none'%3E%3Cline x1='20' y1='0' x2='20' y2='104' stroke='rgba(255,246,236,.55)' stroke-width='1.2'/%3E%3Cg stroke='%23160c05' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M14 118 L3 108 M14 124 L1 124 M14 130 L4 140 M26 118 L37 108 M26 124 L39 124 M26 130 L36 140'/%3E%3C/g%3E%3Cellipse cx='20' cy='126' rx='10' ry='12' fill='%231b1006'/%3E%3Ccircle cx='20' cy='112' r='6.5' fill='%23241608'/%3E%3Ccircle cx='17.5' cy='111' r='1.7' fill='%23d8601b'/%3E%3Ccircle cx='22.5' cy='111' r='1.7' fill='%23d8601b'/%3E%3C/svg%3E"); animation:cde-dangle 16s ease-in-out infinite; } @keyframes cde-dangle{ 0%,100%{ transform:translateY(-70px); } 45%,55%{ transform:translateY(120px); } } /* La brume, posée par fog.js devant le visuel du hero */ .cde-fog{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; } /* ============================================================= ACCESSIBILITÉ ET MOBILE ============================================================= */ @media (prefers-reduced-motion: reduce){ body.season-halloween::after{ animation:none; } } @media (max-width:600px){ body.season-halloween::before{ background-size:110px 110px, 110px 110px; } body.season-halloween::after{ display:none; } }