/* ============================================================ PALETTES MENSUELLES COMPLÈTES (Janvier → Décembre) Aide : chaque mois applique automatiquement ses couleurs via ============================================================ */ /* Janvier — Hiver givré */ :root[data-month="1"] { --fond: #F4F6FA; --accent: #AFC4D5; --titre: #3E4A61; --texte: #2E2E2E; --ornement: #DDE3EB; } /* Février — Parchemin poétique */ :root[data-month="2"] { --fond: #F4E9D8; --accent: #C9A86A; --titre: #5A4634; --texte: #3A2F28; --ornement: #7A3E48; } /* Mars — Renaissance végétale */ :root[data-month="3"] { --fond: #F3F8F2; --accent: #A8C9A1; --titre: #4E6A4F; --texte: #2F3A2F; --ornement: #CFE6C8; } /* Avril — Floraison douce */ :root[data-month="4"] { --fond: #F8F3F5; --accent: #E7C9D9; --titre: #6A4E63; --texte: #3E3A39; --ornement: #DCC7E3; } /* Mai — Lumière & nature */ :root[data-month="5"] { --fond: #FFFDF7; --accent: #CDE6C1; --titre: #3F5E3C; --texte: #4A4F45; --ornement: #E8D88C; } /* Juin — Début d’été */ :root[data-month="6"] { --fond: #FAF4E8; --accent: #A7CDEB; --titre: #2F4A68; --texte: #4E463A; --ornement: #E8A79B; } /* Juillet — Été lumineux */ :root[data-month="7"] { --fond: #FFF7E6; --accent: #7DB7E8; --titre: #1F4E7A; --texte: #5A4A3A; --ornement: #F2D36B; } /* Août — Chaleur dorée */ :root[data-month="8"] { --fond: #F7E9C8; --accent: #E8B07A; --titre: #6A4A2E; --texte: #3A2A1E; --ornement: #B45E3C; } /* Septembre — Automne naissant */ :root[data-month="9"] { --fond: #F3E8D8; --accent: #A8B79A; --titre: #4E3A2E; --texte: #3A2F28; --ornement: #D1A46A; } /* Octobre — Automne profond */ :root[data-month="10"] { --fond: #F2E4D2; --accent: #D98A5F; --titre: #4A2F1F; --texte: #3A2A1E; --ornement: #A3472A; } /* Novembre — Brume & introspection */ :root[data-month="11"] { --fond: #F2F2F4; --accent: #B8C0CC; --titre: #2F3E52; --texte: #2E2E2E; --ornement: #D8DDE3; } /* Décembre — Hiver magique */ :root[data-month="12"] { --fond: #F9FAFB; --accent: #C7D8E8; --titre: #2E3A4F; --texte: #3A3F45; --ornement: #D9CBA8; } /* ============================================================ PALETTE SPÉCIALE — TEXTE PAR DÉFAUT (pas d’événement) ============================================================ */ :root[data-default="1"] { --fond: #F7F5F2; --accent: #C8BBAA; --titre: #6A5A4A; --texte: #3E3A36; --ornement: #BFA98C; } /* ============================================================ FOND GLOBAL + THÈMES SAISONNIERS ============================================================ */ body { margin: 0; padding: 0; background: #2b2b2b; font-family: 'Lora', serif; } .mon-iframe { margin-top: 10px; } body.spring, body.summer, body.autumn, body.winter { background: none !important; } /* ============================================================ CADRE GLOBAL DU LIVRE ============================================================ */ .book-wrapper { display: flex; justify-content: center; align-items: flex-start; min-height: auto; background-size: cover; background-position: center; } .single-page { background: #fdf7ec; border-radius: 20px; overflow: hidden; padding: 30px 40px; box-shadow: 0 0 25px rgba(0,0,0,0.35); max-width: 1100px; width: 98%; } .event-box { width: 100%; } /* ============================================================ TITRE ============================================================ */ .event-title { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 28px; margin: 0 0 15px 0; } .underline-default { border-bottom: 2px solid #c9a86a; padding-bottom: 5px; } .no-line { border-bottom: none; } /* ============================================================ LAYOUT IMAGE + TEXTE COURT ============================================================ */ .event-layout { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; } .event-image { flex-shrink: 0; } .event-image img { max-width: 250px; height: auto; border-radius: 12px; border: 3px solid #c9a86a; box-shadow: 0 0 12px rgba(0,0,0,0.35); } .event-text-block { overflow: hidden; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } .event-text { font-size: 18px; line-height: 1; margin-top: 0; padding-left: 5px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } /* ============================================================ TEXTE LONG ============================================================ */ .event-long-text { margin-top: 25px; padding: 15px 12px; font-size: 18px; line-height: 1; background: rgba(0,0,0,0.03); border-left: 4px solid #c9a86a; border-radius: 8px; word-wrap: break-word; overflow-wrap: break-word; } .event-long-text p { margin: 0; padding: 0; } /* ============================================================ TAGS ============================================================ */ .event-tags { margin-top: 20px; padding: 10px 15px; background: rgba(0,0,0,0.04); border-radius: 10px; font-size: 16px; line-height: 1.4; border: 1px solid #c9a86a; } /* ============================================================ MINIATURE VIDÉO ============================================================ */ .video-preview { text-align: center; margin: 15px 0 25px 0; } .video-mini { width: 130px; height: 73px; border-radius: 8px; border: 2px solid #c9a86a; cursor: pointer; transition: 0.25s; box-shadow: 0 0 12px rgba(0,0,0,0.35); } .video-mini:hover { transform: scale(1.07); } .video-label { margin-top: 6px; font-size: 14px; color: #c9a86a; font-style: italic; } /* ============================================================ POPUP VIDÉO ============================================================ */ #video-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); justify-content: center; align-items: center; z-index: 9999; } #video-content { background: #111; padding: 10px; border-radius: 10px; position: relative; text-align: center; } #close-video { position: absolute; top: -10px; right: -10px; background: #ff4444; color: #fff; padding: 5px 10px; border-radius: 50%; cursor: pointer; font-weight: bold; } .close-link { margin-top: 10px; text-align: center; color: #ffd369; cursor: pointer; font-size: 15px; text-decoration: underline; transition: 0.2s; } .close-link:hover { color: #ffb347; } /* ============================================================ LETTRINES ============================================================ */ .event-text-block p::first-letter { font-size: 2.6em; float: left; line-height: 0.8; padding-right: 8px; padding-top: 4px; color: #c9a86a; font-family: 'Cormorant Garamond', serif; font-weight: 600; text-shadow: 0 0 4px rgba(0,0,0,0.3); } .event-long-text p::first-letter { font-size: 3.2em; float: left; line-height: 0.8; padding-right: 10px; padding-top: 4px; color: #c9a86a; font-family: 'Cormorant Garamond', serif; font-weight: 600; text-shadow: 0 0 4px rgba(0,0,0,0.3); } /* COPYRIGHT DANS LE PARCHEMIN — LÉGÈREMENT DÉCALÉ VERS LA GAUCHE */ .box { width: 100%; display: flex; justify-content: flex-end; margin-top: 20px; padding-right: 22px; /* ← léger décalage vers la gauche */ } .copyright { font-size: 12px; color: rgba(0,0,0,0.45); font-style: italic; white-space: nowrap; } /* ============================================================ BOUTON POPUP PAGE SPÉCIALE ============================================================ */ .open-popup-btn { margin-top: 25px; padding: 10px 15px; background: #c9a86a; color: #fff; border-radius: 8px; text-align: center; font-size: 16px; cursor: pointer; width: fit-content; box-shadow: 0 0 8px rgba(0,0,0,0.25); } .open-popup-btn:hover { background: #b89255; } /* COPYRIGHT — gravure ultra douce */ .copyright-box { margin-top: 25px; text-align: right; font-size: 17px; font-style: italic; /* Doré très pâle, presque fantôme */ color: rgba(210,185,140,0.28); padding-top: 6px; border-top: 1px solid rgba(201,168,106,0.12); /* Gravure très légère, effet "pressé" subtil */ text-shadow: 0px 1px 1px rgba(255,255,255,0.18), 0px -1px 1px rgba(0,0,0,0.12); }