/* --- 2-bit / 2 couleurs (inversées) + variables d'UI --- */ :root { /* Couleurs brutes de la charte */ --bg: #e8e8e8; /* clair intérieur d'écran */ /* Noir d’écran / bordure de moniteur – un peu plus profond (test #1a1c24) */ --bg-monitor: #1a1c24; --accent: #6b00dd; /* violet principal */ --rose-flashy: #309c; /* ROSE FLASHY de la charte (variante plus douce ; TODO: harmoniser avec #ff309c si besoin) */ /* Couleur des scanlines CRT (utilisée sur l’overlay animé) Valeur par défaut = plus discrète (mode clair) */ --scanline-color: rgba(107, 0, 221, 0.18); /* Variables de mise en forme éditoriale (cartes) */ --card-radius: 6px; --card-radius-right: 18px; /* angle sup. droit légèrement plus arrondi */ --card-padding-inline: 0.75rem; --card-padding-bottom: 0.5rem; /* Couleur du texte quand le fond est l’accent (boutons hover, titres surlignés) Par défaut (mode clair) : texte clair sur fond violet */ --on-accent: #e8e8e8; /* Couleurs sémantiques d'UI (pour changer les fonds sans tout toucher). Valeurs par défaut = thème sombre actuel. Les thèmes viendront les surcharger. */ --page-bg: var(--bg-monitor); /* fond de la page */ --frame-bg: var(--bg-monitor); /* fond intérieur de la frame (full noir, test) */ --titlebar-bg: var(--bg-monitor);/* barre du haut type fenêtre */ --panel-bg: var(--bg-monitor); /* panneaux de contenu (info + boutons) */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* Hauteur calée sur la taille de la fenêtre : pas de scroll de page, uniquement du scroll interne dans la zone d'infos de l'écran. */ height: 100%; overflow-x: hidden; /* NOTE: overflow: hidden retiré intentionnellement — il empêchait les modales overlay (Netlify Identity) de s'afficher. */ font-family: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fond global : utiliser --page-bg pour changer partout en une fois */ background: var(--page-bg); color: var(--accent); } html { /* Position relative pour pouvoir tester un overlay global (scanlines) sur tout le document. Pour revenir au comportement d’avant, supprimer simplement cette ligne. */ position: relative; } body { display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } /* --- Thèmes clair / sombre via classes sur la racine (:root / ) --- */ /* Thème clair : réutilise le fond clair d’origine pour l’ensemble de l’UI */ :root.theme-light { /* Fond de page plus clair, teinte rose pastel + dégradé métallique (voir body ci‑dessous) */ --page-bg: #ffcce8; /* un peu plus clair que #ffb7df, dérivé de #ff309c */ --frame-bg: #ffffff; --titlebar-bg: #ffffff; --panel-bg: #ffffff; } /* Thème clair : dégradé “métal vaporwave” sur le fond de page (body) */ html.theme-light body { background: /* Reflets métalliques diagonaux */ linear-gradient( 135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.0) 22%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.0) 60%, rgba(255, 255, 255, 0.7) 78%, rgba(255, 255, 255, 0.0) 100% ), /* Dégradé vaporwave de base */ linear-gradient( 160deg, #ffe6ff 0%, #ffc6ff 18%, #ff8ad4 36%, #ff309c 52%, #b5ffff 74%, #8fd3ff 88%, #f5fbff 100% ); background-attachment: fixed; background-color: #ffcce8; background-blend-mode: screen; } /* Thème sombre explicite (identique à l’état actuel) */ :root.theme-dark { --page-bg: var(--bg-monitor); --frame-bg: var(--bg-monitor); --titlebar-bg: var(--bg-monitor); --panel-bg: var(--bg-monitor); /* En sombre on renforce les scanlines pour qu’elles soient bien visibles */ --scanline-color: rgba(107, 0, 221, 0.45); /* En sombre, le texte sur fond accent (surlignage) repasse en foncé pour garder le contraste */ --on-accent: #000000; } /* Thème sombre : fond vaporwave/digital très sombre, sans être plus noir que #1a1c24 */ html.theme-dark body { background: linear-gradient( 150deg, #1a1c24 0%, #212335 30%, #261d3c 55%, #203447 80%, #1a1c24 100% ); background-attachment: fixed; background-color: #1a1c24; } /* --- Header avec logo --- */ .site-header { width: 100%; padding: 1rem 1.5rem; text-align: center; position: relative; /* Perspective légère pour l'inclinaison du logo (style "retour vers le futur") */ perspective: 900px; } .site-logo-img { display: block; margin: 0 auto; max-width: min(400px, 90vw); height: auto; } /* Lien Instagram dans le header */ .social-link--instagram { position: absolute; top: 0.9rem; left: 1.5rem; width: 22px; height: 22px; border-radius: 6px; /* Style SSI : contour violet, fond transparent (s’adapte clair/sombre) */ background: transparent; border: 1px solid rgba(107, 0, 221, 0.6); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); cursor: pointer; } .social-link--instagram:hover { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(107, 0, 221, 0.7); } .social-link--instagram::before { content: ""; width: 60%; height: 60%; border: 2px solid var(--accent); border-radius: 6px; box-sizing: border-box; } .social-link--instagram::after { content: ""; position: absolute; top: 18%; right: 16%; width: 2px; height: 2px; border-radius: 50%; background: rgba(107, 0, 221, 0.8); } /* Version plus petite sur les écrans étroits */ @media (max-width: 600px) { .social-link--instagram { top: 0.8rem; left: 1rem; width: 18px; height: 18px; border-radius: 5px; } } /* Accessibilité : texte invisible visuellement mais présent pour les lecteurs d'écran */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Petit bouton de bascule de thème dans le header */ .theme-toggle { position: absolute; top: 1rem; right: 1.5rem; width: 18px; height: 18px; padding: 0; border-radius: 3px; border: none; background: transparent; color: rgba(107, 0, 221, 0.85); font-family: 'IBM Plex Sans', 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle:hover { /* Petit cadre façon icône système au survol */ border: 1px solid rgba(107, 0, 221, 0.6); background: rgba(107, 0, 221, 0.08); } .site-logo { margin: 0 auto; display: inline-block; text-align: left; font-family: 'Bowlby One SC', sans-serif; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; position: relative; z-index: 2; /* Effet 3D d'origine : légère inclinaison + empilement d'ombres violettes, avec un petit effet "plaque" penchée vers la droite */ transform-origin: left center; transform: skewX(-6deg) rotateY(-10deg); text-shadow: 0px 0px 0 #6b00dd, 1px 1px 0 #5d00c0, 2px 2px 0 #4a009d, 3px 3px 0 #360079, /* Dernière ombre : noir plein comme à l’origine */ 4px 4px 0 #000000; } /* S de salut et I de INTERNET alignés à gauche */ .logo-salut, .logo-internet { display: block; } .logo-salut { text-transform: lowercase; font-size: 0.7em; letter-spacing: 0; } .logo-internet { text-transform: uppercase; letter-spacing: 0; margin-top: -0.15em; } /* --- Footer très discret avec contact --- */ .site-footer { width: 100%; padding: 0.25rem 1.5rem 0.5rem; text-align: center; font-size: 0.65rem; } .contact-hint { position: relative; display: inline-block; color: rgba(107, 0, 221, 0.45); font-family: 'IBM Plex Sans', 'IBM Plex Mono', 'Courier New', monospace; cursor: default; opacity: 0.7; transform: translateY(2px); transition: color 140ms ease-out, opacity 140ms ease-out, transform 140ms ease-out; } .contact-hint::after { content: "contact@salutsalutinternet.com"; position: absolute; bottom: 130%; right: 0; padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid var(--accent); background: var(--frame-bg); color: var(--accent); font-size: 0.65rem; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 120ms ease-out, transform 120ms ease-out; } .contact-hint:hover::after { opacity: 1; transform: translateY(0); } .contact-hint:hover { color: rgba(107, 0, 221, 0.95); opacity: 1; transform: translateY(0); text-decoration: underline; } /* --- Popup événement (affiche prochaine soirée) --- */ .event-popup { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .event-popup--hidden { display: none; } .event-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); } .event-popup-window { position: relative; max-width: min(90vw, 520px); border: 2px solid var(--accent); background: var(--frame-bg); padding: 0.4rem; box-shadow: 0 0 18px rgba(0, 0, 0, 0.85); z-index: 1; opacity: 0; transform: scale(0.86); } .event-popup-image { display: block; width: 100%; height: auto; } .event-popup-close { position: absolute; top: 0.15rem; right: 0.25rem; border-radius: 2px; border: 1px solid var(--accent); background: var(--page-bg); color: var(--accent); font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.7rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; } .event-popup-close:hover { background: var(--accent); color: var(--on-accent); } @media (max-width: 600px) { .event-popup-window { max-width: 92vw; padding: 0.3rem; } .event-popup-close { font-size: 0.6rem; top: 0.1rem; right: 0.2rem; } } /* Animation d'apparition : zoom + fade façon fenêtre pop-up */ .event-popup:not(.event-popup--hidden) .event-popup-window { animation: event-popup-zoom-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes event-popup-zoom-in { 0% { opacity: 0; transform: scale(0.86); } 65% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } /* Ancien conteneur WebGL laissé neutre au cas où */ #logo-3d-root { display: none; } /* --- Cadre rétro — taille fixe (70% viewport) --- */ .screen-frame { width: 70vw; height: 70vh; margin: 1rem 0; max-width: 90vw; max-height: 85vh; /* Cadre un peu plus fin + ombre très douce et proche pour le relief */ border: 3px solid var(--accent); border-radius: 8px; /* Intérieur de l’écran : fond clair inchangé */ background: var(--frame-bg); box-shadow: inset 0 0 0 1px var(--bg), 2px 2px 0 rgba(107, 0, 221, 0.18); display: flex; flex-direction: column; overflow: hidden; position: relative; /* Effet 1 (wobble) désactivé. Pour le réactiver, remettre l'animation frame-wobble ci-dessous. */ /* animation: frame-wobble 7s ease-in-out infinite alternate; */ } /* Écrans moyens : on cale la hauteur sur le viewport pour garder la fenêtre entière visible avec un léger liseré en bas. */ @media (max-width: 1024px) { .screen-frame { height: calc(100vh - 7rem); max-height: calc(100vh - 7rem); margin: 0.75rem auto 1rem; } } /* Légère ondulation / texture d'écran (subtile) – effets CRT. TEST : on applique temporairement les scanlines à la fois sur l'écran (.screen-frame::before) ET sur tout le document (html::before). Pour revenir au comportement d’origine (scanlines uniquement sur l'écran), il suffira de retirer "html::before" de ce sélecteur et la règle html::before plus bas. */ .screen-frame::before, html::before { /* Effet 3 (flash RGB) – désactivé pour l’instant. À combiner plus tard avec un autre effet (scanlines ou jitter) en remettant le bloc d’overlay + animation frame-rgb-flash. */ /* content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: normal; background: linear-gradient(90deg, rgba(255, 0, 128, 0.7), rgba(0, 255, 255, 0.7) ); opacity: 0; animation: frame-rgb-flash 12s ease-in-out infinite; */ /* Effet 4 : scanlines animées très fines (CRT "on top"). Actuellement SEUL effet actif pour l'écran. */ content: ""; position: absolute; /* Overlay placé à l'intérieur du cadre : on laisse la bordure au-dessus de l'effet CRT */ inset: 3px; pointer-events: none; background: repeating-linear-gradient( to bottom, /* Lignes fines discrètes (violet léger, visible sur fond sombre) */ var(--scanline-color) 0, var(--scanline-color) 1px, transparent 1px, transparent 4px ); mix-blend-mode: multiply; opacity: 0.4; /* Vitesse augmentée : déplacement plus rapide des scanlines */ animation: scanlines-shift 0.5s linear infinite; /* Placé au-dessus du contenu (texte, images, boutons) */ z-index: 2; } /* TEST global scanlines : on étend l’overlay de scanlines à tout le document (html). Pour revenir en arrière, supprimer ce bloc. */ html::before { inset: 0; } /* Barre titre — bandeau défilant (credo) en boucle infinie */ .screen-titlebar { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--accent); font-size: clamp(0.7rem, 1.5vw, 0.9rem); overflow: hidden; /* Fond de la barre façon "noir d'écran" (changer via --titlebar-bg) */ background: var(--titlebar-bg); display: flex; align-items: center; gap: 0.75rem; } .window-controls { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; /* Bloc plein sous les trois cercles, pour masquer le texte défilant. Couleur alignée sur la barre de titre (titlebar-bg). */ background: var(--titlebar-bg); padding: 0.15rem 0.6rem 0.15rem 0.45rem; border-radius: 999px; } .window-btn { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid var(--accent); /* Fond transparent pour laisser apparaître le noir de la titlebar */ background: transparent; position: relative; } .window-btn::before { content: ''; position: absolute; inset: 0.1rem; border-radius: 50%; } .window-btn--close::before { border: 1px solid var(--accent); } .window-btn--min::before { border-bottom: 1px solid var(--accent); } .window-btn--max::before { border: 1px solid var(--accent); border-top: none; border-left: none; } .ticker-viewport { flex: 1; overflow: hidden; /* Trait vertical à la jonction avec les boutons (là où commence le texte) */ border-left: 1px solid var(--accent); } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 25s linear infinite; } .ticker-text { flex-shrink: 0; white-space: nowrap; padding-right: 3rem; } /* Boucle infinie : 2 copies identiques, on scrolle -50% pour revenir au même visuel */ @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Animations CRT disponibles mais NON utilisées actuellement sur ::before. À rattacher à .screen-frame::before si besoin plus tard. */ @keyframes screen-wobble { 0% { transform: translate3d(0, 0, 0) skewY(0.25deg) scaleX(1.01); } 50% { transform: translate3d(0, -1px, 0) skewY(-0.25deg) scaleX(1.015); } 100% { transform: translate3d(0, 0, 0) skewY(0.15deg) scaleX(1.005); } } /* Variation très douce de luminosité de l'écran (non utilisée actuellement) */ @keyframes screen-flicker { 0% { opacity: 0.55; } 25% { opacity: 0.62; } 50% { opacity: 0.58; } 75% { opacity: 0.64; } 100% { opacity: 0.6; } } /* Très léger décalage horizontal du motif de lignes (glitch très soft, non utilisé) */ @keyframes screen-shift { 0% { background-position-x: 0; } 25% { background-position-x: 0.5px; } 50% { background-position-x: 1px; } 75% { background-position-x: -0.5px; } 100% { background-position-x: 0; } } /* Effet 1 : léger wobble appliqué à tout le cadre (sans toucher au contenu) pour un look "moniteur un peu instable" mais très discret. */ @keyframes frame-wobble { 0% { transform: translate3d(-1px, 0, 0) rotateZ(-0.6deg); } 50% { transform: translate3d(1px, -2px, 0) rotateZ(0.6deg); } 100% { transform: translate3d(-1px, 0, 0) rotateZ(-0.4deg); } } /* Effet 2 : micro "jitter" horizontal de l'overlay, sans bouger le contenu */ @keyframes frame-jitter { 0% { transform: translateX(0); } 50% { transform: translateX(1px); } 100% { transform: translateX(-1px); } } /* Effet 3 : flash RGB ponctuel très léger (chromatic aberration) */ @keyframes frame-rgb-flash { 0%, 90% { opacity: 0; transform: translateX(0); } 92% { opacity: 0.18; transform: translateX(-1px); } 96% { opacity: 0.22; transform: translateX(1px); } 100% { opacity: 0; transform: translateX(0); } } /* Effet 4 : déplacement vertical très léger des scanlines */ @keyframes scanlines-shift { /* Défilement continu du bas vers le haut */ 0% { background-position-y: 0; } 100% { background-position-y: -4px; } } /* Contenu partagé en 2 zones */ .screen-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* Zone infos — scroll interne si contenu dépasse */ .screen-info { flex: 1; min-height: 0; padding: 1rem; overflow-y: auto; overflow-x: hidden; border-right: 2px solid var(--accent); /* Taille par défaut plus lisible sur écrans moyens/grands */ font-size: clamp(0.9rem, 1.3vw, 1.1rem); line-height: 1.6; min-height: 0; /* Fond du panneau de contenu principal (changer via --panel-bg) */ background: var(--panel-bg); } .screen-info::-webkit-scrollbar { width: 8px; } .screen-info::-webkit-scrollbar-track { /* Utilise le même fond que le panneau pour suivre le thème sombre/clair */ background: var(--panel-bg); } .screen-info::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } /* Bloc d’info dans l’historique */ .screen-info-block { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--accent); } .screen-info-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .screen-info-block h2 { margin: 0 0 0.75rem 0; /* Titre de "chapitre" pour chaque bloc de contenu (Prog, Flashback, Qui on est) */ font-size: 1.2em; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; display: inline-block; /* Petit effet bannière 2000s / skyblog */ transform: skewX(-6deg); text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(0, 0, 0, 0.8); } /* Hooks pour personnaliser chaque type de bloc si besoin. NOTE: actuellement vides ; si on ne les utilise pas, on pourra les supprimer pour alléger le CSS. */ .screen-info-block--prog {} .screen-info-block--flashback {} .screen-info-block--qui-on-est {} .screen-info-block p { white-space: pre-line; } .news-item-title { /* Titre d'événement en bandeau façon "skyblog" */ display: block; /* pleine largeur de la carte événement */ /* Bandeau légèrement plus clair que le mauve principal, avec un petit effet de relief type barre de fenêtre. */ background: rgba(107, 0, 221, 0.85); color: var(--on-accent); padding: 0.3em 0.85em; font-weight: 700; border-top: 1px solid var(--rose-flashy); border-bottom: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); text-shadow: 0 0 3px rgba(255, 255, 255, 0.55); position: relative; /* Forme "galbée" côté droit : bandeau pleine largeur avec bord gauche droit et bord droit arrondi. */ border-radius: 0 999px 999px 0; } /* Variante du bandeau de titre en mode sombre : on garde la vibe, mais avec plus de contraste pour la lecture. */ :root.theme-dark .news-item-title { /* Dégradé mauve-only, du plus clair au plus sombre de gauche à droite */ background: linear-gradient( 90deg, #b28cff 0%, /* mauve très clair à gauche */ #6b00dd 50%, /* ULTRA VIOLET au centre */ #23004f 100% /* mauve plus sombre à droite */ ); /* Texte noir comme demandé, avec contour ROSE FLASHY bien visible autour des lettres */ color: #050509; border-top-color: #309c; border-bottom-color: rgba(0, 0, 0, 0.85); /* Contour + halo ROSE FLASHY pur autour des lettres en sombre */ -webkit-text-stroke: 0.7px #309c; /* ROSE FLASHY */ text-shadow: 0 0 3px #309c, 0 0 7px #309c, 0 0 11px #309c, 0 0 3px rgba(0, 0, 0, 1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.9); } .news-item { margin-bottom: 1rem; } .news-item-event, .screen-info-block--qui-on-est .news-item { /* Carte encadrée partagée par tous les blocs d'info de type "événement" (Prog, Flashback) ET par les cartes de "Qui on est". */ border: 1px solid var(--accent); border-radius: var(--card-radius) var(--card-radius-right) var(--card-radius) var(--card-radius); overflow: hidden; background: var(--frame-bg); position: relative; } .news-item-event .news-item-meta { display: block; margin: 0.35em 0 0.5em 0; font-size: 0.9em; line-height: 1.5; color: var(--accent); /* Infos secondaires (dates / lieux) : moins prioritaires que le titre + corps */ font-style: italic; text-decoration: underline; padding: 0.5rem 0.75rem 0; } .news-item-event .news-item-content, .screen-info-block--qui-on-est .news-item .news-item-content { display: block; margin-top: 0.25em; padding: 0 var(--card-padding-inline) var(--card-padding-bottom); } .news-item:last-child { margin-bottom: 0; } .news-item-media, .welcome-media { margin-top: 0.75rem; } .news-item-event .news-item-media, .screen-info-block--qui-on-est .news-item .news-item-media { padding: 0 var(--card-padding-inline) 0.75rem; } /* Images et GIFs dans les blocs */ .news-item-media img, .welcome-media img { max-width: min(280px, 85%); height: auto; display: block; border: 2px solid var(--accent); border-radius: 4px; } /* Effet “déroulement” horizontal de gauche à droite pour les médias */ .media-reveal { overflow: hidden; } .media-reveal img { /* effet “scan” ligne par ligne façon écran Alien, de gauche à droite */ clip-path: inset(0 100% 0 0); animation: media-scan 1.3s steps(24, end) forwards; } @keyframes media-scan { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } .news-item-media a { color: var(--accent); text-decoration: underline; } .news-item-content { display: inline; margin: 0; white-space: pre-line; } /* Pour que le curseur GIF reste sur la même ligne que le texte des événements (et ne saute pas tout seul dessous). */ .news-item-meta { display: inline-block; } /* Petit curseur qui suit le texte pendant l’animation typewriter */ .typing-cursor { display: inline-block; width: 3.6em; height: 3.6em; margin-left: 0.3em; vertical-align: middle; /* Le CSS est dans css/, donc on remonte d'un dossier pour aller dans assets/ */ background-image: url("../assets/img/typing-cursor.gif"); background-size: contain; background-repeat: no-repeat; background-position: left center; background-color: transparent; } /* Zone interactive (boutons) */ .screen-controls { width: 25%; min-width: 100px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; /* Fond du panneau de boutons (changer via --panel-bg) */ background: var(--panel-bg); } .screen-controls button { /* Fond par défaut des boutons aligné sur le fond des panneaux (panel-bg) */ background: var(--panel-bg); color: var(--accent); border: 2px solid var(--accent); padding: 0.75rem 1rem; font-family: 'IBM Plex Sans', 'IBM Plex Mono', 'Courier New', monospace; /* Taille lisible par défaut sur moyens/grands écrans */ font-size: clamp(0.85rem, 1.3vw, 1.05rem); font-weight: 600; cursor: pointer; text-align: left; /* Petit effet 3D discret sur le texte */ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); transform-origin: center; transition: transform 150ms ease-out; } .screen-controls button:hover, .screen-controls button.active { background: var(--accent); /* Texte des boutons en surbrillance sur fond violet */ color: var(--on-accent); } .screen-controls button:disabled { cursor: not-allowed; opacity: 0.5; } /* Responsive — mobile : boutons en bas, horizontaux */ @media (max-width: 768px) { .site-header { padding: 1.4rem 0.8rem 0.6rem; } /* Barre de titre plus haute et texte plus grand sur petits écrans */ .screen-titlebar { padding: 0.6rem 0.8rem; font-size: clamp(0.85rem, 2.8vw, 1.05rem); } /* Icônes de fenêtre légèrement agrandies */ .window-btn { width: 0.9rem; height: 0.9rem; } .site-logo { font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1.05; } .screen-frame { width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem); /* Sur mobile, on fige la hauteur sur le viewport pour que la fenêtre ne change jamais de taille quand le contenu arrive. Le scroll reste interne à la zone d'infos. */ height: calc(100vh - 7.5rem); max-height: calc(100vh - 7.5rem); margin: 0.5rem auto 1rem; border-radius: 0; } .screen-body { flex-direction: column; } .screen-info { border-right: none; border-bottom: 2px solid var(--accent); /* Corps de texte plus grand et lisible sur petits écrans */ font-size: clamp(1rem, 4vw, 1.15rem); } .screen-controls { width: 100%; min-width: unset; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; } .screen-controls button { flex: 1; min-width: 80px; text-align: center; /* Boutons légèrement plus grands que le corps pour être très lisibles */ font-size: clamp(1rem, 4vw, 1.2rem); } } /* Très petits mobiles : logo encore plus lisible */ @media (max-width: 480px) { /* Encore un peu plus de présence pour la barre de titre sur très petits écrans */ .screen-titlebar { padding: 0.7rem 0.9rem; font-size: clamp(0.95rem, 3.4vw, 1.15rem); } .window-btn { width: 1rem; height: 1rem; } .site-logo { font-size: clamp(2.8rem, 11vw, 4.4rem); line-height: 1.05; } .logo-salut { letter-spacing: 0.04em; } .logo-internet { letter-spacing: 0.03em; } } /* Grands écrans : fenêtre plus compacte (effet écran cathodique centré) */ @media (min-width: 1200px) { .screen-frame { width: 55vw; max-width: 960px; height: 70vh; } } /* --- Stickers tombants (fun) : sous la couche glitch/scanlines, rebond au sol, clic = repart en haut --- */ .falling-sticker { position: fixed; z-index: 1; pointer-events: auto; cursor: pointer; max-width: 220px; max-height: 220px; width: auto; height: auto; object-fit: contain; /* Pas d’ombre/contour pour garder le rendu “détouré” */ }