/* ============================================================================ * atelier.css — L'UNIVERS « atelier de tirage », partagé par le hub Photo et * les 9 outils photo qu'il annonce. * * Chargé par toute page portant `data-atelier` sur son . Même principe * que CSS/arcade.css pour les Jeux : on entre dans l'atelier sur le hub, on * s'installe à l'établi sur la page d'outil. La rupture visuelle a lieu UNE * fois, en entrant. * * Le bouton de thème change de PIÈCE, et les deux pièces sont photographiquement * justes : thème clair = la table lumineuse, thème sombre = la chambre noire * (lampe inactinique ambre). * * OÙ S'ARRÊTE L'UNIVERS — et ce n'est pas un compromis, c'est la structure * réelle de ces pages : chacune a un ACCUEIL (héros, zone de dépôt, explication) * puis un PLAN DE TRAVAIL (`.xx-wrap.editing`, qui masque justement le héros). * L'atelier habille l'accueil. Le plan de travail reste neutre : on ne teinte * pas la surface sur laquelle l'utilisateur juge ses propres couleurs. * * ⚠ CONTRASTE : un tirage est du PAPIER BLANC dans les deux thèmes. Les jetons * thème-conscients y basculeraient en valeurs vives en chambre noire (vert * #37EFBA à 1,40:1 sur blanc) : on leur redonne leurs valeurs CLAIRES sur ces * surfaces. Miroir exact d'arcade.css, qui force les valeurs sombres sur sa * scène toujours noire. * ========================================================================== */ /* Titre de l'enseigne : la didone déjà auto-hébergée pour l'éditeur photo. */ @font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } body[data-atelier] { --pho-paper: #fdfdfb; /* le tirage */ --pho-paper-2: #f2f1ec; /* sa marge basse */ --pho-ink: #1b1f24; --pho-edge: rgba(24, 28, 34, 0.14); --pho-film: #14161a; /* la pellicule */ --pho-safe: #ff8f3c; /* lampe inactinique (chambre noire) */ --pho-caption: ui-monospace, 'SFMono-Regular', 'Courier New', monospace; } /* ---- 1. LA PIÈCE ---------------------------------------------------------- */ /* Table lumineuse : lumière neutre, franche, sans dégradé coloré. */ body.lg-on[data-atelier]:not(.dark-mode) { /* La table était presque aussi claire que les tirages : rien ne décollait. Elle descend d'un ton et se refroidit — le papier ressort. */ background: radial-gradient(ellipse 90% 55% at 50% 0%, #f6f8fa 0%, #e4e9ef 42%, #d5dbe4 100%); } /* Chambre noire : noir chaud, la seule lumière est la lampe ambre. */ body.lg-on[data-atelier].dark-mode { --lg-deep: #0a0908; background: radial-gradient(ellipse 70% 45% at 18% 0%, #2a1a10 0%, #120e0b 42%, #0a0908 100%); } /* L'aurora colorée n'a rien à faire dans un atelier : lumière neutre le jour, ambre la nuit. On l'éteint et la pièce prend le relais. */ body[data-atelier] .lg-aurora { display: none; } .pho-room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* La dalle de la table lumineuse : un quadrillage très pâle, comme le verre dépoli d'une visionneuse. Invisible en chambre noire. */ .pho-room-table { position: absolute; inset: 0; background-image: linear-gradient(rgba(24, 28, 34, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 28, 34, 0.045) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 25%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 25%, transparent 80%); } body[data-atelier].dark-mode .pho-room-table { opacity: 0; } /* La lampe inactinique : un cône ambre en haut à gauche. Rien en plein jour. */ .pho-room-safelight { position: absolute; top: -12%; left: -6%; width: 58%; height: 62%; background: radial-gradient(ellipse at 30% 20%, rgba(255, 143, 60, 0.3), transparent 68%); filter: blur(38px); opacity: 0; } body[data-atelier].dark-mode .pho-room-safelight { opacity: 1; } /* Une chute de pellicule suspendue au bord droit — le détail qui date la pièce. Uniquement en chambre noire : sur la table lumineuse, elle ne donnait qu'une diagonale pâle sans forme, un défaut d'affichage plutôt qu'un objet. */ .pho-room-strip { position: absolute; top: -8%; right: 5%; width: 66px; height: 118%; transform: rotate(4deg); background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 176, 102, 0.5) 6px 12px, transparent 12px 26px), linear-gradient(180deg, #2a2118, #1a1512); background-clip: content-box, border-box; border-left: 9px solid #241c16; border-right: 9px solid #241c16; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); opacity: 0; } body[data-atelier].dark-mode .pho-room-strip { opacity: 0.38; } @media (max-width: 900px) { .pho-room-strip { display: none; } } /* ⚠ SÉLECTEURS : par SUFFIXE de classe, jamais par fin d'ATTRIBUT. * `[class$="-drop"]` ne correspond qu'à un élément dont l'attribut class SE * TERMINE par « -drop » : dès que le code ajoute une seconde classe — et c'est * précisément ce que fait `.drag` pendant un glisser-déposer — la règle * décrochait, donc la zone de dépôt perdait son décor au moment exact où elle * doit réagir. On utilise donc `[class*="-drop"]:not([class*="-drop-"])` : * « contient », en excluant les sous-éléments -drop-icon / -drop-title / -drop-hint. */ /* ---- L'ÉTABLI : l'accueil des pages d'outil ------------------------------- * * Les 9 pages partagent le même gabarit sous des préfixes différents (.ic-, * .ac-, .pb-, .aa-, .fx-…), d'où les sélecteurs par motif de classe : c'est ce * qui évite d'écrire neuf fois les mêmes règles — et d'en oublier une. */ /* Le héros du site est une carte SOMBRE dans les deux thèmes. Sur la table lumineuse, c'était une dalle noire au milieu de l'atelier : il devient un grand tirage, comme les cartes du hub. */ body[data-atelier]:not(.dark-mode) [class*="-hero"]:not([class*="-hero-"]) { --text-color: var(--pho-ink); --accent-text: var(--brand-green-deep); --warn-text: #9a4708; --bad-text: #b03325; --info-text: #0a6b84; --special-text: #6b3fd4; background: var(--pho-paper) !important; border: 1px solid var(--pho-edge) !important; border-radius: 3px !important; box-shadow: 0 2px 4px rgba(20, 24, 30, 0.14), 0 14px 30px rgba(20, 24, 30, 0.16) !important; color: var(--pho-ink) !important; padding-bottom: 2.6rem !important; /* la marge basse du tirage */ } /* Angles nets dans les DEUX pièces : la forme appartient à l'atelier, pas à l'éclairage. La nuit, le héros reste sombre mais cesse d'être un galet. */ body[data-atelier] [class*="-hero"]:not([class*="-hero-"]) { border-radius: 3px !important; } body[data-atelier] [class*="-hero"]:not([class*="-hero-"]) h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; } body[data-atelier]:not(.dark-mode) [class*="-hero"]:not([class*="-hero-"]) p { color: var(--pho-ink); opacity: 0.82; } /* L'icône du héros devient le cliché du tirage. */ body[data-atelier]:not(.dark-mode) [class*="-hero-icon"] { border-radius: 2px !important; color: #47525e !important; background: linear-gradient(150deg, #e8ecef 0%, #d9dee3 46%, #c9d0d7 100%) !important; border: 1px solid rgba(20, 24, 30, 0.08) !important; box-shadow: none !important; } /* LA VISIONNEUSE — le parti pris de la chambre noire. * On ne regarde pas un tirage fini dans une chambre noire : on regarde ce qui * est ÉCLAIRÉ PAR EN DESSOUS. Le papier disparaît donc la nuit (les surfaces * reprennent le sombre du site, et donc les jetons de couleur du thème sombre, * sans aucune bascule à gérer), et la seule chose lumineuse de la page devient * l'image : une diapo montée sur cache, posée sur la boîte lumineuse. */ body[data-atelier].dark-mode [class*="-hero-icon"] { border-radius: 2px !important; /* un cache de diapo n'est pas arrondi */ color: #2c2822 !important; background: linear-gradient(180deg, #fdf8ec 0%, #f0e6d2 100%) !important; border: 3px solid #14161a !important; box-shadow: 0 0 26px rgba(255, 232, 190, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important; } /* LE MARGEUR — la zone de dépôt. * C'est l'objet central de ces pages : c'est par là que la photo entre. Elle * était un rectangle en pointillé vert, c'est-à-dire le composant standard de * n'importe quel site. Elle devient le plateau de l'agrandisseur : une surface * légèrement creusée, cadrée par quatre REPÈRES DE CADRAGE aux angles — le * signe le plus reconnaissable du tirage et de l'imprimerie. Au survol, la * lumière s'allume. */ body[data-atelier] [class*="-drop"]:not([class*="-drop-"]) { --rep-c: rgba(24, 28, 34, 0.42); /* la couleur des repères */ --rep-l: 26px; /* leur longueur */ --rep-e: 2px; /* leur épaisseur */ border: 1px solid var(--pho-edge) !important; border-radius: 3px !important; background: linear-gradient(var(--rep-c) 0 0) 6px 6px / var(--rep-l) var(--rep-e) no-repeat, linear-gradient(var(--rep-c) 0 0) 6px 6px / var(--rep-e) var(--rep-l) no-repeat, linear-gradient(var(--rep-c) 0 0) calc(100% - 6px) 6px / var(--rep-l) var(--rep-e) no-repeat, linear-gradient(var(--rep-c) 0 0) calc(100% - 6px) 6px / var(--rep-e) var(--rep-l) no-repeat, linear-gradient(var(--rep-c) 0 0) 6px calc(100% - 6px) / var(--rep-l) var(--rep-e) no-repeat, linear-gradient(var(--rep-c) 0 0) 6px calc(100% - 6px) / var(--rep-e) var(--rep-l) no-repeat, linear-gradient(var(--rep-c) 0 0) calc(100% - 6px) calc(100% - 6px) / var(--rep-l) var(--rep-e) no-repeat, linear-gradient(var(--rep-c) 0 0) calc(100% - 6px) calc(100% - 6px) / var(--rep-e) var(--rep-l) no-repeat, linear-gradient(180deg, rgba(20, 24, 30, 0.05), rgba(20, 24, 30, 0.02)) !important; box-shadow: inset 0 2px 10px rgba(20, 24, 30, 0.07); transition: box-shadow 0.2s ease, transform 0.15s ease; } body[data-atelier].dark-mode [class*="-drop"]:not([class*="-drop-"]) { --rep-c: rgba(255, 190, 130, 0.5); border-color: rgba(255, 176, 102, 0.18) !important; box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35); } /* La lumière s'allume : les repères passent au vert et le plateau s'éclaire. */ body[data-atelier] [class*="-drop"]:not([class*="-drop-"]):hover, body[data-atelier] [class*="-drop"]:not([class*="-drop-"]).drag { --rep-c: var(--accent-color); box-shadow: inset 0 0 0 1px rgba(55, 239, 186, 0.28), 0 0 26px rgba(55, 239, 186, 0.14); } body[data-atelier] [class*="-drop-title"] { font-weight: 700; letter-spacing: -0.005em; } body[data-atelier] [class*="-drop-hint"] { font-family: var(--pho-caption); font-size: 0.78rem; letter-spacing: 0.04em; } /* Les notes de labo : mentions de confidentialité, avertissements, renvois. Angles nets et filet fin, comme une étiquette collée au mur de l'atelier. */ body[data-atelier] [class*="-disclaimer"] { border-radius: 3px !important; border-left: 3px solid var(--pho-safe) !important; } body[data-atelier] [class*="-privacy"], body[data-atelier] [class*="-crosslink"] { font-family: var(--pho-caption); font-size: 0.78rem; letter-spacing: 0.03em; } /* La planche contact : la rangée des travaux enregistrés. */ body[data-atelier] [class*="-resume"] { border-radius: 3px; } body[data-atelier] [class*="-resume"] [class*="-panel-title"] { font-family: var(--pho-caption); font-size: 0.74rem; letter-spacing: 0.09em; } /* Les boutons de ce bloc seulement : ceux du plan de travail ne bougent pas. */ body[data-atelier] [class*="-resume"] [class*="-btn"] { border-radius: 3px; font-family: var(--pho-caption); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; } /* Le lien de retour, annoté comme une légende. */ body[data-atelier] [class*="-back"] a { font-family: var(--pho-caption); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }