/**
* ============================================================
* PLATYPUS COACHING — whitepaper.css
* Feuille de style print-ready pour white papers HTML → PDF
* ============================================================
*
* USAGE :
*
*
*
* STRUCTURE HTML ATTENDUE :
*
*
*
* …
*
*
* EXPORT PDF : imprimer depuis Chrome/Edge (Ctrl+P)
* → Format A4, marges : aucune (gérées par @page)
* → Activer "Graphiques d'arrière-plan"
* ============================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');
/* ----------------------------------------------------------
* VARIABLES (héritées de design-tokens.css si disponible,
* redéfinies ici comme fallback autonome)
* ---------------------------------------------------------- */
:root {
--cream: #F7F2EA;
--beige: #EDE4D4;
--sand: #D9CCBA;
--terracotta: #C4714A;
--terracotta-light: #D4855E;
--sage: #7A9B7F;
--sage-light: #EBF2EC;
--brown: #4A3728;
--brown-mid: #6B4F3A;
--text: #2E2318;
--text-muted: #7A6A58;
--white: #FEFCF8;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
/* ----------------------------------------------------------
* RESET PRINT DE BASE
* ---------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ----------------------------------------------------------
* @PAGE — Mise en page A4 et running headers/footers
* ---------------------------------------------------------- */
@page {
size: A4;
margin: 2.5cm 2cm;
@bottom-center {
content: counter(page);
font-family: var(--font-body);
font-size: 8pt;
color: var(--text-muted);
letter-spacing: 0.08em;
}
}
@page cover {
margin: 0;
@bottom-center { content: none; }
}
@page toc {
margin: 2.5cm 2cm;
@bottom-center {
content: counter(page, lower-roman);
font-family: var(--font-body);
font-size: 8pt;
color: var(--text-muted);
}
}
@page content {
margin: 2.5cm 2cm;
@top-right {
content: string(section-title);
font-family: var(--font-body);
font-size: 8pt;
color: var(--text-muted);
letter-spacing: 0.06em;
}
@bottom-center {
content: counter(page);
font-family: var(--font-body);
font-size: 8pt;
color: var(--text-muted);
}
}
/* ----------------------------------------------------------
* CORPS DE BASE
* ---------------------------------------------------------- */
body {
font-family: var(--font-body);
font-size: 11pt;
font-weight: 300;
line-height: 1.75;
color: var(--text);
background: var(--white);
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
/* ----------------------------------------------------------
* PAGE DE COUVERTURE (.cover)
* ---------------------------------------------------------- */
.cover {
page: cover;
page-break-after: always;
break-after: page;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 21cm;
min-height: 29.7cm;
background-color: var(--cream);
padding: 3cm 2.5cm;
position: relative;
}
/* Bande décorative terracotta en haut */
.cover::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 6pt;
background: var(--terracotta);
}
.cover-eyebrow {
font-family: var(--font-body);
font-size: 8pt;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 2cm;
}
.cover-title {
font-family: var(--font-display);
font-size: 36pt;
font-weight: 300;
line-height: 1.15;
color: var(--brown);
letter-spacing: 0.02em;
margin-bottom: 0.6cm;
max-width: 14cm;
}
.cover-title em {
font-style: italic;
color: var(--terracotta);
}
/* Ligne séparatrice terracotta */
.cover-divider {
width: 4cm;
height: 1pt;
background: var(--terracotta);
margin: 0.8cm auto;
}
.cover-subtitle {
font-family: var(--font-display);
font-size: 15pt;
font-weight: 300;
font-style: italic;
color: var(--text-muted);
max-width: 12cm;
line-height: 1.4;
margin-bottom: 1.5cm;
}
.cover-meta {
font-family: var(--font-body);
font-size: 9pt;
font-weight: 400;
color: var(--text-muted);
letter-spacing: 0.04em;
line-height: 1.8;
}
.cover-meta strong {
color: var(--brown-mid);
font-weight: 500;
}
/* Branding Platypus Coaching en bas de couverture */
.cover-brand {
position: absolute;
bottom: 1.2cm;
left: 0; right: 0;
text-align: center;
font-family: var(--font-display);
font-size: 10pt;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--brown);
}
.cover-brand em {
font-style: italic;
color: var(--terracotta);
}
.cover-brand::before {
content: '';
display: block;
width: 3cm;
height: 0.5pt;
background: var(--sand);
margin: 0 auto 0.5cm;
}
/* ----------------------------------------------------------
* TABLE DES MATIÈRES (.toc)
* ---------------------------------------------------------- */
.toc {
page: toc;
page-break-after: always;
break-after: page;
counter-reset: page 1;
padding: 0;
}
.toc-title {
font-family: var(--font-display);
font-size: 18pt;
font-weight: 300;
color: var(--brown);
letter-spacing: 0.04em;
margin-bottom: 0.8cm;
padding-bottom: 0.3cm;
border-bottom: 1pt solid var(--sand);
}
.toc ol,
.toc ul {
list-style: none;
padding: 0;
}
/* Entrées h1 */
.toc > ol > li,
.toc > ul > li {
margin-bottom: 0.25cm;
}
.toc a {
font-family: var(--font-body);
font-size: 10pt;
font-weight: 400;
color: var(--text);
text-decoration: none;
display: flex;
align-items: baseline;
}
/* Points de conduite (leader) */
.toc a::after {
content: '';
flex: 1;
border-bottom: 0.5pt dotted var(--sand);
margin: 0 0.3cm;
position: relative;
top: -2pt;
}
.toc .page-num {
font-family: var(--font-body);
font-size: 9pt;
color: var(--text-muted);
flex-shrink: 0;
}
/* Entrées h2 — indentées */
.toc .toc-h2 {
padding-left: 0.8cm;
}
.toc .toc-h2 a {
font-size: 9pt;
color: var(--text-muted);
}
/* Entrées h3 — plus indentées */
.toc .toc-h3 {
padding-left: 1.6cm;
}
.toc .toc-h3 a {
font-size: 8.5pt;
color: var(--text-muted);
font-style: italic;
}
/* ----------------------------------------------------------
* CONTENU PRINCIPAL (.content)
* ---------------------------------------------------------- */
.content {
page: content;
}
/* ----------------------------------------------------------
* TITRES
* ---------------------------------------------------------- */
h1 {
font-family: var(--font-display);
font-size: 2.2em; /* ~24pt */
font-weight: 300;
line-height: 1.15;
color: var(--brown);
letter-spacing: 0.04em;
margin-top: 0;
margin-bottom: 0.5em;
page-break-before: always;
break-before: page;
/* Conserver la chaîne pour le running header */
string-set: section-title content();
}
/* Le premier h1 ne force pas de saut de page */
h1:first-child,
.content > h1:first-of-type {
page-break-before: avoid;
break-before: avoid;
}
h1 em { font-style: italic; color: var(--terracotta); }
h2 {
font-family: var(--font-display);
font-size: 1.6em; /* ~18pt */
font-weight: 400;
line-height: 1.2;
color: var(--brown);
letter-spacing: 0.02em;
margin-top: 1.2em;
margin-bottom: 0.5em;
padding-bottom: 0.3em;
border-bottom: 0.75pt solid var(--sand);
page-break-after: avoid;
break-after: avoid;
}
h3 {
font-family: var(--font-display);
font-size: 1.2em; /* ~13pt */
font-weight: 500;
line-height: 1.3;
color: var(--brown-mid);
margin-top: 1em;
margin-bottom: 0.4em;
page-break-after: avoid;
break-after: avoid;
}
h4 {
font-family: var(--font-body);
font-size: 0.8em; /* ~9pt */
font-weight: 500;
line-height: 1.4;
color: var(--terracotta);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 0.8em;
margin-bottom: 0.3em;
page-break-after: avoid;
break-after: avoid;
}
/* ----------------------------------------------------------
* PARAGRAPHES & TEXTE
* ---------------------------------------------------------- */
p {
margin-bottom: 0.8em;
text-align: justify;
hyphens: auto;
widows: 3;
orphans: 3;
}
/* Paragraphe d'accroche */
.lead {
font-size: 1.15em;
font-weight: 300;
color: var(--text-muted);
text-align: left;
line-height: 1.7;
margin-bottom: 1.2em;
}
/* Label de section (intro de partie) */
.section-label {
font-family: var(--font-body);
font-size: 0.7em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--terracotta);
display: block;
margin-bottom: 0.4em;
}
/* Emphase */
em { font-style: italic; }
strong { font-weight: 500; color: var(--brown); }
a {
color: var(--terracotta);
text-decoration: underline;
text-underline-offset: 2pt;
}
/* ----------------------------------------------------------
* LISTES
* ---------------------------------------------------------- */
ul, ol {
margin: 0 0 0.8em 1.4em;
padding: 0;
}
li {
margin-bottom: 0.3em;
line-height: 1.6;
}
ul li::marker { color: var(--terracotta); }
ol li::marker { color: var(--text-muted); font-weight: 500; }
/* ----------------------------------------------------------
* CALLOUT BOXES
* ---------------------------------------------------------- */
.callout {
background: var(--sage-light);
border-left: 3pt solid var(--terracotta);
padding: 0.8em 1em;
margin: 1em 0;
border-radius: 0 2pt 2pt 0;
page-break-inside: avoid;
break-inside: avoid;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
font-family: var(--font-body);
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 0.4em;
display: block;
}
/* Variante warning */
.callout.warning {
background: rgba(196, 113, 74, 0.08);
border-left-color: var(--terracotta);
}
/* Variante info */
.callout.info {
background: rgba(122, 155, 127, 0.12);
border-left-color: var(--sage);
}
.callout.info .callout-title { color: var(--sage); }
/* ----------------------------------------------------------
* PULL-QUOTE
* ---------------------------------------------------------- */
.pull-quote {
font-family: var(--font-display);
font-size: 1.4em;
font-weight: 300;
font-style: italic;
color: var(--terracotta);
text-align: center;
line-height: 1.45;
border-top: 1pt solid var(--sand);
border-bottom: 1pt solid var(--sand);
padding: 0.8em 1em;
margin: 1.2em 0;
page-break-inside: avoid;
break-inside: avoid;
}
.pull-quote cite {
display: block;
font-family: var(--font-body);
font-size: 0.55em;
font-style: normal;
font-weight: 400;
color: var(--text-muted);
letter-spacing: 0.08em;
margin-top: 0.5em;
}
/* ----------------------------------------------------------
* FIGURES & IMAGES
* ---------------------------------------------------------- */
.figure {
text-align: center;
margin: 1.2em 0;
page-break-inside: avoid;
break-inside: avoid;
}
.figure img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.figure figcaption,
.figure .caption {
font-family: var(--font-body);
font-size: 0.85em;
font-style: italic;
color: var(--text-muted);
margin-top: 0.4em;
text-align: center;
}
/* ----------------------------------------------------------
* SIDEBAR
* ---------------------------------------------------------- */
.sidebar {
float: right;
width: 35%;
background: var(--beige);
border-left: 2pt solid var(--sand);
padding: 0.8em 1em;
margin: 0 0 1em 1.5em;
font-size: 0.9em;
page-break-inside: avoid;
break-inside: avoid;
}
.sidebar h4 {
margin-top: 0;
margin-bottom: 0.5em;
font-size: 0.75em;
}
.sidebar p:last-child { margin-bottom: 0; }
/* ----------------------------------------------------------
* TABLEAUX
* ---------------------------------------------------------- */
.data-table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 0.9em;
page-break-inside: avoid;
break-inside: avoid;
}
.data-table thead th {
background: var(--brown);
color: var(--cream);
font-family: var(--font-body);
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: left;
padding: 0.5em 0.8em;
}
.data-table tbody tr:nth-child(even) {
background: var(--cream);
}
.data-table tbody td {
padding: 0.4em 0.8em;
border-bottom: 0.5pt solid var(--sand);
color: var(--text);
vertical-align: top;
}
.data-table tbody tr:last-child td {
border-bottom: 1pt solid var(--brown);
}
.data-table caption {
font-size: 0.8em;
font-style: italic;
color: var(--text-muted);
text-align: left;
padding-bottom: 0.4em;
}
/* ----------------------------------------------------------
* CODE
* ---------------------------------------------------------- */
code {
font-family: 'DM Sans', 'Courier New', monospace;
font-size: 0.88em;
background: var(--beige);
color: var(--brown);
padding: 0.1em 0.35em;
border-radius: 2pt;
border: 0.5pt solid var(--sand);
}
pre {
font-family: 'DM Sans', 'Courier New', monospace;
font-size: 0.85em;
background: var(--beige);
color: var(--text);
padding: 0.8em 1em;
border-radius: 3pt;
border: 0.5pt solid var(--sand);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
margin: 1em 0;
page-break-inside: avoid;
break-inside: avoid;
}
pre code {
background: none;
border: none;
padding: 0;
font-size: 1em;
}
/* ----------------------------------------------------------
* NOTES DE BAS DE PAGE
* ---------------------------------------------------------- */
.footnotes,
.footnote {
font-family: var(--font-body);
font-size: 0.8em;
color: var(--text-muted);
line-height: 1.5;
margin-top: 1.5em;
padding-top: 0.6em;
border-top: 0.5pt solid var(--sand);
}
.footnotes ol { margin-left: 1em; }
sup {
font-size: 0.7em;
vertical-align: super;
color: var(--terracotta);
font-weight: 500;
line-height: 0;
}
/* ----------------------------------------------------------
* SÉPARATEUR DE SECTION
* ---------------------------------------------------------- */
hr.section-break {
border: none;
border-top: 1pt solid var(--sand);
margin: 1.5em 0;
}
hr.ornamental {
border: none;
text-align: center;
margin: 1.5em 0;
color: var(--terracotta);
}
hr.ornamental::after {
content: '✦';
font-size: 10pt;
letter-spacing: 0.5em;
color: var(--sand);
}
/* ----------------------------------------------------------
* CONTRÔLE DES SAUTS DE PAGE
* ---------------------------------------------------------- */
.page-break {
page-break-before: always;
break-before: page;
}
.no-break {
page-break-inside: avoid;
break-inside: avoid;
}
figure, blockquote, table, pre,
.callout, .pull-quote, .sidebar, .figure {
page-break-inside: avoid;
break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
break-after: avoid;
}
/* ----------------------------------------------------------
* @MEDIA SCREEN — Prévisualisation navigateur
* ---------------------------------------------------------- */
@media screen {
body {
font-size: 16px;
background: #E8E0D4;
padding: 2rem;
}
/* Simuler la feuille de papier */
.cover,
.toc,
.content {
max-width: 800px;
margin: 0 auto 2rem;
padding: 3rem 2.5rem;
background: var(--white);
box-shadow: 0 4px 40px rgba(44, 31, 20, 0.12);
}
/* Page de couverture : hauteur simulée */
.cover {
min-height: 900px;
position: relative;
}
/* Visualiser les sauts de page */
h1 {
border-top: 2px dashed rgba(196, 113, 74, 0.25);
padding-top: 2rem;
margin-top: 2rem;
}
h1:first-child,
.content > h1:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* Ajustements tailles écran */
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 0.8rem; }
.cover-title { font-size: 3.2rem; }
}
/* ----------------------------------------------------------
* @MEDIA PRINT — Styles purs impression
* ---------------------------------------------------------- */
@media print {
body {
font-size: 11pt;
background: white;
color: var(--text);
}
/* Masquer les éléments non imprimables */
.no-print,
nav,
header:not(.cover-brand),
footer:not(.cover-brand) {
display: none !important;
}
/* Liens : afficher les URL */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.75em;
color: var(--text-muted);
font-weight: 300;
}
a[href^="#"]::after {
content: none;
}
/* Optimisation couleurs impression */
.callout { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.callout.warning { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.data-table thead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cover::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}