/* examiner — « Examiner la photo : zoom et loupe », visionneuse de /decouvrir/photos/ (Terondo V2) PHOTOS-EXAMINER-2409 · Opus-loupe-photos · 24/09/2026. Voir l'en-tête de examiner-.js. Tout est borné aux rangées que le script a reconnues et marquées (.exz-zoom, .exz-loupe) et à la section qu'il a ouverte (details[data-exz]) : sans le script, ou avec ?examiner=0, rien ne change. Aucune couleur de thème n'est écrite ici. L'accent (--exz-accent) et l'encre qui s'y lit (--exz-encre) sont MESURÉS par le script sur un bouton actif de la page : le site a plusieurs palettes, une teinte écrite ici serait juste dans l'une et fausse dans les autres. Les gris dérivent de la couleur du texte (currentColor), donc suivent le jour comme la nuit. */ #lbinfo .exz-cible{display:none!important} /* ---- les deux rangées deviennent des colonnes ---- */ #lbinfo #lbzoom.exz-zoom, #lbinfo #lblens.exz-loupe{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px} #lbinfo .exz-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px} /* ---- agrandissement : − [curseur] + ×1,0 ---- */ #lbinfo #lbzoom .exz-pas{flex-wrap:nowrap;gap:10px} #lbinfo #lbzoom .exz-pas button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-size:21px;line-height:1} #lbinfo #lbzoom .exz-curseur{flex:1 1 auto;min-width:0;width:auto;height:44px;margin:0;cursor:pointer; accent-color:var(--exz-accent,var(--brass,#175cd2));background:transparent} #lbinfo #lbzoom .exz-curseur:focus-visible{outline:2px solid var(--exz-accent,var(--brass,#175cd2));outline-offset:3px;border-radius:8px} #lbinfo #lbzoom .exz-pas .lb-zval{flex:0 0 auto;min-width:54px;padding:0;justify-content:flex-end; color:inherit;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums} #lbinfo #lbzoom .exz-pre button{min-height:40px} /* ---- les phrases qui disent quoi faire ---- */ #lbinfo .exz-aide{margin:0;max-width:60ch;font:500 12.5px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:inherit;opacity:.78} #lbinfo .exz-aide-zoom{margin-top:8px} #lbinfo .exz-aide + .tt{margin-top:16px} /* ---- loupe : l'interrupteur porte l'état, en toutes lettres ---- */ #lbinfo #lblens.exz-loupe > .sep{display:none} #lbinfo #lblens.exz-loupe .exz-inter{flex-wrap:nowrap} #lbinfo #lblens.exz-loupe button[data-l="on"], #lbinfo #lblens.exz-loupe button[data-l="on"].on{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-height:48px; padding:8px 12px;border-radius:12px;text-align:left;color:inherit;background:transparent; border:1px solid color-mix(in srgb,currentColor 22%,transparent)} #lbinfo #lblens.exz-loupe button[data-l="on"]:hover{border-color:color-mix(in srgb,currentColor 40%,transparent)} #lbinfo #lblens.exz-loupe.exz-allumee button[data-l="on"]{border-color:var(--exz-accent,var(--brass,#175cd2))} #lbinfo #lblens.exz-loupe .exz-etat{margin-left:auto;font-size:13px;font-weight:600;opacity:.85} #lbinfo #lblens.exz-loupe .exz-piste{position:relative;flex:0 0 auto;width:40px;height:24px;border-radius:12px; background:color-mix(in srgb,currentColor 26%,transparent);transition:background-color .15s ease} #lbinfo #lblens.exz-loupe .exz-pouce{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s ease} #lbinfo #lblens.exz-loupe.exz-allumee .exz-piste{background:var(--exz-accent,var(--brass,#175cd2))} #lbinfo #lblens.exz-loupe.exz-allumee .exz-pouce{transform:translateX(16px)} /* ---- puissance et taille : nommées, au-dessus de leurs boutons ---- */ #lbinfo #lblens.exz-loupe .exz-choix{column-gap:6px;row-gap:6px} #lbinfo #lblens.exz-loupe .exz-nom{flex:0 0 100%;margin:4px 0 0;font:700 10.5px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.12em;text-transform:uppercase;opacity:.72} #lbinfo #lblens.exz-loupe .exz-choix button{min-height:40px;display:inline-flex;align-items:center;gap:7px} #lbinfo #lblens.exz-loupe .exz-rond{display:inline-block;flex:0 0 auto;border:1.5px solid currentColor;border-radius:50%} #lbinfo #lblens.exz-loupe .exz-rond-S{width:8px;height:8px} #lbinfo #lblens.exz-loupe .exz-rond-M{width:12px;height:12px} #lbinfo #lblens.exz-loupe .exz-rond-L{width:16px;height:16px} /* ---- un bouton actif se LIT : encre mesurée sur la teinte peinte ---- */ #lbinfo #lbzoom.exz-zoom button.on, #lbinfo #lblens.exz-loupe .exz-choix button.on, #lbinfo details[data-exz] .lb-adj button.on{color:var(--exz-encre,inherit)} @media (prefers-reduced-motion:reduce){ #lbinfo #lblens.exz-loupe .exz-piste, #lbinfo #lblens.exz-loupe .exz-pouce{transition:none} } /* ======================= (r4) la planche-contact — PHOTOS-PANNEAU-LUDIQUE-2509, 25/09 ======================= La maquette C choisie par Stéphane : une planche de papier, quatre vues sur pellicule, cerclées au crayon de couleur quand on les essaie. Ici, à l'inverse du reste de ce fichier, les couleurs SONT écrites : la planche porte son propre fond opaque (papier le jour, table sombre la nuit), donc chaque encre est calculée contre CE fond, pas contre une palette du site. La nuit se lit sur le fond réellement peint derrière le panneau (script : data-exz-sombre). Les jetons sont préfixés --pl- : --exz-encre et --exz-accent restent ceux de la r1, que la planche redéfinit PAR VUE (le curseur, l'interrupteur et les boutons actifs prennent la couleur de l'étape). */ #lbinfo .lb-tools [data-exz-range]{display:none!important} #lbinfo .exz-planche{ --pl-papier:#eeebe4;--pl-encre:#161616;--pl-sourd:#55524b;--pl-film:#161616;--pl-film-bord:transparent;--pl-trou:#eeebe4; --pl-bouton:#fbfaf6;--pl-bord:#161616;--pl-filet:#b9b4a8; --pl-r:#c8231b;--pl-rt:#d7261e;--pl-b:#1f5fd1;--pl-bt:#1f5fd1;--pl-g:#136b3a;--pl-gt:#1f8f4e;--pl-o:#9a4708;--pl-ot:#d4690f; --pl-rf:#c8231b;--pl-bf:#1f5fd1;--pl-gf:#136b3a;--pl-of:#9a4708; --pl-fw:92px;--pl-fh:128px; container:exz/inline-size; margin:0 0 16px;padding:16px 16px 20px;border-radius:10px;background:var(--pl-papier);color:var(--pl-encre); font:400 14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif} #lbinfo .exz-planche[data-exz-sombre]{ --pl-papier:#1c1b17;--pl-encre:#efeae0;--pl-sourd:#bdb6a8;--pl-film:#050505;--pl-film-bord:#48443b;--pl-trou:#4a463d; --pl-bouton:#26251f;--pl-bord:#8d877a;--pl-filet:#4a463d; --pl-r:#ff8a7d;--pl-rt:#ff6b5e;--pl-b:#8fb4ff;--pl-bt:#6d9dff;--pl-g:#6fd49c;--pl-gt:#3fbf7a;--pl-o:#ffad66;--pl-ot:#ff9a3c} #lbinfo .exz-vue[data-vue="1"]{--mk:var(--pl-r);--mk-t:var(--pl-rt);--mk-f:var(--pl-rf)} #lbinfo .exz-vue[data-vue="2"]{--mk:var(--pl-b);--mk-t:var(--pl-bt);--mk-f:var(--pl-bf)} #lbinfo .exz-vue[data-vue="3"]{--mk:var(--pl-g);--mk-t:var(--pl-gt);--mk-f:var(--pl-gf)} #lbinfo .exz-vue[data-vue="4"]{--mk:var(--pl-o);--mk-t:var(--pl-ot);--mk-f:var(--pl-of)} #lbinfo .exz-vue{--exz-accent:var(--mk-f);--exz-encre:#fff} /* ---- en-tête : titre, compteur, recommencer ---- */ #lbinfo .exz-pl-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} #lbinfo .exz-pl-titre{font:700 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase} #lbinfo .exz-pl-droite{display:inline-flex;align-items:center;gap:12px} #lbinfo .exz-pl-compte{font:700 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pl-r);white-space:nowrap} #lbinfo .exz-planche .exz-pl-rec{min-height:40px;margin:-9px 0;padding:0 2px;border:0;background:none;color:var(--pl-encre); font:600 13px/1 ui-sans-serif,system-ui,sans-serif;text-decoration:underline;cursor:pointer} #lbinfo .exz-pl-rec[hidden]{display:none} #lbinfo .exz-pl-intro{margin:8px 0 18px;font:italic 400 16px/1.4 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif} /* ---- les quatre vues : la pellicule à gauche, l'étape à droite ---- */ #lbinfo .exz-vues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px} #lbinfo .exz-vue{display:grid;grid-template-columns:var(--pl-fw) minmax(0,1fr);grid-template-areas:"film tete" "film outils"; column-gap:18px;row-gap:8px;align-items:start} #lbinfo .exz-film{grid-area:film;position:relative;width:var(--pl-fw);height:var(--pl-fh);border-radius:3px;background:var(--pl-film); box-shadow:0 0 0 1px var(--pl-film-bord)} #lbinfo .exz-film::before,#lbinfo .exz-film::after{content:"";position:absolute;left:7px;right:7px;height:7px; background:repeating-linear-gradient(90deg,var(--pl-trou) 0 9px,transparent 9px 17px)} #lbinfo .exz-film::before{top:4px} #lbinfo .exz-film::after{bottom:4px} #lbinfo .exz-film-img{position:absolute;left:6px;right:6px;top:15px;bottom:15px;overflow:hidden;background:#2a2a2a} #lbinfo .exz-film-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%} #lbinfo .exz-vue[data-vue="1"] .exz-film-img img{filter:brightness(1.12) contrast(1.3)} #lbinfo .exz-vue[data-vue="2"] .exz-film-img img{transform:scale(2.4);transform-origin:50% 55%} #lbinfo .exz-vue[data-vue="3"] .exz-film-img::after{content:"";position:absolute;left:50%;top:42%;width:46%;aspect-ratio:1;border-radius:50%; transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mk-t)} #lbinfo .exz-vue[data-vue="4"] .exz-film-img img{transform:scaleX(-1)} #lbinfo .exz-trait{position:absolute;left:-16px;top:-16px;width:calc(100% + 32px);height:calc(100% + 32px);overflow:visible;pointer-events:none;display:none} #lbinfo .exz-trait path{fill:none;stroke:var(--mk-t);stroke-width:4;stroke-linecap:round} #lbinfo .exz-vue[data-exz-cerclee="1"] .exz-trait{display:block} #lbinfo .exz-vue.exz-trace .exz-trait path{stroke-dasharray:100;stroke-dashoffset:100;animation:exz-trace .7s ease-out forwards} @keyframes exz-trace{to{stroke-dashoffset:0}} #lbinfo .exz-vue-tete{grid-area:tete;display:flex;align-items:center;gap:10px;min-width:0} #lbinfo .exz-num{position:relative;flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center; font:italic 700 20px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--mk)} #lbinfo .exz-num svg{position:absolute;left:-3px;top:-3px;width:40px;height:40px;overflow:visible} #lbinfo .exz-num svg path{fill:none;stroke:var(--mk-t);stroke-width:2.4;stroke-linecap:round} #lbinfo .exz-planche .exz-vue-titre{margin:0;font:700 18px/1.25 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--pl-encre);letter-spacing:0} #lbinfo .exz-cerclee{display:none;margin-left:auto;font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em;text-transform:uppercase;color:var(--mk)} #lbinfo .exz-vue[data-exz-cerclee="1"] .exz-cerclee{display:inline} #lbinfo .exz-vue-outils{grid-area:outils;min-width:0;display:flex;flex-direction:column;gap:10px} /* ---- ce qui voyage garde sa fonction, et prend l'encre de la planche ---- */ #lbinfo .exz-planche .ph-adjust{margin:0;padding:0;border:0;background:none;color:var(--pl-encre)} #lbinfo .exz-planche .ph-tool-heading{display:none} #lbinfo .exz-planche .ph-tool-hint, #lbinfo .exz-planche .exz-aide{margin:0 0 2px;max-width:none;opacity:1;font:400 14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--pl-sourd)} #lbinfo .exz-planche .ph-adjust .ph-tool-hint{margin-bottom:10px} #lbinfo .exz-planche .ph-note{margin:10px 0 0;font-size:12.5px} #lbinfo .exz-planche .ph-tool-status{margin:10px 0 0;color:var(--mk);font:500 13px/1.4 ui-sans-serif,system-ui,sans-serif} #lbinfo .exz-planche .ph-details{border-top:1px dashed var(--pl-filet);margin:10px 0 0;padding-top:2px} #lbinfo .exz-planche .ph-details summary, #lbinfo .exz-planche .ph-slider{color:var(--pl-encre)} #lbinfo .exz-planche .ph-slider output{color:var(--mk)} #lbinfo .exz-planche .ph-slider input{accent-color:var(--mk-f)} #lbinfo .exz-planche .ph-slider input{min-height:40px} /* la ligne d'aide du module « gomme » (autre lane, même carte) garde son rôle de phrase neutre : l'encre sourde de la planche, pleine (à 78 % d'opacité, elle tombait à 3,6:1 sur le papier) */ #lbinfo .exz-planche .ph-gomme-etat[data-etat="aide"]{color:var(--pl-sourd);opacity:1} #lbinfo .exz-planche .exz-vue-outils button, #lbinfo .exz-planche .exz-vue-outils .lb-dl a{border-radius:4px;border:1.5px solid var(--pl-bord);background:var(--pl-bouton);color:var(--pl-encre); font:600 13.5px/1.25 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:40px;padding:6px 12px} #lbinfo .exz-planche .exz-vue-outils button:hover, #lbinfo .exz-planche .exz-vue-outils .lb-dl a:hover{border-color:var(--mk-t);background:var(--pl-bouton)} #lbinfo .exz-planche .exz-vue-outils button.on, #lbinfo .exz-planche .exz-vue-outils button[aria-pressed="true"]{background:var(--mk-f);border-color:var(--mk-f);color:#fff} #lbinfo .exz-planche .exz-vue-outils button:focus-visible, #lbinfo .exz-planche .exz-vue-outils a:focus-visible, #lbinfo .exz-planche .exz-vue-outils summary:focus-visible, #lbinfo .exz-planche .exz-pl-rec:focus-visible{outline:2px solid var(--pl-encre);outline-offset:2px} #lbinfo .exz-planche .ph-adjust .lb-adj{gap:8px} #lbinfo .exz-planche .ph-adjust .ph-improve{width:auto;background:var(--pl-encre);border-color:var(--pl-encre);color:var(--pl-papier)} #lbinfo .exz-planche #lbzoom .exz-pas button{border-radius:4px} #lbinfo .exz-planche #lbzoom .exz-pas .lb-zval{color:var(--mk)} #lbinfo .exz-planche #lblens.exz-loupe button[data-l="on"], #lbinfo .exz-planche #lblens.exz-loupe button[data-l="on"].on, #lbinfo .exz-planche #lblens.exz-loupe button[data-l="on"][aria-pressed="true"]{border-radius:4px;background:var(--pl-bouton);color:var(--pl-encre);border:1.5px solid var(--pl-bord)} #lbinfo .exz-planche #lblens.exz-loupe.exz-allumee button[data-l="on"]{border-color:var(--mk-f)} #lbinfo .exz-planche #lblens.exz-loupe .exz-etat{color:var(--mk);opacity:1} #lbinfo .exz-planche #lblens.exz-loupe .exz-nom{color:var(--pl-sourd);opacity:1} /* rangée SOUPLE, pas une grille à pas fixe : « Diaporama » réclame 68 px quand la grille en donnait 62 (sonde du 25/09, à toutes les largeurs) ; chaque tuile garde au moins la largeur de son mot le plus long, se partage le reste, et passe à la ligne quand la police de l'appareil est plus large que la nôtre. */ #lbinfo .exz-planche #lbview{display:flex;flex-wrap:wrap;gap:6px} #lbinfo .exz-planche #lbview button{flex:1 1 0;min-width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;min-height:62px;padding:6px 4px;font-size:12px;text-align:center;white-space:normal} #lbinfo .exz-planche #lbview button svg{width:20px;height:20px;margin:0;vertical-align:0} #lbinfo .exz-planche .lb-dl{margin-top:2px;gap:8px} #lbinfo .exz-planche .lb-dl a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;min-height:42px} #lbinfo .exz-planche .exz-dl-icone{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---- téléphone (planche étroite) : la vignette rétrécit, les outils prennent toute la largeur ---- */ @container exz (max-width:430px){ #lbinfo .exz-vue{--pl-fw:58px;--pl-fh:80px;column-gap:14px;grid-template-areas:"film tete" "outils outils"} #lbinfo .exz-vue-tete{align-self:center} #lbinfo .exz-film::before,#lbinfo .exz-film::after{left:5px;right:5px;height:5px;background:repeating-linear-gradient(90deg,var(--pl-trou) 0 6px,transparent 6px 11px)} #lbinfo .exz-film::before{top:3px} #lbinfo .exz-film::after{bottom:3px} #lbinfo .exz-film-img{left:4px;right:4px;top:11px;bottom:11px} #lbinfo .exz-trait{left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px)} } @media (max-width:820px){ #lbinfo .exz-planche .exz-vue-outils button, #lbinfo .exz-planche .exz-vue-outils .lb-dl a, #lbinfo .exz-planche #lbzoom .exz-pre button, #lbinfo .exz-planche #lblens.exz-loupe .exz-choix button{min-height:44px} #lbinfo .exz-planche .exz-pl-rec{min-height:44px;margin:-11px 0} #lbinfo .exz-planche .ph-slider input{min-height:44px} } @media (prefers-reduced-motion:reduce){ #lbinfo .exz-vue.exz-trace .exz-trait path{animation:none;stroke-dashoffset:0} }