/* Theme Name: Kim B Lucas — Le Viseur Theme URI: https://kimblucas.com/ Author: Yan Haltey Brands Description: Le portfolio de Kim B Lucas — une galerie plein écran conçue comme un viseur, et la boutique de tirages qui la prolonge. ⚠ FICHIER GÉNÉRÉ depuis sites/kimblucas/prototype/ : toute retouche faite directement sur le serveur est perdue à la génération suivante, et n'existe alors plus nulle part. Version: 0.9.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 Text Domain: kimb-native Tags: portfolio, photography, e-commerce, full-width-template, custom-colors, translation-ready License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ---- fonts.css, chemins reecrits depuis la racine du theme ---- */ /* Polices auto-hébergées — plus aucune requête vers Google au chargement. Sous-ensembles latin et latin-ext uniquement. Régénérer : voir README du prototype. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-400-latin-ext.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: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-400-latin.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; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-500-latin-ext.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: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-500-latin.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; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-600-latin-ext.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: 'Instrument Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(assets/fonts/InstrumentSans-600-latin.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; } @font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/LibreCaslonDisplay-400-latin-ext.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: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/LibreCaslonDisplay-400-latin.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; } @font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/SplineSansMono-400-latin-ext.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: 'Spline Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/SplineSansMono-400-latin.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; } @font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/SplineSansMono-500-latin-ext.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: 'Spline Sans Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/SplineSansMono-500-latin.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; } /* ---- viseur.css, repris tel quel ---- */ /* ============================================================ Le Viseur — prototype vanilla · Kim B Lucas · v6 HUD qui s'efface pour contempler · acquérir bas-centre · menu LCD (+ Instagram valorisé) · descriptions série + image (Info). ============================================================ */ :root { --noir:#050505; --surface:#171715; --surface-2:#1c1c1a; --line:#2a2a28; /* ⚠️ LA BORDURE D'UN CHAMP N'EST PAS UN FILET DE MISE EN PAGE — mesuré le 23.08.2026. `--line` (#2a2a28) sépare des blocs sur du noir ; à ce titre il n'a aucun seuil à tenir. Posé sur un champ de saisie, il devient la seule chose qui dit OÙ commence le champ, et il tombe alors sous le critère 1.4.11 : 3:1 minimum contre le fond adjacent. #2a2a28 sur #171715 (fond du champ) → 1,25:1 l'audit relève 1,63:1 #2a2a28 sur #050505 (fond de page) → 1,42:1 #6b6b67 sur #171715 → 3,35:1 ✓ #6b6b67 sur #050505 → 3,81:1 ✓ ⚠️ C'est un jeton SÉPARÉ, et non `--line` relevé : `--line` habille une trentaine de séparateurs dont l'éclaircir changerait le dessin de tout le site. Yan a déjà refusé deux fois qu'on touche à la palette. On ne relève que ce qui doit passer un seuil. */ --bord-champ:#6b6b67; --gris:#7a7a76; --gris-2:#a6a39d; --ambre:#e8c79a; --vert:#7cc08a; --rouge:#e4483b; --blanc:#f5f4f1; --ease:cubic-bezier(0.65,0.05,0,1); --focus-dur:0.9s; --hud-pad:clamp(0.9rem,2.2vw,1.75rem); /* Respiration entre le cadre de visée et ce qui s'écrit dedans. Horizontale plus généreuse que verticale : l'œil accepte un texte proche du bord haut ou bas, il supporte mal qu'il touche le bord latéral. Une seule paire de valeurs pour TOUS les éléments internes — sans ça, chacun dérive et le cadre perd son aplomb. */ --hud-in-x:clamp(1.1rem,2.2vw,2.1rem); --hud-in-y:clamp(0.7rem,1.3vw,1.25rem); --dock-w:384px; /* panneau latéral : colonne séries + pellicule. 308 px étaient trop étroits une fois la règle d'édition et les badges remontés dedans : le texte tombait à trois mots par ligne. */ --dock-lift:0px; /* hérité de la galerie en bas — vaut 0 depuis le passage en latéral */ --dock-shift:0px;/* décalage du cartel quand la galerie est ouverte */ --mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --serif:"Libre Caslon Display",Georgia,"Times New Roman",serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; } * { box-sizing:border-box; margin:0; padding:0; } html,body { background:var(--noir); color:var(--blanc); font-family:var(--sans); } body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } [hidden] { display:none !important; } /* ---------- Intro cinématique (flou → net, on tient ~5 s, sortie zoom + fondu ; JS pilote la sortie) ---------- */ /* Les styles de l'intro-portrait ont été retirés le 03.08.2026 avec son balisage : un jeu de règles qui ne s'applique à rien finit toujours par être recopié ailleurs par erreur. */ /* ---------- « Découvrir Kim » — récit à la demande (séquence de photos + lignes) ---------- */ .story { position:fixed; inset:0; z-index:100; background:#000; overflow:hidden; transition:opacity 0.9s var(--ease); } .story.is-leaving { opacity:0; } /* #113 — l'image s'affiche ENTIERE, jamais recadree par defaut. Le diaporama etait en `cover` : sur un ecran d'un ratio different du fichier, il rognait la photographie sans que personne l'ait demande. Le choix portrait/paysage selon l'orientation de la fenetre RESTE, et devient ce qu'il aurait toujours du etre — une optimisation du cadrage, pas un rattrapage de recadrage. Consequence assumee : l'introduction n'est plus plein cadre, elle peut porter des bandes. */ .story__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin:center; opacity:0; filter:blur(24px) saturate(.5) brightness(1.06); transform:scale(1.0); will-change:opacity,filter,transform; transition:opacity 0.9s var(--ease), filter 1.4s var(--ease), transform 7.5s linear; backface-visibility:hidden; } .story__img.show { opacity:1; filter:blur(0) saturate(1) brightness(1); transform:scale(1.08); } /* Ken Burns : une dérive lente, de direction différente à chaque vue (classe posée en JS). */ /* Amplitudes volontairement faibles : au-delà, la dérive saccade au lieu de glisser. translate3d force la composition GPU (le simple translate repassait par le CPU). */ .story__img.kb0.show { transform:translate3d(-0.7%,-0.5%,0) scale(1.055); } .story__img.kb1.show { transform:translate3d( 0.7%, 0.5%,0) scale(1.055); } .story__img.kb2.show { transform:translate3d( 0.5%,-0.7%,0) scale(1.06); } .story__img.kb3.show { transform:translate3d(-0.5%, 0.7%,0) scale(1.055); } .story__veil { position:absolute; inset:0; pointer-events:none; background:linear-gradient(transparent 42%, rgba(0,0,0,0.62)); } .story__line { position:absolute; left:0; right:0; bottom:clamp(4.5rem,13vh,7.5rem); margin:0 auto; max-width:24ch; padding:0 1.5rem; text-align:center; font-family:var(--serif); font-size:clamp(1.4rem,3.6vw,2.4rem); line-height:1.25; color:var(--blanc); opacity:0; transform:translateY(12px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); text-shadow:0 2px 30px rgba(0,0,0,0.65); } .story__line.show { opacity:1; transform:none; } /* white-space:pre-line — les phrases du diaporama portent leur propre coupure de ligne, un « \n » dans les données. Sans cette règle, textContent l'écrase et la phrase se recoupe où la largeur veut : « Je crée mon univers. J'explore, je ressens, je » puis « capture. ». La coupure est un choix de composition, elle appartient au texte, pas à la fenêtre. */ .story__line { white-space:pre-line; } .story__brand { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); letter-spacing:.32em; font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--blanc); opacity:0; transition:opacity 1s var(--ease); } .story__brand.show { opacity:.95; } .story__foot { position:absolute; left:0; right:0; bottom:clamp(1.2rem,3vw,2rem); z-index:2; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.2rem,3vw,2.4rem); } .story__dots { display:flex; gap:8px; } .story__dot { width:6px; height:6px; border-radius:50%; background:rgba(245,244,241,0.25); transition:background 0.4s var(--ease), transform 0.4s var(--ease); } .story__dot.on { background:var(--ambre); transform:scale(1.3); } .story__skip { font-family:var(--mono); font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gris-2); background:transparent; border:0; cursor:pointer; padding:0.5rem; } .story__skip:hover,.story__skip:focus-visible { color:var(--blanc); outline:none; } @media (prefers-reduced-motion: reduce) { .story__img { transition:opacity 0.4s ease; filter:none !important; transform:none !important; } } /* ---------- Viseur ---------- */ .viewfinder { position:relative; flex:1 1 auto; min-height:80vh; min-height:80dvh; overflow:hidden; background:var(--noir); } .stage { position:absolute; inset:0; overflow:hidden; } .stage__img { width:100%; height:100%; object-fit:cover; transform-origin:center; filter:saturate(1.02) contrast(1.02); transition:filter var(--focus-dur) var(--ease),transform 0.09s linear; will-change:filter,transform; } .viewfinder.is-focusing .stage__img { filter:blur(24px) saturate(0.25) brightness(1.12) contrast(0.96); transition:none; } .stage__vignette { position:absolute; inset:0; pointer-events:none; transition:opacity 0.8s var(--ease); background:linear-gradient(to bottom,rgba(0,0,0,0.42),transparent 20% 62%,rgba(0,0,0,0.62)), radial-gradient(130% 100% at 50% 40%,transparent 58%,rgba(0,0,0,0.4) 100%); } /* ---------- Chrome qui s'efface (contemplation) ---------- */ .hud__grid,.hud__corner,.reticle,.acquire,.ctl,.fitbtn, .cartel,.bottomdock,.swipehint,.zoomhud,.hud__top { transition:opacity 0.7s var(--ease), bottom 0.45s var(--ease); } .cartel { transition:left 0.45s var(--ease), transform 0.45s var(--ease); } .dial { transition:opacity 0.7s var(--ease); } body.dock-on { --dock-lift:0px; } /* galerie latérale : plus rien ne remonte */ /* Contemplation. Restent TOUJOURS lisibles : le bandeau haut (série · compteur) et le cartel (titre, lieu, EXIF). Tout le reste s'efface — y compris la molette de menu. Le réveil ne se fait QUE sur mouvement de souris ou tap : naviguer aux flèches, à la molette ou en cliquant l'image laisse l'interface effacée (voir wake() dans viseur.js). */ body.idle .hud__grid, body.idle .hud__corner, body.idle .reticle, body.idle .acquire, body.idle .ctl, body.idle .fitbtn, body.idle .dial, /* #126 — a l'inactivite, TOUS les textes du viseur s'effacent. Le mode contemplation existait mais ne touchait que les commandes : le cartel (titre, lieu, phrase d'auteur), la pellicule et la colonne des series restaient a l'ecran, c'est-a-dire exactement le texte qu'on voulait faire disparaitre. La photographie se retrouve seule. */ body.idle .cartel, body.idle .swipehint, body.idle .hud__top, body.idle .zoomhud { opacity:0; pointer-events:none; } /* `.hud__top` — le compteur et la signature — a rejoint cette liste le 23.08.2026, à la demande de Yan. Le commentaire ci-dessus disait « restent TOUJOURS lisibles : le bandeau haut et le cartel » ; le cartel en est sorti au ticket #126, le bandeau restait seul à contredire la règle. À l'inactivité, la photographie est maintenant réellement seule. */ /* `.bottomdock` N'EST PAS dans cette liste, et c'est la décision du 11.08 : « le panneau lui-même reste visible — le visiteur vient de l'ouvrir volontairement, et masquer ce que quelqu'un vient de demander à voir est un défaut, pas une fonction. » Il y figurait. Le comportement était juste quand même, mais par ACCIDENT : `body.dock-on .bottomdock { opacity:1 }` vit 300 lignes plus bas, à spécificité égale, et ne l'emportait que par l'ordre du fichier. Déplacer un bloc aurait fait disparaître le panneau à l'inactivité — précisément ce que le ticket interdit, et sans que rien ne relie la cause à l'effet. Fermé, `.bottomdock` est déjà à `opacity:0` par défaut : le retirer d'ici ne change donc rien au rendu, seulement la raison pour laquelle il est juste. */ body.idle .stage__vignette { opacity:0.35; } /* (Le retour du cadre de visée avec la barre du bas est géré plus bas, avec .hud__grid.) */ /* ---------- Cadre viseur ---------- */ .hud { position:absolute; inset:0; padding:var(--hud-pad); font-family:var(--mono); font-size:clamp(0.75rem,1.15vw,0.8rem); letter-spacing:0.08em; color:var(--gris-2); text-transform:uppercase; pointer-events:none; } .dim { color:var(--gris); } /* Le cadre de visée épouse la PHOTO, pas la fenêtre : --frame-* est recalculé en JS à chaque changement d'image, de mode d'affichage ou de taille de fenêtre. Sans ça, depuis que l'image s'affiche en entier, le quadrillage débordait sur les bandes noires. */ .hud__grid { position:absolute; pointer-events:none; opacity:0.4; left:var(--frame-l,var(--hud-pad)); top:var(--frame-t,var(--hud-pad)); width:var(--frame-w,auto); height:var(--frame-h,auto); background:linear-gradient(var(--line),var(--line)) 33.33% 0 / 1px 100% no-repeat, linear-gradient(var(--line),var(--line)) 66.66% 0 / 1px 100% no-repeat, linear-gradient(var(--line),var(--line)) 0 33.33% / 100% 1px no-repeat, linear-gradient(var(--line),var(--line)) 0 66.66% / 100% 1px no-repeat; } .hud__corner { position:absolute; width:22px; height:22px; border:1.5px solid var(--blanc); opacity:0.8; } .hud__corner.tl { top:var(--frame-t,var(--hud-pad)); left:var(--frame-l,var(--hud-pad)); border-right:0; border-bottom:0; } .hud__corner.tr { top:var(--frame-t,var(--hud-pad)); left:calc(var(--frame-l,var(--hud-pad)) + var(--frame-w,0px) - 22px); border-left:0; border-bottom:0; } .hud__corner.bl { top:calc(var(--frame-t,var(--hud-pad)) + var(--frame-h,0px) - 22px); left:var(--frame-l,var(--hud-pad)); border-right:0; border-top:0; } .hud__corner.br { top:calc(var(--frame-t,var(--hud-pad)) + var(--frame-h,0px) - 22px); left:calc(var(--frame-l,var(--hud-pad)) + var(--frame-w,0px) - 22px); border-left:0; border-top:0; } /* Le bandeau haut se cale sur la PHOTO (--frame-*), plus sur la fenêtre. Il était positionné par rapport au bord de l'écran, alors que les coins de visée et le quadrillage le sont par rapport à l'image. En « image entière », la photo est en boîte à lettres : le texte commençait donc dans la bande noire et finissait sur la photo, à cheval sur l'arête. Deux repères différents dans un même cadre, ça se voit toujours. */ .hud__top { position:absolute; top:calc(var(--frame-t, var(--hud-pad)) + var(--hud-in-y)); left:calc(var(--frame-l, var(--hud-pad)) + var(--hud-in-x)); width:calc(var(--frame-w, 100%) - 2 * var(--hud-in-x)); display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:0; } /* Signature de marque, en haut à droite. Plus petite que le titre d'une vue, jamais en concurrence avec la photo. Le compteur passe au-dessus, la signature dessous. */ .hud__topR { display:flex; flex-direction:column; align-items:flex-end; gap:0.28rem; text-align:right; } .wordmark { font-family:var(--serif); text-transform:none; letter-spacing:0.2em; font-size:clamp(0.75rem,1.15vw,0.82rem); color:var(--blanc); opacity:0.7; white-space:nowrap; } .reticle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; color:var(--vert); } .reticle__mark { font-size:clamp(1.4rem,3vw,2rem); line-height:1; } .reticle__label { position:absolute; top:calc(50% + 1.4rem); font-size:0.8rem; letter-spacing:0.2em; } .reticle[data-state="focus"] { color:var(--ambre); } .reticle[data-state="focus"] .reticle__mark { animation:hintpulse 0.5s ease-in-out infinite; } .af { position:absolute; border:1.5px solid currentColor; opacity:0.9; } .af--l { left:-34px; width:2px; height:18px; border-right:0; border-top:0; border-bottom:0; } .af--r { right:-34px; width:2px; height:18px; border-left:0; border-top:0; border-bottom:0; } .af--t { top:-30px; height:2px; width:18px; border-bottom:0; border-left:0; border-right:0; } .af--b { bottom:-30px; height:2px; width:18px; border-top:0; border-left:0; border-right:0; } @keyframes hintpulse { 0%,100%{opacity:0.5;} 50%{opacity:0.95;} } /* Le « viseur » — cadre (coins), quadrillage et réticule — n'apparaît QU'AVEC la barre du bas (souris en zone basse / tap), pas à chaque navigation : moins fatigant, plus immersif. Le titre, « Acquérir » et le menu, eux, restent visibles pendant qu'on navigue. */ /* L'habillage — quadrillage, coins, réticule — ne dépend PLUS de la galerie. Il en dépendait, et sur mobile la galerie s'ouvre en plein écran : l'habillage était donc allumé mais recouvert. Structurellement invisible au téléphone, sans que rien ne le signale. Deux régimes, un par famille d'appareils, et rien d'autre : · avec une souris, l'habillage suit l'activité et s'efface à l'inactivité ; · au doigt, il se montre à l'appui et se cache au suivant. */ .hud__grid, .hud__corner, .reticle { opacity:0; transition:opacity 0.5s var(--ease); } @media (hover: hover) { body:not(.idle) .hud__grid { opacity:0.4; } body:not(.idle) .hud__corner { opacity:0.8; } body:not(.idle) .reticle { opacity:1; } } @media (hover: none) { body.habillage .hud__grid { opacity:0.4; } body.habillage .hud__corner { opacity:0.8; } body.habillage .reticle { opacity:1; } } /* ---------- Le texte quitte la photo, au doigt ---------- Le cartel — phrase, lieu, titre, données de prise de vue — se posait SUR l'image en permanence. Sur un site de photographie, c'est le sujet qu'on abîme. Au doigt, il ne s'affiche donc plus qu'avec l'habillage, par le même appui que le quadrillage : au repos on ne voit que l'image. Avec une souris, il reste comme avant, il s'efface à l'inactivité. */ @media (hover: none) { .cartel { opacity:0; transition:opacity 0.45s var(--ease); } body.habillage .cartel { opacity:1; } } /* ---------- chevrons d'aide au glissement ---------- Discrets, centrés sur la hauteur, retirés au premier geste. Ils ne captent aucun pointeur : le glissement doit traverser jusqu'à la surface de geste. */ .swipehint { position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; gap:1.1rem; pointer-events:none; opacity:0; transition:opacity 0.8s var(--ease); } .swipehint.on { opacity:1; } .swipehint__ch { font-family:var(--serif); font-size:1.9rem; line-height:1; color:var(--blanc); opacity:0.5; text-shadow:0 2px 14px rgba(0,0,0,0.75); } .swipehint__ch--l { animation:chevgauche 2.6s var(--ease) infinite; } .swipehint__ch--r { animation:chevdroite 2.6s var(--ease) infinite; } .swipehint__lbl { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--blanc); opacity:0.62; text-shadow:0 2px 14px rgba(0,0,0,0.8); } @keyframes chevgauche { 0%,100%{transform:translateX(0);opacity:0.5;} 50%{transform:translateX(-5px);opacity:0.85;} } @keyframes chevdroite { 0%,100%{transform:translateX(0);opacity:0.5;} 50%{transform:translateX(5px);opacity:0.85;} } /* Une aide qui bouge chez qui a demandé moins de mouvement, c'est exactement ce qu'on lui épargne. */ @media (prefers-reduced-motion: reduce) { .swipehint__ch--l, .swipehint__ch--r { animation:none; } } /* Sans tactile, le glissement n'est pas le geste naturel : la molette et les flèches le sont. */ @media (hover: hover) { .swipehint { display:none; } } /* Focale simulée (au zoom) */ .zoomhud { position:absolute; top:calc(var(--hud-pad) + 2.7rem); left:50%; z-index:4; display:inline-flex; align-items:baseline; gap:0.5rem; font-family:var(--mono); padding:0.3rem 0.75rem; border:1px solid rgba(232,199,154,0.4); border-radius:2px; background:rgba(8,8,7,0.5); backdrop-filter:blur(6px); opacity:0; transform:translate(-50%,-6px); transition:opacity 0.3s var(--ease),transform 0.3s var(--ease); pointer-events:none; } .viewfinder.zoomed .zoomhud { opacity:1; transform:translate(-50%,0); } .zoomhud__focal { color:var(--ambre); font-size:0.92rem; letter-spacing:0.06em; } .zoomhud__x { color:var(--gris-2); font-size:0.76rem; letter-spacing:0.1em; } /* ---------- Cartel (bas-gauche) ---------- */ /* pointer-events:none — le cartel est posé AU-DESSUS de la surface de geste (z-index 3 contre 1). Sur un écran court, iPhone SE ou 320 px, il remonte jusqu'au milieu de l'écran et occupe près d'un quart de la hauteur : le doigt qui se pose là, l'endroit le plus naturel, ne rencontrait pas le viseur mais le texte, et le glissement ne faisait rien. Le cartel ne contient aucun élément cliquable, uniquement du texte, donc le laisser traverser ne coûte rien. Si un lien y est ajouté un jour, il faudra lui redonner `pointer-events:auto`. */ .cartel { position:absolute; left:calc(var(--frame-l, var(--hud-pad)) + var(--hud-in-x)); /* Ancré au bas de la PHOTO, comme le reste du cadre. Il l'était à la fenêtre : en boîte à lettres, le cartel se retrouvait dans la bande noire, sous l'image. */ /* +1.9rem : la signature « © Kim B Lucas » occupe désormais la ligne du bas à gauche. Le cartel se pose au-dessus d'elle, sinon la ligne de prise de vue l'effleure. */ bottom:calc(100% - var(--frame-t, 0px) - var(--frame-h, 100%) + var(--hud-in-y) + 1.9rem); max-width:min(52ch,56%); z-index:3; pointer-events:none; transition:left 0.45s var(--ease); } /* Le cartel est calé sur --frame-l, c'est-à-dire sur la PHOTO. Bien pour la boîte à lettres, insuffisant quand le panneau des séries est ouvert. ⚠️ L'erreur qui était écrite ici : « la photo se décale d'elle-même quand le panneau s'ouvre ». Elle ne se décale pas. `syncFrame()` calcule --frame-l à partir de la seule largeur du viseur (js/viseur.js) et ignore le panneau, qui est un CALQUE FIXE posé par-dessus. En plein cadre, --frame-l vaut le padding — une trentaine de pixels — donc le titre se retrouvait entièrement masqué derrière les 384 px du panneau. Le bouton « Séries » avait reçu ce décalage le 05.08, le cartel avait été oublié : même cause, deux endroits, un seul corrigé. On ne double PAS le décalage : --frame-l ne bouge pas, on part du bord du panneau et non de la somme des deux — c'est ce doublement qui, la première fois, envoyait le titre percuter le bouton d'achat au centre. Borné à l'écran large : SOUS 680 px le panneau passe en plein écran (left:0; right:0; width:auto) et --dock-w ne veut plus rien dire. Sans cette borne on poussait le titre 384 px à droite d'un écran qui en fait 390 — donc dehors. */ @media (min-width: 681px) { /* ⚠️ CETTE RÈGLE NE GAGNAIT PAS, ET LA SPÉCIFICITÉ N'Y ÉTAIT POUR RIEN. Mesuré en production le 21.08.2026, panneau ouvert, interface réveillée : `body.dock-on` présent, le média correspond, aucune règle concurrente ne pose `left`, aucun `!important`, aucun style en ligne — et le cartel restait à 61,6 px, c'est-à-dire à la valeur de la règle de base. Sur un `.cartel` neuf créé dans le même document, la même règle rendait bien 417,6 px. Je n'ai pas su expliquer l'écart, et une règle qu'on ne sait pas expliquer n'est pas une règle sur laquelle on s'appuie. On change donc de mécanisme : le décalage passe par une VARIABLE posée sur `body`, que la règle de base lit. Une propriété personnalisée hérite — elle ne se dispute pas la cascade, et il n'y a plus qu'un seul endroit qui pose `left` sur cet élément. */ /* ⚠️ LE DÉCALAGE PASSE PAR UNE TRANSFORMATION, ET CE N'EST PAS UN CAPRICE. Trois mécanismes ont été essayés sur cet élément, mesurés en production le 21.08.2026, panneau ouvert et interface réveillée : `body.dock-on .cartel { left: … }` → sans effet (left reste à 61,6 px) une variable héritée posée sur `body` → sans effet non plus, alors qu'elle valait bien 384px SUR l'élément `element.style.left = 400px !important` → sans effet non plus `left` est donc inopérant sur ce cartel, pour une raison que je n'ai pas élucidée — `inset` le rend pourtant (61,6 px), la règle est servie, il n'y a ni !important concurrent ni style en ligne. `margin-left` et `translateX` déplacent l'élément tous les deux : mesuré 62 px → 446 px avec l'un comme avec l'autre. On retient `translateX`, qui ne touche pas à la mise en page et s'anime avec la transition. La borne des 681 px reste : sous 680 px le panneau passe en plein écran et `--dock-w` ne veut plus rien dire — pousser le titre de 384 px sur un écran qui en fait 390 est le second piège que #114 nomme. */ body.dock-on .cartel { transform:translateX(var(--dock-w, 384px)); } } /* La phrase de Kim est TOUJOURS là : elle fait partie du cartel, au même titre que le titre et le lieu. Le bouton « Info » qui la dépliait est retiré (2026-07-29) — il n'y avait plus rien à déplier. (classe renommée : « story » entrait en collision avec l'overlay .story, inset:0) */ .cartel__story { font-family:var(--serif); font-style:italic; font-size:clamp(0.95rem,1.6vw,1.15rem); color:var(--blanc); max-width:40ch; margin-bottom:0.7rem; opacity:0.92; text-shadow:0 2px 20px rgba(0,0,0,0.7); } .cartel__idx { font-family:var(--mono); color:var(--ambre); font-size:0.8rem; letter-spacing:0.16em; margin-bottom:0.35rem; text-transform:uppercase; } .cartel__title { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,5vw,3.4rem); line-height:1.02; color:var(--blanc); text-shadow:0 2px 30px rgba(0,0,0,0.6); } .cartel__meta { display:flex; align-items:center; gap:1rem; margin-top:0.7rem; flex-wrap:wrap; } /* Une seule couleur pour toute la ligne de prise de vue. L'étiquette « ISO » était grise et ses valeurs blanches : deux teintes pour une même information, l'œil s'arrêtait sur la rupture au lieu de lire la ligne. Un gris clair unique, en retrait du titre sans être terne. */ .exif { font-family:var(--mono); display:inline-flex; flex-wrap:wrap; gap:0.7rem; color:rgba(255,255,255,0.72); font-size:clamp(0.75rem,1.1vw,0.76rem); letter-spacing:0.08em; text-transform:uppercase; } .exif .dim { color:inherit; } /* ---------- Acquérir (bas-centre) ---------- */ /* « Acquérir » se cale à DROITE de la photo, pas au centre de la fenêtre. Centré, il tombait sur le cartel — qui occupe le bas gauche — dès que la photo se rétrécissait, c'est-à-dire dès que le panneau des séries s'ouvrait. L'information à gauche, l'action à droite : ils ne se croisent plus, et l'œil sait où chercher quoi. */ .acquire { position:absolute; left:auto; /* Aligné sur le bord droit de la PHOTO, mais jamais assez à droite pour toucher la grappe de contrôles : sur un écran large, la photo va plus loin que la molette. `max()` prend celui des deux qui écarte le plus. */ right:max(calc(100% - var(--frame-l, 0px) - var(--frame-w, 100%) + var(--hud-in-x)), calc(var(--hud-pad) + 9rem)); bottom:calc(100% - var(--frame-t, 0px) - var(--frame-h, 100%) + var(--hud-in-y) + var(--dock-lift)); transform:none; z-index:3; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--blanc); background:rgba(10,10,9,0.5); border:1px solid rgba(232,199,154,0.55); padding:0.7rem 1.3rem; border-radius:2px; backdrop-filter:blur(6px); transition:border-color 0.4s var(--ease),background 0.4s var(--ease),opacity 0.7s var(--ease); } .acquire:hover { border-color:var(--ambre); background:rgba(232,199,154,0.14); } .acquire__plus { color:var(--ambre); font-size:1.05rem; line-height:0; } .viewfinder__hit { position:absolute; inset:0; background:transparent; border:0; cursor:grab; z-index:1; touch-action:none; } .viewfinder.panning .viewfinder__hit { cursor:grabbing; } .viewfinder.fitmode .viewfinder__hit { cursor:pointer; } /* Curseur objectif : au repos (~1 s), la flèche devient un objectif photo (voir viseur.js) */ body.lenscursor, body.lenscursor .viewfinder__hit, body.lenscursor .ctl, body.lenscursor .acquire, body.lenscursor .dial, body.lenscursor .fitbtn { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='14' fill='rgba(5,5,5,0.5)' stroke='%23e8c79a' stroke-width='1.6'/%3E%3Ccircle cx='17' cy='17' r='9' fill='none' stroke='%23e8c79a' stroke-width='1.1' opacity='0.85'/%3E%3Ccircle cx='17' cy='17' r='3' fill='%23e8c79a'/%3E%3Cg stroke='%23e8c79a' stroke-width='1.3'%3E%3Cline x1='17' y1='1.5' x2='17' y2='6'/%3E%3Cline x1='17' y1='28' x2='17' y2='32.5'/%3E%3Cline x1='1.5' y1='17' x2='6' y2='17'/%3E%3Cline x1='28' y1='17' x2='32.5' y2='17'/%3E%3C/g%3E%3C/svg%3E") 17 17, auto; } /* Vue « image entière » : on voit toute la photo, bandes noires (letterbox) */ .viewfinder.fitmode .stage__img { object-fit:contain; } .viewfinder.fitmode .stage__vignette { opacity:0.25; } /* ---------- Panier (déclencheur) ---------- */ .ctl { position:absolute; z-index:4; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gris-2); background:transparent; border:0; cursor:pointer; padding:0.3rem; display:inline-flex; align-items:center; gap:0.4rem; opacity:0.85; transition:color 0.3s var(--ease),opacity 0.7s var(--ease); } .ctl:hover,.ctl:focus-visible { color:var(--blanc); opacity:1; outline:none; } /* ---------- PANIER, dans la grappe de contrôles du bas ---------- Même gabarit que le bouton de cadrage, posé au-dessus de lui : molette, cadrage, panier. Une seule zone de commandes sur tout le site, atteignable au pouce et déjà sous la souris. Au repos il s'efface presque : sur un site dont l'image est le produit, un panier vide n'a rien à réclamer. Il s'allume et compte dès qu'il contient quelque chose. */ .ctl--cart { position:fixed; z-index:24; top:auto; /* Aligné sur le bouton de cadrage : même axe vertical, et 58 px au-dessus de lui (46 de hauteur + 12 d'écart), soit le même intervalle qu'entre le cadrage et la molette. */ right:calc(var(--hud-pad) + 25px + env(safe-area-inset-right)); bottom:calc(var(--hud-pad) + 166px + env(safe-area-inset-bottom)); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--gris-2); background:rgba(8,8,7,0.5); backdrop-filter:blur(8px); border:1.5px solid rgba(232,199,154,0.4); box-shadow:0 8px 30px rgba(0,0,0,0.5); opacity:0.82; transition:opacity 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease); } .ctl--cart:hover, .ctl--cart:focus-visible { opacity:1; color:var(--noir); background:var(--ambre); border-color:var(--ambre); outline:none; } /* Non vide : il cesse d'être discret. C'est le seul chemin vers l'achat, il n'a pas à être timide. */ .ctl--cart.has-items { opacity:1; color:var(--ambre); border-color:var(--ambre); background:rgba(232,199,154,0.14); } .ctl--cart.has-items:hover, .ctl--cart.has-items:focus-visible { color:var(--noir); background:var(--ambre); } /* Étiquette au survol, comme le bouton de cadrage. Le libellé change avec l'état : « Panier » quand il est vide, « Commander » dès qu'il contient quelque chose — c'est à ce moment-là que le mot compte. */ .ctl--cart::after { content:attr(data-lbl); position:absolute; right:calc(100% + 0.6rem); top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--blanc); background:rgba(8,8,7,0.86); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:999px; padding:0.4rem 0.7rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.25s var(--ease); } .ctl--cart:hover::after, .ctl--cart:focus-visible::after { opacity:1; } .ctl--cart.has-items::after { border-color:rgba(232,199,154,0.5); color:var(--ambre); } @media (hover:none) { .ctl--cart::after { display:none; } } /* Un battement unique à l'ajout : le panier est en bas à droite, l'ajout se fait au centre. Sans ce signal, on ne voit pas où va ce qu'on vient de mettre au panier. */ .ctl--cart.just-added { animation:panieradd 0.7s var(--ease) 2; } @keyframes panieradd { 0%,100% { transform:scale(1); } 45% { transform:scale(1.14); } } @media (prefers-reduced-motion: reduce) { .ctl--cart.just-added { animation:none; } } .ctl--cart .ctl__lbl { display:none; } .ctl--cart .cartbadge { position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; display:none; place-items:center; padding:0 5px; border-radius:999px; background:var(--ambre); color:var(--noir); font-family:var(--mono); font-size:0.75rem; line-height:1; } .ctl--cart.has-items .cartbadge { display:grid; } /* « Voir la galerie » — révèle la barre du bas (surtout pour le tactile) */ /* le bouton se décale avec la colonne pour ne pas la recouvrir */ /* Le bouton se cale sur la PHOTO comme le bandeau, et passe SOUS lui : posés à la même hauteur, « Séries » et « Série · Ralentir » s'écrasaient l'un sur l'autre. */ .ctl--gallery { z-index:7; left:calc(var(--frame-l, var(--hud-pad)) + var(--hud-in-x)); top:calc(var(--frame-t, var(--hud-pad)) + var(--hud-in-y) + 2.3rem); gap:0.45rem; opacity:1; transition:left 0.45s var(--ease), opacity 0.7s var(--ease); border:1px solid rgba(232,199,154,0.45); border-radius:999px; padding:0.42rem 0.82rem; } .ctl--gallery svg { color:var(--ambre); } /* Cibles tactiles : 44 px minimum (mesure du harnais — 7 commandes étaient en dessous). */ .ctl, .btn-ghost, .btn-primary, .acquire, .story__skip { min-height:44px; } .ctl { display:inline-flex; align-items:center; } .ctl--cart { display:grid; } /* le panier est une pastille ronde, pas une étiquette en ligne */ .story__skip { padding:0.8rem 0.5rem; } /* Le panier est stylé plus haut, avec la grappe de contrôles du bas. Les règles qui vivaient ici dataient de sa position en haut à droite et l'écrasaient, étant plus tardives dans le fichier. */ .ctl--gallery:hover,.ctl--gallery:focus-visible { color:var(--blanc); border-color:var(--ambre); opacity:1; } body.dock-on .ctl--gallery { color:var(--ambre); border-color:var(--ambre); } /* actif quand le panneau est ouvert */ /* Le panneau est une SUPERPOSITION fixe : il ne pousse pas le viseur, il le recouvre. Le bouton qui l'ouvre doit donc s'écarter quand il est ouvert, sinon il se retrouve posé sur la liste des séries. Il reste visible, pour pouvoir refermer. */ body.dock-on .ctl--gallery { left:calc(var(--dock-w, 384px) + var(--hud-in-x)); } @media (max-width: 680px) { /* En plein écran, le panneau recouvre tout : le bouton n'a nulle part où aller, il s'efface. On referme par la croix du panneau ou par un appui hors vignette. */ body.dock-on .ctl--gallery { opacity:0; pointer-events:none; } } /* Bouton « image entière » — pastille ronde au-dessus de la molette */ .fitbtn { position:fixed; z-index:24; right:calc(var(--hud-pad) + 25px); bottom:calc(var(--hud-pad) + 108px); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--gris-2); background:rgba(8,8,7,0.42); backdrop-filter:blur(8px); border:1.5px solid var(--gris-2); box-shadow:0 8px 30px rgba(0,0,0,0.5); transition:color 0.3s var(--ease),border-color 0.3s var(--ease),opacity 0.7s var(--ease); } .fitbtn svg { width:22px; height:22px; } .fitbtn:hover,.fitbtn:focus-visible { color:var(--blanc); border-color:var(--ambre); outline:none; } .fitbtn[aria-pressed="true"] { color:var(--ambre); border-color:var(--ambre); } /* ---------- Molette ---------- */ /* Molette de menu : fixe et TOUJOURS accessible, y compris par-dessus les panneaux ouverts (à propos, contact, séries, légal…) — plus besoin de descendre chercher « Retour au menu ». Masquée seulement sur les écrans transactionnels (configurateur, panier), qui ont leur « Fermer ». */ .dial { position:fixed; z-index:24; right:var(--hud-pad); bottom:var(--hud-pad); width:96px; height:96px; border-radius:50%; border:0; cursor:pointer; background:rgba(8,8,7,0.42); backdrop-filter:blur(8px); display:grid; place-items:center; color:var(--blanc); box-shadow:0 8px 30px rgba(0,0,0,0.5); } body.panel-full .dial { opacity:0; pointer-events:none; } .dial__ring { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--gris-2); opacity:0.95; } .dial__ticks { position:absolute; inset:4px; border-radius:50%; opacity:0.75; transition:transform 0.6s var(--ease); background:repeating-conic-gradient(from 0deg,var(--gris-2) 0 1.4deg,transparent 1.4deg 12deg); -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%,#000 74%,transparent 76%); mask:radial-gradient(circle,transparent 60%,#000 62%,#000 74%,transparent 76%); } .dial__pointer { position:absolute; top:4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--ambre); } .dial__label { font-family:var(--mono); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--blanc); } .dial:hover,.dial:focus-visible { outline:none; transform:scale(1.05); } .dial:hover .dial__ring,.dial:focus-visible .dial__ring { border-color:var(--ambre); } .dial:hover .dial__ticks,.dial:focus-visible .dial__ticks { transform:rotate(20deg); } .dial.call { animation:dialcall 2.4s var(--ease) 3; } @keyframes dialcall { 0%,100%{box-shadow:0 8px 30px rgba(0,0,0,0.5);} 50%{box-shadow:0 0 0 6px rgba(232,199,154,0.16),0 8px 30px rgba(0,0,0,0.5);} } /* ---------- Dock bas (séries + pellicule) — flotte sur l'image, s'efface pour l'immersion ---------- */ /* Découplée de la navigation : cachée par défaut, remonte via body.dock-on (souris en zone basse sur desktop, tap sur mobile) — jamais à la navigation. */ /* ---------- Galerie LATÉRALE (v10) ---------- Elle s'ouvre sur le flanc gauche au lieu de pousser le cartel vers le haut : le texte ne monte plus et ne descend plus quand on ouvre la pellicule. La version à barre horizontale est gardée dans 02_WEB/_archive/prototype-v9-galerie-en-bas/. */ .bottomdock { position:fixed; left:0; top:0; bottom:0; z-index:6; width:var(--dock-w,296px); display:flex; flex-direction:row; background:linear-gradient(90deg,#0a0a09 88%,rgba(10,10,9,0.9)); border-right:1px solid var(--line); opacity:0; transform:translateX(-14px); pointer-events:none; transition:opacity 0.45s var(--ease), transform 0.45s var(--ease); } body.dock-on .bottomdock { opacity:1; transform:none; pointer-events:auto; } .bottomdock::before { content:""; position:absolute; top:0; bottom:0; left:100%; width:44px; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,0.5), transparent); } /* ---------- Navigation des séries (en tête de colonne) ---------- */ /* Colonne 1 — les séries, toujours à l'écran. Défile quand il y en aura beaucoup. */ .seriesbar { flex:0 0 134px; display:flex; flex-direction:column; gap:2px; padding:10px 8px; background:#0a0a09; border-right:1px solid var(--line); overflow-y:auto; scrollbar-width:thin; } .serieslist__t { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gris); padding:0 0.35rem 0.5rem; flex:0 0 auto; } .serieitem { display:flex; flex-direction:column; gap:0.12rem; width:100%; padding:0.6rem 0.5rem; background:transparent; border:0; border-left:2px solid transparent; border-radius:2px; cursor:pointer; text-align:left; flex:0 0 auto; transition:background 0.25s var(--ease), border-color 0.25s var(--ease); } .serieitem:hover { background:rgba(255,255,255,0.05); } .serieitem[aria-current="true"] { background:rgba(232,199,154,0.12); border-left-color:var(--ambre); } /* contraste mesuré à 3,73 : remonté au-dessus du seuil AA (4,5) */ .serieitem__n { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; color:var(--gris-2); } .serieitem__name { font-family:var(--serif); font-size:1.12rem; color:var(--gris-2); line-height:1.12; } .serieitem[aria-current="true"] .serieitem__name { color:var(--ambre); } .serieitem__c { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gris-2); } /* Colonne 2 — la pellicule, façon bande de film : perforations sur les bords. */ .filmstrip { position:relative; background: repeating-linear-gradient(#141412 0 8px, #0a0a09 8px 16px) left / 7px 100% repeat-y, repeating-linear-gradient(#141412 0 8px, #0a0a09 8px 16px) right / 7px 100% repeat-y, var(--noir); } /* ---------- Pellicule ---------- */ .filmstrip { flex:1 1 auto; display:flex; flex-direction:column; gap:6px; padding:8px 12px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; } .frame { position:relative; flex:0 0 auto; width:100%; aspect-ratio:3/2; border:0; padding:0; cursor:pointer; background:none; opacity:0.5; transition:opacity 0.4s var(--ease); } .frame img { width:100%; height:100%; object-fit:contain; } /* #113 : c'est le tirage, pas une vignette */ .frame::after { content:""; position:absolute; inset:0; border:1px solid transparent; } .frame[aria-current="true"] { opacity:1; } .frame[aria-current="true"]::after { border-color:var(--ambre); } .frame:hover { opacity:0.85; } .frame:focus-visible { outline:2px solid var(--ambre); outline-offset:2px; } /* Légende de vignette : masquée sur grand écran, où la bande latérale est étroite et où le cartel affiche déjà le titre de la vue en cours. */ .frame__lgd { display:none; } @media (max-width: 680px) { /* Le bouton devient une colonne : image, puis légende. Sans ça, l'image gardait `height:100%` de la règle générale, elle prenait TOUTE la hauteur de la cellule, et la légende débordait par le bas — elle allait s'écrire sur la vignette de la rangée suivante. Le liseré de sélection passe sur l'IMAGE et non sur le bouton, sinon il encadrait aussi le texte, ce qui n'a pas de sens : c'est la vue qui est courante, pas son titre. */ .frame { aspect-ratio:auto; display:flex; flex-direction:column; align-items:stretch; } .frame img { height:auto; aspect-ratio:3/2; } .frame::after { display:none; } .frame[aria-current="true"] img { outline:1px solid var(--ambre); outline-offset:-1px; } .frame__lgd { display:flex; align-items:baseline; gap:0.45rem; padding:0.4rem 0.1rem 0; text-align:left; } .frame__no { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; color:var(--ambre); flex:0 0 auto; } .frame__ttl { font-family:var(--serif); font-size:0.86rem; color:var(--blanc); opacity:0.86; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .frame { opacity:0.78; } .frame[aria-current="true"] { opacity:1; } } /* ---------- Overlays ---------- */ .scrim { position:fixed; inset:0; background:rgba(3,3,3,0.72); backdrop-filter:blur(4px); z-index:20; animation:fade 0.4s var(--ease); } .ov { position:fixed; z-index:21; color:var(--blanc); animation:fade 0.45s var(--ease); } @keyframes fade { from{opacity:0;} to{opacity:1;} } .ov__close { position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); background:transparent; border:0; color:var(--gris-2); font-family:var(--mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; z-index:2; } .ov__close:hover { color:var(--blanc); } /* Menu LCD (agrandi) */ .ov--lcd { right:var(--hud-pad); bottom:calc(var(--hud-pad) + 122px); z-index:22; } .lcd { position:relative; width:min(540px,93vw); background:radial-gradient(120% 120% at 50% 0%,#0c0f0c,#070907); border:9px solid #17170f; border-radius:16px; padding:1.1rem 1.4rem 1.3rem; box-shadow:0 24px 70px rgba(0,0,0,0.65), inset 0 0 30px rgba(0,0,0,0.5); overflow:hidden; animation:lcdrise 0.35s var(--ease); } @keyframes lcdrise { from{opacity:0; transform:translateY(14px) scale(0.98);} to{opacity:1; transform:none;} } .lcd::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5; background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.025) 0 1px,transparent 1px 3px); } .lcd__bar { display:flex; justify-content:space-between; align-items:center; padding-bottom:0.6rem; margin-bottom:0.4rem; border-bottom:1px solid rgba(232,199,154,0.18); } .lcd__title { font-family:var(--mono); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ambre); } .lcd__nav { display:flex; flex-direction:column; } .lcd__row { display:flex; align-items:center; gap:0.9rem; padding:0.82rem 0.4rem; border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.25s var(--ease); } .lcd__row:hover,.lcd__row:focus-visible { background:rgba(232,199,154,0.1); outline:none; } /* Fin de bloc : le trait s'affirme et une respiration s'ouvre en dessous. Assez pour qu'on lise trois groupes, trop peu pour qu'on croie à trois menus. Pas de titre de bloc : les libellés se suffisent, et trois intertitres alourdiraient un menu qui tient déjà en un coup d'œil. */ .lcd__row--fin { border-bottom-color:rgba(232,199,154,0.22); margin-bottom:0.85rem; } .lcd__no { font-family:var(--mono); font-size:0.78rem; color:var(--ambre); letter-spacing:0.08em; } .lcd__lbl { font-family:var(--serif); font-size:1.65rem; color:var(--blanc); flex:1 1 auto; } .lcd__ar { font-family:var(--mono); color:var(--ambre); opacity:0; transform:translateX(-4px); transition:opacity 0.25s var(--ease),transform 0.25s var(--ease); } .lcd__row:hover .lcd__ar,.lcd__row:focus-visible .lcd__ar { opacity:1; transform:none; } /* Instagram valorisé */ /* Langue — trois pastilles au pas du sélecteur de mode d'un boîtier. La langue courante est en ambre PLEIN : un simple soulignement ne suffit pas, l'écart de contraste entre l'état courant et les autres doit rester lisible en plein soleil comme le reste du HUD. */ .lcd__lang { display:flex; gap:0.4rem; margin-top:0.9rem; } .lang { flex:1 1 0; min-height:44px; padding:0.5rem 0; background:transparent; color:var(--gris-2); border:1px solid var(--line); border-radius:4px; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.14em; cursor:pointer; transition:color 0.3s var(--ease),border-color 0.3s var(--ease),background 0.3s var(--ease); } .lang abbr { text-decoration:none; border:0; } /* pas de pointillé sous DE / EN */ .lang:hover { color:var(--blanc); border-color:var(--gris-2); } .lang[aria-current="true"] { background:var(--ambre); color:#1a1508; border-color:var(--ambre); cursor:default; } .lcd__ig { display:flex; align-items:center; gap:0.7rem; margin-top:0.8rem; padding:0.7rem 0.8rem; border:1px solid rgba(232,199,154,0.35); border-radius:4px; color:var(--blanc); transition:background 0.3s var(--ease),border-color 0.3s var(--ease); } .lcd__ig:hover { background:rgba(232,199,154,0.12); border-color:var(--ambre); } .lcd__ig svg { color:var(--ambre); flex:0 0 auto; } .lcd__ig-h { font-family:var(--serif); font-size:1.05rem; flex:1 1 auto; } .lcd__ig-n { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ambre); } .lcd__close { top:0.6rem; right:0.7rem; font-size:1rem; } .lcd__back { display:inline-flex; align-items:center; gap:0.6rem; background:rgba(232,199,154,0.08); border:1px solid rgba(232,199,154,0.35); border-radius:999px; color:var(--ambre); font-family:var(--mono); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; padding:0.62rem 1.3rem; margin-bottom:0.7rem; } .lcd__back:hover,.lcd__back:focus-visible { background:var(--ambre); color:var(--noir); outline:none; } /* Le sous-menu Légal a exactement la même typographie et le même gabarit que le menu principal : `--lcd-h` est la hauteur du menu principal, mesurée en JS à la première ouverture. */ .lcd__view { min-height:var(--lcd-h,auto); } /* « Fermer » collant en tête de page : toujours atteignable, même après avoir fait défiler. */ .ovclose { position:sticky; top:0; z-index:5; align-self:flex-end; flex:0 0 auto; display:inline-flex; align-items:center; gap:0.5rem; margin:-0.4rem -0.4rem 0.6rem 0; font-family:var(--mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ambre); background:#191510; border:1px solid var(--ambre); border-radius:999px; padding:0.5rem 1.05rem; cursor:pointer; transition:background 0.25s var(--ease), color 0.25s var(--ease); } .ovclose:hover, .ovclose:focus-visible { background:var(--ambre); color:var(--noir); outline:none; } .ov--menu .ovclose { position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); margin:0; } /* Barre « Retour » (bas des panneaux) — bien visible */ /* La barre « Retour » est collante : sans cette réserve, elle passait par-dessus la fin du texte. */ .ov--doc .doc { padding-bottom:1.5rem; } /* Séries (grille) */ /* Séries : plein écran, mais on réserve la colonne de droite pour le menu LCD qui reste ouvert. */ .ov--menu { inset:0; background:linear-gradient(160deg,#0b0b0a,#050505); display:flex; flex-direction:column; overflow-y:auto; padding:clamp(1.5rem,6vw,5rem); } /* Sur large écran le menu occupe la droite : on décale le contenu pour qu'il ne passe pas dessous. Sur mobile le LCD prend toute la largeur — pas de décalage, il se superpose. */ @media (min-width: 1100px) { body.menu-open .ov--menu { padding-right:calc(540px + 2 * var(--hud-pad)); } body.menu-open .ov--doc, body.menu-open .ov--cookies { left:calc(50% - (540px + var(--hud-pad)) / 2); } } .ov--menu .series { margin-top:clamp(2.5rem,8vh,5rem); } .ov__wordmark { position:absolute; top:clamp(1.2rem,3vw,2rem); left:clamp(1.2rem,4vw,3rem); font-family:var(--serif); letter-spacing:0.2em; color:var(--blanc); opacity:0.9; } /* Sur écran étroit, ce titre posé en absolu retombait SUR le premier paragraphe : il est hors du flux, donc rien ne lui réserve de place, et le texte lui passait dessous. Il rentre dans le flux et pousse le contenu, ce qu'il aurait dû faire dès le départ à cette largeur. */ @media (max-width: 680px) { .ov__wordmark { position:static; display:block; margin:0 0 0.9rem; } } .series { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; max-width:940px; } /* color explicite : .serie est un