maj: email et impression cv

.well-known/security.txt

@@ -2,7 +2,7 @@
 # Site personnel statique : la surface d'attaque est minimale, mais déclarer
 # un canal de contact reste une bonne pratique.
 
-Contact: mailto:m@tthieu.be
+Contact: mailto:courcelle.m@tthieu.be
 Expires: 2027-08-04T00:00:00.000Z
 Preferred-Languages: fr, en
 Canonical: https://www.courcellematthi.eu/.well-known/security.txt

Dockerfile

@@ -19,7 +19,7 @@ FROM nginx:1.27-alpine
 # -----------------------------------------------------------------------------
 LABEL org.opencontainers.image.title="courcellematthi.eu"
 LABEL org.opencontainers.image.description="Site personnel et CV de Matthieu Courcelle"
-LABEL org.opencontainers.image.authors="Matthieu Courcelle <m@tthieu.be>"
+LABEL org.opencontainers.image.authors="Matthieu Courcelle <courcelle.m@tthieu.be>"
 LABEL org.opencontainers.image.url="https://www.courcellematthi.eu"
 LABEL org.opencontainers.image.licenses="UNLICENSED"
 

README.md

@@ -218,18 +218,47 @@ carte Twitter en `summary_large_image`.
 Un CV est imprimé et exporté en PDF : `print.css` traite ce cas comme un
 livrable, pas comme un accident.
 
-- Format A4, marges 15/14 mm, marge haute réduite sur la première page
+**L'écran et le papier ne servent pas le même usage.** À l'écran, le visiteur
-- Navigation, boutons et bouton de remontée masqués
+parcourt et approfondit : les descriptions de cours, le texte de présentation
-- Couleurs remises à plat en noir sur blanc : lisible sur imprimante
+et les projets ont leur place. Sur papier, un recruteur trie une pile en
-  monochrome, où le vert `#05BC8A` sortirait en gris quasi invisible
+quelques secondes — il veut les postes, les compétences, les diplômes et de
-- URL des liens externes affichées entre parenthèses ; `mailto:` et ancres
+quoi rappeler.
-  internes exclus, où l'affichage serait redondant ou absurde
-- Fiches jamais coupées entre deux pages, mais entrées de parcours coupables :
-  interdire la coupure des entrées faisait basculer des blocs entiers et
-  gaspillait une page complète
-- `orphans` / `widows` à 3 pour éviter les lignes isolées
 
