/* Montserrat (police variable, graisses 100 à 900), hébergée sur le site depuis le 14/10/2026 : plus aucune requête vers Google Fonts, qui transmettait l'adresse IP des visiteurs à Google. Fontsource 5.3.0, licence SIL Open Font License 1.1 (assets/fonts/montserrat/5.3.0/LICENSE). Deux sous-ensembles : latin (français) et latin étendu, téléchargé seulement si la page en contient un caractère. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/montserrat/5.3.0/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/montserrat/5.3.0/montserrat-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/montserrat/5.3.0/montserrat-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/montserrat/5.3.0/montserrat-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Charte Open App Learning (maquette Claude Design) : Montserrat, orange #FF7A00 / bleu #40ADEC, fonds clairs. Les variantes "-dark" servent au texte posé sur les fonds "-soft" (contraste ≥ 4,5:1). */ :root { --bg: #FFFFFF; --surface: #FFFFFF; --surface-raised: #FFFFFF; --muted: #F4F4F4; --header-bg: #40ADEC; --header-text: #FFFFFF; --header-hover: #FFFFFF; --header-accent: #FFFFFF; --border: #EAEAEA; --control-border: #DADADA; --pin-border: #E0CDBC; --text: #000000; --text-soft: #1A1A1A; --sub: #6B6B6B; --pill-text: #4A4A4A; --place: #767676; --orange: #FF7A00; --orange-hover: #E56E00; --orange-dark: #B35000; --orange-soft: #FFF1E6; --blue: #40ADEC; --blue-hover: #2F9BD9; --blue-dark: #1B6FA3; --blue-soft: #E3F2FB; --blue-panel: #BBDDF3; --blue-panel-text: #0E2A3C; --amber: #8A5A00; --amber-soft: #FBEBD0; --green: #237A4B; --green-soft: #E1F5E9; --red: #B83232; --red-soft: #FBE4E1; --hero-bg: #000000; --hero-border: transparent; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -14px rgba(0,0,0,0.18); --radius-xl: 20px; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121212; --surface: #1C1C1C; --surface-raised: #232323; --muted: #262626; --header-bg: #1A1A1A; --header-text: var(--text); --header-hover: var(--orange-dark); --header-accent: var(--orange); --border: #333333; --control-border: #4A4A4A; --pin-border: #5A4330; --text: #F2F2F2; --text-soft: #E4E4E4; --sub: #B3B3B3; --pill-text: #D0D0D0; --place: #8C8C8C; --orange: #FF8A1F; --orange-hover: #FF9D45; --orange-dark: #FFB066; --orange-soft: #2A1C10; --blue: #5BBBF0; --blue-hover: #7CC9F3; --blue-dark: #8CCFF5; --blue-soft: #12303F; --blue-panel: #16364A; --blue-panel-text: #D7ECF8; --amber: #E3A23C; --amber-soft: #3A2D14; --green: #5FC98A; --green-soft: #16301F; --red: #F08A84; --red-soft: #3A1D1B; --hero-bg: #000000; --hero-border: #2E2E2E; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6); } } :root[data-theme="dark"] { --bg: #121212; --surface: #1C1C1C; --surface-raised: #232323; --muted: #262626; --header-bg: #1A1A1A; --header-text: var(--text); --header-hover: var(--orange-dark); --header-accent: var(--orange); --border: #333333; --control-border: #4A4A4A; --pin-border: #5A4330; --text: #F2F2F2; --text-soft: #E4E4E4; --sub: #B3B3B3; --pill-text: #D0D0D0; --place: #8C8C8C; --orange: #FF8A1F; --orange-hover: #FF9D45; --orange-dark: #FFB066; --orange-soft: #2A1C10; --blue: #5BBBF0; --blue-hover: #7CC9F3; --blue-dark: #8CCFF5; --blue-soft: #12303F; --blue-panel: #16364A; --blue-panel-text: #D7ECF8; --amber: #E3A23C; --amber-soft: #3A2D14; --green: #5FC98A; --green-soft: #16301F; --red: #F08A84; --red-soft: #3A1D1B; --hero-bg: #000000; --hero-border: #2E2E2E; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6); } * { box-sizing: border-box; } /* Sans ça, une classe qui fixe `display` (ex. .field { display:flex }) gagne en spécificité sur la règle par défaut du navigateur pour [hidden], et l'élément reste visible malgré l'attribut — vu avec le champ email du formulaire de connexion. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } h1, h2, h3, h4 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 500; text-wrap: balance; } a { color: var(--orange-dark); } a:hover { color: var(--text); } button { font-family: 'Montserrat', system-ui, sans-serif; cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; } input, textarea, select { font-family: 'Montserrat', system-ui, sans-serif; background: var(--surface); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--radius-sm); } ::placeholder { color: var(--place); } .app-shell { max-width: 1360px; margin: 0 auto; padding: 40px 40px 80px; } @media (max-width: 640px) { .app-shell { padding: 24px 20px 64px; } } /* En-tête */ .site-header { background: var(--header-bg); position: sticky; top: 0; z-index: 20; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 40px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); } .brand-mark { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark img { height: 40px; width: auto; display: block; } .site-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .nav-link { font-size: 17px; color: var(--header-text); text-decoration: none; } .nav-link:hover { color: var(--header-hover); text-decoration: underline; text-underline-offset: 4px; } .nav-tools { display: flex; align-items: center; gap: 10px; } .nav-link.active { font-weight: 500; border-bottom: 2px solid var(--header-accent); padding-bottom: 2px; } /* Le contour de focus bleu du site ne se verrait pas sur l'en-tête bleu. */ .site-header :focus-visible { outline-color: var(--header-accent); } .site-header .user-menu :focus-visible { outline-color: var(--blue); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 720px) { /* Sur mobile la navigation passe sous le logo ; l'en-tête, devenu plus haut, n'est plus collant pour ne pas manger l'écran. */ .site-header { position: static; } .site-header-inner { padding: 10px 20px; gap: 10px; } .brand-mark { width: 48px; height: 48px; } .brand-mark img { height: 30px; } .site-nav { width: 100%; justify-content: space-between; gap: 10px; } .site-nav .btn-lg { font-size: 14.5px; padding: 10px 14px; } .nav-link { font-size: 15px; } .side-panel { top: 20px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius-sm); font-weight: 500; font-size: 14.5px; padding: 11px 18px; transition: transform .06s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; white-space: nowrap; text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-lg { font-size: 17px; font-weight: 400; padding: 14px 26px; } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: var(--orange-hover); color: #fff; } .btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-hover); color: #fff; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--control-border); } .btn-ghost:hover { border-color: var(--text); color: var(--text); } .btn-outline-light { background: transparent; color: #fff; border: 1px solid #fff; } .btn-outline-light:hover { background: #fff; color: #000; } .btn-soft { background: var(--blue-soft); color: var(--blue-dark); } .btn-soft:hover { filter: brightness(0.97); color: var(--blue-dark); } .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--control-border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .btn-icon:hover { border-color: var(--text); } /* Variante carrée pour les commandes de la zone de jeu (son, plein écran) : les distingue du bouton de thème, rond, qui appartient à l'en-tête du site. */ .btn-icon.btn-square { border-radius: var(--radius-sm); width: 40px; height: 40px; } .btn-icon.btn-square:hover { border-color: var(--orange); color: var(--orange-dark); } .btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid var(--red-soft); } .btn-danger-ghost:hover { background: var(--red-soft); } .btn-success { background: var(--green); color: #fff; } .btn-success:hover { filter: brightness(0.95); } .btn[disabled] { opacity: .45; cursor: not-allowed; } svg.icon { display: block; flex-shrink: 0; } /* Views */ .view { display: none; } .view.active { display: block; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .view.active { animation: none; } } /* Accueil */ .home { font-weight: 300; } .home-section { padding: 80px 40px; } .home-container { max-width: 1160px; margin: 0 auto; } .home-hero-wrap { padding: 48px 40px 0; } .home-hero { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; background: var(--hero-bg); border: 1px solid var(--hero-border); border-radius: var(--radius-xl); padding: 56px; color: #fff; } .home-hero-text { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .home-eyebrow { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #40ADEC; font-weight: 500; } .home-hero h1 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; font-weight: 300; text-wrap: pretty; } .home-hero h1 span { color: #FF7A00; } .home-hero p { margin: 0; font-size: 19px; line-height: 1.6; color: #E4E4E4; max-width: 46ch; text-wrap: pretty; } .home-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } .hero-visual { min-width: 0; height: 360px; position: relative; border-radius: 14px; background: #161616; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Vidéo de présentation (16:9) : elle remplace l'ancienne carte de quiz dessinée. */ .hero-visual.hero-video { height: auto; aspect-ratio: 16 / 9; background: #161616; } .hero-video-el { width: 100%; height: 100%; object-fit: contain; display: block; } .hero-video-toggle { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.35); } .hero-video-toggle:hover { background: rgba(0,0,0,.75); } .hero-video-toggle:focus-visible { outline: 3px solid #FF7A00; outline-offset: 2px; } .home-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; } .home-join label { font-size: 20px; } .home-join input { font-size: 16px; font-weight: 300; padding: 12px 18px; width: 200px; text-align: center; letter-spacing: .08em; } .home-join .btn { font-size: 17px; font-weight: 400; padding: 13px 30px; } .home-create { background: var(--orange-soft); } .home-create .home-container, .home-why .home-container { display: flex; flex-direction: column; gap: 44px; } .home-heading { display: flex; flex-direction: column; gap: 12px; text-align: center; } .home-heading h2, .home-why h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 300; line-height: 1.15; text-wrap: pretty; } .home-heading p { margin: 0; font-size: 19px; color: var(--sub); } .home-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; list-style: none; margin: 0; padding: 0; } @media (max-width: 960px) { .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-step br { display: none; } } @media (max-width: 560px) { .home-steps { grid-template-columns: 1fr; } } .home-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .home-step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .home-step h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--orange); } .home-step p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-soft); } /* Modèles de jeux : titre, puis panneau blanc avec les vignettes (sans badge Pro). */ .home-models { display: flex; flex-direction: column; align-items: center; } .home-models h3 { margin: 0; padding: 0 0 20px; text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; } .home-models-panel { width: 100%; background: var(--surface-raised); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 28px; box-shadow: 0 16px 40px -18px rgba(0,0,0,0.25); } .home-models-grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .home-model { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: 0 6px 16px -10px rgba(0,0,0,0.25); } .home-model img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 4px; } .home-model strong { font-size: 15px; font-weight: 600; } .home-model span { font-size: 12.5px; line-height: 1.45; color: var(--sub); } @media (max-width: 1080px) { .home-models-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .home-models-panel { padding: 16px; } .home-models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-models h3 { padding-bottom: 14px; } } .home-cta-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } .home-cta-row .btn { font-size: 18px; } .home-why h2 { text-align: center; font-size: clamp(26px, 3vw, 34px); } .home-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } @media (max-width: 720px) { .home-why-grid { grid-template-columns: 1fr; } } .home-why-card { background: var(--orange-soft); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .home-why-card svg { color: var(--orange); } .home-why-card h3 { margin: 0; font-size: 22px; font-weight: 400; } .home-why-card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-soft); } @media (max-width: 640px) { .home-section { padding: 56px 20px; } .home-hero-wrap { padding: 24px 20px 0; } .home-hero { padding: 32px 24px; gap: 32px; } .hero-visual { height: 300px; } .hero-visual.hero-video { height: auto; } } /* Pied de page */ .site-footer { background: #000; color: #fff; padding: 48px 40px; border-top: 1px solid var(--hero-border); } .site-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; } .site-footer-logo { height: 110px; width: auto; filter: invert(1); display: block; } .site-footer-center { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; } .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; } .site-footer-links a { color: #fff; font-size: 14px; text-decoration: none; } .site-footer-links a:hover { color: #FF7A00; } .site-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; } .site-footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; } .site-footer-legal-links a { color: #BDBDBD; font-size: 13px; text-decoration: none; } .site-footer-legal-links a:hover { color: #FF7A00; } .site-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 4px; background: #2a2a2a; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; } .site-footer-social:hover { background: #0A66C2; } .site-footer p { margin: 0; font-size: 13px; color: #BDBDBD; } @media (max-width: 720px) { .site-footer { padding: 40px 20px; } .site-footer-inner { grid-template-columns: 1fr; justify-items: center; } .site-footer-logo { height: 80px; } } /* Pages légales */ .legal-page { max-width: 760px; } .legal-page h1 { font-size: 32px; font-weight: 400; margin: 0 0 8px; } .legal-page h2 { font-size: 19px; font-weight: 600; margin: 32px 0 10px; } .legal-page p, .legal-page li { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); } .legal-page ul { padding-left: 20px; } .legal-updated { color: var(--sub); font-size: 14px; margin: 0 0 24px; } .todo { background: var(--amber-soft); color: var(--amber); padding: 1px 6px; border-radius: 4px; font-weight: 600; } /* Catalogue */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .page-head h1 { font-size: 32px; font-weight: 400; margin: 0 0 6px; } .page-head p { margin: 0; color: var(--sub); font-size: 15px; } .catalogue.active { display: flex; flex-direction: column; gap: 28px; } .pin-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--orange-soft); border-radius: 14px; padding: 20px 24px; font-size: 17px; font-weight: 300; color: var(--text); } .pin-bar input { width: 190px; padding: 11px 16px; font-size: 16px; font-weight: 300; letter-spacing: .08em; text-align: center; border-color: var(--pin-border); } .pin-bar .btn { font-size: 16px; padding: 12px 26px; } .ai-panel { background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; } .ai-panel input[type="file"] { font-size: 13px; color: var(--text); max-width: 100%; border: none; background: transparent; } .ai-panel h4 { margin: 0 0 8px; font-size: 14px; } .ai-panel-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--sub); } .ai-panel-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ai-panel-status { margin: 8px 0 0; font-size: 12.5px; color: var(--sub); } .ai-panel-mode { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--sub); } .ai-panel-mode select { padding: 8px 10px; font-size: 13.5px; font-weight: 400; max-width: 100%; } .search-field { position: relative; max-width: 520px; width: 100%; } .search-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--place); pointer-events: none; } .search-field input { width: 100%; padding: 13px 18px 13px 44px; font-size: 16px; font-weight: 300; border-radius: 12px; } .catalogue-toolbar { display: flex; align-items: center; gap: 12px; } .catalogue-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; } .catalogue-results { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .filters-panel { position: sticky; top: 112px; max-height: calc(100vh - 132px); overflow-y: auto; border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 20px; } .filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .filters-head h2 { margin: 0; font-size: 18px; font-weight: 500; } .filters-clear { background: none; border: none; padding: 4px 2px; font-size: 14px; font-weight: 500; color: var(--orange-dark); } .filters-clear:hover { color: var(--text); text-decoration: underline; } #filters-body { display: flex; flex-direction: column; gap: 20px; } .filter-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .filter-group legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); } .filter-option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 15px; font-weight: 300; cursor: pointer; } .filter-option:hover { background: var(--muted); } .filter-option input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; } .filter-option:has(input:checked) { font-weight: 500; } .filter-count { margin-left: auto; font-size: 12.5px; color: var(--sub); } .filter-option.is-disabled { opacity: .45; cursor: default; } .filter-option.is-disabled:hover { background: none; } .filters-toggle { display: none; } @media (max-width: 900px) { .catalogue-layout { grid-template-columns: 1fr; gap: 20px; } .filters-panel { display: none; position: static; max-height: none; } .filters-panel.is-open { display: flex; } .filters-toggle { display: inline-flex; flex: none; } } .catalogue-count { margin: 0; font-size: 15px; font-weight: 300; color: var(--sub); } .catalogue-empty { margin: 32px 0; text-align: center; font-size: 17px; font-weight: 300; color: var(--sub); } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; position: relative; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; } .game-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,.07); } .game-card h3 { font-size: 19px; font-weight: 500; margin: 0; line-height: 1.3; text-wrap: pretty; } .game-art { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .game-art svg { display: block; } .game-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .game-art-fallback { background: var(--muted); color: var(--sub); } .game-type-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); margin: -8px 0 -4px; } .game-tags { display: flex; flex-wrap: wrap; gap: 8px; } .pill, .tag { font-size: 12px; font-weight: 400; color: var(--pill-text); background: var(--muted); border: none; border-radius: 999px; padding: 5px 11px; } .pill-rating { font-weight: 500; color: var(--orange-dark); background: var(--orange-soft); } .pill-amber { color: var(--amber); background: var(--amber-soft); } .pill-red { color: var(--red); background: var(--red-soft); } .pill-blue { color: var(--blue-dark); background: var(--blue-soft); } .game-card-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; } .game-card-actions .btn { padding: 11px 14px; font-size: 15px; font-weight: 400; } .game-card-actions .btn-play { flex: 1; padding: 11px 8px; font-size: 16px; font-weight: 500; } .fav-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--sub); display: flex; align-items: center; justify-content: center; padding: 0; } .fav-btn:hover { color: var(--orange); border-color: var(--orange); } .fav-btn.active { color: var(--orange); border-color: var(--orange); } .fav-btn.active svg { fill: currentColor; } .game-card-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; } .game-card-owner-actions .btn { flex: 1 1 auto; padding: 9px 12px; font-size: 13.5px; } .card-delete, .card-report { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--sub); display: none; align-items: center; justify-content: center; z-index: 1; } .game-card:hover .card-delete, .game-card:hover .card-report, .card-delete:focus-visible, .card-report:focus-visible { display: inline-flex; } .card-delete:hover, .card-report:hover { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); } /* Tableau des résultats d'un jeu (vue enseignant) */ .results-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .results-table th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); padding: 0 12px 10px; border-bottom: 1px solid var(--border); } .results-table td { padding: 12px; border-bottom: 1px solid var(--border); } .results-table tbody tr:hover { background: var(--muted); } .results-table td:first-child { color: var(--sub); width: 40px; } .results-guest { font-size: 11.5px; color: var(--sub); background: var(--muted); border-radius: 999px; padding: 2px 8px; } /* Un tableau ne se réduit pas en dessous d'une certaine largeur : on le fait défiler plutôt que de laisser la page entière déborder sur mobile. */ #game-results-list { overflow-x: auto; } /* Classes et groupes d'élèves (TICKET-10) */ .btn-small { padding: 7px 12px; font-size: 13.5px; } .class-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--sub); line-height: 1.5; } .class-new { max-width: 560px; margin-bottom: 28px; } .class-new > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .class-new-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .class-new-row input { flex: 1 1 200px; min-width: 0; padding: 11px 14px; font-size: 14.5px; } .class-grid { margin-top: 8px; } .class-card h3 a { color: inherit; text-decoration: none; } .class-card h3 a:hover { color: var(--orange-dark); } .class-card-code { margin: -6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .class-archived { margin-top: 32px; } .class-archived summary { cursor: pointer; font-size: 15px; color: var(--sub); padding: 6px 0; margin-bottom: 12px; } .class-pro { margin-bottom: 20px; } .class-readonly { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; background: var(--amber-soft); color: var(--amber); } .class-readonly a { color: inherit; font-weight: 600; } /* overflow-y: hidden : le soulignement de l'onglet actif (margin-bottom: -1px) ferait sinon apparaître une barre de défilement verticale sous Windows. */ .class-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; } .class-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px; font-size: 15px; color: var(--sub); white-space: nowrap; } .class-tab:hover { color: var(--text); } .class-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--orange); } .class-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; } .class-section h2 { margin: 0; font-size: 18px; } .class-section textarea { width: 100%; padding: 11px 14px; font-size: 14.5px; resize: vertical; line-height: 1.5; } .class-section > .btn, .class-settings-actions { align-self: flex-start; } .class-settings-actions { display: flex; gap: 10px; flex-wrap: wrap; } .class-code-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--blue-soft); color: var(--blue-panel-text); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; } .class-code-card .class-hint { color: inherit; opacity: .8; max-width: 360px; } .class-code-label { margin: 0; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .class-code { margin: 4px 0 0; font-size: 40px; font-weight: 700; letter-spacing: .14em; line-height: 1.1; font-variant-numeric: tabular-nums; } .class-code.is-off { opacity: .45; text-decoration: line-through; } .class-code-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .class-code-actions .btn-ghost { background: var(--surface); } /* Interrupteur : une case à cocher native, habillée. */ .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch-track { width: 40px; height: 22px; border-radius: 999px; background: var(--control-border); position: relative; flex: none; transition: background .15s ease; } .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .switch input:checked + .switch-track { background: var(--green); } .switch input:checked + .switch-track::after { transform: translateX(18px); } .switch input:focus-visible + .switch-track { outline: 2.5px solid var(--blue); outline-offset: 2px; } .class-errors { background: var(--red-soft); color: var(--red); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13.5px; } .class-errors p { margin: 0; font-weight: 600; } .class-errors ul { margin: 6px 0 0; padding-left: 18px; } .student-list { list-style: none; margin: 0; padding: 0; } .student-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); } .student-row:last-child { border-bottom: none; } .student-name { font-size: 15px; overflow-wrap: anywhere; } .student-actions { display: flex; gap: 8px; } .student-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; } .student-edit input { flex: 1 1 160px; min-width: 0; padding: 8px 12px; font-size: 14.5px; } .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .check-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; overflow-wrap: anywhere; } .check-item input { accent-color: var(--orange); width: 16px; height: 16px; flex: none; } .check-item:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); } .results-export { display: flex; justify-content: flex-end; margin-bottom: 12px; } .class-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .class-filters .field { flex: 1 1 200px; max-width: 320px; } .class-results-wrap { overflow-x: auto; } /* Prénoms en en-tête de ligne : pas le style des en-têtes de colonne. */ .class-results th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--text); padding: 12px; border-bottom: 1px solid var(--border); } .class-results thead th { vertical-align: bottom; min-width: 110px; } .class-results thead th:first-child { min-width: 0; } .class-results .col-title { display: block; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); font-weight: 600; } .class-results .col-type { display: block; font-size: 11px; } .class-results td strong { display: block; font-weight: 600; } .class-results .cell-count { display: block; font-size: 12px; color: var(--sub); } .class-results .cell-empty { color: var(--sub); } .class-results .row-average th, .class-results .row-average td { background: var(--muted); border-bottom: none; } .class-results td:first-child { width: auto; color: inherit; } /* Côté élève : bandeau de session de classe et « Rejoindre ma classe ». */ .class-banner { background: var(--green-soft); color: var(--green); border-bottom: 1px solid var(--border); } .class-banner[hidden] { display: none; } .class-banner-inner { max-width: 1360px; margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; } .class-banner p { margin: 0; font-size: 14.5px; line-height: 1.4; } .class-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; } .class-banner .btn-ghost { background: var(--surface); } .class-join-entry { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--sub); } .catalogue .class-join-entry { text-align: left; margin: -16px 0 0; font-size: 14px; } .class-join-entry a { font-weight: 600; } .class-join-error { margin: 0 0 12px; } #class-join-code { text-transform: uppercase; letter-spacing: .12em; font-size: 20px; text-align: center; } #class-join-code::placeholder { letter-spacing: .12em; } .class-join-names { max-width: 720px; margin: 0 auto; text-align: center; } .class-join-names h1 { font-size: 26px; margin: 0 0 4px; } .class-join-account { margin: 12px auto 0; max-width: 480px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--amber-soft); color: var(--amber); font-size: 14px; } .class-join-account[hidden] { display: none; } .class-join-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; } .class-join-name { min-height: 64px; padding: 14px 12px; font-size: 18px; font-weight: 600; color: var(--text); background: var(--surface); border: 1.5px solid var(--control-border); border-radius: var(--radius-md); overflow-wrap: anywhere; } .class-join-name:hover { border-color: var(--orange); background: var(--orange-soft); } @media (max-width: 640px) { .check-grid { grid-template-columns: 1fr 1fr; } .class-banner-inner { padding: 10px 20px; } .class-join-grid { grid-template-columns: 1fr 1fr; } .class-code { font-size: 30px; } .class-code-card { padding: 18px; } .class-section { padding: 16px; } } .catalogue-cta { background: #000; color: #fff; border-radius: 18px; padding: 36px; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--hero-border); } .catalogue-cta div { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .catalogue-cta h2 { margin: 0; font-size: 24px; font-weight: 400; } .catalogue-cta p { margin: 0; font-size: 16px; font-weight: 300; color: #D8D8D8; } /* Cartes des pages Modération et Mes résultats */ .game-card-top { display: flex; align-items: center; justify-content: space-between; } .game-type-badge { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .game-type-badge.quiz { background: var(--orange-soft); color: var(--orange-dark); } .game-type-badge.memoire { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.vraifaux { background: var(--amber-soft); color: var(--amber); } .game-type-badge.texte_trous { background: var(--green-soft); color: var(--green); } .game-type-badge.mots_meles { background: var(--red-soft); color: var(--red); } .game-type-badge.mots_croises { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.saute_feuille { background: var(--green-soft); color: var(--green); } .game-type-badge.envolee { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.bulles { background: var(--green-soft); color: var(--green); } .game-type-badge.lasso { background: var(--amber-soft); color: var(--amber); } .game-type-badge.glisse_mots { background: var(--orange-soft); color: var(--orange-dark); } .game-type-badge.bulles_tir { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.serpent { background: var(--green-soft); color: var(--green); } .game-meta { display: flex; gap: 8px; flex-wrap: wrap; } .empty-state { text-align: center; padding: 64px 24px; background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius-lg); } .empty-state h3 { font-size: 20px; margin: 16px 0 6px; } .empty-state p { color: var(--sub); margin: 0 0 20px; } /* Create: type picker */ /* 5 colonnes au plus sur la largeur de la page ; moins sur un écran étroit (cartes de 200 px au moins). */ .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 4 * 16px) / 5)), 1fr)); gap: 16px; } .type-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); } .type-card:hover { border-color: var(--orange); color: var(--text); } .type-card .type-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } /* Illustration du type (16:9, comme les cartes de la page Jouer) : elle remplace la petite icône. */ .type-card .type-art { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--muted); } .type-card .type-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .type-card:has(.type-art) .type-icon { display: none; } .type-card.is-locked .type-art img { filter: grayscale(.6); opacity: .75; } .type-card .type-pro { z-index: 1; } .type-card.quiz .type-icon { background: var(--orange-soft); color: var(--orange-dark); } .type-card.memoire .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .type-card.vraifaux .type-icon { background: var(--amber-soft); color: var(--amber); } .type-card.texte_trous .type-icon { background: var(--green-soft); color: var(--green); } .type-card.mots_meles .type-icon { background: var(--red-soft); color: var(--red); } .type-card.mots_croises .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .type-card.saute_feuille .type-icon { background: var(--green-soft); color: var(--green); } .type-card.envolee .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .type-card.bulles .type-icon { background: var(--green-soft); color: var(--green); } .type-card.lasso .type-icon { background: var(--amber-soft); color: var(--amber); } .type-card.glisse_mots .type-icon { background: var(--orange-soft); color: var(--orange-dark); } .type-card.bulles_tir .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .type-card.serpent .type-icon { background: var(--green-soft); color: var(--green); } /* Formules (TICKET-09) */ .type-pro { position: absolute; top: 14px; right: 14px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: var(--orange); color: #fff; letter-spacing: .02em; } .type-pro.is-included { background: var(--green-soft); color: var(--green); } .type-card.is-locked .type-icon { filter: grayscale(.6); opacity: .75; } .plans-current { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; font-size: 14px; } .plans-current[hidden] { display: none; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 1120px; } .plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .plan-card.is-pro { border: 2px solid var(--orange); position: relative; } .plan-badge { position: absolute; top: -12px; right: 18px; margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; } .plan-tagline { margin: 0; color: var(--sub); font-size: 14.5px; line-height: 1.4; } .plan-price span { font-size: 14px; font-weight: 600; } .plan-terms { margin: 0; color: var(--sub); font-size: 13px; font-weight: 600; } .plan-card h2 { margin: 0; font-size: 22px; } .plan-price { margin: 0; font-size: 18px; font-weight: 700; color: var(--orange-dark); } .plan-card ul { margin: 6px 0 12px; padding-left: 20px; line-height: 1.6; color: var(--text); } .plan-card .btn { align-self: flex-start; margin-top: auto; } .plan-card .btn[hidden] { display: none; } .plan-soon { margin: 0; font-size: 13px; color: var(--sub); } .plans-title { font-size: 19px; font-weight: 600; margin: 32px 0 12px; } .plans-table-wrap { max-width: 1120px; overflow-x: auto; } .plans-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .plans-table th, .plans-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .plans-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); } .plans-table tbody th { font-weight: 600; } .plans-note { max-width: 1120px; color: var(--sub); font-size: 14px; margin-top: 18px; } .ai-panel-quota { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--blue-dark); } .type-card strong { font-size: 17px; font-weight: 600; } .type-card span { font-size: 13.5px; color: var(--sub); line-height: 1.45; } /* Builder */ .builder-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; align-items: start; } @media (max-width: 780px) { .builder-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12.5px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; } .field input, .field select { padding: 11px 14px; font-size: 14.5px; } .password-field { position: relative; } .password-field input { width: 100%; padding-right: 48px; } .password-field input::-ms-reveal { display: none; } /* Edge ajoute sinon son propre œil */ .password-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--sub); } .password-toggle:hover { color: var(--text); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .top-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .qcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); } .qcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .qcard-head span { font-size: 12px; font-weight: 600; color: var(--sub); letter-spacing: .06em; } .qcard input[type="text"] { width: 100%; padding: 10px 12px; font-size: 14px; margin-bottom: 10px; } /* Image d'une question (TICKET-07) */ .qimg { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 12px; } .qimg-empty { flex-direction: column; gap: 4px; } .qimg-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); background: var(--bg); flex-shrink: 0; } .qimg-fields { flex: 1; min-width: 0; } .qimg-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sub); margin-bottom: 4px; } .qimg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .qimg-pick { cursor: pointer; } .qimg-pick:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; } .qimg-pick.is-busy { opacity: .6; cursor: progress; } .qimg-status { margin: 0; font-size: 12.5px; color: var(--sub); } .qimg-status:empty { display: none; } .qimg-status.is-error { color: var(--red); } @media (max-width: 520px) { .qimg { flex-direction: column; } .qimg-thumb { width: 100%; height: auto; max-height: 200px; object-fit: contain; } .qimg-fields { width: 100%; } } .opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .opt-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--control-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); } .opt-radio.correct { border: none; background: var(--green); color: #fff; } .opt-row input[type="text"] { flex: 1; padding: 9px 12px; font-size: 13.5px; } .icon-btn-sm { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--place); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-btn-sm:hover { background: var(--red-soft); color: var(--red); } .pair-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pair-row .pill-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pair-row input { flex: 1; padding: 10px 12px; font-size: 14px; } .word-row { margin-bottom: 10px; } .word-row .pair-row { margin-bottom: 0; } .field-error { margin: 4px 0 0 36px; font-size: 12.5px; color: var(--red); } /* Créateur de mots croisés : génération de la grille */ .mc-generate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .mc-generate-note { font-size: 12.5px; color: var(--sub); flex: 1; min-width: 200px; } .mc-generate-note.is-warning { color: var(--red); font-weight: 600; } .mc-preview-label { font-size: 12.5px; color: var(--sub); margin: 18px 0 10px; } input[aria-invalid="true"] { border-color: var(--red); } /* Créateur Saute-Feuille */ .sf-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; } .sf-check input, .sf-good input { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; } .sf-step-tools { display: flex; gap: 2px; } .sf-step-tools .icon-btn-sm[disabled] { opacity: .35; cursor: not-allowed; background: transparent; color: var(--place); } .sf-question-row, .sf-leaf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .qcard .sf-question-row input[type="text"], .qcard .sf-leaf-row input[type="text"] { flex: 1; min-width: 0; margin-bottom: 0; } .sf-good { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); white-space: nowrap; cursor: pointer; } .sf-count { font-size: 11.5px; color: var(--sub); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; } .sf-count.is-over { color: var(--red); font-weight: 600; } .qcard .sf-err { margin: -4px 0 8px; } .qcard .sf-step-err { margin: 6px 0 0; } .sf-add-leaf { background: none; border: none; color: var(--blue-dark); font-size: 13px; font-weight: 600; padding: 4px 0; } .sf-add-leaf[disabled] { opacity: .45; cursor: not-allowed; } @media (max-width: 480px) { .sf-good { font-size: 0; gap: 0; } .sf-count { min-width: 38px; } } /* Créateur Envolée (réutilise les lignes et compteurs du créateur Saute-Feuille) */ .env-mode { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; } .env-mode label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .env-mode input { accent-color: var(--orange); } .env-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .env-lists { grid-template-columns: 1fr; } } .env-list { min-width: 0; } .env-list-title { font-size: 12px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 8px; } .env-list-title span { text-transform: none; letter-spacing: 0; font-weight: 400; } .env-rank { font-size: 12.5px; font-weight: 700; color: var(--orange-dark); min-width: 18px; } .env-list .sf-leaf-row { gap: 4px; } .env-list .sf-leaf-row .icon-btn-sm { width: 24px; } .env-list .sf-leaf-row .icon-btn-sm[disabled] { opacity: .3; cursor: not-allowed; background: transparent; color: var(--place); } /* Créateur Lasso : tableau des paires sur toute la largeur, intrus en dessous */ .las-lists { display: flex; flex-direction: column; gap: 14px; } .las-arrow { color: var(--sub); font-weight: 700; } @media (max-width: 640px) { .las-pair-row { flex-wrap: wrap; } .las-pair-row input[type="text"] { flex: 1 1 40%; } } .print-shell .print-item p.print-hint { font-weight: 400; font-size: 12.5px; color: #555; margin: -4px 0 8px; } .dashed-add { width: 100%; padding: 13px; background: transparent; border: 1.5px dashed var(--control-border); color: var(--sub); border-radius: var(--radius-md); font-weight: 500; font-size: 13.5px; } .dashed-add:hover:not([disabled]) { border-color: var(--orange); color: var(--orange-dark); } .dashed-add[disabled] { opacity: .45; cursor: not-allowed; } .vf-toggle { display: flex; gap: 8px; margin-top: 4px; } .vf-btn { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--surface); color: var(--sub); font-weight: 500; font-size: 13.5px; } .vf-btn.true.active { background: var(--green-soft); color: var(--green); border-color: var(--green); } .vf-btn.false.active { background: var(--red-soft); color: var(--red); border-color: var(--red); } .side-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); position: sticky; top: 112px; display: flex; flex-direction: column; gap: 14px; } .side-panel h4 { margin: 0; font-size: 15px; font-weight: 600; } .side-panel p { margin: 0; font-size: 12.5px; color: var(--sub); line-height: 1.5; } .checklist { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .checklist-item { display: flex; align-items: center; gap: 8px; color: var(--place); } .checklist-item.done { color: var(--text); } .checklist-item .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--control-border); flex-shrink: 0; } .checklist-item.done .dot { background: var(--green); border-color: var(--green); } .builder-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } /* Vue imprimable : toujours sur fond blanc/texte noir, quel que soit le thème actif — un thème sombre n'a pas sa place sur une feuille imprimée. */ .print-shell { max-width: 720px; margin: 0 auto; background: #fff; color: #1a1a1a; padding: 24px; border-radius: var(--radius-lg); } .print-shell h1 { font-size: 22px; margin: 0 0 4px; } .print-shell .print-meta { font-size: 13px; color: #555; margin: 0 0 24px; } .print-item { margin-bottom: 18px; page-break-inside: avoid; } .print-item p { margin: 0 0 8px; font-weight: 600; } .print-image { display: block; max-width: 60%; max-height: 6cm; margin: 0 0 8px; object-fit: contain; } .print-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .print-options li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .print-options li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #999; border-radius: 3px; flex-shrink: 0; } .print-vf-boxes { display: flex; gap: 18px; font-size: 14px; } .print-vf-boxes span { display: flex; align-items: center; gap: 6px; } .print-vf-boxes span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #999; border-radius: 3px; flex-shrink: 0; } .print-answer-key { margin-top: 32px; padding-top: 16px; border-top: 2px dashed #999; } .print-answer-key h2 { font-size: 15px; margin: 0 0 10px; } .print-match-columns { display: flex; justify-content: space-between; gap: 40px; } .print-match-columns ol { padding-left: 20px; } .print-match-columns li { margin-bottom: 14px; font-size: 14px; } .print-ws-grid { border-collapse: collapse; margin: 0 auto; } .print-ws-grid td { width: 24px; height: 24px; border: 1px solid #ccc; text-align: center; font-size: 13px; font-weight: 700; font-family: monospace; } .print-cw-grid { border-collapse: collapse; margin: 0 auto 24px; } .print-cw-grid td { width: 26px; height: 26px; border: 1px solid #333; vertical-align: top; } .print-cw-grid td.print-cw-block { background: #333; } .print-cw-num { display: block; padding: 2px 0 0 2px; font-size: 9px; line-height: 1; font-weight: 600; } .print-cw-columns { display: flex; justify-content: space-between; gap: 40px; } .print-cw-clues { flex: 1; } .print-cw-clues h2 { font-size: 14px; margin: 0 0 8px; } .print-cw-clues ul { list-style: none; margin: 0; padding: 0; } .print-cw-clues li { font-size: 13px; margin-bottom: 6px; } @media print { .no-print { display: none !important; } body { background: #fff; } .app-shell { max-width: none; padding: 0; } } /* Player */ .player-shell { max-width: 640px; margin: 0 auto; } /* Jeux à scène 16/9 : la scène entière tient à l'écran, sans défiler. Au-dessus d'elle, environ 430 px (en-tête, titre, compteurs, question sur deux lignes) ; la largeur suit la hauteur restante, sans descendre sous 640 px (en dessous de 620 px, ces jeux passent en mise en page téléphone). Sur un écran bas, la hauteur de la scène est plafonnée : elle devient un peu plus large que 16/9, comme en plein écran. Le plein écran garde son réglage. */ .player-shell { --mg-fit-w: max(640px, calc((100svh - 430px) * 16 / 9)); } .player-shell:not(.is-fullscreen) .mg-stage:is(.qc-stage, .fs-stage, .gb-stage, .ms-stage, .ts-stage, .cs-stage, .mt-stage, .ls-stage, .gs-stage, .nj-stage, .cn-stage):not(.is-portrait) { max-height: max(280px, calc(100svh - 430px)); } /* Mode présentation : seul ce bloc est affiché, il lui faut son propre fond et sa propre hauteur. Pensé pour la projection en classe, d'où le texte agrandi et les jeux qui occupent la place disponible. */ .player-shell.is-fullscreen { max-width: none; width: 100%; height: 100%; padding: 28px 24px; overflow-y: auto; background: var(--bg); display: flex; flex-direction: column; align-items: center; /* "safe" : si le contenu dépasse (résultats + classement), il repart du haut au lieu d'être rogné, contrairement à un simple "center". */ justify-content: safe center; gap: 10px; } .player-shell.is-fullscreen > * { width: 100%; max-width: 800px; } /* Quitter le catalogue depuis le plein écran n'aurait pas de sens : on sort d'abord de l'agrandissement (bouton dédié ou touche Échap). */ .player-shell.is-fullscreen .breadcrumb-back { display: none; } .player-shell.is-fullscreen .q-title { font-size: 26px; } .player-shell.is-fullscreen .q-option { font-size: 17px; padding: 17px 20px; } .player-shell.is-fullscreen .blank-sentence { font-size: 22px; } /* Un jeu de mémoire doit se voir d'un coup d'œil : les cartes se répartissent la hauteur disponible au lieu de déborder sous la ligne de flottaison. */ .player-shell.is-fullscreen #player-body:has(.memo-grid) { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: min(1200px, 100%); } .player-shell.is-fullscreen .memo-grid { flex: 1; min-height: 0; grid-auto-rows: 1fr; } .player-shell.is-fullscreen .memo-card { aspect-ratio: auto; font-size: 15px; } .player-shell.is-fullscreen .ws-grid { max-width: min(640px, 58vh); } .player-shell.is-fullscreen .ws-cell { font-size: 15px; } .player-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; } .progress-track { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 28px; } .progress-fill { height: 100%; background: var(--orange); transition: width .3s ease; } .q-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; text-align: center; box-shadow: var(--shadow); } .q-eyebrow { font-size: 12.5px; color: var(--sub); font-weight: 600; letter-spacing: .06em; margin-bottom: 10px; } .q-image { display: block; max-width: 100%; max-height: 40vh; margin: 0 auto 18px; object-fit: contain; border-radius: var(--radius-md); } .q-title { font-size: 22px; font-weight: 500; margin: 0 0 26px; } .q-options { display: flex; flex-direction: column; gap: 12px; } .q-option { padding: 15px 18px; text-align: left; border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 400; } .q-option:hover:not([disabled]) { border-color: var(--orange); } .q-option.selected { border-color: var(--orange); background: var(--orange-soft); } .q-option.correct-answer { border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 600; } .q-option.wrong-answer { border-color: var(--red); background: var(--red-soft); color: var(--red); font-weight: 600; } /* Texte à trous */ .blank-sentence { font-size: 19px; line-height: 1.8; margin: 0 0 22px; text-align: left; } .blank-input { width: 140px; padding: 6px 10px; margin: 0 6px; font-size: 16px; font-weight: 600; text-align: center; border-width: 1.5px; border-radius: var(--radius-sm); } .blank-input.correct-answer { border-color: var(--green); background: var(--green-soft); color: var(--green); } .blank-input.wrong-answer { border-color: var(--red); background: var(--red-soft); color: var(--red); } .blank-hint { margin: 14px 0 0; font-size: 13px; color: var(--red); text-align: left; } /* Mots mêlés */ .ws-grid { display: grid; gap: 3px; max-width: 440px; margin: 0 auto 22px; } .ws-cell { aspect-ratio: 1; border: none; border-radius: 4px; background: var(--muted); color: var(--text); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; } .ws-cell.selected { background: var(--orange-soft); color: var(--orange-dark); } .ws-cell.found { background: var(--green-soft); color: var(--green); } .ws-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ws-word { padding: 4px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--sub); } .ws-word.found { background: var(--green-soft); color: var(--green); border-color: var(--green); text-decoration: line-through; } /* Mots croisés */ .cw-layout { display: flex; flex-direction: column; gap: 24px; } .cw-grid { display: grid; gap: 2px; width: 100%; max-width: 440px; margin: 0 auto; } .cw-cell { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; } .cw-cell.cw-block { background: transparent; border-color: transparent; } .cw-cell.is-active { background: var(--blue-soft); } .cw-cell.is-cursor { background: var(--orange-soft); border-color: var(--orange); } .cw-num { position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 600; line-height: 1; color: var(--sub); } /* Hors écran plutôt que display:none : un champ réellement masqué ne peut pas recevoir le focus, donc n'ouvrirait pas le clavier tactile. */ .cw-capture { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; } .cw-clues { display: flex; gap: 24px; text-align: left; } .cw-clue-col { flex: 1; } .cw-clue-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sub); margin: 0 0 8px; } .cw-clue-list { list-style: none; margin: 0; padding: 0; } .cw-clue { display: flex; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text); cursor: pointer; } .cw-clue:hover { background: var(--muted); } .cw-clue.is-active { background: var(--blue-soft); font-weight: 600; } .cw-clue-num { flex-shrink: 0; font-weight: 700; color: var(--sub); } .cw-clue em { font-style: normal; font-size: 12px; color: var(--sub); } .cw-actions { margin-top: 22px; text-align: center; } .player-shell.is-fullscreen .cw-cell { font-size: 20px; } @media (max-width: 640px) { .cw-clues { flex-direction: column; gap: 16px; } } /* Mini-jeux canvas (socle games/kit) */ .mg { display: flex; flex-direction: column; gap: 10px; } .mg-hud { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .mg-pill { background: var(--blue-soft); color: var(--blue-panel-text); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .mg-music { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--surface); color: var(--text); font-size: 17px; font-weight: 800; line-height: 1; padding: 0; } .mg-music.is-off { opacity: .45; text-decoration: line-through; } /* Hauteur fixée par la vue plutôt que par le canvas : c'est le conteneur que le ResizeObserver mesure, le canvas ne fait que le remplir. */ .mg-stage { position: relative; height: min(72vh, 620px); min-height: 320px; border-radius: var(--radius-lg); overflow: hidden; background: #1d6f9c; touch-action: none; user-select: none; -webkit-user-select: none; } /* Hors du flux : la taille intrinsèque d'un canvas est celle de ses pixels physiques (× la densité de l'écran). Dans le flux, elle ferait grandir la scène, que le ResizeObserver agrandirait à nouveau, et ainsi de suite. */ .mg-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; } .mg-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(92%, 900px); background: rgba(255,255,255,.95); color: #12324a; border-radius: 14px; padding: 8px 16px 10px; text-align: center; font-weight: 800; font-size: clamp(16px, 3.2vmin, 30px); line-height: 1.25; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-bottom: 4px solid var(--orange); pointer-events: none; } .mg-banner[hidden] { display: none; } .mg-banner-step { display: block; font-size: max(11px, .45em); font-weight: 700; color: #5b7384; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } /* Dans le coin inférieur gauche plutôt qu'au centre : centrée en bas, la bulle masquerait la position de départ du joueur. */ .mg-feedback { position: absolute; bottom: 12px; left: 12px; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; background: #fff; border-radius: 999px; padding: 6px 16px; font-weight: 800; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); white-space: nowrap; font-size: clamp(14px, 2.4vmin, 20px); max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; } .mg-feedback.show { opacity: 1; transform: translateY(0); } .mg-feedback.good { color: #138a4b; } .mg-feedback.bad { color: #c2410c; } .mg-feedback.info { color: #1c6fa3; } /* Bandeau composé (étiquette de mode, consigne, pastilles de progression) */ .mg-banner-top { display: flex; justify-content: center; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; color: #5b7384; text-transform: uppercase; letter-spacing: .08em; } .mg-tag { background: var(--blue); color: #fff; border-radius: 99px; padding: 1px 10px; letter-spacing: .04em; } .mg-tag.alt { background: var(--orange); } .mg-banner-text { font-weight: 800; font-size: clamp(16px, 3vmin, 30px); line-height: 1.25; margin: 2px 0 6px; } .mg-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: clamp(12px, 1.9vmin, 17px); font-weight: 700; } .mg-chip { border-radius: 99px; padding: 2px 10px; background: #e3f6ea; color: #138a4b; border: 1px solid #bfe8cf; } .mg-chip.todo { background: #f1f5f8; color: #6b8394; border: 1px dashed #c3d2dc; } .mg-chip.done { animation: mg-pop .35s; } .mg-arrow { color: #9fb3c1; align-self: center; } @keyframes mg-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .mg-chip.done { animation: none; } } /* Jauge du HUD */ .mg-pill:has(.mg-gauge) { display: inline-flex; align-items: center; gap: 6px; } .mg-gauge { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: #d5e6f1; overflow: hidden; } .mg-gauge i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), #7fd0ff); transition: width .2s; } @media (max-width: 600px) { .mg-gauge { width: 44px; } } .mg-gauge.mg-gauge-time { width: 90px; height: 9px; } .mg-gauge.mg-gauge-time i { background: linear-gradient(90deg, #f5b400, var(--orange)); transition: width .15s linear; } @media (max-width: 600px) { .mg-gauge.mg-gauge-time { width: 54px; } } .mg-pill.low { background: #fde2e2; color: #b42318; animation: mg-pulse .6s infinite alternate; } @keyframes mg-pulse { to { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .mg-pill.low { animation: none; } } /* Terme à trouver, en grand dans le bandeau (mode Paires) */ .mg-banner-text.small { font-weight: 700; font-size: clamp(14px, 2.4vmin, 22px); margin: 2px 0 4px; } .mg-banner-term { font-weight: 800; font-size: clamp(22px, 4.6vmin, 44px); line-height: 1.15; margin: 0 0 6px; color: #12324a; } .mg-banner-term .q { color: var(--orange); } /* Bouton d'action flottant ; la bulle de retour lui laisse sa place */ .mg-action { position: absolute; right: 12px; bottom: 12px; z-index: 1; border-radius: 99px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .mg-action[hidden] { display: none; } /* Jeux à appui long au doigt : ni menu contextuel ni loupe du système. */ .mg-stage.mg-no-callout, .mg-stage.mg-no-callout canvas { -webkit-touch-callout: none; } .mg-stage.has-action .mg-feedback { max-width: calc(100% - 170px); white-space: normal; border-radius: 16px; } .mg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,35,55,.55); padding: 16px; z-index: 2; } .mg-overlay[hidden] { display: none; } .mg-card { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); padding: 22px 24px; max-width: 520px; width: 100%; max-height: 100%; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: left; } .mg-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; } .mg-card .mg-sub { margin: 0 0 10px; color: var(--sub); } .mg-card ul { padding-left: 20px; line-height: 1.6; margin: 10px 0 18px; } .mg-card .kbd { display: inline-block; border: 1px solid var(--control-border); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; font-size: .85em; background: var(--muted); } .mg-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 12px 0 20px; font-size: 15px; } .mg-stats b { text-align: right; } .mg-stats .big { font-size: 20px; color: var(--orange); } /* Tir de Bulles et Serpentin (TICKET-12) : bandeau au-dessus de la scène, et non par-dessus, pour laisser toute la hauteur à la grappe ; bulle de retour à gauche du lanceur. */ .mg-banner.mg-banner-out { position: static; transform: none; width: auto; box-shadow: none; border: 1px solid var(--border); border-bottom: 4px solid var(--orange); font-size: clamp(15px, 2.6vmin, 22px); } .mg-stage.bt-stage { background: #d6eefc; } .mg-stage.bt-stage .mg-feedback { white-space: normal; border-radius: 14px; max-width: calc(50% - 56px); font-size: clamp(12px, 1.9vmin, 15px); line-height: 1.3; } /* Serpentin (TICKET-12) : même bandeau hors de la scène ; bouton ⚡ maintenu, sur écran tactile seulement. */ .mg-stage.sp-stage { background: #eef8e6; } /* Messages sur la scène (Serpentin, Ninja des Portes, Quête des Cristaux) : bulle sombre centrée en bas, bordée de bleu (vert pour un succès, rouge pour une erreur), qui s'efface seule ; sous les écrans d'intro et de fin. Aucune barre sous la scène : toute la hauteur reste au jeu. */ .mg-stage.mg-fb-scene .mg-feedback { left: 50%; bottom: 16px; transform: translate(-50%, 12px); width: max-content; max-width: min(92%, 620px); white-space: normal; text-align: center; border-radius: 12px; padding: 9px 16px; background: rgba(14,22,36,.94); color: #fff; border: 2px solid #40ADEC; box-shadow: none; font-size: 15px; line-height: 1.3; overflow: visible; z-index: 1; } .mg-stage.mg-fb-scene .mg-feedback.show { transform: translate(-50%, 0); } .mg-stage.mg-fb-scene .mg-feedback.good { color: #fff; border-color: #3ddc84; } .mg-stage.mg-fb-scene .mg-feedback.bad { color: #fff; border-color: #ff5a5f; } .mg-stage.mg-fb-scene .mg-feedback.info { color: #fff; } .mg-stage.mg-fb-scene.is-portrait .mg-feedback { font-size: 14px; bottom: 12px; } @media (max-width: 600px) { .mg-stage.mg-fb-scene .mg-feedback { font-size: 14px; bottom: 12px; } } /* Serpentin : sur écran tactile, la bulle passe au-dessus du bouton ⚡. */ .mg-stage.sp-stage:has(.sp-boost:not([hidden])) .mg-feedback { bottom: 88px; } /* Ninja (le ninja court au sol), Cube Néon, Foule Savante, Grand Bleu, Mission Savoir et Toits Savants (comme leurs prototypes) : la bulle se place en haut. */ .mg-stage.nj-stage.mg-fb-scene .mg-feedback, .mg-stage.cn-stage.mg-fb-scene .mg-feedback, .mg-stage.fs-stage.mg-fb-scene .mg-feedback, .mg-stage.gb-stage.mg-fb-scene .mg-feedback, .mg-stage.ms-stage.mg-fb-scene .mg-feedback, .mg-stage.ts-stage.mg-fb-scene .mg-feedback, .mg-stage.cs-stage.mg-fb-scene .mg-feedback, .mg-stage.mt-stage.mg-fb-scene .mg-feedback, .mg-stage.gs-stage.mg-fb-scene .mg-feedback { bottom: auto; top: 14px; transform: translate(-50%, -12px); } .mg-stage.nj-stage.mg-fb-scene .mg-feedback.show, .mg-stage.cn-stage.mg-fb-scene .mg-feedback.show, .mg-stage.fs-stage.mg-fb-scene .mg-feedback.show, .mg-stage.gb-stage.mg-fb-scene .mg-feedback.show, .mg-stage.ms-stage.mg-fb-scene .mg-feedback.show, .mg-stage.ts-stage.mg-fb-scene .mg-feedback.show, .mg-stage.cs-stage.mg-fb-scene .mg-feedback.show, .mg-stage.mt-stage.mg-fb-scene .mg-feedback.show, .mg-stage.gs-stage.mg-fb-scene .mg-feedback.show { transform: translate(-50%, 0); } .sp-boost { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,122,0,.85); color: #1d2433; font-weight: 800; font-size: 26px; box-shadow: 0 4px 12px rgba(0,0,0,.2); touch-action: none; user-select: none; -webkit-user-select: none; } .sp-boost[hidden] { display: none; } .sp-boost.on { background: var(--orange); transform: scale(1.06); } /* Créateur commun Tir de Bulles / Serpentin */ #view-qbl-builder [data-for-type][hidden] { display: none; } .field-optional { font-weight: 400; color: var(--sub); } #view-qbl-builder .field .sf-question-row input[type="text"], #view-qm-builder .field .sf-question-row input[type="text"] { flex: 1; min-width: 0; margin-bottom: 0; } .qbl-warn { margin: 2px 0 6px; font-size: 12.5px; color: var(--amber); } .qbl-warn[hidden] { display: none; } /* Créateur commun des jeux quiz-arcade (JEU-15) */ .qm-modes { border: 0; padding: 0; margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; } .qm-modes legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin-bottom: 6px; } .qm-modes label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--control-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; } .qm-modes label:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); } .qm-help { margin: 2px 0 10px; font-size: 13px; color: var(--sub); } .qm-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; } .qm-setting .qm-help { margin-top: 4px; } /* Réglage mis en avant (mode assisté de Toits Savants). */ .qm-setting.is-highlight { grid-column: 1 / -1; padding: 10px 12px; border: 2px solid var(--orange); border-radius: 12px; background: var(--orange-soft); } .qm-setting.is-highlight .sf-check { font-weight: 700; } .qm-sublabel { margin: 8px 0 4px; font-size: 13px; font-weight: 600; } .qm-correct { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; } .qcard .qm-option input[type="text"], .qcard .qm-element input[type="text"] { flex: 1; min-width: 0; margin-bottom: 0; } .qm-element select { max-width: 40%; } .qm-vf { display: flex; gap: 16px; margin: 4px 0 6px; font-weight: 700; } .qm-vf label { display: inline-flex; gap: 6px; align-items: center; } .qm-steps { list-style: none; padding: 0; margin: 0 0 8px; } .qm-step { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; border-radius: var(--radius-sm); } .qm-step input[type="text"] { flex: 1; min-width: 0; margin-bottom: 0; } .qm-step .sf-step-tools { display: flex; gap: 2px; } .qm-handle { cursor: grab; color: var(--sub); display: inline-flex; } .qm-step-n { font-weight: 700; min-width: 1.6em; } .qm-step.is-dragging { opacity: .5; } .qm-step.is-over { outline: 2px dashed var(--orange); outline-offset: 2px; } /* Téléphone : le champ garde toute la largeur, compteur, catégorie et boutons passent à la ligne. */ @media (max-width: 480px) { .qm-element, .qm-step { flex-wrap: wrap; } .qcard .qm-element input[type="text"] { flex-basis: calc(100% - 60px); } .qm-element select { max-width: none; flex: 1; } .qm-step input[type="text"] { flex-basis: calc(100% - 64px); } .qm-step .sf-count { margin-left: 52px; } .qm-step .sf-step-tools { margin-left: auto; } } .mg-overlay.mg-no3d { z-index: 3; } /* Jeu témoin du socle quiz-arcade (JEU-15, phase 3) : réponses en boutons, toutes du même aspect. */ .mg-stage.qk-stage { height: auto; min-height: 260px; background: var(--muted); touch-action: auto; user-select: auto; -webkit-user-select: auto; padding: 16px 16px 64px; } .qk-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; } .qk-answer { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-md); border: 2px solid var(--control-border); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; transition: transform .12s, border-color .12s; } .qk-answer:hover { border-color: var(--blue); } .qk-answer:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .qk-answer:active { transform: scale(.98); } .qk-key { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--muted); font-size: 13px; color: var(--sub); } .qk-answer.is-found { border-color: var(--green); background: var(--green-soft); color: var(--green); } .qk-answer.is-found::after { content: "✓"; margin-left: auto; font-weight: 800; } .qk-answer.is-lit { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: qk-glow 1s infinite alternate; } @keyframes qk-glow { to { box-shadow: 0 0 0 7px var(--green-soft); } } @media (prefers-reduced-motion: reduce) { .qk-answer { transition: none; } .qk-answer:active { transform: none; } .qk-answer.is-lit { animation: none; } } /* Ninja des Portes (JEU-16) : scène aux proportions du repère du jeu (960 × 540, 420 × 640 en portrait). */ .mg-stage.nj-stage { height: auto; min-height: 0; aspect-ratio: 960 / 540; background: #0b1322; } .mg-stage.nj-stage.is-portrait { aspect-ratio: 420 / 640; } .player-shell.is-fullscreen .mg-stage.nj-stage { aspect-ratio: auto; } /* Lecteur à la largeur du prototype (980 px) : à 640 px, les portes et leurs étiquettes sont trop petites. */ .player-shell:not(.is-fullscreen):has(.nj-stage) { max-width: min(980px, var(--mg-fit-w)); } .nj-touch { display: none; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; } .nj-touch button { flex: 1 1 0; min-height: 56px; font-size: 24px; line-height: 1; border-radius: 14px; border: 1px solid var(--control-border); background: var(--surface); color: var(--text); touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .nj-touch .nj-jump { flex: 1.6 1 0; font-size: 17px; font-weight: 800; background: var(--orange); border-color: var(--orange); color: #1a0f00; } .nj-touch button.on { border-color: var(--blue); background: var(--blue-soft); } .nj-touch .nj-jump.on { background: #ffa247; } @media (hover: none) and (pointer: coarse) { .nj-touch { display: flex; } } .game-type-badge.ninja_portes, .type-card.ninja_portes .type-icon { background: var(--amber-soft); color: var(--amber); } /* La Quête des Cristaux (JEU-17) : scène 16/9 (pleine hauteur utile sur téléphone), étiquettes DOM projetées sur la 3D. */ /* 1100 px comme le prototype, sans dépasser la hauteur de l'écran : en-tête du site et question compris. */ .player-shell:not(.is-fullscreen):has(.qc-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.qc-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #1a7d98; } .mg-stage.qc-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.qc-stage { aspect-ratio: auto; height: auto; } .qc-canvas { cursor: pointer; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; } .qc-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--blue); } .qc-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .qc-lbl { position: absolute; left: 0; top: 0; max-width: 140px; padding: 4px 9px 5px; border-radius: 9px; background: rgba(16,24,38,.9); border: 2px solid #40ADEC; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.2; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.3); will-change: transform; overflow-wrap: break-word; } .qc-lbl::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #40ADEC; } .qc-lbl.glow { border-color: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.35), 0 3px 0 rgba(0,0,0,.3); } .qc-lbl.glow::after { border-top-color: #3ddc84; } .qc-lbl.flash { border-color: #ff5a5f; } .qc-lbl.flash::after { border-top-color: #ff5a5f; } /* 124 px plutôt que les 104 du prototype : « Condensation » y était coupé en deux. */ .qc-stage.is-portrait .qc-lbl { max-width: 124px; font-size: 12.5px; padding: 3px 6px 4px; } .qc-float { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 22px; color: #3ddc84; text-shadow: 0 2px 0 #0b1322, 0 0 3px #0b1322; pointer-events: none; white-space: nowrap; } .qc-fade { position: absolute; inset: 0; background: #0b1322; opacity: 0; pointer-events: none; } .qc-isle { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); padding: 10px 26px; border-radius: 14px; background: rgba(14,22,36,.88); border: 3px solid var(--orange); color: #fff; font-weight: 900; font-size: 26px; opacity: 0; pointer-events: none; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.4); } .qc-stage.is-portrait .qc-isle { font-size: 20px; } .game-type-badge.quete_cristaux, .type-card.quete_cristaux .type-icon { background: var(--red-soft); color: #d61c7a; } .game-type-badge.cube_neon, .type-card.cube_neon .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.foule_savante, .type-card.foule_savante .type-icon { background: var(--blue-soft); color: var(--blue-dark); } .game-type-badge.grand_bleu, .type-card.grand_bleu .type-icon { background: var(--blue-soft); color: var(--blue-dark); } /* Grand Bleu (JEU-20) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler) ; le jeu travaille en pixels de la scène. */ .player-shell:not(.is-fullscreen):has(.gb-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.gb-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #1478b8; } .mg-stage.gb-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.gb-stage { aspect-ratio: auto; height: auto; } .gb-canvas { cursor: crosshair; outline: none; -webkit-tap-highlight-color: transparent; } .gb-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .gb-fade { position: absolute; inset: 0; background: #071a33; opacity: 0; pointer-events: none; } /* Consigne de pause, à la place des messages (elle attend qu'ils s'effacent), comme le prototype. */ .gb-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(7,26,51,.92); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .gb-hint.show { opacity: 1; } .gb-stage.is-portrait .gb-hint { font-size: 13px; padding: 6px 10px; } @media (prefers-reduced-motion: reduce) { .gb-hint { transition: none; } } .game-type-badge.mission_savoir, .type-card.mission_savoir .type-icon { background: var(--orange-soft); color: var(--orange); } /* Mission Savoir (JEU-21) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler) ; le jeu travaille en pixels de la scène. */ .player-shell:not(.is-fullscreen):has(.ms-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.ms-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #070b1f; } .mg-stage.ms-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.ms-stage { aspect-ratio: auto; height: auto; } .ms-canvas { cursor: crosshair; outline: none; -webkit-tap-highlight-color: transparent; } .ms-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .ms-fade { position: absolute; inset: 0; background: #071a33; opacity: 0; pointer-events: none; } /* Consigne du début de partie, à la place des messages (elle s'efface quand un message s'affiche), comme le prototype. */ .ms-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(7,26,51,.92); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .ms-hint.show { opacity: 1; } .ms-stage.is-portrait .ms-hint { font-size: 13px; padding: 6px 10px; } @media (prefers-reduced-motion: reduce) { .ms-hint { transition: none; } } .game-type-badge.toits_savants, .type-card.toits_savants .type-icon { background: var(--orange-soft); color: var(--orange); } /* Toits Savants (JEU-22) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler) ; le jeu travaille en pixels de la scène. */ .player-shell:not(.is-fullscreen):has(.ts-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.ts-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #d6e8f4; } .mg-stage.ts-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.ts-stage { aspect-ratio: auto; height: auto; } .ts-canvas { cursor: crosshair; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .ts-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } /* Consigne du début de partie, à la place des messages (elle s'efface quand un message s'affiche), comme le prototype. */ .ts-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(7,26,51,.92); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .ts-hint.show { opacity: 1; } .ts-stage.is-portrait .ts-hint { font-size: 13px; padding: 6px 10px; } @media (prefers-reduced-motion: reduce) { .ts-hint { transition: none; } } .game-type-badge.circuit_savant, .type-card.circuit_savant .type-icon { background: var(--orange-soft); color: var(--orange); } /* Circuit Savant (JEU-23) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler), rendu 3D. */ .player-shell:not(.is-fullscreen):has(.cs-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.cs-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #7cc8f2; } .mg-stage.cs-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.cs-stage { aspect-ratio: auto; height: auto; } .cs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .cs-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .cs-slow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(64,173,236,.08) 40%, rgba(8,30,70,.55) 100%); } .cs-pos, .cs-lap { position: absolute; pointer-events: none; z-index: 1; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #0b2a4a, 0 0 6px rgba(0,0,0,.35); } .cs-pos { left: 12px; top: 8px; font-size: 46px; line-height: 1; font-style: italic; letter-spacing: -.02em; } .cs-pos small { font-size: 20px; opacity: .9; } .cs-pos.up { animation: cs-pop .5s; } @keyframes cs-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #ffd23f; } 100% { transform: scale(1); } } .cs-lap { left: 14px; top: 60px; font-size: 15px; } .cs-mini { position: absolute; right: 10px; top: 10px; width: 118px; height: 118px; z-index: 1; pointer-events: none; background: rgba(10,40,80,.35); border-radius: 12px; } .cs-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 110px; font-weight: 900; font-style: italic; color: #fff; -webkit-text-stroke: 4px #0b2a4a; z-index: 2; pointer-events: none; opacity: 0; } .cs-count.go { color: #ffd23f; } /* Consigne du début de partie, au-dessus des boutons de portes, comme le prototype. */ .cs-hint { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(7,26,51,.92); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .cs-hint.show { opacity: 1; } .cs-lanes { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; max-width: 96%; } .cs-lanes[hidden] { display: none; } .cs-lanes button { min-height: 46px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.94); color: #0b2a4a; border: 3px solid #0b2a4a; font: inherit; font-weight: 800; font-size: 14px; line-height: 1.15; max-width: 220px; text-align: left; display: flex; gap: 6px; align-items: center; cursor: pointer; } .cs-lanes button b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; } .cs-lanes button[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,0,.45); } .cs-lanes button.found { background: #e3f8ec; border-color: #2fcf74; } .cs-lanes button.glow { border-color: #2fcf74; box-shadow: 0 0 0 3px rgba(47,207,116,.6); } .cs-lanes button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .cs-stage.is-portrait .cs-pos { font-size: 36px; } .cs-stage.is-portrait .cs-pos small { font-size: 16px; } .cs-stage.is-portrait .cs-lap { top: 48px; font-size: 13px; } .cs-stage.is-portrait .cs-mini { width: 84px; height: 84px; } .cs-stage.is-portrait .cs-count { font-size: 80px; } .cs-stage.is-portrait .cs-lanes { flex-direction: column; align-items: stretch; width: min(300px, 92%); gap: 4px; } .cs-stage.is-portrait .cs-lanes button { max-width: none; min-height: 40px; font-size: 13px; padding: 4px 8px; } .cs-stage.is-portrait .cs-hint { bottom: auto; top: 104px; font-size: 13px; padding: 6px 10px; } @media (prefers-reduced-motion: reduce) { .cs-hint { transition: none; } .cs-pos.up { animation: none; } } .game-type-badge.mots_traces, .type-card.mots_traces .type-icon { background: var(--orange-soft); color: var(--orange); } /* Mots Tracés (JEU-24) : scène 16/10 comme le prototype (1100 px au plus, toute la scène visible sans défiler) ; le jeu travaille en pixels de la scène. */ .player-shell:not(.is-fullscreen):has(.mt-stage) { max-width: min(1100px, max(640px, calc((100svh - 430px) * 16 / 10))); } .mg-stage.mt-stage { height: auto; min-height: 0; aspect-ratio: 16 / 10; background: #3b2a20; } /* Portrait : 520 px au moins (et non 480 comme les autres jeux), pour des cases de 44 px au moins même en grille 6×6 sur un petit téléphone. */ .mg-stage.mt-stage.is-portrait { aspect-ratio: auto; height: clamp(520px, 78svh, 860px); } .player-shell.is-fullscreen .mg-stage.mt-stage { aspect-ratio: auto; height: auto; } .mt-canvas { outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .mt-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .mt-hint { position: absolute; right: 10px; bottom: 10px; z-index: 3; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: #f6ead2; color: #3a2a1e; border: 2px solid #3a2a1e; font: inherit; font-weight: 800; cursor: pointer; } .mt-hint[hidden] { display: none; } .mt-hint:disabled { opacity: .45; cursor: default; } .mt-hint:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* Créateur : aide des réglages, forme du mot dans la grille (« Cœur → COEUR · 5 lettres »). */ .mt-help { margin: 2px 0 10px; font-size: 12.5px; color: var(--sub); } .mt-norm { margin: 4px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; } .mt-norm:empty { display: none; } .mt-norm.is-bad { color: var(--red); } .mt-row .gm-label { margin-top: 10px; } .game-type-badge.legende_savoir, .type-card.legende_savoir .type-icon { background: var(--orange-soft); color: var(--orange); } /* Légende du Savoir (JEU-25) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler), rendu 3D. Frise des questions, nom de l'action, gros titres, menus de commande et équipe repris du prototype. */ .player-shell:not(.is-fullscreen):has(.ls-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.ls-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #8fc4e8; font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .mg-stage.ls-stage.is-portrait { aspect-ratio: auto; height: clamp(560px, 82svh, 900px); } .player-shell.is-fullscreen .mg-stage.ls-stage { aspect-ratio: auto; height: auto; } .ls-canvas { cursor: default; } .ls-stage .mg-feedback { top: 126px; bottom: auto; transform: translate(-50%, -12px); z-index: 4; background: rgba(8,28,36,.94); } .ls-stage .mg-feedback.show { transform: translate(-50%, 0); } .ls-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .ls-dmg { position: absolute; transform: translate(-50%,-50%); font-weight: 900; font-size: 28px; color: #fff; -webkit-text-stroke: 3px #10141c; paint-order: stroke; white-space: nowrap; letter-spacing: .02em; } .ls-dmg.crit { font-size: 38px; color: #ffe066; } .ls-dmg.heal { color: #7dffb0; } .ls-dmg.hurt { color: #ff8a96; } .ls-dmg.info { font-size: 18px; color: #d7f3ff; } .ls-ebar { position: absolute; transform: translate(-50%, 0); width: 150px; pointer-events: none; color: #fff; } .ls-ebar .n { font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin-bottom: 2px; white-space: nowrap; } .ls-ebar .hp { height: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.8); border-radius: 2px; overflow: hidden; } .ls-ebar .hp i { display: block; height: 100%; background: linear-gradient(90deg, #e0466a, #ff7a9a); } .ls-ebar .g { height: 4px; margin-top: 2px; background: rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; } .ls-ebar .g i { display: block; height: 100%; background: linear-gradient(90deg, #c9a24a, #ffe08a); } .ls-ebar.boss { width: 230px; } .ls-ebar.tgt .n { color: #ffe066; } .ls-ebar.tgt::before { content: '▼'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); color: #ffe066; font-size: 16px; animation: ls-bob .5s ease-in-out infinite alternate; } @keyframes ls-bob { to { margin-top: 4px; } } .ls-timeline { position: absolute; left: 10px; right: 10px; top: 8px; height: 64px; z-index: 1; pointer-events: none; display: flex; align-items: center; } .ls-tl-portrait { flex: 0 0 auto; width: 62px; height: 62px; transform: rotate(45deg); border: 3px solid #e8fbff; background: linear-gradient(135deg, #5ad1ff, #1a4a8a); box-shadow: 0 0 12px rgba(120,220,255,.8); overflow: hidden; margin: 0 10px 0 6px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; } .ls-tl-portrait span { transform: rotate(-45deg); text-shadow: 0 0 6px #fff; } .ls-tl-track { position: relative; flex: 1; height: 4px; background: linear-gradient(90deg, rgba(120,220,255,.9), rgba(120,220,255,.25)); border-radius: 2px; } .ls-tl-track .d { position: absolute; top: 50%; width: 11px; height: 11px; transform: translate(-50%,-50%) rotate(45deg); background: #0d2a36; border: 2px solid #bfefff; } .ls-tl-track .d.done { background: #7fe0ff; } .ls-tl-track .d.cur { width: 15px; height: 15px; background: #ffe066; border-color: #fff; box-shadow: 0 0 10px #ffe066; } .ls-tl-track .d.cut { border-color: #ffb36b; } .ls-tl-track .boss { position: absolute; right: -8px; top: 50%; width: 40px; height: 40px; transform: translate(0,-50%) rotate(45deg); border: 2px solid #ffb3c8; background: #2a1030; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 20px; } .ls-skill { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); min-width: min(420px, 70%); padding: 7px 40px; text-align: center; font-weight: 800; font-size: 20px; letter-spacing: .03em; color: #fff; background: linear-gradient(90deg, rgba(8,40,52,0), rgba(8,40,52,.9) 18%, rgba(8,40,52,.9) 82%, rgba(8,40,52,0)); border-top: 1px solid rgba(150,230,240,.5); border-bottom: 1px solid rgba(150,230,240,.5); opacity: 0; transition: opacity .2s; z-index: 1; pointer-events: none; white-space: nowrap; } .ls-skill.show { opacity: 1; } .ls-title { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.9); font-size: clamp(28px, 6vw, 54px); font-weight: 900; color: #fff; -webkit-text-stroke: 3px #10141c; paint-order: stroke; opacity: 0; transition: opacity .25s, transform .25s; z-index: 1; pointer-events: none; white-space: nowrap; letter-spacing: .04em; } .ls-title.show { opacity: 1; transform: translate(-50%,-50%) scale(1); } .ls-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; } .ls-battle { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 8px; z-index: 1; align-items: flex-end; justify-content: space-between; color: #fff; } .ls-battle[hidden] { display: none; } .ls-glass { background: rgba(10,32,40,.78); border: 1px solid rgba(170,230,220,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.5); backdrop-filter: blur(2px); } .ls-win { flex: 0 1 380px; min-width: 0; border-radius: 6px; padding: 8px 8px 6px; } .ls-win.idle { opacity: 0; pointer-events: none; } .ls-wt { font-size: 12px; font-weight: 800; color: #ffe08a; margin: 0 4px 6px; letter-spacing: .02em; } .ls-menu { display: flex; flex-direction: column; gap: 4px; } .ls-menu button { font: inherit; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(60,170,200,.55), rgba(14,70,96,.75)); border: 1px solid rgba(180,240,255,.55); border-radius: 999px; padding: 5px 12px 5px 30px; min-height: 38px; font-weight: 700; font-size: 15px; text-align: left; display: flex; gap: 8px; align-items: center; line-height: 1.2; position: relative; } .ls-menu button b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 11px; } .ls-menu button small { display: block; font-weight: 600; font-size: 11px; color: #cfe6e2; } .ls-menu button .mp { margin-left: auto; font-size: 12px; color: #8fd0ff; font-weight: 800; white-space: nowrap; } .ls-menu button:hover:not(:disabled), .ls-menu button:focus-visible { background: linear-gradient(180deg, rgba(130,230,255,.85), rgba(30,120,150,.9)); border-color: #fff; outline: none; box-shadow: 0 0 10px rgba(130,230,255,.6); } .ls-menu button:hover:not(:disabled)::before, .ls-menu button:focus-visible::before { content: '☛'; position: absolute; left: 8px; color: #fff; font-size: 16px; text-shadow: 0 1px 2px #000; } .ls-menu button:disabled { opacity: .38; cursor: default; } .ls-menu button.found { color: #9dffc8; } .ls-menu button.glow { border-color: #2fcf74; box-shadow: 0 0 0 2px rgba(47,207,116,.55); background: rgba(47,207,116,.16); } .ls-menu button.back { font-size: 13px; color: #cfe6e2; background: rgba(0,0,0,.35); } .ls-party { display: flex; flex-direction: column; gap: 2px; align-items: stretch; min-width: 300px; padding: 6px 8px; border-top: 2px solid rgba(220,235,255,.8); background: linear-gradient(180deg, rgba(6,16,30,0), rgba(6,16,30,.72) 20%); } .ls-pbox { position: relative; display: grid; grid-template-columns: 1fr 64px 44px 90px; align-items: center; gap: 6px; border-radius: 4px; padding: 3px 8px; text-align: left; color: #fff; font: inherit; cursor: pointer; background: transparent; border: 1px solid transparent; box-shadow: none; } .ls-pbox:disabled { cursor: default; } .ls-pbox .nm { font-size: 18px; font-weight: 600; text-shadow: 0 1px 2px #000; } .ls-pbox .num { font-size: 18px; font-weight: 600; text-align: right; text-shadow: 0 1px 2px #000; } .ls-pbox .num.mpn { color: #bfe3ff; } .ls-pbox .act { height: 7px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.4); border-radius: 2px; } .ls-pbox .act i { display: block; height: 100%; background: linear-gradient(90deg, #4fd9a8, #a8ffe0); } .ls-pbox .hpb { grid-column: 1 / 5; height: 2px; background: rgba(0,0,0,.5); } .ls-pbox .hpb i { display: block; height: 100%; background: #45e08a; } .ls-phead { display: grid; grid-template-columns: 1fr 64px 44px 90px; gap: 6px; padding: 0 9px; font-size: 11px; font-weight: 800; color: #dfe8ff; letter-spacing: .06em; } .ls-phead span:nth-child(2), .ls-phead span:nth-child(3) { text-align: right; } .ls-pbox.ready:hover, .ls-pbox.ready:focus-visible { background: rgba(255,255,255,.12); } .ls-pbox.acted { opacity: .6; } .ls-pbox.sel { border-color: var(--orange); background: rgba(255,122,0,.18); } .ls-pbox.ko { opacity: .5; } .ls-pbox.ko .nm::after { content: ' K.O.'; color: #ff8a96; font-size: 12px; } .ls-pbox.low .hpb i { background: #ff6b6b; } .ls-pbox.low .num.hpn { color: #ffd23f; } .ls-pbox .buf { font-size: 12px; margin-left: 4px; } .ls-pbox:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; } /* Paysage : interface à l'échelle de la scène (--ls-k, de 0,6 à 1, calculé par le jeu). */ .ls-stage:not(.is-portrait) .ls-battle { right: auto; width: calc((100% - 16px) / var(--ls-k, 1)); transform: scale(var(--ls-k, 1)); transform-origin: bottom left; } .ls-stage:not(.is-portrait) .ls-timeline { right: auto; width: calc((100% - 20px) / var(--ls-k, 1)); transform: scale(var(--ls-k, 1)); transform-origin: top left; } .ls-stage:not(.is-portrait) .ls-skill { top: calc(84px * var(--ls-k, 1)); transform: translateX(-50%) scale(var(--ls-k, 1)); transform-origin: top center; } .ls-stage:not(.is-portrait) .mg-feedback { top: calc(126px * var(--ls-k, 1)); } .ls-stage.is-portrait .ls-timeline { height: 44px; top: 4px; } .ls-stage.is-portrait .ls-tl-portrait { width: 40px; height: 40px; font-size: 20px; } .ls-stage.is-portrait .ls-tl-track .boss { width: 28px; height: 28px; font-size: 14px; } .ls-stage.is-portrait .ls-skill { top: 54px; font-size: 16px; padding: 5px 24px; } .ls-stage.is-portrait .mg-feedback { top: 92px; font-size: 13px; padding: 6px 10px; } .ls-stage.is-portrait .ls-battle { flex-direction: column-reverse; align-items: stretch; gap: 6px; left: 6px; right: 6px; bottom: 6px; } .ls-stage.is-portrait .ls-win { flex: none; } .ls-stage.is-portrait .ls-party { min-width: 0; padding: 4px 6px; } .ls-stage.is-portrait .ls-pbox, .ls-stage.is-portrait .ls-phead { grid-template-columns: 1fr 52px 34px 60px; gap: 4px; padding: 2px 6px; } .ls-stage.is-portrait .ls-pbox .nm, .ls-stage.is-portrait .ls-pbox .num { font-size: 14px; } .ls-stage.is-portrait .ls-menu button { min-height: 36px; font-size: 14px; } .ls-stage.is-portrait .ls-dmg { font-size: 22px; } .ls-stage.is-portrait .ls-dmg.crit { font-size: 28px; } .ls-stage.is-portrait .ls-ebar { width: 110px; } .ls-stage.is-portrait .ls-ebar.boss { width: 170px; } @media (prefers-reduced-motion: reduce) { .ls-skill, .ls-title { transition: none; } .ls-ebar.tgt::before { animation: none; } } .game-type-badge.gravite_savante, .type-card.gravite_savante .type-icon { background: var(--orange-soft); color: var(--orange); } /* Gravité Savante (JEU-26) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler), rendu 3D. Place, gravité, compte à rebours, consigne, étiquettes et boutons de voies repris du prototype. */ .player-shell:not(.is-fullscreen):has(.gs-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.gs-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #070b1e; } .mg-stage.gs-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.gs-stage { aspect-ratio: auto; height: auto; } .gs-canvas { cursor: pointer; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .gs-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .gs-slow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(64,173,236,.06) 40%, rgba(20,8,60,.6) 100%); } .gs-fade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #070b1e; transition: opacity .25s; z-index: 1; } .gs-pos, .gs-grav { position: absolute; pointer-events: none; z-index: 1; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #1a0f3a, 0 0 8px rgba(64,173,236,.6); } .gs-pos { left: 12px; top: 8px; font-size: 46px; line-height: 1; font-style: italic; letter-spacing: -.02em; } .gs-pos small { font-size: 20px; opacity: .9; } .gs-pos.up { animation: gs-pop .5s; } /* « scale » (et non « transform ») : s'ajoute à la mise à l'échelle de la scène au lieu de la remplacer. */ @keyframes gs-pop { 0% { scale: 1; } 40% { scale: 1.35; color: #ffd23f; } 100% { scale: 1; } } .gs-grav { left: 14px; top: 60px; font-size: 14px; } .gs-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 110px; font-weight: 900; font-style: italic; color: #fff; -webkit-text-stroke: 4px #1a0f3a; z-index: 2; pointer-events: none; opacity: 0; } .gs-count.go { color: #ffd23f; } .gs-hint { position: absolute; left: 50%; bottom: 116px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(7,16,40,.92); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .gs-hint.show { opacity: 1; } .gs-tag { position: absolute; z-index: 1; pointer-events: none; max-width: 46%; padding: 5px 10px 5px 6px; border-radius: 12px; background: rgba(8,14,40,.88); border: 3px solid #40ADEC; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.2; display: flex; gap: 8px; align-items: center; transform: translateY(-50%); box-shadow: 0 0 14px rgba(64,173,236,.35); } .gs-tag[hidden] { display: none; } .gs-tag b { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; border-radius: 13px; background: var(--orange); color: #fff; font-size: 13px; flex: none; } .gs-tag.sel { border-color: var(--orange); box-shadow: 0 0 16px rgba(255,122,0,.6); } .gs-tag.glow { border-color: #2fcf74; box-shadow: 0 0 16px rgba(47,207,116,.7); } .gs-tag.closed { border-color: #ff4d5e; color: #ffb3c0; } .gs-lanes { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 2; width: min(560px, 94%); } .gs-lanes[hidden] { display: none; } .gs-lanes button { min-height: 44px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.95); color: #0b1a3a; border: 3px solid #0b1a3a; font: inherit; font-weight: 800; font-size: 14px; line-height: 1.15; text-align: left; display: flex; gap: 8px; align-items: center; cursor: pointer; } .gs-lanes button b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; flex: none; } .gs-lanes button i { font-style: normal; font-size: 12px; color: #40506e; flex: none; min-width: 58px; } .gs-lanes button[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,0,.5); } .gs-lanes button.glow { border-color: #2fcf74; box-shadow: 0 0 0 3px rgba(47,207,116,.6); } .gs-lanes button:disabled { opacity: .55; cursor: default; text-decoration: line-through; } .gs-lanes button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* Paysage : interface à l'échelle de la scène (--gs-k, de 0,6 à 1, calculé par le jeu). */ /* Boutons et étiquettes de voies : 80 % au moins, pour rester lisibles. */ .gs-stage:not(.is-portrait) .gs-lanes { transform: translateX(-50%) scale(max(0.8, var(--gs-k, 1))); transform-origin: bottom center; bottom: calc(10px * var(--gs-k, 1)); } .gs-stage:not(.is-portrait) .gs-hint { bottom: calc(22px + 94px * max(0.8, var(--gs-k, 1))); transform: translateX(-50%) scale(var(--gs-k, 1)); transform-origin: bottom center; } .gs-stage:not(.is-portrait) .gs-tag { transform: translateY(-50%) scale(max(0.8, var(--gs-k, 1))); transform-origin: left center; } .gs-stage:not(.is-portrait) .gs-pos, .gs-stage:not(.is-portrait) .gs-grav { transform: scale(var(--gs-k, 1)); transform-origin: top left; } .gs-stage:not(.is-portrait) .gs-grav { top: calc(8px + 60px * var(--gs-k, 1)); } .gs-stage:not(.is-portrait) .gs-count { font-size: calc(110px * var(--gs-k, 1)); } .gs-stage.is-portrait .gs-pos { font-size: 36px; } .gs-stage.is-portrait .gs-pos small { font-size: 16px; } .gs-stage.is-portrait .gs-grav { top: 48px; font-size: 12px; } .gs-stage.is-portrait .gs-count { font-size: 80px; } .gs-stage.is-portrait .gs-lanes { gap: 4px; } .gs-stage.is-portrait .gs-lanes button { min-height: 42px; font-size: 13px; padding: 4px 8px; } .gs-stage.is-portrait .gs-hint { bottom: auto; top: 100px; font-size: 13px; padding: 6px 10px; } .gs-stage.is-portrait .mg-feedback { top: 54px; } @media (prefers-reduced-motion: reduce) { .gs-hint, .gs-fade { transition: none; } .gs-pos.up { animation: none; } } /* Foule Savante (JEU-19) : scène 16/9 comme le prototype (1100 px au plus, toute la scène visible sans défiler), étiquettes DOM projetées sur la 3D. */ .player-shell:not(.is-fullscreen):has(.fs-stage) { max-width: min(1100px, var(--mg-fit-w)); } .mg-stage.fs-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #8fd3f4; } .mg-stage.fs-stage.is-portrait { aspect-ratio: auto; height: clamp(480px, 74svh, 860px); } .player-shell.is-fullscreen .mg-stage.fs-stage { aspect-ratio: auto; height: auto; } .fs-canvas { touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; } .fs-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); } .fs-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .fs-gl { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; padding: 6px 7px; border-radius: 10px; background: rgba(255,255,255,.94); color: #14213a; border: 3px solid #40ADEC; font-weight: 800; line-height: 1.18; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: manual; box-shadow: 0 3px 0 rgba(0,0,0,.25); will-change: transform; } .fs-gl .num { display: inline-block; min-width: 1.45em; height: 1.45em; line-height: 1.45em; margin-right: 4px; border-radius: 50%; background: var(--orange); color: #fff; font-size: .8em; vertical-align: .08em; } .fs-gl.brk { overflow-wrap: anywhere; hyphens: auto; } .fs-gl.found { border-color: #2fcf74; background: #e9fbf1; } .fs-gl.glow { border-color: #2fcf74; box-shadow: 0 0 0 4px rgba(47,207,116,.45), 0 3px 0 rgba(0,0,0,.25); } .fs-gl.bad { border-color: #ff4d5e; background: #ffe9eb; } .fs-cnt { position: absolute; left: 0; top: 0; min-width: 34px; padding: 3px 9px; border-radius: 999px; background: #40ADEC; color: #fff; font-weight: 900; font-size: 16px; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.3); transform-origin: 50% 100%; } .fs-cnt.en { background: #ff4d5e; } .fs-float { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 22px; text-shadow: 0 2px 0 #0d1830, 0 0 3px #0d1830; pointer-events: none; white-space: nowrap; } .fs-float.ok { color: #8dffb8; } .fs-float.ko { color: #ffb0b8; } .fs-fade { position: absolute; inset: 0; background: #0d1830; opacity: 0; pointer-events: none; } /* Consigne de pause, à la place des messages (elle attend qu'ils s'effacent), comme le prototype. */ .fs-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; pointer-events: none; opacity: 0; z-index: 1; background: rgba(13,24,48,.94); color: #fff; border: 2px solid var(--orange); transition: opacity .25s; } .fs-hint.show { opacity: 1; } .fs-stage.is-portrait .fs-hint { font-size: 13px; padding: 6px 10px; } .fs-stage.is-portrait .fs-cnt { font-size: 14px; } @media (prefers-reduced-motion: reduce) { .fs-hint { transition: none; } } /* Cube Néon (JEU-18) : scène aux proportions du repère du prototype (960 × 540, 420 × 560 sur écran étroit), 980 px au plus comme lui. */ .mg-stage.cn-stage { height: auto; min-height: 0; aspect-ratio: 960 / 540; background: #070a1c; } .mg-stage.cn-stage.is-portrait { aspect-ratio: 420 / 560; } .player-shell.is-fullscreen .mg-stage.cn-stage { aspect-ratio: auto; } .player-shell:not(.is-fullscreen):has(.cn-stage) { max-width: min(980px, var(--mg-fit-w)); } .mg-stage.cn-stage .mg-canvas { touch-action: none; } /* Glisse-mots (TICKET-08) : jeu en HTML dans la scène des mini-jeux. La scène garde sa hauteur (les écrans d'intro et de fin la couvrent) ; le texte et les étiquettes défilent à l'intérieur, au doigt compris. */ .mg-stage.gm-stage { background: linear-gradient(160deg, #3b86ab, #24597a); touch-action: auto; } .gm-play { position: absolute; inset: 0; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 14px 64px; } .gm-board { width: min(900px, 100%); background: #fffdf7; color: #12324a; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 16px 20px 20px; } .gm-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: #5b7384; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } .gm-text { font-size: clamp(18px, 2.6vw, 25px); line-height: 2.15; font-weight: 500; margin: 0; overflow-wrap: break-word; user-select: text; } .gm-gap { font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; min-height: 1.55em; max-width: 100%; padding: 0 .4em; margin: 0 .1em; border: 2px dashed #9fb7c7; border-radius: 10px; background: #f1f6f9; color: #12324a; cursor: pointer; line-height: 1.3; transition: background .15s, border-color .15s, transform .15s; } .gm-gap:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .gm-gap.active { border-color: var(--blue); background: #e4f4fd; box-shadow: 0 0 0 3px rgba(64,173,236,.25); } .gm-gap.hover { border-color: var(--orange); background: #fff1e3; transform: scale(1.05); } .gm-gap.filled { border-style: solid; border-color: #7fcf9f; background: #e3f6ea; color: #138a4b; cursor: default; animation: mg-pop .35s; } .gm-gap.revealed { border-style: solid; border-color: #f3b37a; background: #fff1e3; color: #c2410c; cursor: default; } .gm-gap.wrong { animation: gm-shake .4s; border-color: #c2410c; background: #fde2e2; } @keyframes gm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .gm-bank { width: min(900px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 58px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.14); border: 2px dashed rgba(255,255,255,.35); } .gm-hint { color: #e6f3fb; font-size: 14px; margin: 0; align-self: center; } .gm-word { font: inherit; font-weight: 700; font-size: clamp(16px, 2.2vw, 20px); padding: 9px 16px; border-radius: 12px; border: 0; background: #fff; color: #12324a; box-shadow: 0 3px 0 #c6d6e1, 0 6px 14px rgba(0,0,0,.18); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s, opacity .15s; } .gm-word:hover { transform: translateY(-2px); } .gm-word:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; } .gm-word.dragging { opacity: .35; } .gm-word.back { animation: mg-pop .35s; } .gm-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.08); box-shadow: 0 12px 26px rgba(0,0,0,.35); cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .gm-gap, .gm-word { transition: none; } .gm-gap.filled, .gm-gap.wrong, .gm-word.back { animation: none; } } /* Créateur Glisse-mots */ .gm-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sub); margin: 4px 0 6px; } .qcard .gm-textarea { width: 100%; min-height: 84px; padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; } .gm-text-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; } .gm-hole-help { font-size: 12.5px; color: var(--sub); flex: 1; min-width: 150px; } .gm-preview { margin: 8px 0 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--muted); font-size: 14.5px; line-height: 2; } .gm-preview:empty { display: none; } .gm-preview-gap { display: inline-block; padding: 0 .5em; border-radius: 8px; border: 1.5px dashed var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; line-height: 1.5; } .gm-preview-meta { margin: 0 0 10px; font-size: 12.5px; color: var(--sub); } .gm-preview-meta:empty { display: none; } .print-blank { display: inline-block; min-width: 7em; border-bottom: 1.5px dotted #555; color: #888; font-size: .75em; text-align: left; } .mg-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .mg-after { margin-top: 16px; } .player-shell.is-fullscreen #player-body:has(.mg) { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; } /* Chaque maillon jusqu'à la scène doit être un conteneur flex : sans cela, flex: 1 est ignoré et la scène ne tient plus dans la hauteur de l'écran. */ .player-shell.is-fullscreen .mg-host, .player-shell.is-fullscreen .mg { flex: 1; min-height: 0; display: flex; flex-direction: column; } .player-shell.is-fullscreen .mg-stage { flex: 1; height: auto; min-height: 240px; } @media (max-width: 480px) { .mg-stage { height: 64vh; border-radius: var(--radius-md); } .mg-card { padding: 18px; } } .memo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 480px) { .memo-grid { grid-template-columns: repeat(3, 1fr); } } .memo-card { aspect-ratio: 3/4; border-radius: var(--radius-md); background: var(--orange); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: transparent; transition: transform .25s ease, background .2s ease; border: none; box-shadow: var(--shadow); } .memo-card .star { color: #fff; opacity: .9; } .memo-card.flipped, .memo-card.matched { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .memo-card.flipped .star, .memo-card.matched .star { display: none; } .memo-card.matched { background: var(--green-soft); border-color: var(--green); color: var(--green); cursor: default; } .memo-stats { display: flex; justify-content: center; gap: 28px; margin-bottom: 20px; font-size: 13.5px; color: var(--sub); } .memo-stats strong { color: var(--text); font-weight: 600; font-size: 16px; } .result-panel { text-align: center; padding: 12px 0; } .result-badge { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .result-badge.great { background: var(--green-soft); color: var(--green); } .result-badge.ok { background: var(--amber-soft); color: var(--amber); } .result-score { font-size: 34px; font-weight: 400; margin: 0 0 6px; } .result-sub { color: var(--sub); margin: 0 0 28px; } .result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .rating-box { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); text-align: left; } .rating-label { font-size: 13px; color: var(--sub); margin: 0 0 8px; } .rating-summary { font-weight: 600; color: var(--text); } .rating-stars { display: flex; gap: 4px; } .rating-star { background: none; border: none; padding: 2px; color: var(--control-border); } .rating-star.active, .rating-star:hover { color: var(--orange); } /* Quand les deux blocs se suivent (utilisateur connecté), un seul séparateur suffit. */ .rating-box + .leaderboard-box { margin-top: 20px; padding-top: 0; border-top: none; } .leaderboard-box { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); text-align: left; } .leaderboard-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin: 0 0 12px; text-align: center; } .leaderboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--muted); font-size: 13.5px; } .leaderboard-rank { width: 22px; flex-shrink: 0; font-weight: 600; color: var(--sub); text-align: center; } .leaderboard-pseudo { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-value { font-weight: 600; color: var(--blue-dark); flex-shrink: 0; } .leaderboard-empty { color: var(--sub); font-size: 13px; text-align: center; margin: 0; } .leaderboard-guest-note { margin: 14px 0 0; padding: 10px 14px; background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-sm); font-size: 12.5px; text-align: center; line-height: 1.5; } .leaderboard-guest-note a { color: inherit; font-weight: 600; text-decoration: underline; } /* Au milieu de l'écran (en bas, il se perdait sur le pied de page), au-dessus des fenêtres modales. */ .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; max-width: calc(100% - 32px); width: max-content; text-align: center; background: var(--text); color: var(--bg); padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35); z-index: 200; transition: opacity .3s ease, transform .3s ease; pointer-events: none; } .toast.hidden { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow); } .modal h3 { margin: 0 0 16px; font-size: 18px; } .radio-list { display: flex; flex-direction: column; gap: 10px; } .radio-list label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; text-transform: none; letter-spacing: 0; } .radio-list input[type="radio"] { accent-color: var(--orange); width: 16px; height: 16px; flex-shrink: 0; } .modal textarea { width: 100%; padding: 10px 12px; font-size: 14px; resize: vertical; font-family: inherit; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .breadcrumb-back { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: 13.5px; font-weight: 500; background: none; border: none; padding: 6px 0; margin-bottom: 18px; } .breadcrumb-back:hover { color: var(--text); } /* Auth-aware topbar */ .avatar-btn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 24px; padding: 5px 14px 5px 5px; color: var(--text); font-size: 14px; font-weight: 500; } .avatar-btn:hover { border-color: var(--text); } .avatar-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; flex-shrink: 0; } .user-menu-wrap { position: relative; } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 8px; min-width: 190px; display: none; z-index: 30; } .user-menu.open { display: block; } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; background: none; border: none; color: var(--text); font-size: 14px; font-weight: 500; } .user-menu-item:hover { background: var(--muted); } .user-menu-item.danger { color: var(--red); } .user-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; } .owner-tag { background: var(--blue-soft); color: var(--blue-dark); border: none; } /* Auth view */ .auth-shell { max-width: 400px; margin: 24px auto 0; text-align: center; } .auth-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); margin-top: 24px; text-align: left; } .auth-card .field { margin-bottom: 16px; } .field-row > .field { min-width: 0; } .account-card-title { margin: 0 0 8px; font-size: 18px; font-weight: 500; } .account-danger-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--sub); } #account-delete-confirm { margin-top: 16px; } .account-delete-actions { display: flex; flex-wrap: wrap; gap: 10px; } .account-delete-actions .btn { flex: 1 1 auto; } .auth-note { font-size: 13px; color: var(--sub); margin-top: 16px; }