courcellematthi/assets/css/print.css

/* ==========================================================================
   print.css — Feuille d'impression : CV classique sur UNE page
   --------------------------------------------------------------------------
   Chargée via media="print" : elle n'est pas prioritaire pour l'affichage
   écran et ne pénalise donc pas le rendu initial.

   PARTI PRIS
   ----------
   L'écran et le papier ne servent pas le même usage. À l'écran, le visiteur
   parcourt, revient, approfondit : les descriptions de cours ont leur place.
   Sur papier, un recruteur trie une pile en quelques secondes — il veut les
   postes, les compétences, les diplômes et de quoi rappeler.

   Cette feuille ne masque donc pas « un peu » de contenu : elle recompose le
   document en CV classique. Sont retirés le texte de présentation, les
   descriptions de cours, les projets, la navigation et tous les boutons.
   Sont conservés les intitulés de cours, sous forme compacte, parce qu'ils
   disent ce que recouvrent réellement les postes.

   Ce fichier n'utilise pas @layer : chargé en media="print", il doit
   surcharger toutes les couches sans discussion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FORMAT DE PAGE
   Marges resserrées à 10 mm : la contrainte d'une page unique se gagne
   d'abord sur les marges, avant de rogner sur la taille du texte.
   -------------------------------------------------------------------------- */
@page {
  size: A4 portrait;
  margin: 12mm 13mm;
}

/* --------------------------------------------------------------------------
   MASQUAGE
   Tout ce qui relève de la navigation, de l'interaction ou du récit.
   -------------------------------------------------------------------------- */
.site-header,
.skip-link,
.nav-toggle,
.site-nav,
.to-top,
.actions,
.screen-only,
.site-footer,
.intro,                 /* Texte de présentation — récit, pas CV */
#projets,               /* Section projets */
.course__desc,          /* Descriptions de cours */
.entry__note {          /* Commentaires de poste */
  display: none !important;
}

.print-only { display: block !important; }

/* --------------------------------------------------------------------------
   BASE
   Noir sur blanc : lisible sur toute imprimante, y compris monochrome.
   -------------------------------------------------------------------------- */
body {
  background: #fff;
  color: #000;
  font-size: 9.1pt;
  line-height: 1.42;
}

.container {
  max-inline-size: none;
  padding-inline: 0;
}

main > .container { display: block; }

/* --------------------------------------------------------------------------
   EN-TÊTE
   Nom, fonction et coordonnées compressés en un bandeau de trois lignes.
   -------------------------------------------------------------------------- */
.masthead {
  padding-block: 0 6pt;
  margin-block-end: 8pt;
  border-block-end: 1pt solid #000;
}

.eyebrow { display: none; }

.page-title {
  font-size: 21pt;
  letter-spacing: -0.5pt;
  margin-block-end: 3pt;
}

.page-subtitle {
  font-size: 10.5pt;
  color: #333;
  max-inline-size: none;
  margin-block-end: 7pt;
}

/* Coordonnées sur une seule ligne */
.contact-list {
  gap: 0 18pt;
  font-size: 9pt;
  color: #000;
}

.contact-list__icon { stroke: #000; }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.section {
  padding-block: 7.5pt 0;
  border-block-start: 0;
}

.section-title {
  font-size: 11pt;
  margin-block-end: 5.5pt;
  padding-block-end: 2.5pt;
  border-block-end: 0.5pt solid #999;
  break-after: avoid;
}

.section-title::before { content: none; }

/* --------------------------------------------------------------------------
   POSTES
   Le trait de chronologie et la pastille sont retirés : sur papier ils
   coûtent 6 mm de marge gauche pour un gain de lisibilité nul.
   -------------------------------------------------------------------------- */
.entry {
  border-inline-start: 0;
  padding-inline-start: 0;
  padding-block-end: 7pt;
  break-inside: avoid;
}

.entry::before { content: none; }

.entry__date {
  font-size: 8.6pt;
  font-weight: 700;
  color: #000;
  margin-block-end: 0;
  float: right;          /* Date alignée à droite, à hauteur de l'intitulé */
}

.entry__role {
  font-size: 10.3pt;
  margin-block-end: 1pt;
  break-after: avoid;
}

.entry__org {
  font-size: 9pt;
  color: #444;
  margin-block-end: 4pt;
}

/* --------------------------------------------------------------------------
   INTITULÉS DE COURS
   Transformés en énumération courante séparée par des points médians.
   Neuf fiches empilées occupaient 40 mm ; en ligne, elles tiennent en 12 mm.
   -------------------------------------------------------------------------- */