-Résultat mesuré : 5 pages A4, sans titre séparé de son contenu.
+La feuille d'impression ne masque donc pas « un peu » de contenu : elle
+recompose le document en **CV classique sur une seule page A4**.
+
+| Conservé | Retiré |
+|---|---|
+| Nom, fonction, coordonnées | Texte de présentation |
+| Postes, dates, établissements | Descriptions de cours |
+| Intitulés de cours (en ligne) | Projets *(option, voir ci-dessous)* |
+| Coordination pédagogique | Navigation, boutons, pied de page |
+| Compétences (3 colonnes) | Section contact (doublon de l'en-tête) |
+| Formations | |
+
+Mises en œuvre notables : marges à 12 mm, corps à 9,1 pt avec un interligne de
+1,42, trait de chronologie supprimé (6 mm de marge gauche récupérés pour un
+gain de lisibilité nul sur papier), dates flottées à droite, et surtout les
+neuf fiches de cours converties en énumération courante séparée par des points
+médians — empilées elles occupaient 40 mm, en ligne elles tiennent en 12 mm.
+
+L'aération a été calibrée par itérations mesurées : la version la plus dense
+laissait un quart de page vide, la plus aérée débordait de 30 mm sur une
+deuxième page. Le réglage retenu remplit la page en gardant une réserve
+d'environ 8 % en pied, marge nécessaire pour absorber les variations de rendu
+entre navigateurs et pilotes d'impression.
+
+Les couleurs sont remises à plat en noir sur blanc : lisible sur imprimante
+monochrome, où le vert `#05BC8A` sortirait en gris quasi invisible.
+
+**Les projets sont masqués par défaut mais réactivables.** Un bloc commenté en
+fin de `print.css` donne la marche à suivre. Vérifié en test : la version avec
+projets tient encore sur une page et remplit le quart de page actuellement
+vide. L'arbitrage dépend du 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.
+
+Résultat mesuré : **1 page A4**, dans les deux configurations.
 
 ---
 

assets/css/print.css

@@ -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
+   Chargée via media="print" : elle n'est pas prioritaire pour l'affichage
-   l'affichage écran et ne pénalise donc pas le rendu initial.
+   é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
+   PARTI PRIS
-   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
+   L'écran et le papier ne servent pas le même usage. À l'écran, le visiteur
-   coupés au milieu.
+   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;
+  margin: 12mm 13mm;
-}
-
-/* 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
+   MASQUAGE
-   Rien de ce qui sert à naviguer n'a de sens sur papier.
+   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;
+  font-size: 9.1pt;
-  line-height: 1.45;
+  line-height: 1.42;
 }
 
 .container {
@@ -59,167 +68,293 @@ body {
   padding-inline: 0;
 }
 
-/* --------------------------------------------------------------------------
+main > .container { display: block; }
-   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
+   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 {
+.eyebrow { display: none; }
-  padding-block: 10pt;
+
-  border-block-start: 0.5pt solid #ccc;
+.page-title {
+  font-size: 21pt;
+  letter-spacing: -0.5pt;
+  margin-block-end: 3pt;
 }
 
-.intro { padding-block: 10pt; }
+.page-subtitle {
-
+  font-size: 10.5pt;
-.intro__text--highlight {
+  color: #333;
-  border-inline-start: 2pt solid #666;
+  max-inline-size: none;
-  padding-inline-start: 8pt;
+  margin-block-end: 7pt;
 }
 
-/* Grilles : deux colonnes fixes, plus compact que l'auto-fit écran */
+/* Coordonnées sur une seule ligne */
-.grid {
+.contact-list {
-  display: grid;
+  gap: 0 18pt;
-  grid-template-columns: 1fr 1fr;
+  font-size: 9pt;
-  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 {
+.contact-list__icon { stroke: #000; }
-  background: transparent;
+
-  border: 0.5pt solid #999;
+/* --------------------------------------------------------------------------
-  color: #333;
+   SECTIONS
+   -------------------------------------------------------------------------- */
+.section {
+  padding-block: 7.5pt 0;
+  border-block-start: 0;
 }
 
-.project__stack li {
+.section-title {
-  background: transparent;
+  font-size: 11pt;
-  border: 0.5pt solid #ccc;
+  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;
-
-/* Icônes SVG inline */
-.card__icon,
-.contact-list__icon {
-  stroke: #000;
 }
 
+/* --------------------------------------------------------------------------
+   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.
+   Sur papier, un lien dont on ne voit pas la cible est inutile — mais ici
-   On affiche l'URL entre parenthèses — sauf pour mailto et les ancres
+   l'adresse du site est déjà écrite en toutes lettres dans les coordonnées.
-   internes, où l'adresse est déjà visible ou sans objet.
+   Ajouter l'URL entre parenthèses ferait doublon.
    -------------------------------------------------------------------------- */
 a {
   color: #000;
   text-decoration: none;
 }
 
-.contact-list a[href^="http"]::after,
+a::after { content: "" !important; }
-.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
+   VEUVES ET ORPHELINES
    -------------------------------------------------------------------------- */
-.site-footer {
+p, li {
-  border-block-start: 0.5pt solid #ccc;
+  orphans: 2;
-  padding-block: 6pt 0;
+  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; }
+*/

humans.txt

@@ -1,6 +1,6 @@
 /* ÉQUIPE */
   Conception, développement et contenu : Matthieu Courcelle
-  Contact : m@tthieu.be
+  Contact : courcelle.m@tthieu.be
   Localisation : Tournai, Hainaut, Belgique
 
 /* SITE */

index.html

@@ -218,7 +218,7 @@
         "jobTitle": "Professeur d'informatique",
         "description": "Professeur d'informatique en secondaire technique et en enseignement supérieur pour adultes. Développeur d'applications de gestion et praticien de l'intelligence artificielle appliquée à la pédagogie et à l'administration scolaire.",
         "url": "https://www.courcellematthi.eu/",
-        "email": "mailto:m@tthieu.be",
+        "email": "mailto:courcelle.m@tthieu.be",
         "image": "https://www.courcellematthi.eu/assets/img/og-image.png",
         "nationality": { "@type": "Country", "name": "Belgique" },
         "knowsLanguage": [
@@ -308,7 +308,6 @@
     ]
   }
   </script>
-  <script defer src="https://umami.ghostinthemachine.fr/script.js" data-website-id="f9c9d0cf-0ac8-4b49-8cf3-5aff5019b6f2"></script>
 
 </head>
 
@@ -414,7 +413,7 @@
               <rect x="3" y="5" width="18" height="14" rx="2"/>
               <path d="m3 7 9 6 9-6"/>
             </svg>
-            <a href="mailto:m@tthieu.be">m@tthieu.be</a>
+            <a href="mailto:courcelle.m@tthieu.be">courcelle.m@tthieu.be</a>
           </li>
           <li>
             <svg class="contact-list__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
@@ -428,7 +427,7 @@
               <path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z"/>
               <circle cx="12" cy="10" r="2.5"/>
             </svg>
-            Région de Mouscron, Belgique
+            Région de Tournai, Belgique
           </li>
         </ul>
 
@@ -439,7 +438,7 @@
           Le bouton d'impression est masqué à l'impression (classe screen-only).
         -->
         <div class="actions screen-only">
-          <a class="button button--primary" href="mailto:m@tthieu.be">
+          <a class="button button--primary" href="mailto:courcelle.m@tthieu.be">
             <svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
               <rect x="3" y="5" width="18" height="14" rx="2"/>
               <path d="m3 7 9 6 9-6"/>
@@ -835,7 +834,7 @@
            FORMATION
            ==================================================================== -->
       <section class="section" id="formation" data-section aria-labelledby="titre-formation">
-        <h2 class="section-title" id="titre-formation">Formations</h2>
+        <h2 class="section-title" id="titre-formation">Formation</h2>
 
         <div class="grid">
           <article class="education">
@@ -865,17 +864,17 @@
           </p>
 
           <div class="actions">
-            <a class="button button--primary" href="mailto:m@tthieu.be">
+            <a class="button button--primary" href="mailto:courcelle.m@tthieu.be">
               <svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                 <rect x="3" y="5" width="18" height="14" rx="2"/>
                 <path d="m3 7 9 6 9-6"/>
               </svg>
-              m@tthieu.be
+              courcelle.m@tthieu.be
             </a>
 
             <!-- Bouton de copie : alternative au mailto pour qui n'a pas de
                  client mail configuré. Voir copy-email.js. -->
-            <button class="button button--secondary" type="button" data-copy="m@tthieu.be">
+            <button class="button button--secondary" type="button" data-copy="courcelle.m@tthieu.be">
               <svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                 <rect x="9" y="9" width="12" height="12" rx="2"/>
                 <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
@@ -908,7 +907,7 @@
       <nav aria-label="Navigation de pied de page">
         <ul class="site-footer__links">
           <li><a href="#haut-de-page">Haut de page</a></li>
-          <li><a href="mailto:m@tthieu.be">m@tthieu.be</a></li>
+          <li><a href="mailto:courcelle.m@tthieu.be">courcelle.m@tthieu.be</a></li>
         </ul>
       </nav>
     </div>

llms.txt

@@ -10,7 +10,7 @@ Ce fichier suit la proposition llms.txt : il fournit aux agents
 conversationnels un résumé structuré et fiable du site, en texte brut,
 sans avoir à interpréter la mise en page HTML.
 
-Contact : m@tthieu.be
+Contact : courcelle.m@tthieu.be
 Site : https://www.courcellematthi.eu/
 Localisation : région de Tournai, Hainaut, Belgique
 Langues : français (maternelle), anglais (lecture technique)