/* ===================================================================== Événements — hero, blocs modulaires, cases à gratter, popup, bannière. Chargé uniquement quand un événement est en cours (ou sur sa page). Tout est exprimé avec les variables du site : la couleur dominante de l'événement (injectée dans le ) repeint donc ces composants aussi. ===================================================================== */ /* Nos composants s'ouvrent/se ferment avec l'attribut [hidden]. Or une règle de display posée sur la CLASSE l'emporte sur le display:none du navigateur : sans cette ligne, `el.hidden = true` laisserait le formulaire et la grille du compte à rebours parfaitement visibles. Tout ce qu'on masque en JS est listé ici. */ .evPopup[hidden], .evMailBody[hidden], .evMailResult[hidden], .evScratchHint[hidden], .evScratchProgress[hidden], .evLeaderboard[hidden], .evMailForm[hidden], .evPopupForm[hidden] { display: none !important; } /* ---------- Hero ---------- */ .evHero { position: relative; padding: clamp(48px, 9vw, 96px) 0 clamp(32px, 6vw, 64px); text-align: center; } /* Couverture : l'image occupe tout le haut de la page et porte le titre, la date et le statut. Un voile assombri du bas vers le haut garantit la lisibilité quelle que soit la photo — sans lui, un visuel clair rend le titre blanc illisible (et un visuel sombre, le titre foncé). */ /* Bloc de tête : il CONTIENT le fil d'Ariane et le bandeau, donc l'image s'arrête exactement où le bandeau s'arrête. Un calque de hauteur fixe débordait sur le contenu de la page (intro, consigne du jeu posées sur la photo). L'ornement, lui, est masqué sur cette page. */ .evTop { position: relative; } .evTop--cover { background-size: cover; background-position: center; } .evTop--cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16,10,22,.45) 0%, rgba(16,10,22,.5) 45%, rgba(16,10,22,.8) 100%); } .evTop > * { position: relative; z-index: 1; } .evCrumbs { padding-top: var(--sp-4); } /* Pas d'ornement sur la page d'un événement : l'image de couverture joue ce rôle. */ body[data-route="event"] .pageOrnament { display: none; } /* Sur l'image, le fil d'Ariane doit rester lisible. */ .evTop--cover .breadcrumb a, .evTop--cover .breadcrumb span { color: rgba(255,255,255,.92); } .evTop--cover .breadcrumb a:hover { color: #fff; } .evHero--cover { min-height: clamp(180px, 24vw, 300px); display: flex; align-items: flex-end; padding-top: clamp(40px, 8vw, 90px); } /* Préfixées par .evTop--cover : à spécificité égale, `.evHero h1` (déclarée plus bas) l'emportait par l'ordre et le titre reprenait la couleur du thème — rouge sur la photo au lieu de blanc. */ .evTop--cover .evHero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .evTop--cover .evHeroDates { color: rgba(255,255,255,.9); } .evTop--cover .evHeroFlag { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; } .evTop--cover .evHeroInner { color: #fff; } .evHeroInner { position: relative; z-index: 1; } .evHero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.08; margin: .2em 0 .3em; color: var(--brand-hover); } .evHeroDates { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--fg-3); } .evHeroFlag { display: inline-block; margin-top: 18px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--fg-3); font-size: .9rem; } /* ---------- Blocs ---------- La page s'organise sur UN axe central : le bandeau, l'introduction et le jeu partagent le même alignement. Avec un bandeau centré et un corps aligné à gauche, la page paraissait bancale et inachevée. */ .evBody { padding: var(--sp-10) 0 var(--sp-16); } .evBlock { margin: var(--sp-10) 0 0; } .evBlock:first-child { margin-top: 0; } .evBlockTitle { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 var(--sp-4); color: var(--brand-hover); } .evLead { margin: 0 auto var(--sp-5); color: var(--fg-2); max-width: 68ch; } .evIntro { max-width: 68ch; margin: 0 auto; text-align: center; font-size: 1.05rem; } .evBlock--scratch { text-align: center; } .evBlock--mail { max-width: 720px; margin-left: auto; margin-right: auto; } /* ---------- Choix du genre ---------- */ .evGenres { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-6); } /* Un seul genre disponible : le sélecteur n'a rien à sélectionner. */ .evGenres--single { display: none; } .evGenresLabel { color: var(--fg-3); margin-right: var(--sp-2); } .evGenre { font: inherit; cursor: pointer; padding: 8px 16px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); transition: transform .18s var(--ease), background-color .18s, color .18s, border-color .18s; } .evGenre:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand-hover); } .evGenre.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .evScratchHint { color: var(--fg-3); margin: 0 0 var(--sp-4); } .evScratchProgress { margin: var(--sp-4) 0 0; color: var(--fg-3); font-variant-numeric: tabular-nums; } /* ---------- Grille de cases à gratter ---------- */ /* `auto-fit` + largeur PLAFONNÉE + centrage : quand le vivier ne fournit que deux ou trois livres, les cartes restent à leur taille et se centrent, au lieu de se coller en haut à gauche d'une grille de cinq colonnes vides (ou de s'étirer sur toute la largeur). La grille supporte 1 comme 24 cartes. */ .evScratchGrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center; max-width: 940px; margin: 0 auto; } .evCard { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-5); overflow: hidden; background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } /* Couverture en haut, texte sur un bandeau PLEIN en dessous. Le titre était posé sur un dégradé sombre par-dessus l'image : illisible sur une couverture claire, sale sur une sombre. Une vraie séparation, comme les cards du site. */ .evCardInner { position: absolute; inset: 0; display: flex; flex-direction: column; } .evCardCover { position: relative; flex: 1 1 auto; overflow: hidden; min-height: 0; } .evCardCover img { width: 100%; height: 100%; object-fit: cover; display: block; } .evCardNoCover { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; font-family: var(--font-display); font-size: 3rem; color: var(--brand); background: var(--brand-soft); } .evCardMeta { flex: none; background: var(--surface); color: var(--fg); padding: 8px 10px 6px; text-align: center; border-top: 1px solid var(--border-soft); } .evCardMeta b { display: block; font-family: var(--font-display); font-size: .95rem; line-height: 1.2; } .evCardMeta i { font-style: normal; font-size: .78rem; color: var(--fg-3); } .evCardLinks { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; background: var(--surface); padding: 0 8px 8px; } .evCardLinks a { font-size: .74rem; padding: 3px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-hover); text-decoration: none; } .evCardCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; /* sinon le doigt fait défiler la page au lieu de gratter */ transition: opacity .45s var(--ease); } /* Tant que le vernis n'est pas peint (onglet en arrière-plan, mise en page pas encore stabilisée), le livre reste masqué : sinon la carte s'afficherait en clair avant d'être recouverte. On ne peut PAS mettre un fond sur le canvas pour ça — il apparaîtrait sous les pixels grattés à la place du livre. */ .evCard.is-covered .evCardInner { visibility: hidden; } .evCard.is-revealed { transform: translateY(-3px); box-shadow: var(--shadow-md); } .evCard.is-revealed .evCardCanvas { opacity: 0; pointer-events: none; } .evCard.is-revealed .evCardInner { animation: evPop .5s var(--ease) both; } /* Éclat au moment de la révélation : un halo qui s'ouvre puis disparaît. */ .evCard.is-revealed::after { content: ""; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), transparent 55%); animation: evFlash .7s var(--ease) both; } @keyframes evPop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes evFlash { from { opacity: .95; transform: scale(.4); } to { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .evCard.is-revealed .evCardInner, .evCard.is-revealed::after { animation: none; } .evCard.is-revealed::after { content: none; } } /* ---------- Inscription (mailbonjour) ---------- */ .evMail { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-6); padding: var(--sp-8); box-shadow: var(--shadow-sm); } .evMailLock { margin: 0; color: var(--fg-3); text-align: center; } .evMailForm { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .evMailForm input[type=email] { flex: 1 1 240px; font: inherit; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface-2); color: var(--fg); } .evMailForm input[type=email]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .evMailConsent { margin: var(--sp-3) 0 0; font-size: .84rem; color: var(--fg-3); } .evMailResult { margin-top: var(--sp-4); } .evMailResult p { margin: 0 0 var(--sp-3); } .evReferral { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .evReferral input { flex: 1 1 260px; font: inherit; padding: 10px 12px; border-radius: var(--r-4); border: 1px dashed var(--border); background: var(--surface-2); color: var(--fg-2); } .evLeaderboard { margin-top: var(--sp-5); } .evLeaderboard h3 { font-family: var(--font-display); margin: 0 0 var(--sp-2); } .evLeaderboard ol { margin: 0; padding-left: 1.2em; color: var(--fg-2); } .evLeaderboard li { margin: 2px 0; } /* ---------- Bannière ---------- Emplacements HORIZONTAUX (accueil, catégories, générateurs, articles) : le visuel garde son ratio mais sa hauteur est bornée à celle d'un leaderboard. Sans ce plafond, un visuel carré de 728 px de large occupe 728 px de HAUT — un demi-écran de bannière sur chaque page. Un vrai 728x90 n'est pas touché. La card « entre les cards » (.adSlot--native) n'est pas concernée : elle est déjà cadrée par .cardShot. */ .adSlot--event:not(.adSlot--native):not(.adSlot--bar) img { max-height: 120px; width: auto; } /* ---------- Le reste : aucun style propre ---------- Elle emprunte les classes des créas maison de la régie (.adSlot--house, .adSlot--native, .card/.cardShot/.cardBody), donc elle hérite du même rendu dans tous les emplacements. Rien à redéfinir ici : un style local finirait par diverger de celui des pubs. */ /* ---------- Popup bas-droite ---------- */ .evPopup { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(340px, calc(100vw - 36px)); opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .evPopup.is-in { opacity: 1; transform: none; } .evPopupInner { position: relative; border-radius: var(--r-6); overflow: hidden; background: var(--brand-hover) center/cover no-repeat; box-shadow: var(--shadow-lg); color: #fff; } .evPopupInner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,26,.58), rgba(20,14,26,.9)); } .evPopupBody { position: relative; padding: var(--sp-6); } .evPopupBody h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 6px; color: #fff; } .evPopupBody p { margin: 0 0 var(--sp-4); font-size: .92rem; color: rgba(255,255,255,.9); } .evPopupClose { position: absolute; top: 6px; right: 8px; z-index: 2; width: 32px; height: 32px; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #fff; background: transparent; border: 0; border-radius: var(--r-full); } .evPopupClose:hover { background: rgba(255,255,255,.16); } .evPopupForm { display: flex; gap: 6px; } .evPopupForm input[type=email] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9rem; padding: 9px 11px; border-radius: var(--r-3); border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.94); color: var(--fg); } .evPopup .evMailResult { position: relative; padding: 0 var(--sp-6) var(--sp-5); font-size: .88rem; color: #fff; } @media (max-width: 520px) { .evPopup { right: 10px; left: 10px; bottom: 10px; width: auto; } } @media (prefers-reduced-motion: reduce) { .evPopup { transition: none; } }