style-pdf.css

/**
 * ============================================================================
 * CSS OPTIMISÉ POUR GÉNÉRATION PDF - ATS-SAFE
 * ============================================================================
 * 
 * Ce CSS ajuste uniquement les espacements et la densité pour le PDF.
 * Les styles visuels (polices, couleurs, backgrounds, arrondis) sont
 * conservés depuis style.css pour un rendu identique.
 * 
 * Stratégie ATS-safe:
 * - Garder TOUS les styles visuels (polices, couleurs, neonbox, etc.)
 * - Réduire uniquement les espacements pour optimiser la place
 * - Gérer les page breaks
 * - Cacher les boutons UI
 * - Afficher le lien CV en ligne
 * - Désactiver les symboles décoratifs ::before
 */

/* ============================================================================
  OPTIMISATIONS GLOBALES - Espacements uniquement
  ============================================================================ */

body {
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background-image: none !important;
  /* Avoid applying backgrounds on html/body — use @page for PDF page backgrounds */
  background-color: transparent !important;
  background: transparent !important;
}

/* PDF page background: use @page to avoid stacking/selection issues caused
   by backgrounds on html/body. Default to the light theme color here. */
/* Page background driven by a CSS variable so we can support light/dark PDFs.
   `html[data-theme=light]` and `html[data-theme=dark]`
   set `--pdf-page-bg` below. */
