maj: email et impression cv

2026-08-24 09:36:25 +02:00
parent 96df19db99
commit 830db5dca7
7 changed files with 340 additions and 177 deletions
@@ -1,13 +1,21 @@
 /* ==========================================================================
-   print.css — Feuille de style d'impression
+   print.css — Feuille d'impression : CV classique sur UNE page
   --------------------------------------------------------------------------
-   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.
+   Chargée via media="print" : elle n'est pas prioritaire 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.
+   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.
@@ -15,20 +23,17 @@

 /* --------------------------------------------------------------------------
   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: 15mm 14mm;
-}
-
-/* Première page : marge haute réduite, le nom fait office d'en-tête */
-@page :first {
-  margin-block-start: 12mm;
+  margin: 12mm 13mm;
 }

 /* --------------------------------------------------------------------------
-   MASQUAGE DES ÉLÉMENTS D'INTERFACE
-   Rien de ce qui sert à naviguer n'a de sens sur papier.
+   MASQUAGE
+   Tout ce qui relève de la navigation, de l'interaction ou du récit.
   -------------------------------------------------------------------------- */
 .site-header,
 .skip-link,
@@ -36,22 +41,26 @@
 .site-nav,
 .to-top,
 .actions,
-.screen-only {
+.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;
 }

-/* Éléments réservés à l'impression */
 .print-only { display: block !important; }

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

 .container {
@@ -59,167 +68,293 @@ body {
  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;
-}
+main > .container { display: block; }

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

-.section {
-  padding-block: 10pt;
-  border-block-start: 0.5pt solid #ccc;
+.eyebrow { display: none; }
+
+.page-title {
+  font-size: 21pt;
+  letter-spacing: -0.5pt;
+  margin-block-end: 3pt;
 }

-.intro { padding-block: 10pt; }
-
-.intro__text--highlight {
-  border-inline-start: 2pt solid #666;
-  padding-inline-start: 8pt;
+.page-subtitle {
+  font-size: 10.5pt;
+  color: #333;
+  max-inline-size: none;
+  margin-block-end: 7pt;
 }

-/* 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 {
+/* Coordonnées sur une seule ligne */
+.contact-list {
+  gap: 0 18pt;
+  font-size: 9pt;
  color: #000;
 }

-.badge {
-  background: transparent;
-  border: 0.5pt solid #999;
-  color: #333;
+.contact-list__icon { stroke: #000; }
+
+/* --------------------------------------------------------------------------
+   SECTIONS
+   -------------------------------------------------------------------------- */
+.section {
+  padding-block: 7.5pt 0;
+  border-block-start: 0;
 }

-.project__stack li {
-  background: transparent;
-  border: 0.5pt solid #ccc;
+.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;
-}
-
-/* Icônes SVG inline */
-.card__icon,
-.contact-list__icon {
-  stroke: #000;
+  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.
-   On affiche l'URL entre parenthèses — sauf pour mailto et les ancres
-   internes, où l'adresse est déjà visible ou sans objet.
+   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;
 }

-.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: "";
-}
+a::after { content: "" !important; }

 /* --------------------------------------------------------------------------
-   PIED DE PAGE
+   VEUVES ET ORPHELINES
   -------------------------------------------------------------------------- */
-.site-footer {
-  border-block-start: 0.5pt solid #ccc;
-  padding-block: 6pt 0;
+p, li {
+  orphans: 2;
+  widows: 2;
 }

-.site-footer__inner { font-size: 8pt; }
-.site-footer__links { display: none; }
+/* ==========================================================================
+   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; }
+*/