courcellematthi/assets/css/print.css

/* ==========================================================================
   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; }