25:I[868422,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/3vkzaackgg_qg.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/3p652vdqlk1ce.js","/_next/static/chunks/0-dqqj6hfkr_n.js","/_next/static/chunks/2matreab0rub0.js"],"SiteProvider"] :HL["/styles/static.css","style"] :HL["/styles/notion.css","style"] :HL["/styles/super.css","style"] :HL["https://assets-v2.super.so/sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/d7bea735-04a7-46dd-9479-9fbef1231212.ttf","font",{"crossOrigin":"anonymous","type":"font/ttf"}] :HL["https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/0b3834ef-a806-4eb7-9190-412049fb65b5.ttf","font",{"crossOrigin":"anonymous","type":"font/ttf"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://sites.super.so/snippets/full-width-sections.css","style"] :HL["https://sites.super.so/snippets/view-picker.css","style"] 11:["$","style",null,{"dangerouslySetInnerHTML":{"__html":"html{font-size:16px}"}}] 12:[["$","link","/styles/static.css",{"rel":"stylesheet","href":"/styles/static.css","precedence":"default"}],["$","link","/styles/notion.css",{"rel":"stylesheet","href":"/styles/notion.css","precedence":"default"}],["$","link","/styles/super.css",{"rel":"stylesheet","href":"/styles/super.css","precedence":"default"}]] 13:["$","link","custom-font-regular-sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/d7bea735-04a7-46dd-9479-9fbef1231212.ttf",{"rel":"preload","href":"https://assets-v2.super.so/sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/d7bea735-04a7-46dd-9479-9fbef1231212.ttf","crossOrigin":"anonymous","as":"font","type":"font/ttf"}] 14:["$","link","font-preload-Oswald-regular",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 15:["$","link","font-preload-Oswald-500",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 16:["$","link","font-preload-Oswald-600",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 17:["$","link","font-preload-Oswald-700",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Oswald/oswald-v49-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 18:["$","link","custom-font-regular-sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/0b3834ef-a806-4eb7-9190-412049fb65b5.ttf",{"rel":"preload","href":"https://assets-v2.super.so/sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/0b3834ef-a806-4eb7-9190-412049fb65b5.ttf","crossOrigin":"anonymous","as":"font","type":"font/ttf"}] 19:["$","link","font-preload-Inter-regular",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 1a:["$","link","font-preload-Inter-500",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 1b:["$","link","font-preload-Inter-600",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 1c:["$","link","font-preload-Inter-700",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 1d:["$","link",null,{"rel":"preload","href":"https://sites.super.so/snippets/full-width-sections.css","as":"style"}] 1e:["$","link",null,{"rel":"preload","href":"https://sites.super.so/snippets/view-picker.css","as":"style"}] 1f:["$","script","2",{"dangerouslySetInnerHTML":{"__html":"(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,'script','dataLayer','GTM-W93J9N72');"},"children":null}] 20:["$","link","link-https://sites.super.so/snippets/full-width-sections.css",{"rel":"stylesheet","href":"https://sites.super.so/snippets/full-width-sections.css"}] 21:["$","link","link-https://sites.super.so/snippets/view-picker.css",{"rel":"stylesheet","href":"https://sites.super.so/snippets/view-picker.css"}] 22:["$","script","12",{"async":true,"src":"https://www.googletagmanager.com/gtag/js?id=G-LLZ6WBT5HQ","children":null}] 23:["$","script","14",{"dangerouslySetInnerHTML":{"__html":"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n\n gtag('config', 'G-LLZ6WBT5HQ');\n"},"children":null}] 26:T558, 27:T70b0,@charset "UTF-8"; @font-face { font-family: "MoskoMappa"; src: url("https://assets.super.so/779bdd9b-4337-4bbd-98bd-cc719846d450/files/6b60f884-918e-4107-9d28-61685f1c212d/moskomappa.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* ========================================================= OBSCIGAME — CSS GLOBAL (Super.so) - Masque titres Notion - Callouts : Jaune (bannière full-bleed), Gris (carte), Rouge (bouton) ========================================================= */ /* Masquer le titre de page (Super) */ .notion-page__title, .notion-header__title { display: none !important; } /* Optionnel : masquer aussi l’icône de page */ .notion-page__icon, .notion-header__icon { display: none !important; } :root { --og-yellow:#F9BA16; --og-black:#000; --og-radius:20px; --og-max:1200px; --og-pad:18px; --og-pad-m:16px; } /* Container global : remet des marges "site" */ .notion-page-content { max-width: var(--og-max) !important; margin: 0 auto !important; padding-left: var(--og-pad) !important; padding-right: var(--og-pad) !important; width: 100% !important; } @media (max-width: 900px) { .notion-page-content { padding-left: var(--og-pad-m) !important; padding-right: var(--og-pad-m) !important; } } /* Sécurité : éviter qu'un ancien CSS rende tous les callouts cliquables MAIS on NE touche PAS aux callouts rouges (boutons) */ .notion-callout:not(.bg-red-light):not(.border.bg-red-light) .notion-link { position: static !important; inset: auto !important; width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; pointer-events: auto !important; } /* ========================================================= PATCH ALIGNEMENT — le wrapper des callouts (empêche le décalage à droite observé) ========================================================= */ .notion-callout-block { position: relative !important; left: auto !important; right: auto !important; transform: none !important; max-width: var(--og-max) !important; width: calc(100% - var(--og-pad) * 2) !important; margin: 18px auto !important; } @media (max-width: 900px) { .notion-callout-block { width: calc(100% - var(--og-pad-m) * 2) !important; margin: 16px auto !important; } } /* Neutralise tout décalage sur les callouts eux-mêmes (sauf jaune) */ .notion-callout.bg-gray-light, .notion-callout.bg-gray-light.border, .notion-callout.bg-blue-light, .notion-callout.bg-blue-light.border, .notion-callout.bg-red-light, .notion-callout.bg-red-light.border { position: relative !important; left: auto !important; right: auto !important; transform: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= 1) JAUNE — bannière full-bleed ========================================================= */ .notion-callout.bg-yellow-light, .notion-callout.bg-yellow-light.border { display: block !important; position: relative !important; left: 50% !important; right: 50% !important; width: 100vw !important; margin-left: -50vw !important; margin-right: -50vw !important; background: var(--og-yellow) !important; color: #000 !important; border: 2px solid var(--og-black) !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; padding: 16px var(--og-pad) !important; } /* Contenu de la bannière : aligné sur la largeur "site" */ .notion-callout.bg-yellow-light .notion-callout__content, .notion-callout.bg-yellow-light.border .notion-callout__content { max-width: var(--og-max) !important; margin: 0 auto !important; } /* Pas d’icône sur la bannière */ .notion-callout.bg-yellow-light .notion-callout__icon, .notion-callout.bg-yellow-light.border .notion-callout__icon { display: none !important; } /* ========================================================= 2) GRIS — carte Obscigame (dans les marges) ========================================================= */ .notion-callout.bg-gray-light, .notion-callout.bg-gray-light.border { width: 100% !important; margin: 0 !important; display: block !important; background: #fff !important; color: #000 !important; border: 2px solid var(--og-black) !important; border-radius: var(--og-radius) !important; padding: 18px !important; box-shadow: none !important; filter: drop-shadow(5px 4px 0 var(--og-yellow)) drop-shadow(2px 6px 0 var(--og-yellow)) !important; overflow: visible !important; transition: transform 0.15s ease, filter 0.15s ease !important; } .notion-callout.bg-gray-light:hover, .notion-callout.bg-gray-light.border:hover { transform: translate(-2px, -2px) rotate(-0.2deg) !important; filter: drop-shadow(7px 6px 0 var(--og-yellow)) drop-shadow(3px 8px 0 var(--og-yellow)) !important; } /* ========================================================= 3) ROUGE — Bouton Obscigame (robuste, y compris avec URL visible) - taille = contenu (texte + lien) - centré dans le container - pas de rognage en colonne / dans callout jaune ========================================================= */ .notion-callout.bg-red-light, .notion-callout.bg-red-light.border { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; max-width: 100% !important; min-width: max-content !important; margin: 0 auto !important; background: #000 !important; color: #fff !important; border: 3px solid #000 !important; border-radius: 999px !important; padding: 10px 20px !important; min-height: 44px !important; box-shadow: 4px 5px 0 var(--og-yellow, #F9BA16) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; user-select: none !important; transition: transform 180ms ease, box-shadow 180ms ease, filter 80ms ease !important; } /* Effet de remplissage au hover */ .notion-callout.bg-red-light::after, .notion-callout.bg-red-light.border::after { content: "" !important; position: absolute !important; inset: 0 !important; background: var(--og-yellow, #F9BA16) !important; transform: translateX(-105%) !important; transition: transform 220ms ease !important; z-index: 0 !important; } .notion-callout.bg-red-light:hover::after, .notion-callout.bg-red-light.border:hover::after { transform: translateX(0) !important; } /* Contenu au-dessus du fond animé */ .notion-callout.bg-red-light .notion-callout__content, .notion-callout.bg-red-light.border .notion-callout__content { position: relative !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; white-space: nowrap !important; text-align: center !important; color: #fff !important; } /* Reset des marges internes Notion */ .notion-callout.bg-red-light .notion-callout__content > *, .notion-callout.bg-red-light.border .notion-callout__content > * { margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* Pas d’icône */ .notion-callout.bg-red-light .notion-callout__icon, .notion-callout.bg-red-light.border .notion-callout__icon { display: none !important; } /* Liens : cliquables normalement */ .notion-callout.bg-red-light a, .notion-callout.bg-red-light a:visited, .notion-callout.bg-red-light a:hover, .notion-callout.bg-red-light a:active, .notion-callout.bg-red-light.border a, .notion-callout.bg-red-light.border a:visited, .notion-callout.bg-red-light.border a:hover, .notion-callout.bg-red-light.border a:active, .notion-callout.bg-red-light .notion-link, .notion-callout.bg-red-light.border .notion-link { position: relative !important; z-index: 3 !important; color: #fff !important; text-decoration: none !important; pointer-events: auto !important; } /* Force les spans internes en blanc */ .notion-callout.bg-red-light .notion-callout__content *, .notion-callout.bg-red-light.border .notion-callout__content * { color: #fff !important; } /* Hover : bouton qui s’enfonce légèrement */ .notion-callout.bg-red-light:hover, .notion-callout.bg-red-light.border:hover { transform: translate(2px, 2px) !important; box-shadow: 2px 3px 0 var(--og-yellow, #F9BA16) !important; } /* Sur fond jaune, le texte passe noir au hover pour rester lisible */ .notion-callout.bg-red-light:hover .notion-callout__content, .notion-callout.bg-red-light:hover .notion-callout__content *, .notion-callout.bg-red-light:hover a, .notion-callout.bg-red-light.border:hover .notion-callout__content, .notion-callout.bg-red-light.border:hover .notion-callout__content *, .notion-callout.bg-red-light.border:hover a { color: #000 !important; } .notion-callout.bg-red-light:active, .notion-callout.bg-red-light.border:active { filter: saturate(0.8) !important; transform: translate(3px, 3px) scale(0.98) !important; } /* ========================================================= OBSCIGAME — BOUTON TÉLÉCHARGEMENT Callout bleu Notion ========================================================= */ .notion-callout.bg-blue-light, .notion-callout.bg-blue-light.border { position: relative !important; isolation: isolate !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto 12px !important; padding: 14px 22px !important; background: #000 !important; color: #fff !important; border: 3px solid #000 !important; border-radius: 16px !important; overflow: visible !important; cursor: pointer !important; user-select: none !important; box-shadow: 0 9px 0 var(--og-yellow, #f9ba16) !important; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important; } /* Hover : le bouton s’enfonce */ .notion-callout.bg-blue-light:hover, .notion-callout.bg-blue-light.border:hover { transform: translateY(4px) !important; box-shadow: 0 5px 0 var(--og-yellow, #f9ba16) !important; } /* Active : bouton pressé */ .notion-callout.bg-blue-light:active, .notion-callout.bg-blue-light.border:active { transform: translateY(9px) !important; box-shadow: 0 0 0 var(--og-yellow, #f9ba16) !important; } /* Contenu */ .notion-callout.bg-blue-light .notion-callout__content, .notion-callout.bg-blue-light.border .notion-callout__content { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-weight: 900 !important; font-size: 16px !important; line-height: 1.1 !important; text-align: center !important; white-space: nowrap !important; } /* Reset Notion */ .notion-callout.bg-blue-light .notion-callout__content > *, .notion-callout.bg-blue-light.border .notion-callout__content > * { margin: 0 !important; padding: 0 !important; } /* Pas d’icône */ .notion-callout.bg-blue-light .notion-callout__icon, .notion-callout.bg-blue-light.border .notion-callout__icon { display: none !important; } /* Liens */ .notion-callout.bg-blue-light a, .notion-callout.bg-blue-light a:visited, .notion-callout.bg-blue-light a:hover, .notion-callout.bg-blue-light a:active, .notion-callout.bg-blue-light.border a, .notion-callout.bg-blue-light.border a:visited, .notion-callout.bg-blue-light.border a:hover, .notion-callout.bg-blue-light.border a:active { color: #ffffff !important; text-decoration: none !important; } /* Hover : bleu -> rouge Obscigame */ .notion-callout.bg-blue-light:hover, .notion-callout.bg-blue-light.border:hover { background: var(--og-yellow, #e54326) !important; } /* Active */ .notion-callout.bg-blue-light:active, .notion-callout.bg-blue-light.border:active { background: var(--og-red, #e54326) !important; } /* ========================================================= OBSCIGAME — GALERIE NOTION (GLOBAL) v2 - Image moins haute - Résumé plus lisible - Étiquettes (pills) colorées par propriété (charte) - Ombre plus fine / style cartoon ========================================================= */ :root { --og-yellow:#f9ba16; --og-black:#000; --og-blue:#3cabbc; --og-red:#e54326; --og-green:#5bbd7e; --og-radius:20px; --og-border:2px solid var(--og-black); /* Ombres plus “légères” */ --og-shadow-black: 2px 2px 0 rgba(0,0,0,1); --og-shadow-color: 4px 4px 0 rgba(249,186,22,.55); /* halo jaune discret */ } /* ----------------------------- Grille galerie : un peu d’air ----------------------------- */ .notion-gallery-view, .notion-collection-view-gallery { gap: 18px !important; } /* ----------------------------- Carte : base ----------------------------- */ .notion-collection-card { background: #fff !important; border: var(--og-border) !important; border-radius: var(--og-radius) !important; /* Ombre “cartoon” plus fine */ box-shadow: var(--og-shadow-black), var(--og-shadow-color) !important; overflow: hidden !important; transform-origin: 40% 40% !important; will-change: transform, box-shadow !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } .notion-collection-card:hover { transform: translate(-1px, -1px) rotate(-0.15deg) !important; box-shadow: 3px 3px 0 rgb(0, 0, 0), 6px 6px 0 rgba(249, 186, 22, 0.55) !important; } /* ----------------------------- Image : moins haute, plus “teaser” ----------------------------- */ .notion-collection-card__cover { overflow: hidden !important; } .notion-collection-card__cover img { display: block !important; width: 100% !important; /* clé : on limite la hauteur perçue */ max-height: 160px !important; height: 160px !important; object-fit: cover !important; object-position: center !important; } /* ----------------------------- Contenu : plus respirant ----------------------------- */ .notion-collection-card__content { padding: 14px 14px 16px !important; } /* Nom (Titre) : plus “affiche” */ .notion-collection-card__title { font-weight: 950 !important; letter-spacing: 0.2px !important; line-height: 1.12 !important; font-size: 20px !important; margin: 2px 0 6px !important; } .notion-collection-card__title, .notion-collection-card__title * { color: #000 !important; text-decoration: none !important; } /* Auteur : discret mais lisible */ .notion-collection-card__property[data-property-name=Auteur] { opacity: 0.85 !important; font-size: 13px !important; margin: 0 0 10px !important; } /* Résumé : plus gros + meilleure lecture */ .notion-collection-card__property[data-property-name=Résumé] { font-size: 15px !important; line-height: 1.45 !important; opacity: 0.95 !important; margin-top: 10px !important; } /* Option : limite le résumé à ~4 lignes (décommente si tu veux) .notion-collection-card__property[data-property-name="Résumé"]{ display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } */ /* ----------------------------- ÉTIQUETTES (pills) : base commune (Notion/Super varie → on cible large) ----------------------------- */ .notion-pill, .notion-property__select .notion-pill, .notion-property__multi_select .notion-pill, .notion-property__multi_select-item, .notion-property__select-item { display: inline-flex !important; align-items: center !important; border: 2px solid #000 !important; border-radius: 999px !important; padding: 5px 10px !important; font-weight: 900 !important; font-size: 12px !important; line-height: 1 !important; /* par défaut */ background: #fff !important; color: #000 !important; /* petit “relief” cartoon (noir uniquement) */ box-shadow: 2px 2px 0 #000 !important; } /* Espacement entre tags */ .notion-pill + .notion-pill, .notion-property__multi_select-item + .notion-property__multi_select-item { margin-left: 8px !important; } /* Liens dans la carte : pas soulignés */ .notion-collection-card a { text-decoration: none !important; } /* ----------------------------- ÉTIQUETTES : couleur selon PROPRIÉTÉ - Thématique (Multi-select) = Bleu - Format du jeu (Select) = Jaune - Accessibilité (Multi) = Vert ----------------------------- */ /* THÉMATIQUE = bleu */ .notion-collection-card__property[data-property-name=Thématique] .notion-pill, .notion-collection-card__property[data-property-name=Thématique] .notion-property__multi_select-item { background: var(--og-blue) !important; color: #fff !important; } /* FORMAT DU JEU = jaune */ .notion-collection-card__property[data-property-name="Format du jeu"] .notion-pill, .notion-collection-card__property[data-property-name="Format du jeu"] .notion-property__select-item { background: var(--og-yellow) !important; color: #000 !important; } /* ACCESSIBILITÉ = vert */ .notion-collection-card__property[data-property-name=Accessibilité] .notion-pill, .notion-collection-card__property[data-property-name=Accessibilité] .notion-property__multi_select-item { background: var(--og-green) !important; color: #000 !important; } /* ----------------------------- Responsive ----------------------------- */ @media (max-width: 900px) { .notion-collection-card__cover img { max-height: 140px !important; height: 140px !important; } .notion-collection-card__title { font-size: 18px !important; } .notion-collection-card__property[data-property-name=Résumé] { font-size: 14px !important; } } /* ========================================================= PATCH — Galeries : colorisation des étiquettes (robuste) + micro-ajustement des espacements du résumé ========================================================= */ /* 0) Base : on repère le conteneur des propriétés dans les cartes */ .notion-collection-card__content { display: block !important; } /* 1) Les "lignes" de propriétés dans la carte (super/notion varie un peu) → on force chaque propriété à être un bloc clair, avec un petit rythme */ .notion-collection-card__property { display: block !important; margin: 0 0 8px !important; } /* 2) Le résumé : un chouïa plus “aéré” entre les tags */ .notion-collection-card__property[data-property-name=Résumé], .notion-collection-card__property:nth-of-type(5) { margin-top: 12px !important; /* un peu plus sous les tags du haut */ margin-bottom: 10px !important; /* un peu plus au-dessus des tags du bas */ } /* 3) Colorisation par POSITION (fallback très robuste) Ordre de tes propriétés sur la carte : 1 Nom, 2 Auteur, 3 Thématique, 4 Format, 5 Résumé, 6 Accessibilité */ .notion-collection-card__property:nth-of-type(3) .notion-pill, .notion-collection-card__property:nth-of-type(3) .notion-property__multi_select-item, .notion-collection-card__property:nth-of-type(3) .notion-property__select-item { background: var(--og-blue) !important; color: #fff !important; } .notion-collection-card__property:nth-of-type(4) .notion-pill, .notion-collection-card__property:nth-of-type(4) .notion-property__select-item, .notion-collection-card__property:nth-of-type(4) .notion-property__multi_select-item { background: var(--og-yellow) !important; color: #000 !important; } .notion-collection-card__property:nth-of-type(6) .notion-pill, .notion-collection-card__property:nth-of-type(6) .notion-property__multi_select-item, .notion-collection-card__property:nth-of-type(6) .notion-property__select-item { background: var(--og-green) !important; color: #000 !important; } /* 4) Si Super encapsule différemment (parfois les propriétés sont dans un wrapper), on ajoute un fallback “dernier bloc tags = accessibilité” (utile si résumé ou url ajoute un élément et décale nth-of-type) */ .notion-collection-card__property:last-of-type .notion-pill, .notion-collection-card__property:last-of-type .notion-property__multi_select-item { background: var(--og-green) !important; color: #000 !important; } /* 5) Anti-“terne” : un peu plus de peps sur les pills (sans changer la charte) */ .notion-pill, .notion-property__multi_select-item, .notion-property__select-item { box-shadow: 2px 2px 0 #000 !important; font-weight: 900 !important; } /* ========================================================= OBSCIGAME — TABLEAUX NOTION (simple /tableau, pas DB) Objectif : style “cartoon propre” + lisible ========================================================= */ :root { --og-yellow:#F9BA16; --og-blue:#3cabbc; --og-black:#000; --og-radius:20px; /* table “papier” */ --og-table-bg:#fff; --og-table-grid: rgba(0,0,0,.12); --og-table-zebra: rgba(0,0,0,.03); --og-table-left: rgba(249,186,22,.22); /* jaune pâle */ --og-shadow: 2px 2px 0 rgba(0,0,0,1), 5px 5px 0 rgba(249,186,22,.25); } /* Ciblage large : Notion simple tables */ .notion-simple-table, .notion-table, .notion-table-view, .notion-table-block, .notion-table-container { width: 100% !important; } /* Le “vrai” élément table (selon rendu Notion/Super) */ .notion-simple-table table, .notion-table table, table.notion-simple-table, table.notion-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--og-table-bg) !important; border: 2px solid var(--og-black) !important; border-radius: var(--og-radius) !important; box-shadow: var(--og-shadow) !important; overflow: hidden !important; /* important pour arrondis */ } /* Cellules */ .notion-simple-table td, .notion-simple-table th, .notion-table td, .notion-table th, table td, table th { padding: 12px 14px !important; border-right: 1px solid var(--og-table-grid) !important; border-bottom: 1px solid var(--og-table-grid) !important; vertical-align: top !important; font-size: 15px !important; line-height: 1.35 !important; } /* Retire le trait à droite sur la dernière colonne */ .notion-simple-table tr > *:last-child, .notion-table tr > *:last-child, table tr > *:last-child { border-right: 0 !important; } /* Retire le trait en bas sur la dernière ligne */ .notion-simple-table tr:last-child > *, .notion-table tr:last-child > *, table tr:last-child > * { border-bottom: 0 !important; } /* ----------------------------- Style “libellés” (colonne gauche) Sur tes tables, c’est souvent la 1ère colonne. ----------------------------- */ .notion-simple-table tr > *:first-child, .notion-table tr > *:first-child, table tr > *:first-child { background: var(--og-table-left) !important; font-weight: 900 !important; letter-spacing: 0.2px !important; /* contraste + petit effet “label” */ color: rgba(0, 0, 0, 0.92) !important; text-transform: none !important; white-space: nowrap !important; } /* Si tu veux une colonne gauche PLUS “bannière” : décommente pour un jaune plus franc */ /* .notion-simple-table tr > *:first-child, .notion-table tr > *:first-child, table tr > *:first-child{ background: var(--og-yellow) !important; } */ /* ----------------------------- Zébrage léger sur les lignes (colonne droite incluse) (on évite d’écraser la colonne gauche) ----------------------------- */ .notion-simple-table tr:nth-child(even) > *:not(:first-child), .notion-table tr:nth-child(even) > *:not(:first-child), table tr:nth-child(even) > *:not(:first-child) { background: var(--og-table-zebra) !important; } /* ----------------------------- Liens (email, url) : plus Obscigame, pas gris ----------------------------- */ .notion-simple-table a, .notion-table a, table a { color: var(--og-blue) !important; font-weight: 900 !important; text-decoration: none !important; border-bottom: 2px solid rgba(60, 171, 188, 0.35) !important; } .notion-simple-table a:hover, .notion-table a:hover, table a:hover { border-bottom-color: rgba(60, 171, 188, 0.85) !important; } /* ----------------------------- Responsive : évite l’écrasement ----------------------------- */ @media (max-width: 900px) { .notion-simple-table td, .notion-simple-table th, .notion-table td, .notion-table th, table td, table th { padding: 10px 10px !important; font-size: 14px !important; } /* Sur mobile, la colonne gauche peut casser : on autorise le retour à la ligne */ .notion-simple-table tr > *:first-child, .notion-table tr > *:first-child, table tr > *:first-child { white-space: normal !important; } } /* ========================================================= PATCH ROBUSTE — /tableau Notion : 1ère colonne “libellés” -> jaune Obscigame + texte noir lisible (même si Notion force du blanc) ========================================================= */ /* Couvre les deux variantes vues dans Super */ .notion-simple-table td:first-child, .notion-simple-table th:first-child, .notion-table td:first-child, .notion-table th:first-child { background: rgb(249, 186, 22) !important; /* jaune “paille” lisible */ color: #000 !important; font-weight: 900 !important; } /* Si tu veux un jaune franc, remplace la ligne background par : background: #f9ba16 !important; */ /* Notion/Super injecte souvent des spans => on force aussi la couleur dedans */ .notion-simple-table td:first-child *, .notion-simple-table th:first-child *, .notion-table td:first-child *, .notion-table th:first-child * { color: #000 !important; text-decoration-color: #000 !important; } /* Liens dans la colonne de gauche */ .notion-simple-table td:first-child a, .notion-table td:first-child a { color: #000 !important; text-decoration: none !important; } /* ========================================================= OBSCIGAME — TITRES PRINCIPAUX (H1 Notion) Remplace les anciens PNG ========================================================= */ .notion-heading__h1 { font-family: "MoskoMappa", sans-serif !important; font-size: clamp(48px, 6vw, 88px) !important; line-height: 1 !important; text-align: center !important; margin: 40px auto 24px !important; padding: 0 !important; color: #fff !important; /* contour noir épais */ -webkit-text-stroke: 3px #000; text-stroke: 3px #000; /* fallback + effet cartoon */ text-shadow: 3px 3px 0 #000, 4px 4px 0 #000; letter-spacing: 1px !important; } /* ========================================================= FIX FINAL — Bouton rouge : texte blanc réel ========================================================= */ .notion-callout.bg-red-light, .notion-callout.bg-red-light.border { color: #fff !important; } /* Force tous les niveaux internes générés par Super/Notion */ .notion-callout.bg-red-light .notion-callout__content, .notion-callout.bg-red-light.border .notion-callout__content, .notion-callout.bg-red-light .notion-callout__content *, .notion-callout.bg-red-light.border .notion-callout__content *, .notion-callout.bg-red-light a, .notion-callout.bg-red-light a *, .notion-callout.bg-red-light.border a, .notion-callout.bg-red-light.border a * { color: #fff !important; opacity: 1 !important; -webkit-text-fill-color: #fff !important; } /* Garde les liens cliquables normalement */ .notion-callout.bg-red-light a, .notion-callout.bg-red-light.border a, .notion-callout.bg-red-light .notion-link, .notion-callout.bg-red-light.border .notion-link { pointer-events: auto !important; text-decoration: none !important; } /* Hover jaune : texte noir */ .notion-callout.bg-red-light:hover .notion-callout__content, .notion-callout.bg-red-light:hover .notion-callout__content *, .notion-callout.bg-red-light:hover a, .notion-callout.bg-red-light:hover a *, .notion-callout.bg-red-light.border:hover .notion-callout__content, .notion-callout.bg-red-light.border:hover .notion-callout__content *, .notion-callout.bg-red-light.border:hover a, .notion-callout.bg-red-light.border:hover a * { color: #000 !important; -webkit-text-fill-color: #000 !important; } .og-same-author-title { font-family: "MoskoMappa", sans-serif !important; text-align: center; font-size: clamp(28px, 4vw, 48px); color: #fff; -webkit-text-stroke: 2px #000; margin: 40px auto 24px; } /* ========================================================= Supprime l'espace réservé à la couverture des pages ========================================================= */ .notion-page__cover, .notion-header__cover, .notion-page-cover { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }24:["$","body",null,{"children":[["$","$L25",null,{"settings":{"siteId":"779bdd9b-4337-4bbd-98bd-cc719846d450","userId":"e594cecc-3c35-4250-b806-3f71f9e888ef","domainName":"obscigame.super.site","name":"L'observatoire du jeu de culture scientifique","active":true,"free":false,"tier":"personal","favicon":null,"fontFamily":"Inter","legacyTheme":null,"language":"fr","languages":[],"notionPage":"4184f41008d04f6ea289f3771167a071","indexPageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::840993a2-f792-41c9-ba48-1b43bc76fc2c","pageProperties":false,"hidePageProperties":true,"disablePageProperties":false,"pageSyncing":true,"viewSwitcher":true,"layoutSidePanel":true,"floatingTableOfContents":false,"siteSearch":false,"advancedSearch":false,"themeToggle":false,"mondayFirst":true,"loadLimits":false,"hidePersonInfo":true,"showPropertyIcons":false,"filterRedirectsFromSearch":false,"googleAnalyticsId":"G-LLZ6WBT5HQ","redirectSubdomain":null,"noIndex":false,"viewsExceeded":false,"cacheTTL":0,"manualSync":false,"syncStatus":"unsynced","publishedAt":null,"custom404Enabled":false,"membershipEnabled":false,"membershipConfigured":false,"suppressLoginEmail":false,"indexMembershipTierIds":null,"navbar":{"type":"simple","style":{"height":56,"textColor":"var(--color-text-default)","backgroundColor":"var(--color-bg-default)","ctaTextColor":"var(--color-text-default)","ctaBackgroundColor":"var(--color-bg-default)","isSticky":true,"shadow":{"type":"none","color":"rgba(0,0,0,1)","opacity":12}},"links":[{"id":"1ffd5add-8663-461e-ba8d-1a6a9fdee26b","type":"page","label":"Découvrir des jeux","link":"/jeux","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::2bc5403d-ec2a-4570-b095-17b6a8c0fe5d","icon":"","list":[]},{"id":"b6672e90-50d9-4e62-8d1b-1e748c82235c","type":"page","label":"Ressources","link":"/ressources","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::2966c0e2-57b9-491f-9b62-545ee58f0c97","icon":"","list":[]}],"logo":{"type":"image","width":65,"fontSize":16,"textContent":"L'observatoire du jeu de culture scientifique","imageContent":"https://assets.super.so/779bdd9b-4337-4bbd-98bd-cc719846d450/uploads/logo/fe988f26-2ba0-45cd-b5f0-871d50b99908.png","imageContentDark":null,"disabled":false},"cta":{"type":"url","label":"Recensez votre jeu !","link":"https://forms.fillout.com/t/rrccgbuPizus","pageId":""},"isSticky":true,"breadcrumbs":false},"footer":{"type":"corners","style":{"textColor":"var(--color-text-default)","backgroundColor":"var(--color-bg-default)"},"links":[{"id":"4d7dc951-39c1-43ef-bc42-ae284d3e48a7","type":"list","label":"L'observatoire","icon":"","list":[{"id":"d8965569-afbe-4d0e-a76f-b3cf6855f727","type":"page","label":"Découvrir des jeux","link":"/jeux","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::2bc5403d-ec2a-4570-b095-17b6a8c0fe5d","icon":"","list":[]},{"id":"5a771779-7643-4b3c-bc56-9cd82bb88cc0","type":"page","label":"Ressources","link":"/ressources","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::2966c0e2-57b9-491f-9b62-545ee58f0c97","icon":"","list":[]},{"id":"c9a2e081-2646-47e2-a1b4-b38987a667b3","type":"url","label":"Recenser son jeu","link":"https://forms.fillout.com/t/rrccgbuPizus","icon":"","list":[]}]},{"id":"39064ee0-53da-48be-8255-1d6296660437","type":"list","label":"Partenaires","icon":"","list":[{"id":"66981927-f48a-4597-bb81-fdd72cb00d4e","type":"url","label":"Le Dôme","link":"https://ledome.info/","icon":"","description":"","list":[]},{"id":"c3115f6d-720f-4793-bdbf-13bdb362ad67","type":"url","label":"Ikigai","link":"https://ikigai.games/games/gamesList","icon":"","description":"","list":[]},{"id":"64ce2276-ce28-4ce7-a48b-386d0f941fd3","type":"url","label":"Instant Science","link":"https://www.instantscience.fr/","icon":"","description":"","list":[]},{"id":"286521da-7c07-45b2-8292-13278b4ae59d","type":"url","label":"S[cube]","link":"https://location.partageonslessciences.com/","icon":"","description":"","list":[]}]},{"id":"125275dc-f1e5-4f94-a77f-c6f652fe26f6","type":"list","label":"Légal","icon":"","list":[{"id":"b0b29151-9078-4808-924d-b1f6faa131e7","type":"page","label":"Mentions légales","link":"/mentions-lgales","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::5db8d145-be8b-4914-b390-fb57b5c6323f","icon":"","description":"","list":[]},{"id":"b710104e-8f9a-4aa3-974c-a5eab1b364b0","type":"page","label":"Données personnelles","link":"/donnes-personnelles","pageId":"779bdd9b-4337-4bbd-98bd-cc719846d450:::12378cf8-6c67-4598-bec7-656deff68f4a","icon":"","description":"","list":[]}]}],"logo":{"type":"image","width":90,"fontSize":16,"textContent":"L'observatoire du jeu de culture scientifique","imageContent":"https://assets.super.so/779bdd9b-4337-4bbd-98bd-cc719846d450/uploads/logo/82aefe89-d179-41fa-9373-bc8d97cb80a9.png","imageContentDark":null,"disabled":false},"socials":[],"footnote":"© 2023 by Le Dôme, Scientipole Savoirs & Société - S[Cube], Instant Science, et Ikigai - Games for citizens is licensed under CC BY-NC-SA 4.0","divider":true},"sidebar":{"enabled":false,"links":[],"cta":[],"logo":null,"searchEnabled":true},"theme":{"colorMode":"light","layout":{"paddingLayout":1.1,"layoutMaxWidth":1200,"columnSpacing":66,"borderThicknessLayout":1,"borderTypeLayout":"solid","borderRadiiLayout":6,"pageDisplay":"none"},"header":{"coverHeight":100,"titleAlign":"center","iconAlign":"-112px 0 0 0","display":"block"},"collectionCard":{"gap":40,"shadow":"rgba(0, 0, 0, 0.19) 0px 10px 20px -6px","coverHeightLarge":269,"coverHeightMedium":200,"coverHeightSmall":128,"titleSize":1.2,"coverSizeSmall":172,"coverSizeMedium":260,"coverSizeLarge":320,"iconDisplay":"none"},"callout":{"iconDisplay":"block","shadow":"none"},"typography":{"primaryFont":"2f1cd451-f638-4e6d-af97-aecab81a320d","secondaryFont":"e28982bd-5978-43e5-bff1-da10bcb3d87e","fonts":[{"id":"2f1cd451-f638-4e6d-af97-aecab81a320d","name":"ZT-Talk","fallback":"Oswald","regular":"sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/d7bea735-04a7-46dd-9479-9fbef1231212.ttf"},{"id":"e28982bd-5978-43e5-bff1-da10bcb3d87e","name":"Poppins","fallback":"Inter","regular":"sites/779bdd9b-4337-4bbd-98bd-cc719846d450/fonts/0b3834ef-a806-4eb7-9190-412049fb65b5.ttf"}],"baseSize":16,"titleSize":2.25,"headingSize":1,"quoteSize":1.13,"quoteSizeLarge":1.31,"textWeight":400,"headingWeight":600},"scrollbar":{"width":15},"navbar":{"height":93,"shadow":"rgba(0, 0, 0, 0.28) 0px 20px 40px -10px"},"footer":{"height":0},"sidebar":{"width":280,"shadow":"rgba(0, 0, 0, 0.22) 4px 0px 8px -2px"},"colors":{"light":{"text":"#37352F","textLight":"#000000","background":"#ffffff","borderColor":"#E9E9E7","checkboxBackground":"#2EAADC","hoverBackground":"#efefef","scrollbar":{"background":"#FAFAFA","handle":"#C1C1C1","border":"#E8E8E8"},"navbar":{"text":"#37352F","background":"#ffffff","buttonText":"#ffffff","buttonBackground":"#37352F","hoverBackground":null},"footer":{"text":"#ffffff","background":"#000000","buttonText":"#ffffff","buttonBackground":"#37352F"},"sidebar":{"text":"#37352F","ctaText":"#37352F","background":"#ffffff","hoverBackground":"#efefef","ctaBackground":"#ffffff","border":"#E9E9E7"},"database":{"cardBackground":"#ffffff","cardHoverBackground":"#f9f9f8","calendarWeekendBackground":"#f7f6f3"},"default":[45,8,20],"gray":[0,0,100],"brown":[0,0,100],"orange":[30,87,45],"yellow":[43,95,53],"green":[149,31,39],"blue":[202,53,43],"purple":[274,32,54],"pink":[328,48,53],"red":[9,79,52],"form":{"submitButton":{"default":"#55534E","gray":"#A7A39A","brown":"#9A6851","orange":"#D9730D","yellow":"#CA922F","green":"#448361","blue":"#327DA9","purple":"#8F64AF","pink":"#C24C8B","red":"#D44E49"}}},"dark":{"text":"#e1e1e1","textLight":"#9b9b9b","background":"#191919","borderColor":"#373737","checkboxBackground":"#2EAADC","hoverBackground":"#262626","scrollbar":{"background":"#FAFAFA","handle":"#C1C1C1","border":"#E8E8E8"},"navbar":{"text":"#e1e1e1","background":"#191919","buttonText":"#191919","buttonBackground":"#e1e1e1","hoverBackground":null},"footer":{"text":"#000000","background":"#ffffff","buttonText":"#191919","buttonBackground":"#e1e1e1"},"sidebar":{"text":"#e1e1e1","ctaText":"#e1e1e1","background":"#191919","hoverBackground":"#262626","ctaBackground":"#191919","border":"#373737"},"database":{"cardBackground":"#262626","cardHoverBackground":"#2f2f2f","calendarWeekendBackground":"#202020"},"form":{"submitButton":{"default":"#55534E","gray":"#A7A39A","brown":"#9A6851","orange":"#D9730D","yellow":"#CA922F","green":"#448361","blue":"#327DA9","purple":"#8F64AF","pink":"#C24C8B","red":"#D44E49"}},"default":[45,8,20],"gray":[0,0,61],"brown":[0,0,100],"orange":[25,54,53],"yellow":[38,54,54],"green":[146,32,47],"blue":[217,50,58],"purple":[270,55,62],"pink":[329,57,58],"red":[1,69,60]}}},"code":{"global":[{"id":"779bdd9b-4337-4bbd-98bd-cc719846d450:::662ed554-d00d-4b94-87bc-68cfc720f2ec","content":"\n\n\n\n\n\n\n\n\n\n"}],"head":[],"body":[{"id":"779bdd9b-4337-4bbd-98bd-cc719846d450:::23cd304d-7108-4ff8-b627-42fd3307962e","content":"$26"}],"style":[],"css":"$27"},"files":[]},"config":{"assetEndpoint":"https://assets.super.so","isPreview":false},"domainQueryParam":"$undefined","children":["$L28","$L29","$L2a","$L2b","$L2c"]}],"$L2d"]}]

Auteur·trice·s	Maruzzi
Durée	25 mn
Nombre de joueur·se·s	2
Thématiques	Vivant, Terre, Océan
Accessibilité	Payant, Boîte de jeu
Mots-clés	Océan Mer Faune marine Ecologie

EcoMundo Océans