/* ============================================================================ */ /* CSS Paged Media - Style Livre Professionnel AAA */ /* Utilise les typos du site: Source Sans Pro pour titres, Georgia pour texte */ /* Note: Source Sans Pro est déjà chargée par le site via _base.css */ /* ============================================================================ */ @media print { /* ========================================================================== */ /* Configuration des pages */ /* ========================================================================== */ @page { size: A4; margin-top: 20mm; margin-bottom: 25mm; margin-left: 25mm; margin-right: 20mm; /* Footer avec numéro de page */ @bottom-center { content: counter(page); font-size: 10pt; font-family: "Source Sans Pro", sans-serif; color: #666; } } /* Pages de gauche (verso) - marge intérieure à droite pour reliure */ @page :left { margin-left: 20mm; margin-right: 25mm; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, transparent 15mm); @top-left { content: "· " string(chapter-title) " ·"; font-size: 8.5pt; font-style: italic; color: #888; text-transform: uppercase; letter-spacing: 0.8pt; font-weight: 400; font-family: "Source Sans Pro", sans-serif; } @bottom-left { content: "〈 " counter(page) " 〉"; font-size: 10pt; font-family: "Source Sans Pro", sans-serif; color: #555; letter-spacing: 1pt; font-weight: 300; } @bottom-center { content: none; } } /* Pages de droite (recto) - marge intérieure à gauche pour reliure */ @page :right { margin-left: 25mm; margin-right: 20mm; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, transparent 15mm); @top-right { content: "· " string(section-title) " ·"; font-size: 8.5pt; font-style: italic; color: #888; letter-spacing: 0.8pt; font-weight: 400; font-family: "Source Sans Pro", sans-serif; } @bottom-right { content: "〈 " counter(page) " 〉"; font-size: 10pt; font-family: "Source Sans Pro", sans-serif; color: #555; letter-spacing: 1pt; font-weight: 300; } @bottom-center { content: none; } } /* Première page (titre) - pas de headers/footers + fond spécial */ @page :first { margin-top: 40mm; margin-bottom: 40mm; background: /* Motif géométrique subtil en haut */ linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.008) 48%, rgba(0, 0, 0, 0.008) 52%, transparent 52%), linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.008) 48%, rgba(0, 0, 0, 0.008) 52%, transparent 52%), /* Dégradés radiaux pour profondeur */ radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.035) 0%, transparent 45%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.035) 0%, transparent 45%), /* Base légèrement teintée */ linear-gradient(to bottom, rgba(0, 0, 0, 0.012) 0%, rgba(0, 0, 0, 0.002) 100%); background-size: 40mm 40mm, 40mm 40mm, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 20mm 20mm, center, center, center; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } @bottom-center { content: none; } } /* Pages blanches (pour chapitres commençant à droite) */ @page blank { background: white; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } @bottom-center { content: none; } } /* Page de chapitre - commence toujours à droite avec fond spécial */ @page chapter { background: /* Barre décorative en haut */ linear-gradient(to right, rgba(0, 0, 0, 0.08) 0mm, rgba(0, 0, 0, 0.05) 15mm, transparent 40mm), /* Motif géométrique subtil */ linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.006) 48%, rgba(0, 0, 0, 0.006) 52%, transparent 52%), linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.006) 48%, rgba(0, 0, 0, 0.006) 52%, transparent 52%), /* Dégradé doux du haut */ linear-gradient(to bottom, rgba(0, 0, 0, 0.025) 0%, transparent 35mm), /* Accent latéral gauche */ radial-gradient(ellipse at 0% 25%, rgba(0, 0, 0, 0.02) 0%, transparent 60%); background-size: 100% 3pt, 30mm 30mm, 30mm 30mm, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 15mm 15mm, center, left center; background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat; @top-left { content: none; } @top-right { content: none; } } /* ========================================================================== */ /* Typographie générale */ /* ========================================================================== */ html { font-size: 11pt; line-height: 1.6; } body { font-family: "Georgia", "Palatino", "Times New Roman", serif; color: #1a1a1a; background: white; margin: 0; hyphens: auto; -webkit-hyphens: auto; } /* Éviter les veuves et orphelines */ p, li { orphans: 3; widows: 3; } /* ========================================================================== */ /* Titres et structure */ /* ========================================================================== */ /* ========================================================================== */ /* PAGE DE TITRE - DESIGN AAA */ /* ========================================================================== */ .hero { text-align: center; margin-bottom: 0; break-after: page; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 220mm; padding-top: 30mm; } /* Ornement supérieur */ .hero::before { content: ""; display: block; width: 60mm; height: 1pt; background: linear-gradient(to right, transparent, #333 30%, #333 70%, transparent); margin: 0 auto 15mm; } /* Zone titre */ .hero-title { font-family: "Source Sans Pro", sans-serif; font-size: 42pt; font-weight: 300; line-height: 1.1; margin-bottom: 8mm; color: #1a1a1a; string-set: document-title content(); letter-spacing: 1pt; text-transform: uppercase; max-width: 140mm; margin-left: auto; margin-right: auto; } .hero-subtitle { font-size: 14pt; color: #555; font-style: italic; margin-bottom: 20mm; font-weight: 300; line-height: 1.5; max-width: 120mm; margin-left: auto; margin-right: auto; } /* Séparateur central */ .hero::after { content: "✦"; display: block; font-size: 16pt; color: #999; margin: 0 auto; } /* Zone métadonnées en bas de page */ .hero-authors, .hero-meta { margin-top: auto; } .hero-authors { font-size: 12pt; margin-bottom: 8mm; color: #333; font-weight: 400; letter-spacing: 0.5pt; } .hero-authors .author { display: block; margin-bottom: 2mm; } .hero-authors .author-name { font-weight: 500; text-transform: uppercase; letter-spacing: 1pt; font-size: 11pt; } .hero-authors sup { font-size: 8pt; margin-left: 1mm; } /* Affiliations */ .hero-affiliations { font-size: 10pt; color: #666; margin-bottom: 10mm; font-style: italic; } .hero-affiliations .affiliation { display: block; margin-bottom: 2mm; } /* Métadonnées (date, DOI, etc.) */ .hero-meta { font-size: 9pt; color: #888; font-style: normal; padding-top: 8mm; border-top: 0.5pt solid #ddd; max-width: 120mm; margin-left: auto; margin-right: auto; } .hero-meta p { margin: 2mm 0; text-indent: 0 !important; } /* Masquer le banner décoratif en mode livre */ .hero-banner { display: none !important; } /* ========================================================================== */ /* ABSTRACT / INTRODUCTION - Style AAA */ /* ========================================================================== */ /* Premier paragraphe/section après le hero (souvent l'abstract) */ .hero+section, .hero+div, .abstract, main>section:first-of-type, main>div:first-of-type { padding: 8mm 12mm; background: /* Motif géométrique léger */ linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.004) 48%, rgba(0, 0, 0, 0.004) 52%, transparent 52%), linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.004) 48%, rgba(0, 0, 0, 0.004) 52%, transparent 52%), /* Dégradé principal */ linear-gradient(to bottom, #fafafa, #fcfcfc 30%, white); background-size: 20mm 20mm, 20mm 20mm, 100% 100%; background-position: 0 0, 10mm 10mm, center; border-left: 3pt solid #ddd; margin-bottom: 15mm; break-inside: avoid; position: relative; } /* Accent décoratif en haut de l'abstract */ .hero+section::before, .hero+div::before, .abstract::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2pt; background: linear-gradient(to right, #ccc 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%); } .hero+section p:first-of-type::first-line, .hero+div p:first-of-type::first-line, .abstract p:first-of-type::first-line { font-variant: small-caps; letter-spacing: 0.5pt; font-weight: 500; } /* Titre "Abstract" ou premier H2 après hero */ .hero+section h2:first-child, .hero+div h2:first-child, .abstract h2 { font-size: 14pt; text-align: center; text-transform: uppercase; letter-spacing: 2pt; font-weight: 300; color: #666; margin-bottom: 8mm; padding-bottom: 4mm; border-bottom: 0.5pt solid #ddd; } .hero+section h2:first-child::before, .hero+div h2:first-child::before, .abstract h2::before { content: none !important; } .hero+section h2:first-child::after, .hero+div h2:first-child::after, .abstract h2::after { content: none !important; } /* Chapitres H2 - Typo du site */ h2 { font-family: "Source Sans Pro", sans-serif; font-size: 28pt; font-weight: 600; margin-top: 20mm; margin-bottom: 12mm; line-height: 1.2; page-break-after: avoid; break-after: avoid-page; string-set: chapter-title content(); counter-increment: chapter; page: chapter; color: #1a1a1a; letter-spacing: -0.5pt; position: relative; padding-top: 8mm; } h2::before { content: counter(chapter); display: block; font-size: 48pt; font-weight: 200; color: #ddd; position: absolute; top: -5mm; left: 0; line-height: 1; } h2::after { content: ""; display: block; width: 30mm; height: 1pt; background: linear-gradient(to right, #666, transparent); margin-top: 4mm; } /* Sections H3 - Typo du site */ h3 { font-family: "Source Sans Pro", sans-serif; font-size: 18pt; font-weight: 700; margin-top: 12mm; margin-bottom: 6mm; page-break-after: avoid; break-after: avoid-page; string-set: section-title content(); counter-increment: section; color: #333; letter-spacing: -0.2pt; } h3::before { content: counter(chapter) "." counter(section); display: inline-block; margin-right: 1.5mm; color: #999; font-size: 12pt; font-weight: 300; } /* Sous-sections H4 - Typo du site */ h4 { font-family: "Source Sans Pro", sans-serif; font-size: 14pt; font-weight: 600; margin-top: 8mm; margin-bottom: 4mm; page-break-after: avoid; break-after: avoid-page; color: #444; text-transform: uppercase; letter-spacing: 0.5pt; } /* ========================================================================== */ /* Paragraphes et texte */ /* ========================================================================== */ p { text-align: justify; margin-bottom: 4mm; text-indent: 0; line-height: 1.65; } /* Premier paragraphe après titre sans retrait */ h2+p, h3+p, h4+p { text-indent: 0; } /* Lettrine (drop cap) pour le premier paragraphe d'un chapitre */ h2+p::first-letter { float: left; font-size: 48pt; line-height: 0.85; margin: 0 4mm -2mm 0; font-weight: 400; color: #333; } /* Paragraphes suivants avec retrait */ p+p { text-indent: 5mm; margin-top: 0; } /* Liens */ a { color: #000; text-decoration: none; border-bottom: 0.5pt solid #999; } a[href]::after { content: ""; } /* Pas de bordure pour les liens dans le hero */ .hero a { border: none; font-weight: inherit; } /* ========================================================================== */ /* Listes */ /* ========================================================================== */ ul, ol { margin-left: 8mm; margin-bottom: 5mm; } li { margin-bottom: 2mm; } /* ========================================================================== */ /* FEATURES / BADGES - Mise en page colonnes AAA */ /* ========================================================================== */ /* Premier chapitre avec features : layout multi-colonnes */ main>section:first-of-type ul:first-of-type, main>div:first-of-type ul:first-of-type, .features-list { columns: 2; column-gap: 8mm; column-rule: 0.5pt solid #ddd; margin-left: 0; list-style: none; break-inside: auto; margin-bottom: 12mm; padding: 8mm; background: /* Motif de points subtils */ radial-gradient(circle at center, rgba(0, 0, 0, 0.03) 1pt, transparent 1pt), /* Motif géométrique */ linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.005) 48%, rgba(0, 0, 0, 0.005) 52%, transparent 52%), linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.005) 48%, rgba(0, 0, 0, 0.005) 52%, transparent 52%), /* Dégradé de base */ linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #fafafa 100%); background-size: 8mm 8mm, 15mm 15mm, 15mm 15mm, 100% 100%; background-position: 0 0, 0 0, 7.5mm 7.5mm, center; border: 0.5pt solid #e0e0e0; border-radius: 2pt; position: relative; } /* Accent décoratif pour la features list */ main>section:first-of-type ul:first-of-type::before, main>div:first-of-type ul:first-of-type::before, .features-list::before { content: ''; position: absolute; top: 0; left: 0; width: 4mm; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)); border-radius: 2pt 0 0 2pt; } main>section:first-of-type ul:first-of-type li, main>div:first-of-type ul:first-of-type li, .features-list li { break-inside: avoid; page-break-inside: avoid; margin-bottom: 3mm; padding-left: 9mm; /* 5mm + 4mm de la barre décorative */ position: relative; font-size: 10pt; line-height: 1.4; } /* Puces décoratives */ main>section:first-of-type ul:first-of-type li::before, main>div:first-of-type ul:first-of-type li::before, .features-list li::before { content: "▸"; position: absolute; left: 5mm; /* Après la barre décorative */ color: #999; font-size: 10pt; } /* Tags/badges dans les listes */ li code, .tag, .badge { background: white; border: 0.5pt solid #ddd; padding: 0.5mm 2mm; border-radius: 2pt; font-size: 8.5pt; font-weight: 500; color: #555; white-space: nowrap; } /* ========================================================================== */ /* Code */ /* ========================================================================== */ pre, code { font-family: "Monaco", "Courier New", monospace; font-size: 9pt; } pre { background: linear-gradient(to right, #f8f8f8, #fafafa); padding: 5mm; border: 0.5pt solid #e0e0e0; border-left: 3pt solid #bbb; overflow-x: auto; break-inside: avoid; page-break-inside: avoid; margin: 6mm 0; border-radius: 1pt; box-shadow: 0 1pt 2pt rgba(0, 0, 0, 0.05); } code { background: #f0f0f0; padding: 1pt 2pt; border-radius: 2pt; } /* ========================================================================== */ /* Figures et images */ /* ========================================================================== */ figure { margin: 8mm 0; text-align: center; break-inside: avoid; page-break-inside: avoid; } figure img { max-width: 100%; height: auto; } figcaption { font-size: 9pt; color: #666; font-style: italic; margin-top: 3mm; text-align: left; padding-left: 5mm; border-left: 2pt solid #e0e0e0; } /* ========================================================================== */ /* Tableaux */ /* ========================================================================== */ table { width: 100%; border-collapse: collapse; margin: 8mm 0; font-size: 10pt; break-inside: avoid; page-break-inside: avoid; } thead { display: table-header-group; } tfoot { display: table-footer-group; } th { background: linear-gradient(to bottom, #fafafa, #f0f0f0); font-weight: 500; text-align: left; padding: 3mm; border-bottom: 1.5pt solid #555; border-top: 1.5pt solid #555; font-size: 10pt; letter-spacing: 0.5pt; text-transform: uppercase; color: #333; } td { padding: 3mm; border-bottom: 0.5pt solid #e0e0e0; } tr:last-child td { border-bottom: 1.5pt solid #555; } /* ========================================================================== */ /* Blockquotes */ /* ========================================================================== */ blockquote { margin: 10mm 12mm; padding: 6mm 8mm; border-left: none; font-style: italic; color: #444; break-inside: avoid; page-break-inside: avoid; position: relative; background: linear-gradient(to right, #f8f8f8, transparent 40mm); } blockquote::before { content: "" "; position: absolute; left: -3mm; top: 0; font-size: 48pt; color: #ddd; font-family: Georgia, serif; line-height: 0.7; } blockquote p { text-indent: 0 !important; } /* ========================================================================== */ /* Notes de bas de page (Paged.js) */ /* ========================================================================== */ .footnote { float: footnote; footnote-display: block; font-size: 8pt; line-height: 1.4; } ::footnote-call { content: "[" counter(footnote) "]"; font-size: 0.8em; vertical-align: super; line-height: 0; } ::footnote-marker { content: counter(footnote) ". "; font-weight: bold; } /* ========================================================================== */ /* ACCORDIONS - Ouverts et stylisés pour le livre */ /* ========================================================================== */ .accordion, details.accordion { margin: 8mm 0; border: 1pt solid #ddd !important; border-radius: 2pt; background: rgba(0, 0, 0, 0.015) !important; break-inside: avoid; page-break-inside: avoid; } .accordion__summary, details.accordion>summary { font-family: "Source Sans Pro", sans-serif; font-size: 11pt; font-weight: 600; padding: 4mm !important; background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01)) !important; border-bottom: 0.5pt solid #ddd !important; color: #333 !important; } /* Masquer le chevron en print */ .accordion__chevron { display: none !important; } /* Forcer l'affichage du contenu */ .accordion__content-wrapper { height: auto !important; overflow: visible !important; } .accordion__content { padding: 5mm !important; } /* Titre de l'accordéon */ .accordion__title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5pt; font-size: 10pt; } /* Code dans les accordéons */ .accordion pre { margin: 3mm 0 !important; } /* ========================================================================== */ /* Éléments à masquer en mode livre */ /* ========================================================================== */ #theme-toggle, .table-of-contents, .table-of-contents-mobile, .right-aside, nav, .code-lang-chip, .meta-container-cell--pdf, button, .interactive-only { display: none !important; } /* ========================================================================== */ /* Table des matières */ /* ========================================================================== */ .toc { page: toc; break-after: page; } .toc h2 { font-size: 20pt; margin-bottom: 10mm; text-align: center; } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { margin-bottom: 3mm; } .toc a { text-decoration: none; border: none; } .toc a::after { content: leader('.') target-counter(attr(href), page); font-style: italic; } /* ========================================================================== */ /* Compteurs */ /* ========================================================================== */ body { counter-reset: chapter section figure table; } h2 { counter-reset: section; } figure { counter-increment: figure; } figure figcaption::before { content: "Figure " counter(chapter) "." counter(figure) " · "; font-weight: 500; font-style: normal; color: #888; font-variant: small-caps; letter-spacing: 0.5pt; } table { counter-increment: table; } /* ========================================================================== */ /* HTML EMBEDS - Gestion AAA pour le print */ /* ========================================================================== */ .html-embed { break-inside: avoid; page-break-inside: avoid; margin: 10mm 0; width: 100%; } .html-embed__card { width: 100% !important; max-width: 100% !important; overflow: visible !important; break-inside: avoid; page-break-inside: avoid; background: white !important; padding: 6mm !important; border: 1pt solid #ddd !important; box-shadow: 0 1pt 3pt rgba(0, 0, 0, 0.08) !important; border-radius: 2pt; } /* Frameless embeds */ .html-embed__card.is-frameless { padding: 2mm !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Container des fragments HTML */ .html-embed__card>div[id^="frag-"] { width: 100% !important; max-width: 100% !important; overflow: visible !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Containers D3 - respecter leur structure */ .html-embed__card [class^="d3-"], .html-embed__card [class*=" d3-"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* SVG dans les embeds - contraindre sans forcer 100% width */ .html-embed__card svg { max-width: 100% !important; max-height: 130mm !important; width: auto !important; height: auto !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } /* SVG avec viewBox - les laisser responsive */ .html-embed__card svg[viewBox] { width: 100% !important; height: auto !important; } /* Canvas dans les embeds */ .html-embed__card canvas { max-width: 100% !important; max-height: 130mm !important; width: auto !important; height: auto !important; display: block !important; margin-left: auto !important; margin-right: auto !important; object-fit: contain !important; } /* Charts qui utilisent chart-card */ .html-embed__card .chart-card { width: 100% !important; max-width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; } /* Titre des embeds */ .html-embed__title { font-family: "Source Sans Pro", sans-serif; font-size: 11pt; font-weight: 600; color: #555; margin-bottom: 4mm; text-transform: uppercase; letter-spacing: 0.5pt; } /* Description/caption des embeds */ .html-embed__desc { font-size: 9pt; color: #666; font-style: italic; margin-top: 4mm; padding-left: 5mm; border-left: 2pt solid #e0e0e0; } /* Embeds wide */ .html-embed--wide .html-embed__card { max-width: none !important; } /* Légendes */ .html-embed__card .legend { font-size: 8pt !important; width: 100% !important; } /* Masquer tooltips en print */ .html-embed__card .tooltip, .html-embed__card .d3-tooltip, .html-embed__card [class*="tooltip"] { display: none !important; } /* ========================================================================== */ /* Visualisations D3/Plotly - adaptation pour print */ /* ========================================================================== */ svg, canvas { max-width: 100%; height: auto; break-inside: avoid; page-break-inside: avoid; } .js-plotly-plot, .d3-line, .d3-bar { break-inside: avoid; page-break-inside: avoid; margin: 8mm 0; background: white !important; padding: 4mm; border: 0.5pt solid #e0e0e0; } /* Conteneurs D3 spécifiques */ .d3-line svg, .d3-bar svg, .d3-scatter svg { max-width: 100% !important; width: 100% !important; height: auto !important; } /* ========================================================================== */ /* Layout simple colonne */ /* ========================================================================== */ .content-grid { grid-template-columns: 1fr !important; max-width: none !important; } main { max-width: none !important; padding: 0 !important; } /* ========================================================================== */ /* Citations académiques */ /* ========================================================================== */ .citation { font-size: 0.9em; color: #666; } .references { break-before: page; page-break-before: always; } .references h2 { text-align: center; } .reference-item { margin-bottom: 4mm; text-indent: -5mm; margin-left: 5mm; } }