/* ========================================================================= verdier.css — charte commune de l'Atelier du Verdier ========================================================================= FICHIER DU KIT. Il vit dans le dépôt « site », et il est RECOPIÉ dans chaque site satellite par outils/diffuser_kit.py (chantier 3). Ne pas l'éditer dans une copie : la copie sera écrasée au prochain envoi. Source : atelierduverdier/site — kit/verdier.css Les jetons ci-dessous sont repris TELS QUELS du site laser (laser.atelierduverdier.fr), qui servait déjà cette charte. Aucune valeur n'a été retouchée : le but du kit est d'arrêter la divergence, pas d'ouvrir un troisième dialecte. Ce que le kit NE contient PAS, volontairement : les composants propres à un seul site (les cartes de mode et les schémas du site laser, les couleurs de phase du journal PrintNC). Chaque site garde sa feuille locale pour ça, chargée APRÈS celle-ci. ========================================================================= */ /* ---------- 1. Jetons --------------------------------------------------- Trois blocs et non un seul : le premier donne le thème clair par défaut, le second suit le réglage du système, le troisième laisse le bouton de bascule forcer un thème via data-theme sur . Sans le troisième, le bouton ne peut pas contredire le système. */ :root{ --orange:#ff8a00; --orange-d:#e67a00; --orange-soft:#fff3e2; --slate:#2f3540; --slate-2:#3c434f; --bg:#ffffff; --bg-2:#f6f7f9; --bg-3:#eef0f3; --fg:#23272e; --fg-2:#5a626e; --fg-3:#858d99; --line:#e2e5ea; --line-2:#d3d8df; --card:#ffffff; --shadow:0 1px 2px rgba(20,25,35,.06),0 8px 24px rgba(20,25,35,.06); --tip:#eaf6ee; --tip-b:#3f9d5a; --warn:#fdf0e6; --warn-b:#e07a1f; --note:#eaf0fb; --note-b:#3f6fd1; --radius:14px; --maxw:1180px; } @media (prefers-color-scheme: dark){ :root{ --orange:#ff9a1f; --orange-d:#ffab45; --orange-soft:#3a2b12; --slate:#0f1215; --slate-2:#191d23; --bg:#14171b; --bg-2:#1a1e23; --bg-3:#22272e; --fg:#e6e9ee; --fg-2:#a8b0bc; --fg-3:#7c8592; --line:#2a3038; --line-2:#353c46; --card:#1b1f25; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --tip:#17281c; --tip-b:#48a765; --warn:#2e2113; --warn-b:#e08b3a; --note:#161f30; --note-b:#5183e0; } } :root[data-theme="dark"]{ --orange:#ff9a1f; --orange-d:#ffab45; --orange-soft:#3a2b12; --slate:#0f1215; --slate-2:#191d23; --bg:#14171b; --bg-2:#1a1e23; --bg-3:#22272e; --fg:#e6e9ee; --fg-2:#a8b0bc; --fg-3:#7c8592; --line:#2a3038; --line-2:#353c46; --card:#1b1f25; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --tip:#17281c; --tip-b:#48a765; --warn:#2e2113; --warn-b:#e08b3a; --note:#161f30; --note-b:#5183e0; } :root[data-theme="light"]{ --orange:#ff8a00; --orange-d:#e67a00; --orange-soft:#fff3e2; --slate:#2f3540; --slate-2:#3c434f; --bg:#ffffff; --bg-2:#f6f7f9; --bg-3:#eef0f3; --fg:#23272e; --fg-2:#5a626e; --fg-3:#858d99; --line:#e2e5ea; --line-2:#d3d8df; --card:#ffffff; --shadow:0 1px 2px rgba(20,25,35,.06),0 8px 24px rgba(20,25,35,.06); --tip:#eaf6ee; --tip-b:#3f9d5a; --warn:#fdf0e6; --warn-b:#e07a1f; --note:#eaf0fb; --note-b:#3f6fd1; } /* ---------- 2. Base ---------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:74px} body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--orange-d); text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{line-height:1.25; color:var(--fg); font-weight:700} h2{font-size:1.75rem; margin:0 0 .2em; letter-spacing:-.01em} h3{font-size:1.22rem; margin:1.6em 0 .4em} h4{font-size:1.02rem; margin:1.2em 0 .3em} p{margin:.7em 0} code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.88em; background:var(--bg-3); padding:.12em .4em; border-radius:5px} kbd{font:inherit; font-size:.85em; background:var(--bg-3); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:1px 7px} ul.clean{margin:.6em 0; padding-left:1.25em} ul.clean li{margin:.35em 0} img{max-width:100%} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px} .muted{color:var(--fg-3); font-size:.85rem} .pill{display:inline-block; background:var(--bg-3); border:1px solid var(--line); border-radius:8px; padding:2px 9px; font-size:.82rem; color:var(--fg-2)} /* Accessibilité : rendre le focus clavier visible. Absent du site laser, ajouté ici — une charte partagée est le bon endroit pour ça. */ :focus-visible{outline:2px solid var(--orange); outline-offset:2px; border-radius:4px} /* ---------- 3. En-tête ------------------------------------------------- */ header.topbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .topbar .wrap{display:flex; align-items:center; gap:16px; height:60px} .brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg)} .brand:hover{text-decoration:none} .brand .dot{width:26px;height:26px;border-radius:7px;background:#fff; border:1px solid var(--line);display:grid;place-items:center;flex:none} .brand .dot svg{width:17px;height:17px;display:block} .brand .dot img{height:20px;width:auto;display:block} /* La marque « chapeau » : variante du .dot sans plaque blanche. Le chapeau est NOIR et porte son propre liseré blanc — c'est ce liseré qui le détache du fond sombre. Ne PAS le repeindre en blanc pour le faire ressortir : ce n'est plus le logo. */ .brand .chapeau{height:26px;width:auto;display:block;flex:none} /* Le logo complet (chapeau + mot-symbole), collé en ligne par le générateur. Son mot-symbole est en `currentColor` : il prend donc la couleur de texte du contexte, et suit le thème. Le chapeau, lui, garde ses couleurs propres. */ .brand svg.logo{height:26px;width:auto;display:block;flex:none;color:var(--fg)} @media(max-width:430px){ .brand svg.logo{height:22px} } .hero-art svg.logo{width:100%;max-width:330px;height:auto;color:var(--fg)} .brand-sub{color:var(--fg-3); font-weight:500; font-size:.9rem; border-left:1px solid var(--line-2); padding-left:10px; margin-left:2px} @media(max-width:620px){ .brand-sub{display:none} } .navlinks{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap} .navlinks a{color:var(--fg-2); padding:6px 11px; border-radius:8px; font-size:.92rem; font-weight:500} .navlinks a:hover{background:var(--bg-3); color:var(--fg); text-decoration:none} .navlinks a[aria-current="page"]{color:var(--orange-d); background:var(--orange-soft)} .theme-btn,.nav-btn{border:1px solid var(--line-2); background:var(--card); color:var(--fg-2); width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:1.05rem; flex:none} .theme-btn{margin-left:6px} .theme-btn:hover,.nav-btn:hover{color:var(--fg); border-color:var(--orange)} .nav-btn{display:none; margin-left:auto} /* montré seulement en étroit */ /* Navigation en étroit — le chantier 0 laissait `.navlinks` en display:none sans rien pour la remplacer : sous 860 px il n'y avait plus AUCUNE navigation. Acceptable sur une page unique à ancres, pas sur un portail. Le menu est un panneau déroulant, sans dépendance : si le JS ne se charge pas, le bouton reste inerte mais rien d'autre ne casse. */ @media(max-width:860px){ .nav-btn{display:block} .theme-btn{margin-left:0} .navlinks{ display:none; position:absolute; left:0; right:0; top:60px; flex-direction:column; gap:2px; margin:0; padding:10px 14px 14px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow); } .navlinks.ouvert{display:flex} .navlinks a{padding:10px 12px; font-size:1rem} } /* ---------- 4. Héros --------------------------------------------------- */ .hero{background: radial-gradient(1200px 400px at 80% -100px, color-mix(in srgb,var(--orange) 22%, transparent), transparent 60%), linear-gradient(180deg,var(--bg-2),var(--bg)); border-bottom:1px solid var(--line); padding:56px 0 48px} .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center} @media(max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:26px} } .hero h1{font-size:2.7rem; letter-spacing:-.02em; margin:.1em 0 .1em} @media(max-width:820px){ .hero h1{font-size:2.1rem} } .hero .lede{font-size:1.16rem; color:var(--fg-2); max-width:46ch; margin:.5em 0 1.3em} .hero-art{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; display:grid; place-items:center} .badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px} .badge{font-size:.8rem; font-weight:600; padding:5px 11px; border-radius:20px; background:var(--bg-3); color:var(--fg-2); border:1px solid var(--line)} .badge b{color:var(--orange-d)} /* L'encart « ≈ N heures pour en arriver là ». Le chiffre qu'il contient est RECALCULÉ (outils/chiffrer_effort.py côté LaserAtelier), jamais retapé. */ .effort{margin:26px 0 0; padding:11px 15px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:.8rem; line-height:1.5; color:var(--fg-2)} .effort b{color:var(--fg)} .effort .qui{display:block; margin-top:.35em; font-size:.79rem; opacity:.9} /* ---------- 5. Boutons ------------------------------------------------- */ .cta{display:flex; flex-wrap:wrap; gap:12px} .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.96rem; padding:11px 20px; border-radius:11px; cursor:pointer; border:1px solid transparent} .btn-primary{background:var(--orange); color:#20160a} .btn-primary:hover{background:var(--orange-d); text-decoration:none} .btn-ghost{background:var(--card); color:var(--fg); border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--orange); text-decoration:none} .btn-kofi{background:var(--card); color:#ff5e5b; border-color:#ff5e5b; font-weight:600} .btn-kofi:hover{background:#ff5e5b; color:#fff; text-decoration:none} /* ---------- 6. Sections ------------------------------------------------ */ section{padding:52px 0; border-bottom:1px solid var(--line)} .sec-tag{display:inline-flex; align-items:center; gap:8px; color:var(--orange-d); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px} .sec-lede{color:var(--fg-2); font-size:1.06rem; max-width:70ch; margin:.4em 0 0} /* ---------- 7. Cartes et panneaux -------------------------------------- .carte est le composant générique du portail : une fiche logiciel, une fiche projet. Le site laser garde ses .mode (capture + icône + « quand ») dans sa feuille locale — trop spécifiques pour le kit. */ .cartes{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:26px} .carte{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; display:flex; flex-direction:column} .carte:hover{border-color:var(--orange)} .carte .head{display:flex; align-items:center; gap:11px; margin-bottom:8px} .carte .ci{width:34px;height:34px;border-radius:9px;background:var(--orange-soft); display:grid;place-items:center;flex:none;font-size:1.1rem} .carte .ci img{width:21px;height:21px} .carte h3{margin:0; font-size:1.12rem} .carte p{margin:.35em 0 0; font-size:.93rem; color:var(--fg-2); line-height:1.55} .carte .liens{margin-top:auto; padding-top:14px; display:flex; gap:14px; flex-wrap:wrap; font-size:.88rem} /* État d'un projet : le point de couleur qui dit « publié / privé / en cours ». */ .etat{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--fg-2); margin-left:auto; flex:none} .etat::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--fg-3)} .etat.public::before{background:var(--tip-b)} .etat.prive::before{background:var(--warn-b)} .etat.chantier::before{background:var(--note-b)} .cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px} @media(max-width:760px){ .cols{grid-template-columns:1fr} } .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px} .panel h3{margin-top:.2em} /* ---------- 7bis. Figures et formules ----------------------------------- Deux familles bien distinctes, et la différence n'est pas cosmétique : .figure = schéma DESSINÉ pour le site, en SVG en ligne. Il utilise les variables du thème (currentColor, var(--orange)…) donc il suit le thème clair/sombre tout seul. .plan = planche TechDraw exportée depuis FreeCAD. Ses traits sont en #212529 en dur : sur fond sombre elle serait INVISIBLE. D'où la plaque claire fixe, comme les schémas du site laser. */ .figure{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 18px 14px; margin:22px 0; box-shadow:var(--shadow)} .figure svg{display:block; width:100%; height:auto; margin:0 auto; max-width:640px} .figure figcaption{text-align:center; color:var(--fg-2); font-size:.86rem; margin-top:14px; line-height:1.5} .figure figcaption b{color:var(--fg)} .plan{background:#fdfdfd; border:1px solid var(--line); border-radius:12px; padding:14px; margin:22px 0; box-shadow:var(--shadow)} .plan img{display:block; width:100%; height:auto; border-radius:6px} .plan figcaption{text-align:center; color:#5a626e; font-size:.85rem; margin-top:12px} .plan figcaption code{background:#eef0f3; color:#2f3540} /* .capture = copie d'écran d'un logiciel. Contrairement à .plan, PAS de plaque claire imposée : l'image porte déjà son propre fond, et lui en coller un dessous ferait un liseré blanc autour d'une interface sombre. */ .capture{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:10px; margin:22px 0; box-shadow:var(--shadow)} .capture img{display:block; width:100%; height:auto; border-radius:7px} .capture figcaption{color:var(--fg-2); font-size:.88rem; margin:12px 6px 4px; line-height:1.55} .capture figcaption b{color:var(--fg)} /* Les bandeaux de panneaux d'un atelier FreeCAD font 430 px de large, et c'est leur largeur JUSTE : les étirer à la colonne les rendrait flous. D'où une grille qui les pose côte à côte à leur taille, alignés en haut puisqu'ils n'ont pas la même hauteur. */ .panneaux{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,430px)); gap:20px; margin:24px 0; justify-content:center; align-items:start} .capture.panneau{margin:0} .capture.panneau img{max-width:430px; margin:0 auto} .capture.panneau figcaption{text-align:center; font-size:.85rem} .figure-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0} .figure-row .figure,.figure-row .plan,.figure-row .capture{margin:0} @media(max-width:760px){ .figure-row{grid-template-columns:1fr} } /* Traits et remplissages des schémas — nommés une fois pour que les SVG restent lisibles et que le thème s'applique sans les retoucher. */ .figure .trait{stroke:var(--fg); fill:none; stroke-width:1.6} .figure .trait-fin{stroke:var(--fg-3); fill:none; stroke-width:1} .figure .cote{stroke:var(--fg-2); fill:none; stroke-width:1.1} .figure .accent{stroke:var(--orange); fill:none; stroke-width:2.2} .figure .rempli{fill:var(--bg-3); stroke:var(--fg); stroke-width:1.6} .figure .bille{fill:var(--slate); stroke:var(--fg); stroke-width:1.2} .figure .zone-ok{fill:var(--orange); opacity:.14} .figure .zone-non{fill:var(--warn-b); opacity:.13} /* Tailles de texte en `em`, pas en px — et c'est le point à ne pas rater. Un SVG est étiré à la largeur de sa colonne : une figure au viewBox étroit est agrandie davantage qu'une figure large, et le MÊME texte y paraît plus gros. Mesuré : de 10,5 à 18,2 px de rendu pour un 10,5 px déclaré, selon la figure. En `em`, chaque SVG porte sa base (font-size en ligne, calculée pour que le rendu tombe à ~12 px) et toutes les figures s'accordent. */ .figure svg{font-size:12px} /* base par défaut, échelle 1 */ .figure text{fill:var(--fg-2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:400; font-size:1em} .figure text.fort{fill:var(--fg); font-weight:700} .figure text.orange{fill:var(--orange-d); font-weight:700} .figure text.petit{font-size:.875em} .figure text.gros{font-size:1.1em} /* Une formule mise en avant. Pas de MathJax : les formules d'ici tiennent en HTML, et une dépendance externe serait bloquée hors ligne. */ .formule{background:var(--bg-2); border-left:3px solid var(--orange); border-radius:0 10px 10px 0; padding:14px 18px; margin:18px 0; font-size:1.02rem; overflow-x:auto} .formule .res{color:var(--orange-d); font-weight:700} .formule .ou{display:block; color:var(--fg-3); font-size:.85rem; margin-top:6px} var{font-style:italic; font-family:Georgia,"Times New Roman",serif} sub{font-size:.75em} /* Le chiffre-clé d'une section, gros et seul. */ .chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:22px 0} .chiffre{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow)} .chiffre .v{display:block; font-size:1.7rem; font-weight:800; color:var(--orange-d); line-height:1.1; font-variant-numeric:tabular-nums} .chiffre .l{display:block; font-size:.82rem; color:var(--fg-2); margin-top:6px; line-height:1.4} /* ---------- 8. Encarts ------------------------------------------------- */ .callout{border-radius:12px; padding:14px 16px; margin:18px 0; border:1px solid var(--line); background:var(--bg-2); position:relative} .callout p{margin:.3em 0} .callout .ci{font-weight:700; display:block; margin-bottom:2px} .callout.tip{background:var(--tip); border-color:color-mix(in srgb,var(--tip-b) 40%,transparent)} .callout.tip .ci{color:var(--tip-b)} .callout.warn{background:var(--warn); border-color:color-mix(in srgb,var(--warn-b) 45%,transparent)} .callout.warn .ci{color:var(--warn-b)} .callout.note{background:var(--note); border-color:color-mix(in srgb,var(--note-b) 40%,transparent)} .callout.note .ci{color:var(--note-b)} /* ---------- 9. Étapes numérotées --------------------------------------- */ .pipe{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:26px} .step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 14px; box-shadow:var(--shadow); position:relative} .step .n{width:28px;height:28px;border-radius:8px;background:var(--orange-soft);color:var(--orange-d); display:grid;place-items:center;font-weight:800;font-size:.9rem;margin-bottom:9px} .step h4{margin:0 0 3px; font-size:.98rem} .step p{margin:0; font-size:.86rem; color:var(--fg-2); line-height:1.5} /* ---------- 10. Tableaux ------------------------------------------------ .twrap est OBLIGATOIRE autour de chaque table : sans lui, un tableau large fait défiler la page entière de travers sur téléphone. */ .twrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:12px} table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px} th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top} thead th{background:var(--bg-2); font-weight:700; color:var(--fg); white-space:nowrap} tbody tr:last-child td{border-bottom:none} td code{white-space:nowrap} .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .gain{color:var(--tip-b); font-weight:700} /* ---------- 11. FAQ ----------------------------------------------------- */ details.faq{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:12px 0; box-shadow:var(--shadow); overflow:hidden} details.faq summary{cursor:pointer; padding:15px 18px; font-weight:600; list-style:none; display:flex; align-items:center; gap:12px} details.faq summary::-webkit-details-marker{display:none} details.faq summary .q{flex:1} details.faq summary .chev{color:var(--orange-d); transition:transform .2s; flex:none; font-size:1.1rem} details.faq[open] summary .chev{transform:rotate(90deg)} details.faq summary:hover{color:var(--orange-d)} details.faq .a{padding:0 18px 16px; color:var(--fg-2); font-size:.94rem} details.faq .a p:first-child{margin-top:0} /* details.pliable — le repli des passages TECHNIQUES. Différent de .faq : il tient du contenu riche (figures, tableaux, encarts), il est fermé par défaut, et son résumé se lit comme un titre. Christophe l'a demandé le 12/08/2026 : une page qui s'ouvre sur du protocole propriétaire décourage avant d'avoir dit ce que fait le logiciel. Le détail reste là — replié, pas retiré. */ details.pliable{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:14px 0; box-shadow:var(--shadow)} details.pliable>summary{cursor:pointer; padding:16px 20px; list-style:none; display:flex; align-items:baseline; gap:12px} details.pliable>summary::-webkit-details-marker{display:none} details.pliable>summary::before{content:"▸"; color:var(--orange-d); font-size:1.05rem; transition:transform .2s; flex:none; line-height:1} details.pliable[open]>summary::before{transform:rotate(90deg)} details.pliable>summary:hover{color:var(--orange-d)} details.pliable>summary .t{font-weight:700; font-size:1.1rem; color:var(--fg); flex:1} details.pliable>summary:hover .t{color:var(--orange-d)} details.pliable>summary .s{color:var(--fg-3); font-size:.86rem; flex:none} @media(max-width:620px){ details.pliable>summary .s{display:none} } details.pliable .corps{padding:0 20px 18px; border-top:1px solid var(--line); margin-top:2px} details.pliable .corps>:first-child{margin-top:16px} details.pliable .figure,details.pliable .capture{box-shadow:none} /* ---------- 12. Pied ---------------------------------------------------- */ footer{padding:44px 0 60px; color:var(--fg-2)} .foot-grid{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between} .foot-links{display:flex; gap:18px; flex-wrap:wrap} /* ---------- 13. Visionneuse (clic sur une image pour l'agrandir) -------- */ .lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,12,15,.92); cursor:zoom-out} .lightbox.open{display:flex} .lightbox img{max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.6); background:#fff} .lightbox .lb-close{position:absolute; top:14px; right:18px; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; font-size:1.6rem; line-height:1; background:rgba(255,255,255,.14); color:#fff} .lightbox .lb-close:hover{background:rgba(255,255,255,.28)} .lightbox .lb-hint{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:rgba(255,255,255,.6); font-size:.82rem} /* ---------- 14. Impression --------------------------------------------- Le manuel laser part en PDF par WeasyPrint ; autant que le kit ne sabote pas l'impression des autres pages. */ @media print{ header.topbar,.theme-btn,.lightbox{display:none !important} body{background:#fff; color:#000} section{padding:18px 0; break-inside:avoid} .carte,.panel,.callout,.step{break-inside:avoid; box-shadow:none} }