/* ========================================================================== print.css — Feuille de style d'impression -------------------------------------------------------------------------- Chargée via media="print" : elle n'est pas téléchargée en priorité pour l'affichage écran et ne pénalise donc pas le rendu initial. Enjeu réel : un CV est imprimé et exporté en PDF. Une page web imprimée sans feuille dédiée sort avec la navigation, des fonds gris qui vident les cartouches, des liens dont on ne voit pas la cible, et des blocs coupés au milieu. Ce fichier n'utilise pas @layer : chargé en media="print", il doit surcharger toutes les couches sans discussion. ========================================================================== */ /* -------------------------------------------------------------------------- FORMAT DE PAGE -------------------------------------------------------------------------- */ @page { size: A4 portrait; margin: 15mm 14mm; } /* Première page : marge haute réduite, le nom fait office d'en-tête */ @page :first { margin-block-start: 12mm; } /* -------------------------------------------------------------------------- MASQUAGE DES ÉLÉMENTS D'INTERFACE Rien de ce qui sert à naviguer n'a de sens sur papier. -------------------------------------------------------------------------- */ .site-header, .skip-link, .nav-toggle, .site-nav, .to-top, .actions, .screen-only { display: none !important; } /* Éléments réservés à l'impression */ .print-only { display: block !important; } /* -------------------------------------------------------------------------- REMISE À PLAT DES COULEURS Noir sur blanc : lisible sur toute imprimante, y compris monochrome. -------------------------------------------------------------------------- */ body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; } .container { max-inline-size: none; padding-inline: 0; } /* -------------------------------------------------------------------------- GESTION DES SAUTS DE PAGE Arbitrage important : on autorise une entrée de parcours (.entry) à se couper entre deux pages, mais jamais une fiche individuelle (.course, .project, .card). Pourquoi ? Une entrée « Enseignement » contient quatre fiches de cours et dépasse la demi-page. Si on interdit sa coupure, elle bascule en entier sur la page suivante et laisse un vide de plusieurs centimètres. Coupée entre deux fiches, elle reste parfaitement lisible et le document gagne une à deux pages. -------------------------------------------------------------------------- */ .course, .project, .card, .education, .contact-block { break-inside: avoid; } /* Les titres ne restent jamais seuls en bas de page, séparés de leur contenu */ .section-title, .entry__role, .entry__org, .project__title, .card__title, .education__degree { break-after: avoid; } /* Une entrée ne démarre pas en toute fin de page pour n'y poser que sa date */ .entry__date { break-after: avoid; } /* Limite les lignes isolées en haut ou en bas de page (veuves et orphelines) */ p, li { orphans: 3; widows: 3; } /* -------------------------------------------------------------------------- MISE EN PAGE -------------------------------------------------------------------------- */ .masthead { padding-block: 0 10pt; border-block-end: 1pt solid #000; } .section { padding-block: 10pt; border-block-start: 0.5pt solid #ccc; } .intro { padding-block: 10pt; } .intro__text--highlight { border-inline-start: 2pt solid #666; padding-inline-start: 8pt; } /* Grilles : deux colonnes fixes, plus compact que l'auto-fit écran */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; } /* -------------------------------------------------------------------------- CARTES ET FICHES Fonds supprimés, ombres supprimées, bordures fines. -------------------------------------------------------------------------- */ .course, .project, .card, .contact-block { background: transparent; border: 0.5pt solid #bbb; box-shadow: none; padding: 6pt 8pt; margin-block-end: 5pt; transform: none; } .entry { border-inline-start: 0.5pt solid #999; padding-block-end: 10pt; } .entry::before { background: #fff; border-color: #000; } .education { border-inline-start: 0.5pt solid #999; } /* -------------------------------------------------------------------------- ACCENTS EN NIVEAUX DE GRIS Le vert #05BC8A imprimé en monochrome donne un gris très clair, quasi invisible. On force le noir sur tous les éléments porteurs d'information. -------------------------------------------------------------------------- */ .eyebrow, .eyebrow::before, .entry__date, .section-title::before, .course__name::before, .marker-list li::before { color: #000; } .badge { background: transparent; border: 0.5pt solid #999; color: #333; } .project__stack li { background: transparent; border: 0.5pt solid #ccc; color: #444; } /* Icônes SVG inline */ .card__icon, .contact-list__icon { stroke: #000; } /* -------------------------------------------------------------------------- LIENS Sur papier, un lien dont on ne voit pas la cible est inutile. On affiche l'URL entre parenthèses — sauf pour mailto et les ancres internes, où l'adresse est déjà visible ou sans objet. -------------------------------------------------------------------------- */ a { color: #000; text-decoration: none; } .contact-list a[href^="http"]::after, .site-footer a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; } a[href^="#"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after { content: ""; } /* -------------------------------------------------------------------------- PIED DE PAGE -------------------------------------------------------------------------- */ .site-footer { border-block-start: 0.5pt solid #ccc; padding-block: 6pt 0; } .site-footer__inner { font-size: 8pt; } .site-footer__links { display: none; }