dans le markup varie d'une section à
l'autre (à hauteur du passage qui le concerne) : c'est ce décalage qui
fait carnet de bord. Taille et angle par sticker via la section. */
.page-work #solutions-team { --sticker-w: 190px; --sticker-tilt: -4deg; }
.page-work #secure-platforms { --sticker-w: 180px; --sticker-tilt: 4deg; }
.page-work #iot-platform { --sticker-w: 170px; --sticker-tilt: -5deg; }
.page-work #document-factory { --sticker-w: 200px; --sticker-tilt: 3deg; }
.case-sticker {
float: right;
width: min(var(--sticker-w, 180px), 32%);
margin: 0.5rem -10px 0.8rem 22px;
}
.case-sticker img {
display: block;
width: 100%;
height: auto;
transform: rotate(var(--sticker-tilt, -5deg));
/* Ombre discrète : le grand halo (8px/18px) alourdissait le sticker. */
filter: drop-shadow(0 3px 7px var(--sticker-shadow-ink));
transition: transform 0.25s ease-out; /* sortie : se repose sans rebond */
}
/* Survol réservé aux vrais pointeurs : au tap, l'état :hover restait collé
(sticker figé en rotation). L'entrée garde la courbe à ressort, la sortie
se pose avec l'ease-out court déclaré sur l'état de repos. */
@media (hover: hover) and (pointer: fine) {
.sticker:hover img {
transform: rotate(4deg) scale(1.05);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.case-sticker:hover img {
transform: rotate(1deg) scale(1.04);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
@media (prefers-reduced-motion: reduce) {
.sticker img, .case-sticker img { transition: none; }
.sticker:hover img { transform: rotate(-6deg); }
.case-sticker:hover img { transform: rotate(var(--sticker-tilt, -5deg)); }
}
@media (max-width: 560px) {
.work-summary { grid-template-columns: 1fr; }
.work-summary .text-link { grid-column: 1; }
/* Portrait : flotté à droite du lead, comme les stickers de la page Work,
plutôt qu'un bloc centré qui coupe le hero en deux. Cap réduit pour que
la colonne d'habillage garde ~25 caractères par ligne (à 140px elle
tombait à 2-3 mots par ligne). Pampy garde son traitement centré à
carte-légende, qui fonctionne bien. */
.portrait { width: min(112px, 30vw); margin: 0.2rem -4px 8px 14px; }
.lead { font-size: 1.05rem; }
/* Le
volontaire du h1 impose des lignes bancales sous 560px. */
h1 br { display: none; }
.sticker { float: none; width: min(200px, 55%); margin: 4px auto 20px; }
}
@media (max-width: 720px) {
/* Cap réduit pour laisser une colonne de texte d'au moins ~200px sur
un écran de 375px (à 148px elle tombait à 3-4 mots par ligne sur
les quatre études de cas). */
.case-sticker { width: min(118px, 33vw); margin: 0.4rem -4px 0.6rem 14px; }
/* gap 28px : les halos de tap de 12px des deux liens empilés se
chevauchaient de 4px avec le gap de 20px. */
.page-next { align-items: flex-start; flex-direction: column; gap: 28px; }
}
/* Badges / chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 1.4rem; }
.chip {
font-family: var(--font-mono);
font-size: 0.76rem;
padding: 4px 11px;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--ink-soft);
background: var(--bg-raised);
}
.chip.chip-accent {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--accent-ink);
background: var(--accent-soft);
}
/* Principles list */
.principles { display: grid; gap: 4px; margin: 1.4rem 0; }
.principle {
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
padding: 14px 12px;
border-radius: var(--radius);
}
.principle .p-n {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--accent-ink);
padding-top: 3px;
}
.principle h3 { margin: 0 0 4px; font-size: 1rem; }
.principle p { margin: 0; font-size: 0.92rem; }
.principles--home {
gap: 0;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.principles--home .principle {
padding: 18px 0;
border-top: 1px solid var(--border);
border-radius: 0;
}
.principles--home .principle:first-child { border-top: 0; }
/* Checklist (what I bring) */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 10px; }
.checklist li {
display: flex;
gap: 12px;
align-items: baseline;
margin: 0;
}
.checklist li::before {
content: '→';
font-family: var(--font-mono);
color: var(--accent);
font-weight: 600;
flex: none;
}
/* Contact block */
.contact-panel {
background: var(--code-bg);
color: var(--code-ink);
border-radius: var(--radius);
padding: clamp(24px, 4vw, 40px);
margin: 2rem 0 1rem;
box-shadow: var(--shadow-2);
}
.contact-panel h2 {
color: #FFF;
margin: 0 0 10px;
}
.contact-panel p { color: rgba(255, 255, 255, 0.72); }
.contact-panel--focused p { max-width: 46ch; }
.contact-panel .btn-primary { background: var(--brand); color: #201203; }
.contact-panel .btn-primary:hover { background: #FF6A2B; color: #201203; }
.contact-panel .btn-ghost { border-color: rgba(255, 255, 255, 0.25); color: #FFF; }
.contact-panel .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
/* Footer */
/* Footer - colophon du site : identité, trois groupes de liens dans la langue
mono de la sidebar, clin d'œil terminal et ligne de base typographique.
Chaque lien est un bloc à hauteur voulue : l'ancien footer à une ligne
gonflait au hasard des retours à la ligne selon le navigateur. */
.site-footer {
margin-top: 4.5rem;
border-top: 1px solid var(--border);
padding: 32px 0 max(22px, var(--safe-bottom));
color: var(--muted);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(110px, 1fr));
gap: 28px 20px;
}
.footer-id { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-tag { margin: 0; font-size: 0.82rem; }
.footer-exit {
margin: 4px 0 0;
font-family: var(--font-mono);
font-size: 0.78rem;
}
.footer-exit .fx-prompt { color: var(--accent); }
.footer-col .side-title {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--muted);
margin: 0 0 6px;
}
.footer-col a {
display: block;
padding: 5px 0;
color: var(--ink-soft);
font-size: 0.88rem;
}
.footer-col a:hover { color: var(--accent-ink); }
.footer-col a[aria-current="page"] { color: var(--accent-ink); }
.footer-base {
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 24px;
font-size: 0.78rem;
}
.footer-base p { margin: 0; }
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-id { grid-column: 1 / -1; }
}
/* Blog : la meta d'article (date, temps de lecture) sous le titre ;
tout le reste réutilise les composants existants (page-intro,
doc-section, work-summary, callout, terminal). */
.blog-list { margin: 1.4rem 0; }
.blog-featured {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(24px, 4vw, 46px);
align-items: center;
padding: 10px 0 30px;
border-bottom: 1px solid var(--border-strong);
scroll-margin-top: calc(var(--header-offset) + 24px);
}
.blog-featured-media { margin: 0; }
.blog-featured-media img {
display: block;
width: 100%;
height: auto;
transform: rotate(-1deg);
filter: drop-shadow(0 6px 14px var(--sticker-shadow-ink));
}
.blog-featured-content .post-meta { margin: 0 0 12px; }
.blog-featured-content h3 { margin: 0 0 10px; font-size: 1.25rem; }
.blog-featured-content > p:not(.post-meta) { margin: 0 0 14px; color: var(--ink-soft); }
.blog-compact-list { border-top: 0; }
.blog-compact:first-child { border-top: 0; }
/* Deux largeurs, une seule grille dans les articles (décision Nicolas) :
tout le flux textuel (prose, titres, listes, principes, callout,
terminal) partage une mesure FIXE de 38rem, l'équivalent des 60ch
effectifs de la prose figé en rem, car ch varie avec le corps de
chaque bloc (le terminal en 0.84rem obtenait un 60ch plus étroit que
le callout). Les figures visuelles (héros, diagramme, façade vidéo)
s'étendent à 45rem, alignées sur le même bord gauche : débord franc
et systématique plutôt qu'un dégradé accidentel de largeurs. Scope
`article` : accueil, réalisations et pages d'erreur inchangés. */
.content article .doc-section > *,
.content article .page-intro .lead { max-width: 38rem; }
.content article .post-hero,
.content article .post-diagram,
.content article .video-facade { max-width: 45rem; }
.post-meta {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.02em;
margin: -16px 0 26px;
}
/* Dans les cartes d'index, la meta s'empile volontairement (date, temps
de lecture, catégorie) : la colonne est trop étroite pour une ligne
avec séparateurs, qui se repliait en escalier. */
.work-summary .post-meta { margin: 0 0 6px; display: grid; gap: 3px; justify-items: start; }
.post-meta .post-cat { color: var(--accent-ink); font-weight: 600; }
/* Illustration d'en-tête d'article : sticker large centré sous l'intro,
WebP à fond transparent (le bord die-cut blanc porte les deux thèmes).
Posé avec une très légère inclinaison, comme les stickers du reste du
site ; il se redresse au survol (pointeurs fins uniquement). Le bloc
global prefers-reduced-motion neutralise la transition. */
.post-hero { margin: 4px 0 36px; }
.post-hero img {
display: block;
width: 100%;
height: auto;
transform: rotate(-1.2deg);
transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
.post-hero:hover img { transform: rotate(0deg) scale(1.015); }
}
/* Façade vidéo : aucune requête tierce avant le clic (fidèle au « sans
tracking » du site). Sans JavaScript, la façade est un lien YouTube ;
au clic, un petit script la remplace par l'iframe youtube-nocookie. */
.video-facade {
position: relative;
display: block;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-2);
margin: 26px 0 8px;
}
.video-facade img { display: block; width: 100%; height: auto; }
.video-facade .vf-play {
position: absolute;
inset: 0;
margin: auto;
width: 72px;
height: 50px;
border-radius: 12px;
background: rgba(23, 23, 22, 0.82);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.video-facade .vf-play svg { width: 26px; height: 26px; fill: #FFF; margin-left: 3px; }
.video-facade:hover .vf-play { background: var(--brand); transform: scale(1.06); }
.video-embed { margin: 26px 0 8px; }
.video-embed iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--radius);
box-shadow: var(--shadow-2);
}
.vf-note {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--muted);
margin: 0 0 26px;
}
/* Diagramme d'article : SVG inline aux tokens du site (pas de lib). */
.post-diagram { margin: 26px 0; }
.post-diagram__viewport { min-width: 0; }
.post-diagram__viewport svg { display: block; width: 100%; height: auto; }
.post-diagram__hint {
display: none;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--accent-ink);
margin: 0 0 8px;
}
.post-diagram .d-box { fill: var(--bg-raised); stroke: var(--border-strong); rx: 4px; }
.post-diagram .d-box--ai { fill: var(--accent-soft); stroke: var(--accent); }
.post-diagram text { font-family: var(--font-mono); fill: var(--ink); }
.post-diagram .d-dim { fill: var(--muted); }
.post-diagram .d-accent { fill: var(--accent-ink); font-weight: 600; }
.post-diagram .d-arrow { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
.post-diagram .d-head { fill: var(--border-strong); }
.post-diagram figcaption {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
margin-top: 8px;
}
/* Functional article models. They summarize an argument with rules and
sequence instead of adding another decorative illustration. */
.content article .post-model { max-width: 45rem; }
.post-model {
margin: 28px 0 34px;
padding: 18px 0 14px;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.post-model__label {
margin: 0 0 10px;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 650;
color: var(--accent-ink);
letter-spacing: 0.04em;
}
.post-model figcaption {
margin: 14px 0 0;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--muted);
}
.responsibility-map {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 20px;
align-items: stretch;
}
.responsibility-map__lane ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 7px;
}
.responsibility-map__lane li {
margin: 0;
color: var(--ink-soft);
font-size: 0.9rem;
}
.responsibility-map__lane li::before {
content: '→';
margin-right: 8px;
color: var(--accent);
font-family: var(--font-mono);
}
.responsibility-map__hinge {
display: grid;
align-content: center;
gap: 8px;
padding: 0 18px;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted);
text-align: center;
}
.responsibility-map figcaption { grid-column: 1 / -1; }
.operating-model ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.operating-model li {
position: relative;
min-width: 0;
margin: 0;
padding: 0 18px;
border-left: 1px solid var(--border);
}
.operating-model li:first-child { padding-left: 0; border-left: 0; }
.operating-model li:last-child { padding-right: 0; }
.operating-model li:not(:last-child)::after {
content: '→';
position: absolute;
top: 0;
right: -0.42em;
z-index: 1;
padding: 0 2px;
background: var(--bg);
color: var(--accent-ink);
font-family: var(--font-mono);
}
.operating-model strong {
display: block;
margin-bottom: 7px;
font-size: 0.86rem;
line-height: 1.35;
}
.operating-model li span {
display: block;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
}
/* Pages d'erreur (404.html et 4xx/5xx à la racine). Mise en page centrée,
sans header ni footer : le lien brand ramène à l'accueil. Le terminal
rejoue une commande plausible avec son vrai code de sortie shell. Entrée
en fondu décalé héritée de la 404 d'origine, seul « budget delight » du
site ; navigateurs sans @starting-style : affichage instantané ;
prefers-reduced-motion : couvert par le bloc global plus bas. */
.err-wrap {
min-height: 100vh;
min-height: 100dvh;
display: grid;
/* minmax(0, 1fr) : comme pour .layout, une piste auto se calerait sur le
min-content du du terminal et déborderait du padding sur mobile ;
piste bornée, le défile à l'intérieur comme sur l'accueil. */
grid-template-columns: minmax(0, 1fr);
place-items: center;
padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.err { text-align: center; width: 100%; max-width: 34rem; }
.err .brand { justify-content: center; margin-bottom: 28px; }
.err .code { font-family: var(--font-mono); color: var(--accent-ink); font-size: 0.8rem; letter-spacing: 0.1em; }
.err .terminal { text-align: left; margin: 28px 0 0; }
.err .btn-row { justify-content: center; }
.err > * {
opacity: 1;
transform: translateY(0);
transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.err > :nth-child(2) { transition-delay: 60ms; }
.err > :nth-child(3) { transition-delay: 120ms; }
.err > :nth-child(4) { transition-delay: 180ms; }
.err > :nth-child(5) { transition-delay: 240ms; }
.err > :nth-child(6) { transition-delay: 300ms; }
.err > :nth-child(7) { transition-delay: 360ms; }
.err > :nth-child(8) { transition-delay: 420ms; }
@starting-style {
.err > * { opacity: 0; transform: translateY(10px); }
}
/* Sticker 404 : Pampy rapporte un bout de page (« fetch failed »).
Entrée avec un léger pop incliné (la 404 est le seul budget delight
du site), puis ébrouement de chien au survol ou au toucher.
prefers-reduced-motion (bloc global) fige tout instantanément. */
.err .err-sticker { margin: 10px 0 0; }
.err .err-sticker img {
width: min(52vw, 220px);
height: auto;
transform-origin: 50% 88%;
}
@starting-style {
.err > .err-sticker { transform: translateY(12px) scale(0.9) rotate(-5deg); }
}
@media (hover: hover) and (pointer: fine) {
.err-sticker img:hover { animation: pampy-shake 0.6s ease-in-out; }
}
.err-sticker img:active { animation: pampy-shake 0.6s ease-in-out; }
@keyframes pampy-shake {
0% { transform: rotate(0); }
20% { transform: rotate(-6deg) scale(1.04); }
40% { transform: rotate(5deg) scale(1.04); }
60% { transform: rotate(-3deg) scale(1.02); }
80% { transform: rotate(2deg) scale(1.01); }
100% { transform: rotate(0) scale(1); }
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
/* minmax(0, 1fr) - a bare 1fr cannot shrink below the track's min-content
(the terminal is ~625px wide), which forced a 665px layout on phones */
.layout { grid-template-columns: minmax(0, 1fr); }
.menu-btn { display: grid; }
.sidebar {
position: fixed;
inset: var(--header-offset) auto 0 0;
width: min(320px, 85vw);
background: var(--bg);
border-right: 1px solid var(--border);
/* clear the home indicator + notch in landscape */
padding: 24px max(20px, var(--safe-left)) max(40px, calc(24px + var(--safe-bottom)));
transform: translateX(-102%);
visibility: hidden; /* keeps off-screen links out of the tab order */
transition: transform 0.22s ease, visibility 0s 0.22s;
z-index: 40;
box-shadow: none;
overscroll-behavior: contain;
}
.sidebar.open {
transform: translateX(0);
visibility: visible;
transition: transform 0.22s ease, visibility 0s;
box-shadow: var(--shadow-2);
}
.backdrop {
position: fixed;
inset: var(--header-offset) 0 0 0;
background: rgba(23, 23, 22, 0.35);
z-index: 39;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.backdrop.show { opacity: 1; pointer-events: auto; }
/* Lock the page behind the open drawer (modal behaviour) */
body.nav-open { overflow: hidden; }
.header-nav { display: none; }
}
/* Bigger touch targets on touch devices (Apple HIG: 44px) */
@media (pointer: coarse) {
.icon-btn { width: 44px; height: 44px; }
.lang-switch a, .lang-switch span { padding: 7px 12px; }
.header-nav a { padding: 10px 12px; }
.side-group a { padding: 12px 10px; }
.btn { min-height: 44px; }
/* Liens texte autonomes (étude de cas, fil d'Ariane, pagination) : la boîte
de tap grandit par padding + marge négative, sans bouger la mise en page. */
.text-link,
.breadcrumb a,
.page-next a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
/* Pilule de langue : zone de tap invisible étendue à ~44px. */
.lang-switch a { position: relative; }
.lang-switch a::before { content: ''; position: absolute; inset: -8px -4px; }
/* Ancres de titres : invisibles au survol qui n'existe pas au tactile,
elles restent repérables et gagnent une zone de tap honnête.
0.75 : --muted à 45 % tombait sous 3:1 (repère UI illisible). */
.anchor-heading .anchor { opacity: 0.75; padding: 8px 10px; margin-left: 2px; }
/* Hauteur tactile délibérée et identique dans tous les navigateurs.
column-gap : en flex, l'espace devant la flèche « ↗ » est rogné par le
moteur (espace en tête d'item) ; le gap le remplace, sans effet sur les
liens à nœud texte unique. */
.footer-col a { display: flex; align-items: center; min-height: 44px; padding: 0; column-gap: 0.35em; }
}
@media (max-width: 560px) {
.site-header .brand span { display: none; }
.site-header .header-actions > a.icon-btn { display: none; }
.content { padding-top: 28px; }
h2 { font-size: 1.45rem; }
.portrait--mobile-block {
float: none;
width: min(150px, 42vw);
margin: 12px auto 18px;
}
.content article .terminal pre,
.terminal--signature pre,
.err .terminal pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.responsibility-map { grid-template-columns: 1fr; gap: 16px; }
.responsibility-map__hinge {
grid-template-columns: repeat(3, auto);
justify-content: start;
padding: 12px 0;
border: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.operating-model ol { grid-template-columns: 1fr; }
.operating-model li,
.operating-model li:first-child,
.operating-model li:last-child {
padding: 14px 0;
border: 0;
border-top: 1px solid var(--border);
}
.operating-model li:first-child { border-top: 0; padding-top: 0; }
.operating-model li:last-child { padding-bottom: 0; }
.operating-model li:not(:last-child)::after {
content: '↓';
top: auto;
right: 0;
bottom: -0.75em;
}
}
@media (max-width: 720px) {
.case-index-list { grid-template-columns: 1fr; }
.case-index-item,
.case-index-item:nth-child(-n + 2) { border-top: 1px solid var(--border); }
.case-index-item:first-child { border-top: 0; }
.case-index-item:nth-child(even) { border-left: 0; }
.page-work--indexed .case-sticker {
float: none;
width: min(var(--sticker-w, 180px), 58vw);
margin: 1.2rem auto 1.4rem;
}
.stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-band .stat,
.stat-band .stat:first-child,
.stat-band .stat:last-child { padding: 16px; }
.stat-band .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.stat-band .stat:nth-child(even) { padding-right: 0; border-left: 1px solid var(--border); }
.stat-band .stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
.work-list--featured { grid-template-columns: 1fr; }
.work-list--featured .work-summary--featured,
.work-list--featured .work-summary--compact,
.work-list--featured .work-summary--compact:nth-child(2),
.work-list--featured .work-summary--compact:last-child {
grid-column: auto;
grid-template-columns: 1fr;
padding: 20px 0;
border-right: 0;
}
.work-list--featured .work-summary .text-link { grid-column: 1; }
.blog-featured { grid-template-columns: 1fr; }
.blog-featured-media { max-width: 30rem; }
.post-diagram__hint { display: block; }
.post-diagram__viewport {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
padding: 8px 0 12px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.post-diagram__viewport svg { width: 720px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
Impression des pages hors CV (le CV a son propre bloc dans cv.css).
Sans ces règles, terminal et panneau contact imprimaient blanc sur blanc :
les fonds sombres sautent par défaut à l'impression.
-------------------------------------------------------------------------- */
@media print {
/* Palette encre sur papier quel que soit le thème : l'attribut
data-theme="dark" continue de s'appliquer à l'impression, et ses jetons
(--ink ivoire...) rendraient le texte quasi invisible sur papier.
Même motif que le bloc print de cv.css. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
--bg: #FFFFFF;
--bg-raised: #FFFFFF;
--bg-inset: #FFFFFF;
--ink: #000000;
--ink-soft: #1F1F1E;
--muted: #4A4943;
--border: #D8D6CC;
--border-strong: #B9B6A9;
--accent: #9A4A26;
--accent-ink: #9A4A26;
--accent-soft: #FFFFFF;
--accent-glow: transparent;
color-scheme: light;
}
.site-header,
.sidebar,
.backdrop,
.skip-link { display: none !important; }
.layout { display: block; padding-top: 0; }
body { background: #FFF; color: #000; }
.terminal,
.contact-panel {
background: #FFF;
color: #000;
box-shadow: none;
border: 1px solid #999;
}
.terminal .t-prompt,
.terminal .t-cmd,
.terminal .t-key,
.contact-panel h2 { color: #000; }
.terminal .t-dim,
.terminal .terminal-title,
.contact-panel p { color: #444; }
.contact-panel .btn { background: #FFF; color: #000; border: 1px solid #999; }
}