/* styles/theme/pinboard/mode-config.css — extrait de styles.css L4342-L4708. Mode-config pinboard. */ /* ══════════════════════════════════════════════════════════════════ MODE-CONFIG — habillage "mur de carrelage" plein écran. Quand on clique une plaque sur la landing, on zoom dans le mur : le mur de la plaque devient le mur de la pièce. La plaque vient se fixer en haut, les sous-menus (SESSION, SOUS-MODE, RÉSEAU, CTA) sont accrochés sur le carrelage comme autant de panneaux. ══════════════════════════════════════════════════════════════════ */ #view-mode-config.pinboard-theme{ /* Mêmes dimensions que la plaque → carrelage strictement identique * et, grâce à background-attachment:fixed des deux côtés, la grille * des deux murs est alignée au pixel près. */ --tile-w: 40px; --tile-h: 20px; --tile-white: #f7f7f4; /* carrelage quasi-blanc, juste un soupçon de chaud */ /* Joints plus marqués : effet V-groove avec grout sombre (ombre du * creux) + highlight clair juste en dessous (bord supérieur du * carreau suivant qui capte la lumière). Teinte grout warm-grey * réaliste (beige-grey qu'on voit dans les stations RATP). */ --tile-blue: #003f7a; --tile-blue-grout: rgba(245,241,230,.38); position:absolute; inset:0; /* hidden (pas auto) : la bande jaune + sol carrelés sont une LIMITE * visuelle infranchissable. Le layout intérieur est dimensionné avec * clamp() + min() pour ne jamais dépasser 100vh (voir bt-config.css). * Si un jour on a du contenu réellement trop grand, la règle à changer * est la taille du contenu, pas celle du conteneur. */ overflow:hidden; background-color:var(--tile-white); /* L'imagerie du mur (glaçure, nappes de lumière, grain, joints) est * centralisée dans platform-decor.css — même recette « FAÏENCE » * pour mode-config ET lobby, alignée au pixel via attachment:fixed. */ } html[data-theme="dark"] #view-mode-config.pinboard-theme{ --tile-white: #1f2228; } /* Mode-config passe AU-DESSUS (z:2), clippé au rect du bouton * cliqué au moment du clic ; puis son clip-path transitionne vers * inset(0) → le mur "s'élargit" et recouvre progressivement la * landing qui reste en-dessous. * Fade-in global désactivé : le clip-path est la seule transition. */ #view-mode-config.pinboard-theme.active{ animation:none; z-index:2; } /* La landing reste rendue EN-DESSOUS (z:1) pendant toute l'expansion * du mur. Sa map est donc visible tant que mode-config ne l'a pas * clippée. Retirée quand le reveal est terminé (transitionend). */ #view-landing.pinboard-theme.pb-underlay{ display:flex !important; flex-direction:column; align-items:stretch; animation:none; z-index:1; } /* Coquille : grid vertical en 4 rows (head / toggle / posters (1fr) / * network). La row `1fr` des posters consomme tout l'espace restant * → pas de vide, pas de débordement. padding-top 80 pour ancrer la * plaque clonée à y≈80. */ #view-mode-config.pinboard-theme .mc-shell{ position:relative; z-index:2; width:100%; height:100%; background:transparent; box-shadow:none; border:none; display:grid; grid-template-rows:auto auto 1fr auto; /* head | toggle | scène | erreur */ /* minmax(0,1fr) : la colonne ne peut PAS s'élargir au max-content * de la scène (le carrousel mobile déborderait du viewport). */ grid-template-columns:minmax(0, 1fr); justify-items:center; /* centre horizontalement */ align-items:stretch; /* les posters prennent 100% de la row 1fr */ padding:80px 32px 48px; gap:clamp(12px, 1.6vh, 24px); box-sizing:border-box; } /* Topbar absolue (n'entre pas dans le flow vertical) pour garder le * plate exactement à y=80 quelle que soit la topbar. */ #view-mode-config.pinboard-theme .mc-topbar{ position:absolute; top:16px; left:16px; right:16px; z-index:3; margin-bottom:0; } #view-mode-config.pinboard-theme .mc-head{ margin-top:0; } /* Le scanline CRT du thème sombre n'a rien à faire sur le mur */ #view-mode-config.pinboard-theme .mc-crt{ display:none; } /* Topbar : bouton retour façon étiquette émaillée, discrète. * (La règle d'absolute positioning est définie plus haut — on garde * ici juste le layout interne flex.) */ #view-mode-config.pinboard-theme .mc-topbar{ display:flex; align-items:center; justify-content:space-between; } #view-mode-config.pinboard-theme .mc-back{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:#1a1a1a; color:#f8f6f0; border:1.5px solid #3a3a3a; border-radius:3px; font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; letter-spacing:2px; font-size:12px; text-transform:uppercase; cursor:pointer; box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); transition:filter .15s ease, transform .15s ease; } #view-mode-config.pinboard-theme .mc-back:hover{ filter:brightness(1.15); transform:translateY(-1px); } #view-mode-config.pinboard-theme .mc-back-arrow{ color:#ff9a1f; } /* HEAD = plaque métro bleue centrée en haut. * Deux variantes : * - .mc-head (fallback texte) si on arrive sans snapshot, * - .mc-head-plate (avec clone .metro-plate dedans) si on est venu * d'un clic sur une plaque landing (cas normal pinboard). */ #view-mode-config.pinboard-theme .mc-head{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-top:6px; text-align:center; } #view-mode-config.pinboard-theme .mc-head:not(.mc-head-plate){ padding:18px 40px 16px; min-width:420px; max-width:720px; color:#fff; background-color:var(--tile-blue); /* Même mosaïque peinte générée que les plaques (.mp-plate) */ background-image:url('assets/tile-plate-blue.svg'); background-size:360px 180px; background-repeat:repeat; box-shadow: inset 0 0 0 3px var(--tile-white), inset 0 0 0 4px rgba(0,0,0,.35), inset 0 -4px 10px rgba(0,0,0,.38), inset 0 4px 10px rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.4); } /* Plaque clonée (celle du landing) posée au centre en haut. * On RETIRE totalement la bande de tuiles blanches de `.metro-plate` * (padding = 0 au lieu de 22px) — c'est elle qui créait le "fond * autour" visible en mode-config. Il ne reste que `.mp-plate` * (plaque bleue émaillée). La plaque est agrandie par rapport à la * landing : c'est le titre de l'écran, pas un bouton navigable. */ #view-mode-config.pinboard-theme .mc-head-plate{ padding:0; background:none; box-shadow:none; pointer-events:none; } #view-mode-config.pinboard-theme .mc-head-plate .metro-plate{ cursor:default; width:auto !important; padding:0 !important; /* <-- retire la bande carrelée autour */ gap:0 !important; background:none !important; background-image:none !important; box-shadow:none !important; } /* Flèche cliquable inutile ici (on est déjà dans le mode) */ #view-mode-config.pinboard-theme .mc-head-plate .mp-arrow-panel{ display:none !important; } /* Agrandissement de la plaque bleue elle-même : padding vertical + * min-width pour un format "panneau de quai" bien lisible. */ #view-mode-config.pinboard-theme .mc-head-plate .mp-plate{ padding:clamp(20px, 2.4vh, 42px) clamp(40px, 4vw, 80px) clamp(18px, 2vh, 34px) !important; min-height:clamp(96px, 10vh, 150px) !important; min-width:clamp(320px, 30vw, 560px); } #view-mode-config.pinboard-theme .mc-head-plate .mp-title{ font-size:clamp(40px, 3.4vw, 72px) !important; letter-spacing:clamp(2px, .25vw, 4.5px); } #view-mode-config.pinboard-theme .mc-head-plate .mp-sub{ font-size:clamp(13px, 1vw, 20px) !important; letter-spacing:clamp(2px, .18vw, 3px); margin-top:4px; } /* Typo peinte sur la mosaïque : joints en mortier blanc sali en * overlay au-dessus du titre (même recette que .mp-plate::after * dans plaques.css — crasse organique masquée sur les lignes). */ #view-mode-config.pinboard-theme .mc-head:not(.mc-head-plate)::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background-color:rgba(213,206,190,.9); background-image:url("data:image/svg+xml;utf8,"); background-size:320px 320px; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 30px); mask-image: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 30px); } /* Écrans larges (2K+) : SEULE la plaque du mode-config grandit avec * le viewport (clamps 10vh/30vw) → c'est la seule dont le pas de * carreau doit suivre (30 → 40px), faïence scalée (SVG vectoriel) et * grille au même pas. Les plaques landing/lobby (taille fixe) gardent * leur pas de 30px — cf. note dans plaques.css. */ @media (min-width: 2200px){ #view-mode-config.pinboard-theme .mc-head-plate .mp-plate, #view-mode-config.pinboard-theme .mc-head:not(.mc-head-plate){ background-size:480px 240px; } #view-mode-config.pinboard-theme .mc-head-plate .mp-plate::after, #view-mode-config.pinboard-theme .mc-head:not(.mc-head-plate)::after{ -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 1.3px, transparent 1.3px 40px), repeating-linear-gradient(90deg, #000 0 1.3px, transparent 1.3px 40px); mask-image: repeating-linear-gradient(0deg, #000 0 1.3px, transparent 1.3px 40px), repeating-linear-gradient(90deg, #000 0 1.3px, transparent 1.3px 40px); } } /* Variante fallback (pas venu d'un clic plaque landing) : texte plat */ #view-mode-config.pinboard-theme .mc-title{ font-family:'Barlow Semi Condensed','Barlow','Archivo',sans-serif; font-weight:800; font-size:52px; letter-spacing:3px; line-height:1; color:#f8f6f0; text-transform:uppercase; text-shadow:0 2px 0 rgba(0,0,0,.3); margin:0; } /* Le ::before "data-text" style CRT ne doit pas apparaître ici */ #view-mode-config.pinboard-theme .mc-title::before, #view-mode-config.pinboard-theme .mc-title::after{ display:none; } #view-mode-config.pinboard-theme .mc-tag{ font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:500; font-size:13px; letter-spacing:1.6px; color:rgba(245,241,230,.82); text-transform:uppercase; margin:0; } /* BODY : pile verticale de sections, chaque section = panneau posé sur le mur */ #view-mode-config.pinboard-theme .mc-body{ width:100%; max-width:720px; display:flex; flex-direction:column; gap:16px; margin-top:8px; } #view-mode-config.pinboard-theme .mc-section{ background:rgba(255,255,255,.82); border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:14px 16px; box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.7) inset; } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-section{ background:rgba(26,28,33,.88); border-color:rgba(255,255,255,.08); box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05) inset; } #view-mode-config.pinboard-theme .mc-section-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px dashed rgba(0,0,0,.15); } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-section-head{ border-bottom-color:rgba(255,255,255,.12); } #view-mode-config.pinboard-theme .mc-section-num{ font-family:'Share Tech Mono','JetBrains Mono',monospace; font-size:13px; color:#ff9a1f; padding:1px 6px; background:#0a0a0a; border-radius:2px; letter-spacing:1px; } #view-mode-config.pinboard-theme .mc-section-lbl{ font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--tile-blue); } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-section-lbl{ color:#8ab4ff; } /* PILLS : boutons de choix façon étiquette, sélectionné = plaque bleue */ #view-mode-config.pinboard-theme .mc-pills{ display:flex; flex-wrap:wrap; gap:10px; } #view-mode-config.pinboard-theme .mc-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; color:#222; border:2px solid rgba(0,0,0,.18); border-radius:4px; font-family:'Archivo Narrow','Archivo',sans-serif; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; box-shadow:0 2px 0 rgba(0,0,0,.15); } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-pill{ background:#2a2d33; color:#e8e1cf; border-color:rgba(255,255,255,.12); box-shadow:0 2px 0 rgba(0,0,0,.5); } #view-mode-config.pinboard-theme .mc-pill:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.2); } #view-mode-config.pinboard-theme .mc-pill.active{ background:var(--tile-blue); color:#fff; border-color:#fff; box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,63,122,.35), inset 0 0 0 2px rgba(0,0,0,.25); } #view-mode-config.pinboard-theme .mc-pill.disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; } #view-mode-config.pinboard-theme .mc-pill-icon{ font-size:18px; line-height:1; } #view-mode-config.pinboard-theme .mc-pill-body{ display:flex; flex-direction:column; gap:2px; text-align:left; } #view-mode-config.pinboard-theme .mc-pill-label{ font-weight:700; font-size:14px; letter-spacing:1.2px; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; } #view-mode-config.pinboard-theme .mc-pill-sub{ font-weight:500; font-size:11px; letter-spacing:.4px; opacity:.72; } #view-mode-config.pinboard-theme .mc-pill-chip{ display:inline-block; padding:1px 5px; font-size:9px; font-weight:800; letter-spacing:1px; background:#e53935; color:#fff; border-radius:2px; } #view-mode-config.pinboard-theme .mc-info-line{ font-family:'Archivo Narrow','Archivo',sans-serif; font-size:12px; letter-spacing:.6px; color:rgba(0,0,0,.65); } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-info-line{ color:rgba(245,241,230,.7); } /* CTA = grosse plaque de direction, identique aux plaques de la landing */ #view-mode-config.pinboard-theme .mc-cta-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; } #view-mode-config.pinboard-theme .mc-cta{ position:relative; display:inline-flex; align-items:center; gap:18px; padding:14px 24px 14px 28px; background-color:var(--tile-blue); background-image: repeating-linear-gradient(0deg, var(--tile-blue-grout) 0 1px, rgba(255,255,255,.1) 1px 2px, transparent 2px var(--tile-h)), repeating-linear-gradient(90deg, var(--tile-blue-grout) 0 1px, transparent 1px var(--tile-w)); color:#f8f6f0; border:none; border-radius:0; font-family:'Barlow Semi Condensed','Barlow',sans-serif; font-weight:800; font-size:22px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; box-shadow: inset 0 0 0 3px var(--tile-white), inset 0 0 0 4px rgba(0,0,0,.35), inset 0 -4px 10px rgba(0,0,0,.38), inset 0 4px 10px rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.4); transition:transform .15s ease, filter .15s ease; } #view-mode-config.pinboard-theme .mc-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); } #view-mode-config.pinboard-theme .mc-cta:active{ transform:translateY(0); } #view-mode-config.pinboard-theme .mc-cta-glow{ display:none; } #view-mode-config.pinboard-theme .mc-cta-label{ position:relative; z-index:1; } #view-mode-config.pinboard-theme .mc-cta-arrow{ position:relative; z-index:1; color:#ff9a1f; font-size:18px; text-shadow:0 0 6px rgba(255,154,31,.6); } #view-mode-config.pinboard-theme .mc-cta-hint{ font-family:'Archivo Narrow','Archivo',sans-serif; font-size:11px; letter-spacing:1.2px; color:rgba(0,0,0,.55); text-transform:uppercase; } html[data-theme="dark"] #view-mode-config.pinboard-theme .mc-cta-hint{ color:rgba(245,241,230,.55); } /* Responsive mode-config sur pinboard */ @media (max-width: 720px){ /* :not(.mc-head-plate) OBLIGATOIRE : le min-width:420px desktop est posé * sur ce sélecteur (spéc. 1,3,0). Un simple `.mc-head{min-width:0}` (1,2,0) * ne l'emporte pas → la plaque fallback restait à 420px et débordait dès * ~412px de large. On clampe aussi la max-width pour tenir à 320px. */ #view-mode-config.pinboard-theme .mc-head:not(.mc-head-plate){ min-width:0; max-width:calc(100vw - 32px); padding:14px 18px 12px; } #view-mode-config.pinboard-theme .mc-title{ font-size:28px; letter-spacing:2px; } #view-mode-config.pinboard-theme .mc-cta{ font-size:18px; padding:12px 18px; } /* Shell compacté : la topbar est absolue, on réduit l'ancrage haut * et les marges latérales ; safe-area en bas (notch/home bar). */ #view-mode-config.pinboard-theme .mc-shell{ /* padding-bottom : géré par platform-decor.css (réserve du quai) */ padding:56px 12px 16px; gap:clamp(10px, 1.4vh, 18px); } /* La plaque émaillée ne doit jamais déborder d'un écran 320px */ #view-mode-config.pinboard-theme .mc-head-plate .mp-plate{ min-width:0; max-width:calc(100vw - 48px); padding:clamp(12px, 1.8vh, 22px) clamp(20px, 6vw, 40px) clamp(10px, 1.5vh, 18px) !important; min-height:0 !important; } #view-mode-config.pinboard-theme .mc-head-plate .mp-title{ font-size:clamp(26px, 8.5vw, 40px) !important; } } /* Écrans courts (SE, paysage téléphone) : impossible de tout caser * sous la bande jaune → le shell devient scrollable, les posters * gardent une hauteur garantie, le sol de quai est masqué * (platform-decor.css) et sa réserve de padding annulée. * !important : neutralise la réserve quai posée en !important par * platform-decor.css. */ @media (max-width: 720px) and (max-height: 640px){ #view-mode-config.pinboard-theme .mc-shell{ overflow-y:auto; grid-template-rows:auto auto auto auto; align-items:start; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important; } /* Hauteur EXPLICITE (pas min-height) : les .bt-poster sont en * height:100% — un pourcentage ne se résout pas contre min-height. */ #view-mode-config.pinboard-theme .bt-posters{ height:220px; } }