@page {
  size: A4;
  /* Set page margin to 0 so we can simulate printable margin via body padding
     reliably and position full-bleed elements relative to viewport widths. */
  margin: 0;
  background: var(--pdf-page-margin-color, #e3ebf4);
}

/* Default PDF theme variables */
[data-theme="light"] {
  --pdf-page-bg: #ffffff;
  /* inner page background (content card) */
  --pdf-page-margin-color: #e3ebf4;
  /* outer page color */
}

[data-theme="dark"] {
  --pdf-page-bg: #121620;
  --pdf-page-margin-color: #121620;
}

/* Spacing tokens used across PDF stylesheet for compact layout */
:root{
  --s1:2px;
  --s2:4px;
  --s3:6px;
  --s4:8px;
  --s5:12px;
  --s6:16px;
  --s7:20px;
  --s8:24px;
  --s9:32px;
  --s10:40px;
  --s11:48px;
  --s12:64px;
  --s13:80px;
  --s14:96px;
  --s15:128px;
  --s16:160px;
  --s17:192px;
}

/* If your PDF generation pipeline can't propagate CSS variables into @page
   for the dark variant, consider generating the dark PDF using a different
   HTML class (e.g. `pdf-dark`) or a separate stylesheet. */

/* Neutralize backgrounds only for full-bleed sections that cause selection overlays
   (experiences-section uses negative margins to extend to page edges). Keep
   regular `.section`/`.neonbox` backgrounds so contact and other boxes remain. */
.experiences-section .neonbox,
.experiences-section.section {
  background: transparent !important;
  border: none !important;
}

/* Restore contact box background for PDF but simplify to a solid color to
   avoid selection artifacts from semi-transparent layered backgrounds. */
.contact-section .neonbox {
  background: var(--contact-bg, #007bff) !important;
  color: var(--contrast-high, #fff) !important;
}

/* Ensure contact headings and links are high-contrast in Dark PDF theme */
[data-theme="dark"] .contact-section .neonbox h2,
[data-theme="dark"] .contact-section h2 {
  color: var(--contrast-high, #ffffff) !important;
}

[data-theme="dark"] .contact-section .neonbox a,
.contact-section .neonbox a {
  color: var(--contrast-high, #ffffff) !important;
  text-decoration: none !important;
}

/* Draw the colored page margin as an inset box so the page background can
   remain the true full-bleed color for sections that must reach the edges. */
/* Simulate printable margins using body padding; draw the inner card inset
   using a fixed pseudo-element so the outer page edge color (from @page)
   remains visible. */
/* Simulate printable margins using body padding; draw the inner card inset
   using a container-scoped pseudo-element to avoid global white artefacts. */
body {
  padding: 3mm !important;
}

/* Draw the white 'card' inset only behind the centered `.container`, so it
   doesn't overlay other full-bleed elements. */
.container {
  position: relative !important;
  z-index: 1 !important;
}


/* Ensure main content renders above the inset margin background */
html .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Reintroduce a safe full-bleed background for the experiences section by
   placing a pseudo-element that extends beyond the inset.*/
.experiences-section .neonbox {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}








/* Ensure content sits above that pseudo-element */
.experiences-section .neonbox>* {
  position: relative !important;
  z-index: 3 !important;
}

/* Restore a safe full-bleed background for experiences using a pseudo-element.
   This places the background visually edge-to-edge while keeping it behind
   text (z-index) and non-interactive (pointer-events:none) so selection
   remains contiguous. */
/* The experiences full-bleed background is now provided by the page
   background. Remove the
   previous pseudo-element to avoid layering issues. */

.container {
  display: block !important;
  gap: 0 !important;
  padding: 1rem !important;
  max-width: 100% !important;
}

/* ============================================================================
   SIMPLIFICATION VISUELLE - Pas d'effets complexes
   ============================================================================ */

* {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

/* Ensure text is selectable in exported PDFs and small remains inline */
,
* {
  -webkit-user-select: text !important;
  user-select: text !important;
}

small {
  display: inline !important;
  font-size: 0.95em !important;
}

.section,
.neonbox {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Supprimer les layouts flex pour le PDF */
.header-content,
.top-right-buttons,
.contact-section ul,
.profile-section,
.skills-section,
.experiences-section,
.formation-section,
.languages-section,
.interests-section {
  display: block !important;
}

/* ============================================================================
   HEADER - Espacements réduits
   ============================================================================ */

.header-section {
  margin-bottom: 2.5rem !important;
}

.header-section h1 {
  font-size: 2rem !important;
  margin-bottom: 0.5rem !important;
}

.tagline {
  font-size: 0.9rem !important;
  margin-top: 0.3rem !important;
}

/* ============================================================================
   SECTIONS - Espacements compacts
   ============================================================================ */

.section {
  padding: 0.8rem !important;
  margin-bottom: 0.5rem !important;
}

/* Experiences section with full-bleed background (edge to edge) */
.experiences-section .section,
.experiences-section .neonbox {
  border-radius: 0 !important;
  /* Extend background to page edges with negative margins */
  margin-left: -1rem !important;
  margin-right: -1rem !important;
  /* Add padding back to keep content readable */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

/* full-bleed wrapper background: separate element so selection isn't broken
   by a background layer. The background extends beyond the body inset to
   reach the page edges. */
.full-bleed-wrap {
  position: relative !important;
  z-index: 2 !important;
}

.full-bleed-wrap .full-bleed-bg {
  content: "" !important;
  position: absolute !important;
  /* Make the element span the viewport width regardless of container/padding
     so it visually reaches the physical page edges. This avoids relying on
     rem/px conversions and keeps it page-stable across renderers. */
  left: calc(50% - 50vw) !important;
  right: calc(50% - 50vw) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  background: var(--pdf-page-bg, #ffffff) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* In the PDF dark theme, make the experiences full-bleed background use the
   accent color (like the light version) instead of the dark 'box' color so
   the section appears as a colored band. Adjust text contrast accordingly. */
[data-theme="dark"] .full-bleed-wrap .full-bleed-bg {
  /* Use a solid dark-blue/near-black band color for the experiences section */
  background: #191d27 !important;
}

/* Ensure all boxes in the experiences/contact area use the exact same solid
   background in the Dark PDF (no transparency) so they visually match. */
[data-theme="dark"] .experiences-section .neonbox,
[data-theme="dark"] .experiences-section .section,
[data-theme="dark"] .contact-section .neonbox {
  background: #191d27 !important;
  color: var(--contrast-high, #ffffff) !important;
  border: none !important;
}

[data-theme="dark"] .experiences-section {
  color: var(--contrast-high, #ffffff) !important;
}

/* Make links in the experiences section stand out slightly in Dark PDF */
[data-theme="dark"] .experiences-section a {
  color: var(--link, #4da3ff) !important;
  text-decoration: none !important;
}

/* ensure inner content sits above the background */
.full-bleed-wrap .experiences-section,
.full-bleed-wrap .experiences-section * {
  position: relative !important;
  z-index: 3 !important;
}
.experiences-section{
  margin-top: 2rem !important;
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
}
.section h2 {
  font-size: 1.1rem !important;
  margin-bottom: 0.6rem !important;
}

/* Profil - espacement titre/contenu harmonisé */
.profile-section h2 {
  margin-bottom: 0.6rem !important;
}

.profile-section p {
  margin-top: 0 !important;
  font-size: calc(0.95rem + 0.5pt) !important;
}

/* --- Indentation hiérarchique harmonisée pour PDF --- */
/* Indent pour sous-sections (ex: Stimm Platform sous Projets Open Source) */

/* Indent global pour chaque bloc de sous-section (expériences, open source, etc.)
   Décale tout le contenu (sous-header, paragraphes, listes) sauf le titre principal. */
.experiences-section article>*,
.open-source-section>ul,
.open-source-section>.sub-header,
.open-source-section>p {
  margin-left: 1.1rem !important;
}

.experiences-section article>h3 {
  margin-left: 0 !important;
}

.open-source-section>h2 {
  margin-left: 0 !important;
}

/* Indent minimal pour les titres principaux (pas d'indent) */
.experiences-section .section>h2,
.open-source-section>h2 {
  margin-left: 0 !important;
}

/* Indent pour les items de contact (pour voir le tiret) */
.contact-section .section ul {
  padding-left: 0.8rem !important;
}

.contact-section .section ul li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}



.section h3 {
  font-size: 1rem !important;
  margin-bottom: 0.4rem !important;
}

.section p {
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
}

.section ul {
  margin: 0.5rem 0 !important;
  padding-left: var(--s4) !important;
  list-style-type: none !important;
}

.section li {
  margin-bottom: 0.4rem !important;
  line-height: 1.5 !important;
}

.section li:last-child {
  margin-bottom: 0 !important;
}

/* Removed pseudo-element list markers in PDF mode to avoid selection order
   issues. List markers are now provided inline from locale strings. */



/* ============================================================================
   EXPERIENCE ITEMS - Compact spacing
   ============================================================================ */

.experience-item {
  margin-bottom: 1rem !important;
  padding-bottom: 0.8rem !important;
}

.experience-item:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.experience-item h3 {
  margin-bottom: 0.1rem !important;
}

.experience-item p,
.experience-item li {
  margin: 0.05rem 0 !important;
  font-size: 0.95rem !important;
  font-style: normal !important;
  color: var(--muted) !important;
}

.skills-section li,
.interests-section li {
  color: var(--muted) !important;
}

.experience-item strong,
.skills-section li strong,
.interests-section li strong {
  color: var(--text) !important;
}

.experience-item ul {
  margin-top: 0.1rem !important;
  margin-bottom: 0.1rem !important;
}

.experience-item li {
  margin-bottom: 0.1rem !important;
  font-size: 0.95rem !important;
  color: var(--muted) !important;
}

/* Sub-experience styling for PDF */
.experience-item h4 {
  margin-left: var(--s4) !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.05rem !important;
  font-size: 0.95rem !important;
}

.sub-experience {
  margin-left: 0.8rem !important;
  margin-top: 0.1rem !important;
  margin-bottom: 0.1rem !important;
}

.sub-header {
  display: block !important;
  margin-bottom: 0.05rem !important;
  margin-left: var(--s6)!important;
}

.sub-experience>p {
  margin-left: var(--s6) !important;
}

.experiences-section article>* {
  margin-left: var(--s4) !important;
}

.sub-header h3,
.sub-header h5,
.sub-header .sector,
.sub-header .stack,
.sub-header a {
  display: inline !important;
}

/* Removed inline pseudo separators for sub-header; inject separators via
   locale strings when needed to keep selection order predictable. */

.sub-header a {
  font-size: 0.8rem !important;
}

.sub-experience h5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.sub-header .sector,
.sub-header .stack {
  font-size: 0.85rem !important;
  color: var(--muted) !important;
}






/* Reduce left indenting (tab width) for Contact and Skills lists in PDF */
.contact-section .section ul,
.skills-section .section ul {
  padding-left: var(--s4) !important;
}

.contact-section .section ul li,
.skills-section .section ul li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Reduce indenting for experience lists to align list items closer to headings */
.experiences-section .sub-experience {
  margin-left: 0.4rem !important;
}

.experiences-section .sub-experience ul {
  padding-left: 0.8rem !important;
}

.experiences-section .section ul li {
  padding-left: 0 !important;
}

.sub-header .sector {
  font-style: normal !important;
}

.sub-header .stack {
  font-style: italic !important;
}

/* ============================================================================
   UI ELEMENTS - Masquer pour PDF
   ============================================================================ */

.top-right-buttons,
#toggle,
#lang-button,
#print-btn,
.lang-dropdown {
  display: none !important;
}

/* ============================================================================
   CONTACT SECTION - Afficher lien CV en PDF
   ============================================================================ */

/* Afficher le lien CV en ligne dans le PDF */
[data-contact-cv] {
  display: list-item !important;
}

/* ============================================================================
   PAGE BREAKS - Contrôle pagination
   ============================================================================ */

.section {
  page-break-inside: auto !important;
  break-inside: auto !important;
}

li {
  page-break-inside: auto !important;
  break-inside: auto !important;
}

.neonbox {
  page-break-inside: auto !important;
  break-inside: auto !important;
  overflow: visible !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  break-after: auto !important;
  page-break-after: auto !important;
}

.experiences-section {
  page-break-before: auto !important;
}

/* ============================================================================
   PRINT COLOR ADJUSTMENT - Forcer l'impression des couleurs
   ============================================================================ */

* {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}


/* ============================================================================
  PAGE BREAK UTILITIES
  ============================================================================ */

/* Forcer un saut de page (PDF uniquement) */
.pdf-page-break {
  break-before: page !important;
  page-break-before: always !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Espace minimum en haut des pages après un saut */
.pdf-page-break+section .section {
  margin-top: 3rem !important;
}

/* Optionnel: séparateur visuel si besoin en HTML (masqué en PDF) */
.pdf-page-separator {
  display: none !important;
}

/* ============================================================================
  FORMATION SECTION - Add top margin
  ============================================================================ */
.formation-section {
  margin-top: 3rem !important;
}

.formation-section .section {
  margin-top: 0 !important;
}

/* ============================================================================
  MANUAL PAGE BREAK - For specific content breaks
  ============================================================================ */
.pdf-page-break-after {
  display: inline !important;
  page-break-after: always !important;
  break-after: page !important;
}

/* Hide the page break marker on web */
.pdf-page-break-after {
  display: none;
}

/* ============================================================================
  FORCED PAGE BREAK BEFORE FREELANCE EXPERIENCE
  ============================================================================ */
.experience-page-break {
  page-break-before: always !important;
  break-before: page !important;
  margin-top: 3rem !important;
}

/* all before display none important  
since the background is now provided by the page background, remove the previous
   pseudo-element to avoid layering issues and selection artifacts. */
/* Suppression globale des pseudo-éléments avant et après */
*, *::before, *::after {
    content: none !important; /* C'est l'élément clé qui fait disparaître le rendu */
    
    /* Optionnel : on remet à zéro les autres propriétés pour éviter les effets de bord */
    position: static !important; 
    padding: 0 !important;
    margin: 0 !important;
    content: none !important; /* Supprime les ::before et ::after */
    list-style: none !important; /* Supprime les puces/tirets natifs des <ul> et <li> */
    list-style-type: none !important;
}