/* =================================================================== LE CAHIER SUR PAPIER =================================================================== Le §8.D du devis prend l'export « par le bon bout » : le besoin réel — remettre le Cahier à quelqu'un qui arrive, ou à quelqu'un qui n'a pas de compte — se sert d'une feuille d'impression. Le navigateur fait le PDF, on n'ajoute aucune dépendance, et le sommaire, les articles et les images sont déjà tous dans la page. Un PDF généré côté serveur (dompdf, wkhtmltopdf) aurait coûté une dépendance ET un second chemin de rendu à tenir en accord avec le premier, pour un résultat que le navigateur produit déjà. ── POURQUOI CE FICHIER A LE DROIT D'ÉCRIRE DES COULEURS ───────────── Il est inscrit dans `DesignSystemRulesTest::PALETTES`, avec `tokens.css` et `brand.css`, et la raison tient en une phrase : **le papier n'a pas de thème.** Les jetons de l'app sont pilotés par `data-theme`. Quelqu'un qui lit en sombre et qui imprime obtient du texte presque blanc — les navigateurs n'impriment pas les fonds par défaut, mais ils n'inventent pas non plus une couleur de texte. La page sort blanche sur blanc. Ce n'est pas un cas limite : c'est ce qui arrive à qui a choisi le thème sombre, c'est-à-dire à la moitié des gens. Ces valeurs ne vont pas dans `tokens.css`, et la raison a changé le 2026-08-10 sans changer la conclusion : ce fichier était alors comparé DÉCLARATION PAR DÉCLARATION à celui de `mil-membres`, dépôt mort depuis, et un contexte de plus l'aurait fait échouer. Ce qui reste est plus simple — `tokens.css` décrit l'ÉCRAN, ses trois contextes sont ceux du thème et de la palette, et le papier n'en est pas un quatrième. ── ET POURQUOI `!important`, QUI NE SE VOIT NULLE PART AILLEURS ───── Parce qu'il faut battre TOUTES les combinaisons de thème et de palette sans les énumérer : `:root[data-palette="cb"][data-theme="dark"]` est plus spécifique que tout ce qu'on écrirait ici, et la liste grandirait à chaque palette ajoutée. Sur une propriété personnalisée, `!important` gagne quelle que soit la spécificité — c'est l'outil exact du problème, et il est borné à `@media print`. =================================================================== */ @media print { /* ── Les jetons, ramenés au papier ───────────────────────────────── Des gris neutres et non la palette claire de l'app : un accent de coop imprimé sur une laser monochrome devient un gris pâle, et un lien qu'on ne distingue pas du texte a perdu ce qui en faisait un lien. Le noir tient sur toutes les imprimantes. */ :root { --c-text: #000 !important; --c-text-mid: #333 !important; --c-text-muted: #555 !important; --c-surface: #fff !important; --c-surface-2: #fff !important; --c-hover-bg: #fff !important; --c-border: #bbb !important; --c-border-strong: #777 !important; --c-accent: #000 !important; --c-accent-dark: #000 !important; --c-accent-soft: #eee !important; --c-success: #777 !important; --c-warning: #777 !important; --c-success-text: #000 !important; --c-warning-text: #000 !important; /* ── LES FONDS D'ENCART, ET ILS ONT ÉTÉ OUBLIÉS UNE FOIS ──────────── Vu en aperçu : en thème sombre, la responsabilité et l'avertissement gardaient leur fond vert bouteille et brun foncé, avec le texte passé au noir par-dessus. Illisible. « Les navigateurs n'impriment pas les fonds par défaut » ne sauve pas : c'est une CASE À COCHER, l'export PDF de Chrome l'active souvent, et une feuille d'impression ne peut pas dépendre d'un réglage qu'on ne contrôle pas. Les trois encarts gardent donc leur bord gauche — c'est lui qui les distingue — sur un gris assez pâle pour rester lisible en noir. */ --c-success-soft: #f2f2f2 !important; --c-warning-soft: #f2f2f2 !important; --c-danger-soft: #f2f2f2 !important; } @page { margin: 2cm; } body { background: #fff !important; color: #000 !important; } /* ── Ce qui ne s'imprime pas ─────────────────────────────────────── Tout ce qui est un GESTE plutôt qu'un contenu. Le rail et la barre du bas mènent ailleurs, la recherche ne cherche rien sur papier, et un lien « Modifier » imprimé est une porte peinte. Il y avait ici un `.cahier-hero` : l'écran ne pose plus de bandeau (2026-08-14), donc le papier n'a plus rien à en cacher. LES ACTIONS DE LA BARRE partent avec le reste des gestes — le champ de recherche et le `···` sont deux portes peintes sur du papier. Le TITRE, lui, reste : c'est le `

` du document, et une page imprimée qui ne dit pas ce qu'elle est ne se reclasse pas. LES CRAYONS DES RUBRIQUES partent aussi, et ils sont la seule addition du 2026-08-14 : les gestes ont quitté le bas de la carte pour son en-tête, donc la règle qui les retirait par `.cahier-card-actions` ne visait plus rien. Une icône imprimée est pire qu'un lien imprimé — elle ne dit même pas ce qu'elle promettait. */ .rail, .toasts, .apphead-actions, .cahier-search-bar, .cahier-card-gestes, .cahier-hors-papier, #cahier-noresult { display: none !important; } /* La barre cesse de coller et rend ses bords : sur papier il n'y a pas de fenêtre à laquelle se fixer, et `position: sticky` fait répéter le bloc en tête de chaque page chez certains moteurs. Elle redevient ce qu'elle est au fond — le titre du document, suivi de son contenu. */ .cahier-entete { position: static !important; border: 0; margin: 0; padding: 0; } /* La coquille cesse d'être une coquille : plus de colonnes, plus de hauteur d'écran, plus de défilement interne. */ .shell, .shell-main, .wrap, .panel { display: block; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; } .cahier-layout { display: block; } /* ── LE SOMMAIRE DEVIENT UNE TABLE DES MATIÈRES ──────────────────── C'est un `
`, et sur papier un tiroir fermé est un trou. On le force ouvert avec la même mécanique que le bureau — le `::details-content` plutôt qu'un `display` sur le corps, parce que c'est le moteur qui décide de la visibilité d'un `
` fermé. Il perd son ancrage collant : rien ne défile sur du papier, et une hauteur bornée à l'écran couperait la moitié des rubriques. */ .cahier-toc { position: static; max-height: none; overflow: visible; break-after: page; } .cahier-toc > summary { display: none; } /* LES CIBLES DE 44 PX N'ONT PAS DE SENS SUR DU PAPIER (§0, règle 9 : elle vaut pour le pouce). Vu à l'écran en aperçu : vingt-quatre rubriques espacées pour le doigt prenaient deux pages entières de table des matières avant le premier article. Ramenées à leur hauteur de ligne, elles en tiennent sur une demie. */ .cahier-links a { padding: 0; min-height: 0; } .cahier-group + .cahier-group { margin-top: var(--space-3); } .cahier-toc::details-content { content-visibility: visible; } /* ── Les ruptures de page ────────────────────────────────────────── Un article coupé en deux au milieu d'une consigne de sécurité est exactement ce qu'on vient chercher sur papier et qu'on ne trouve pas. Les encarts non plus ne se coupent pas : ils tiennent en quelques lignes, et leur bord gauche perdrait son sens. */ .cahier-card, .cahier-resp, .cahier-warn, .cahier-info, .cahier-gallery { break-inside: avoid; } /* Un titre en bas de page dont le texte commence sur la suivante. */ .group-head, .cahier-card-title, .cahier-sub-t, .cahier-resp-head, .cahier-warn-head { break-after: avoid; } .group-head { break-before: page; } /* ── L'ADRESSE D'UN LIEN, ÉCRITE ─────────────────────────────────── Sur papier un lien n'est plus cliquable : « le règlement » ne mène nulle part, et le Cahier en porte vingt-deux. L'adresse s'écrit donc à côté — pour les liens SORTANTS seulement. Deux exclusions, et chacune évite du bruit : une ancre interne (`#hotte`) désigne une rubrique qui est dans le document qu'on tient, et le lien qui emballe une photo (« ouvrir en grand ») imprimerait l'adresse du fichier image sous chaque photo. */ .cahier-main a[href^="http"]:not(.cahier-ph-link)::after { content: " (" attr(href) ")"; color: #333; word-break: break-all; } /* Les photos ne débordent pas de la page, et gardent leurs proportions. La galerie s'aligne comme à l'écran. */ .cahier-ph img { max-width: 100%; max-height: 7cm; height: auto; } /* ── LA VISIONNEUSE NE S'IMPRIME PAS ─────────────────────────────── Elle est ouverte au moment où l'on imprime, ou elle n'est pas là. Ouverte, elle donnerait une première page entièrement voilée avec une photo au milieu, et le Cahier commencerait à la deuxième. Ce qu'on imprime est le document, pas ce qu'on avait sous les yeux — les photos sont déjà dans leurs articles, à leur place. */ .cahier-visio { display: none; } /* Et le blocage du défilement qui l'accompagne se défait : sur papier, un `overflow: hidden` sur la racine coupe le document à la première page dans plusieurs moteurs. */ .cahier-visio-ouverte { overflow: visible; } /* ═══════════════════════════════════════════════════════════════════ L'AUTO-ÉVALUATION SUR PAPIER (PLAN-PARTICIPATION §4.3) ═══════════════════════════════════════════════════════════════════ La politique prévoit un dossier qu'on RESTITUE en entretien, que la personne lit et signe. Une coop qui tient cet entretien avec une feuille sur la table doit pouvoir l'imprimer, et le navigateur sait le faire : pas de PDF fabriqué par le serveur, pas de dépendance (système de design, règle 10). ── CE QUI CHANGE ENTRE L'ÉCRAN ET LE PAPIER ────────────────────── À l'écran, un volet à la fois : c'est la règle 1 de la charte, et elle vaut parce qu'on RÉPOND. Sur papier on ne répond pas, on LIT — et une feuille qui ne montrerait qu'un domaine sur huit serait une feuille fausse. Les volets se rouvrent donc tous. Le rail et le bouton d'envoi partent : une colonne de navigation et un bouton imprimés sont deux choses sur lesquelles on ne peut pas appuyer. */ .impl-volet[hidden] { display: block !important; } .dossier-nav-zone, .auth-submit { display: none !important; } /* LE REPLI S'OUVRE SUR PAPIER. Les indicateurs et la source de vérification sont ce qui rend une appréciation défendable (§5.2) ; les laisser fermés imprimerait la question sans ce sur quoi elle se juge. Même geste que le sommaire du Cahier plus haut — un `[open]` posé par script ne survivrait pas à une page servie sans script, `::details-content` si. */ .impl-fin::details-content { display: block !important; content-visibility: visible !important; } /* UN DOMAINE PAR PAGE ? NON — deux ou trois y tiennent, et huit pages pour huit questions feraient une liasse que personne n'agrafe. On interdit seulement la COUPURE au milieu d'un volet : une question dont les crans sont sur la page suivante est une question qu'on répond deux fois. */ .impl-volet { break-inside: avoid; page-break-inside: avoid; } /* La promesse de visibilité reste : sur une feuille qui circule, « qui verra quoi » est justement ce qu'on relit. */ } /* =================================================================== LE RAPPORT DE PARTICIPATION AU CA (2026-10-06) =================================================================== La page vit dans la fenêtre figée (`.ecran`, `.ecran-defile`) : à l'écran seule la zone du bas défile, sur papier il n'y a rien à faire défiler, et une hauteur bornée couperait le rapport à la première page. Les liens « vers l'onglet » sont des portes peintes : partis. */ @media print { .shell-main-ecran, .ecran, .ecran-corps, .ecran-contenu, .ecran-defile { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; } .part-suite, .part-imprimer { display: none !important; } .part-dash { display: block; } .part-dash > .dash-card { break-inside: avoid; margin-bottom: 12pt; } .part-table tr { break-inside: avoid; } }