── MainLayout's

is a column flex container (display:flex; flex-direction:column). Page section wrappers use `max-width:…; margin:0 auto` to cap-and-center their content. In flexbox, horizontal `auto` margins disable the default `align-items:stretch`, so such a wrapper collapses to its content's max-content width instead of spanning the row — e.g. the home "À la une" flex card (flex bases 280px + 320px) shrank to ~600px and centered, while the 3 concept cards above it (a grid with wide text) stayed near full width, leaving them visibly misaligned. The same caused the Pro "formules" grid to shrink under its hero. Forcing width:100% restores full-width behavior — still capped by each wrapper's own max-width and centered by its margin:auto. Targets only MainLayout (AuthLayout uses a div). */ main > * { width: 100%; } /* ── Layout utilities ── */ .th-row-stack { display: grid; gap: 64px; align-items: end; } .th-row-stack.cols-58 { grid-template-columns: 1.4fr 1fr; } .th-row-stack.cols-eq { grid-template-columns: 1fr 1fr; } .th-stats { display: grid; gap: 24px; } .th-stats.cols-5 { grid-template-columns: repeat(5, 1fr); } .th-stats.cols-4 { grid-template-columns: repeat(4, 1fr); } .th-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .th-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .th-grid-3 { grid-template-columns: 1fr; } } .th-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .th-home-popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .th-home-popular { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .th-home-popular { grid-template-columns: 1fr; } } .th-editor-split { display: grid; grid-template-columns: 380px 1fr 320px; flex: 1; min-height: 0; } .th-recap-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; } .th-recap-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; } .th-pad-page { padding: 0 28px 80px; } /* ── Fluid headline sizes ── */ .th-hero-headline { font-size: clamp(36px, 6.4vw, 64px); } .th-detail-headline { font-size: clamp(32px, 5.5vw, 56px); } .th-section-headline { font-size: clamp(26px, 3.6vw, 48px); } .th-play-headline { font-size: clamp(26px, 3.6vw, 42px); } .th-recap-headline { font-size: clamp(34px, 5.6vw, 64px); } /* Page indice mobile : titre d'étape un peu plus discret que le clamp desktop ci-dessus. */ @media (max-width: 900px) { .th-play-headline { font-size: clamp(19px, 5.2vw, 24px); } } /* ── Shell row ── */ .th-shell-row { max-width: 1440px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 16px; } /* ── Chasse "mode jeu" (mobile ET desktop) ── /chasse/{id} une fois la session du joueur démarrée : le hero + le contenu de consultation cèdent la place au shell immersif dédié carte/collection/photo (voir GameModeState + ChasseDetail.razor), quelle que soit la largeur d'écran — comme le mode traversée, qui retire déjà son propre header sur toutes les tailles (IsImmersiveGameRoute). Les ajustements propres au desktop (coque plein écran, overlays agrandis) vivent dans le bloc .th-play2-chasse plus bas, scoped pour ne jamais déborder sur le mode traversée. */ .th-game-hide-mobile { display: none !important; } .th-game-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Verrouillage de la racine à 100dvh (voir .th-game-root) : le header/footer/barre du bas globaux sont masqués pendant le jeu, le shell remplit donc tout l'écran. Une hauteur *définitive* remonte ainsi la chaîne flex (root → main → .th-game-shell → .th-play2-shell → conteneur carte), ce qui permet à la carte Leaflet de prendre MapHeight="100%" sans rester à hauteur 0. min-height:0 !important — MainLayout pose un `min-height:100vh` EN LIGNE dès que la route n'est pas une route de jeu, et /collection/{id} n'en est pas une. Sur mobile, 100vh (barre d'URL masquée) est PLUS GRAND que 100dvh (barre visible) : ce min-height l'emportait, la coque dépassait le bas de l'écran et il fallait faire défiler pour atteindre le déclencheur. */ .th-game-root { height: 100dvh; min-height: 0 !important; overflow: hidden; } /* ── Menu mobile : bouton hamburger + tiroir latéral ── Remplace l'ancienne barre de navigation du bas. Hors jeu, la navigation mobile passe désormais par un tiroir classique qui s'ouvre/se ferme (menu à trois barres). Le bouton (.th-burger) et le tiroir (.th-drawer) n'apparaissent que sur mobile (≤ 900px) ; sur desktop la nav horizontale de l'en-tête reste seule (.th-hide-mobile). */ .th-burger { display: none; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; padding: 9px; border-radius: 10px; flex-shrink: 0; } /* Tiroir : toujours présent dans le DOM (pour animer l'ouverture/fermeture), masqué sur desktop, hors écran tant qu'il n'est pas ouvert (.th-drawer--open). */ .th-drawer { display: none; } @media (max-width: 900px) { .th-burger { display: inline-flex; } .th-drawer { display: block; } .th-drawer__scrim { position: fixed; inset: 0; z-index: 300; background: color-mix(in oklch, var(--ink) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity .2s ease; } /* position:fixed → le panneau hors écran (translateX(100%)) ne crée pas de débordement horizontal : il est borné par le viewport. */ .th-drawer__panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 301; width: min(84vw, 340px); display: flex; flex-direction: column; background: var(--bg-card); border-left: 1px solid var(--line-strong); box-shadow: -18px 0 44px -22px rgba(36, 28, 18, .5); transform: translateX(100%); transition: transform .24s ease; padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; } .th-drawer--open .th-drawer__scrim { opacity: 1; pointer-events: auto; } .th-drawer--open .th-drawer__panel { transform: translateX(0); } .th-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); } .th-drawer__title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--ink); } .th-drawer__close { display: flex; background: var(--bg-soft); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; padding: 8px; border-radius: 10px; } .th-drawer__links { display: flex; flex-direction: column; gap: 4px; padding: 12px; } .th-drawer__link { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 13px 14px; border-radius: 12px; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 800; font-size: 15px; transition: background .15s ease, color .15s ease; } .th-drawer__link:hover { background: var(--bg-soft); } .th-drawer__link.is-active { background: var(--ember-soft); color: var(--ember); } } /* ── Footer (liens légaux + copyright) ── Une seule rangée sur desktop : les liens « Informations » (mentions légales, CGU, confidentialité, cookies, hébergement) à gauche, le copyright manuscrit à droite. Sur mobile (≤ 640px) la rangée passe en COLONNE CENTRÉE : les liens s'enroulaient sur deux lignes collées au bord gauche, ce qui donnait un bloc visuellement bancal sous le contenu centré de la page. Ces règles vivent ici (et non en style inline dans MainLayout.razor) parce qu'un style inline `justify-content:space-between` l'emporterait sur la media query. */ .th-footer__inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px 30px; flex-wrap: wrap; } .th-footer__nav { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; } .th-footer__copy { font-family: var(--font-hand); font-weight: 700; font-size: 19px; color: var(--muted); flex-shrink: 0; } @media (max-width: 640px) { .th-footer__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; } .th-footer__nav { justify-content: center; } } /* ── Tabbed editor mobile ── */ .th-editor-pane-map { min-height: 360px; } @media (max-width: 900px) { .th-editor-split[data-active-tab="list"] .th-editor-pane-map, .th-editor-split[data-active-tab="list"] .th-editor-pane-inspect { display: none !important; } .th-editor-split[data-active-tab="map"] .th-editor-pane-list, .th-editor-split[data-active-tab="map"] .th-editor-pane-inspect { display: none !important; } .th-editor-split[data-active-tab="inspect"] .th-editor-pane-list, .th-editor-split[data-active-tab="inspect"] .th-editor-pane-map { display: none !important; } .th-editor-pane-list, .th-editor-pane-inspect { border: none !important; } .th-editor-pane-map { min-height: calc(100vh - 220px); } } /* ── Editor toolbar ── */ .th-editor-toolbar { padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ── Editor tabs mobile ── */ .th-editor-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-soft); } /* ── Modal bottom-sheet mobile ── */ @media (max-width: 640px) { .th-modal-overlay { align-items: flex-end !important; } .th-modal { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; animation: th-slide-up 0.22s ease-out; } } /* ── Animations ── */ @keyframes th-pulse { 0%, 100% { transform: scale(1); opacity: 0.18; } 50% { transform: scale(1.8); opacity: 0; } } @keyframes th-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes th-slide-up { from { transform: translateY(24px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } } @keyframes th-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(255, 59, 48, 0); } } /* Éclair de déclencheur : flash blanc bref au moment où l'on prend la photo, pour un retour visuel immédiat pendant que la capture haute qualité se traite. */ @keyframes th-shutter-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } } @keyframes th-spin { to { transform: rotate(360deg); } } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(36,28,18,.22); border-radius: 9px; } /* ── Responsive breakpoints ── */ @media (max-width: 900px) { .th-row-stack.cols-58, .th-row-stack.cols-eq { grid-template-columns: 1fr; gap: 28px; } .th-stats.cols-5 { grid-template-columns: repeat(3, 1fr); } .th-stats.cols-4 { grid-template-columns: repeat(2, 1fr); } .th-grid-2 { grid-template-columns: 1fr; } .th-editor-split { grid-template-columns: 1fr; } .th-recap-grid { grid-template-columns: repeat(2, 1fr); } .th-recap-bottom { grid-template-columns: 1fr; } .th-pad-page { padding: 0 18px 96px; } .th-hide-mobile { display: none !important; } .th-hide-desktop { display: initial; } } @media (max-width: 640px) { .th-stats.cols-5, .th-stats.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; } .th-grid-cards { grid-template-columns: 1fr; gap: 16px; } .th-pad-page { padding: 0 14px 96px; } } /* ── Accessibility ── */ .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; } /* ── Legacy compat shim (form-control for InputText in auth pages) ── */ .form-control { width: 100%; } /* ── Play page — mode jeu (/jeu/{id}) : menu à 4 éléments fixes (boussole, points, temps + étapes, action de validation), en bas de page. Un seul menu, quelle que soit la taille d'écran — remplace l'ancienne sub-bar desktop et la barre du bas mobile à onglets (voir MainLayout.IsGameRoute, qui masque la nav globale sur cette route, et JeuSession.razor). ── */ .th-play-menu { display: flex; align-items: stretch; flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--bg); /* Pas de padding-bottom safe-area ici :

(MainLayout) le fournit déjà via son propre padding-bottom, et ce menu est un enfant de flux normal (contrairement à l'ancienne .th-play-gamebar, position:fixed). */ } .th-play-menu > *:not(:last-child) { border-right: 1px solid var(--line); } .th-play-menu-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 10px 6px; border: none; background: none; color: var(--ink); font-family: var(--font-sans); cursor: default; } button.th-play-menu-item { cursor: pointer; } button.th-play-menu-item:disabled { cursor: default; opacity: .55; } .th-play-menu-value { font-size: 15px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .th-play-menu-label { font-size: 9.5px; } .th-play-compass { display: flex; align-items: center; justify-content: center; color: var(--ember); } .th-play-compass svg { transition: transform .25s ease; } .th-play-menu-cta { flex: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; border: none; background: var(--ember); color: #fff; font-family: var(--font-sans); cursor: pointer; } .th-play-menu-cta .th-play-menu-value { color: #fff; font-size: 12px; font-weight: 800; white-space: normal; text-align: center; } /* ── Corps de jeu : carte (2/6 de la hauteur) fusionnée à l'indice (4/6) — toujours affichées ensemble, quelle que soit la taille d'écran (plus de bascule carte/indice mobile). ── */ .th-play-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .th-play-clue-panel { flex: 4 1 0%; min-height: 0; overflow-y: auto; padding: 20px clamp(16px, 4vw, 32px) 28px; display: flex; flex-direction: column; gap: 16px; } /* ── Titre de l'étape — au-dessus de la carte (voir JeuSession.razor). ── */ .th-play-title-bar { flex: 0 0 auto; padding: 16px clamp(16px, 4vw, 32px) 4px; } /* ── Badges (type/points/zone/hors-ligne) — overlay en haut de la carte, plutôt que dans l'indice (voir JeuSession.razor). Fond translucide flouté : certains badges (Tone="outline") ont un fond transparent, illisible sur les tuiles de la carte sans ce bandeau. Leaflet garde son control de zoom en bottomright et son attribution désactivée (voir leaflet-route-map.js) : rien en haut ne peut entrer en conflit avec ce bandeau. ── */ .th-play-map-badges { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in oklch, var(--bg-card) 85%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } /* ── Indice principal — pleine largeur, sans encadré ni libellé. ── */ .th-play-clue-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 2.6vw, 20px); color: var(--ink); margin: 0; line-height: 1.55; } /* ── Bouton média — incite au clic (pulsation tz-pulse), ouvre le média en grand (lightbox plein écran, voir JeuSession.razor) plutôt que de l'intégrer directement dans l'indice. ── */ .th-play-media-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: none; border-radius: 999px; background: var(--ember); color: #fff; font-family: var(--font-sans); font-weight: 800; font-size: 13.5px; cursor: pointer; animation: tz-pulse 2.4s infinite; } /* ── Objectif de l'étape — fixe juste au-dessus du menu, ne défile jamais avec l'indice (contrairement au reste du contenu de .th-play-clue-panel). ── */ .th-play-objective { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 12px clamp(16px, 4vw, 32px); border-top: 1px solid var(--line); background: var(--bg-soft); } .th-play-objective-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--line-strong); color: var(--tz-teal-d); } .th-play-objective-title { font-size: 12.5px; font-weight: 800; color: var(--ink); } .th-play-objective-desc { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.45; margin-top: 3px; } /* ══════════════════════════════════════════════════════════════════════ RÈGLE GLOBALE — Leaflet ne doit JAMAIS passer au-dessus du menu/header ou des fenêtres modales. Ce bug est revenu à CHAQUE nouvelle intégration Leaflet (voir CLAUDE.md, section "Bugs UI résolus") car le correctif était appliqué au cas par cas sur certains composants (isolation:isolate en inline style) et oublié sur d'autres. `.leaflet-container` est la classe posée PAR Leaflet lui-même sur le div de la carte (L.map(...)) : cette règle protège donc AUTOMATIQUEMENT toute nouvelle carte Leaflet ajoutée à l'app, sans qu'il soit nécessaire d'y penser composant par composant. Ne pas retirer, ne pas la limiter à une classe de wrapper spécifique. ── */ .leaflet-container { isolation: isolate; } /* ── Bandeau RGPD masqué pendant une partie ──────────────────────────── Les widgets flottants de tarteaucitron (#tarteaucitronIcon, et #tarteaucitronAlertSmall s'il venait à être réactivé) sont posés en position:fixed dans , hors de l'arbre Blazor : aucun composant de jeu ne peut donc les cacher par son propre style. :has() résout ça SANS interop ni cycle de vie : la coque de jeu n'existe dans le DOM que pendant la partie (.th-play2-shell en mode parcours, .th-game-shell en mode collection), la règle s'applique et se retire donc d'elle-même à l'entrée et à la sortie. Une bascule pilotée depuis Blazor aurait dû défaire son effet dans Dispose — synchrone, sur un circuit parfois déjà coupé, donc peu fiable. Pourquoi : ces écrans sont des coques plein écran, tenues à une main sur le terrain, où chaque coin porte déjà une commande de jeu. Le consentement reste révocable — /cookies porte le même bouton. ── */ body:has(.th-play2-shell) #tarteaucitronIcon, body:has(.th-play2-shell) #tarteaucitronAlertSmall, body:has(.th-game-shell) #tarteaucitronIcon, body:has(.th-game-shell) #tarteaucitronAlertSmall { display: none !important; } /* ── Icône flottante tarteaucitron masquée en mode connecté ──────────── Une fois authentifié, le compte dispose d'un accès permanent au panneau de consentement dans l'onglet RGPD du profil (Pages/Player/Profil.razor, bouton « Gérer mes préférences de cookies » → window.thConsent.openPanel()) : l'icône ronde bas-droite (#tarteaucitronIcon) devient redondante et reste affichée en permanence sur toutes les pages pour un visiteur non connecté, qui n'a que /cookies pour y accéder. `.th-connecte` est posée par Shared/MainLayout.razor sur le conteneur racine dès que l'état d'authentification est résolu (AuthenticationStateProvider). ── */ body:has(.th-connecte) #tarteaucitronIcon, body:has(.th-connecte) #tarteaucitronAlertSmall { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ Cartes d'ÉDITION (créateur) — les contrôles Leaflet des coins HAUT ne doivent jamais passer sous les pastilles flottantes de l'éditeur. Bug : sur l'éditeur de quête, la pastille « Vue parcours » (coin haut gauche) recouvrait le zoom +/- et la pastille « Étape N » / « Départ » (coin haut droit) recouvrait le sélecteur de calques (Plan / Satellite / Repères) — les deux contrôles devenaient inaccessibles au clic. Ces pastilles sont posées en position:absolute (inset 14px, z-index 500) PAR-DESSUS la carte, hors du contexte d'empilement de `.leaflet-container` (isolation:isolate ci-dessus) : elles gagnent donc toujours. Correctif : décaler les DEUX coins hauts de la carte sous la rangée de pastilles (pastille ≈ 33px + inset 14px ≈ 47px ; marge Leaflet 10px déjà comprise dans le total). Appliqué via la classe `.th-editor-map` posée par le composant de carte lui-même, donc valable pour tous ses usages (desktop étape 1 / étape 2, et carte plein écran mobile). ── */ .th-editor-map .leaflet-top.leaflet-left, .th-editor-map .leaflet-top.leaflet-right { margin-top: 48px; } /* ── Roue crantée « main dominante » de l'appareil photo joueur (MediaValidator) ── Même principe que la roue crantée du mode chasse (.th-chasse-handed*, plus bas dans ce fichier), mais classes DÉDIÉES plutôt qu'un partage direct : ce bouton vit dans un flux flex (barre de titre de la caméra), pas en position:absolute par-dessus une carte, et MediaValidator n'est pas propre au mode chasse (quêtes, traversées…). */ .th-cam-handed { position: relative; flex-shrink: 0; } .th-cam-handed-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; } .th-cam-handed-btn.is-open { background: var(--tz-teal-d); border-color: #fff; } /* Panneau ouvert SOUS le bouton et aligné sur son bord droit : il ne peut donc pas déborder de l'écran du côté opposé, quel que soit le côté choisi pour les réglages. */ .th-cam-handed-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 4; min-width: 178px; padding: 10px; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 14px; background: rgba(8, 20, 24, 0.92); box-shadow: 0 18px 40px -18px rgba(8, 20, 24, 0.8); display: flex; flex-direction: column; gap: 8px; } .th-cam-handed-title { font: 800 11px var(--font-sans); color: rgba(255, 255, 255, 0.75); } .th-cam-handed-seg { display: flex; border-radius: 999px; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.25); } .th-cam-handed-seg button { flex: 1; border: none; background: transparent; color: #fff; font: 800 12px var(--font-sans); padding: 7px 0; cursor: pointer; } .th-cam-handed-seg button.is-active { background: var(--tz-teal-d); } /* ── Note explicative du filigrane (Ghost Overlay) ── */ .th-mv-note { flex-shrink: 0; margin: 0 20px; padding: 9px 13px; border-radius: var(--r); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.82); font-size: 12px; font-weight: 600; line-height: 1.4; } /* La note est CLIQUABLE : elle rouvre la fenêtre découverte (GhostOverlayIntro.razor). Sans cette porte de retour, « OK, j'ai compris » était sans appel — un joueur qui retombe sur une étape à filigrane des mois plus tard n'avait plus aucun moyen de revoir l'explication. Le reste du bloc ci-dessus conserve l'aspect qu'avait la note du temps où c'était un

; on ne défait ici que les styles propres au