.course {
  display: inline;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.course__name {
  display: inline;
  font-family: inherit;
  font-size: 8.9pt;
  font-weight: 400;
  color: #222;
}

.course__name::before { content: none; }

.course + .course .course__name::before {
  content: " · ";
  color: #888;
}

/* --------------------------------------------------------------------------
   COORDINATION — liste ramenée sur une ligne
   -------------------------------------------------------------------------- */
#coordination .marker-list li {
  display: inline;
  padding-inline-start: 0;
  margin: 0;
  font-size: 8.9pt;
  color: #222;
}

#coordination .marker-list li::before { content: none; }

#coordination .marker-list li + li::before {
  content: " · ";
  color: #888;
}

/* --------------------------------------------------------------------------
   COMPÉTENCES
   Trois colonnes serrées, sans cadre : les bordures de cartes mangeraient
   la place et n'apportent rien sur papier.
   -------------------------------------------------------------------------- */
#competences .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7pt 16pt;
}

.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  transform: none;
  break-inside: avoid;
}

.card__title {
  font-size: 9.3pt;
  margin-block-end: 3pt;
  gap: 4pt;
  /* Sur deux lignes (« Intelligence artificielle appliquée »), l'icône doit
     rester alignée sur la première ligne et non se centrer entre les deux. */
  align-items: flex-start;
}

.card__icon {
  inline-size: 9pt;
  block-size: 9pt;
  stroke: #000;
  margin-block-start: 1pt;   /* Recale l'icône sur la ligne de base du texte */
}

.card .marker-list { font-size: 8.5pt; }

.card .marker-list li {
  margin-block-end: 1pt;
  padding-inline-start: 7pt;
  line-height: 1.34;
}

.card .marker-list li::before { color: #666; }

/* --------------------------------------------------------------------------
   FORMATION
   -------------------------------------------------------------------------- */
#formation .grid {
  grid-template-columns: 1fr 1fr;
  gap: 14pt;
}

.education {
  border-inline-start: 0;
  padding-inline-start: 0;
  break-inside: avoid;
}

.education .entry__date { float: none; }

.education__degree {
  font-size: 9.8pt;
  margin-block-end: 1pt;
}

.education__school {
  font-size: 8.8pt;
  color: #444;
}

/* --------------------------------------------------------------------------
   CONTACT
   La section est retirée : les coordonnées figurent déjà dans l'en-tête,
   les répéter en bas de page gaspillerait les derniers millimètres.
   -------------------------------------------------------------------------- */
#contact { display: none !important; }

/* --------------------------------------------------------------------------
   LIENS
   Sur papier, un lien dont on ne voit pas la cible est inutile — mais ici
   l'adresse du site est déjà écrite en toutes lettres dans les coordonnées.
   Ajouter l'URL entre parenthèses ferait doublon.
   -------------------------------------------------------------------------- */
a {
  color: #000;
  text-decoration: none;
}

a::after { content: "" !important; }

/* --------------------------------------------------------------------------
   VEUVES ET ORPHELINES
   -------------------------------------------------------------------------- */
p, li {
  orphans: 2;
  widows: 2;
}

/* ==========================================================================
   OPTION — RÉINTÉGRER LES PROJETS
   --------------------------------------------------------------------------
   Les projets sont masqués par défaut : le CV imprimé se limite aux postes,
   aux compétences et aux formations.

   Vérifié en test : les réintégrer sous cette forme compacte tient encore
   sur une seule page A4, et remplit le quart de page actuellement vide.
   C'est un arbitrage à faire selon le destinataire — underscorelab, Festifun
   et les outils IA sont ce qui distingue ce CV d'un profil d'enseignant
   classique, mais un jury de recrutement statutaire n'en a pas l'usage.

   POUR LES AFFICHER :
     1. Retirer la ligne « #projets, » du bloc de masquage, plus haut
     2. Décommenter le bloc ci-dessous
   ========================================================================== */

/*
#projets .project {
  background: transparent;
  border: 0;
  padding: 0;
  margin-block-end: 2.5pt;
  break-inside: avoid;
}

#projets .project__header {
  margin-block-end: 0;
  gap: 0 5pt;
}

#projets .project__title {
  display: inline;
  font-size: 8.8pt;
}

#projets .badge {
  background: transparent;
  border: 0;
  padding: 0;
  color: #555;
  font-size: 7.6pt;
}

#projets .badge::before { content: "— "; }

#projets .project__desc {
  font-size: 8pt;
  color: #222;
  max-inline-size: none;
}

#projets .project__desc + .project__desc { display: none; }
#projets .project__stack { display: none; }
*/