/* ============================================================================ RESPIRIT — pp.css — feuille de style canonique ---------------------------------------------------------------------------- Version 1.0 · 20/09/2026 · Anouk, direction artistique. Base : variante C « Corporate lumineux ». Greffes de B : sur-titres mono à tiret cadratin (.pp-label), dernière ligne de titre en accent de désignation (.pp-hero-accent) à la place du surlignage or, corps de rapport 17 px / 1,62 (.pp-prose), break-after: page sur .pp-slide et .pp-cover à l'impression. Greffe de A : monospace sur les chiffres seuls (valeurs KPI, prix, colonnes numériques) — jamais sur une phrase ; hovers teintés marque étendus. TROIS familles, trois rôles, aucune quatrième : · Source Sans 3 — corps, interface, tableaux · Sora — titres, slides, couvertures · IBM Plex Mono — chiffres seuls, sources, sur-titres, références Source Serif 4 a été retirée : c'était le dernier reste du système papier/encre et une quatrième requête de police. À charger dans le , avant cette feuille : Thème : le mode sombre suit la préférence système ET l'attribut [data-theme="dark"] ; [data-theme="light"] force le clair, y compris contre la préférence système. Les livrables présentés ou imprimés (propale, deck, page de garde) épinglent data-theme="light" dans leur . Amorçage du thème, à poser en tête de pour éviter le flash : SOMMAIRE 1. Tokens — palette claire de référence 2. Tokens — valeurs sombres (déclarées une seule fois) 3. Application du mode sombre 4. Base et remise à zéro 5. Typographie utilitaire 6. Gabarit : conteneur, sections, grilles 7. Nav collante 8. Hero 9. Boutons 10. Carte 11. Tuile KPI 12. Pastille source 13. Encadré « ce que ça veut dire » 14. Bandeau d'honnêteté 15. Badge et puce 16. Tableau responsive 17. Onglets accessibles 18. Sommaire latéral collant 19. Figure, graphique, légende 20. Carte cartographique (Leaflet) 21. Frise chronologique 22. Monogramme et trombinoscope 23. Offre et tarifs 24. Deck plein écran 25. Page de garde 26. Pied de page 27. Bascule de thème 28. Mouvement réduit 29. Impression A4 ========================================================================== */ /* ============================================================================ 1. TOKENS — palette claire de référence ========================================================================== */ :root { color-scheme: light; /* --- Fonds et surfaces ------------------------------------------------ */ --pp-bg: #FFFFFF; /* fond de page */ --pp-surface-1: #F6F8FB; /* gris perle — sections alternées */ --pp-surface-2: #EDF1F6; /* en-têtes de tableau, cartes sur surface-1 */ --pp-surface-3: #E1E7EF; /* rails, pistes, zones inertes */ --pp-surface-inset: #FBFCFD; /* encadrés posés sur fond blanc */ /* --- Texte ------------------------------------------------------------ */ --pp-text-1: #0B1B2E; /* titres et corps — encre marine, jamais noir */ --pp-text-2: #46566E; /* texte secondaire, légendes longues */ --pp-text-3: #5C6B80; /* méta, labels, sources */ --pp-text-invert: #FFFFFF; /* texte sur aplat primaire */ /* --- Bordures --------------------------------------------------------- */ --pp-border: #DCE3EC; /* filet de carte — décoratif, 1 px */ --pp-border-strong: #BFC9D7; /* filets de tableau, séparateurs porteurs */ --pp-border-field: #7F8999; /* bord de champ de formulaire — ≥ 3:1 exigé */ --pp-border-focus: #0C737B; /* anneau de focus */ /* --- Accent principal : marine ---------------------------------------- */ --pp-primary: #0E3A63; --pp-primary-hover: #0A2C4C; --pp-primary-press: #071F36; --pp-primary-soft: #E8EFF7; /* fond d'état actif / survol teinté marque */ --pp-primary-line: #C6D8EA; --pp-on-primary: #FFFFFF; /* --- Accent secondaire : turquoise (« retenu, validé ») -------------------- */ --pp-accent: #0C737B; --pp-accent-hover: #095C63; --pp-accent-soft: #E3F6F8; --pp-accent-line: #B8E6EA; --pp-on-accent: #FFFFFF; /* --- Or sourd : ce qui engage l'auteur, et rien d'autre ---------------- */ --pp-gold: #0C737B; /* assombri depuis #8A6A15 : .pp-badge--gold passe de 4,44:1 à 5,17:1 sur gold-soft */ --pp-gold-soft: #E3F6F8; --pp-gold-line: #B8E6EA; /* --- Accent électrique : désignation et graphiques, une seule fois ----- */ --pp-electric: #0E96A0; /* trait, aplat, point de donnée — non textuel */ --pp-electric-ink: #0C737B; /* la même idée, lisible en texte */ --pp-electric-soft: #E3F6F8; /* --- États sémantiques ------------------------------------------------ */ --pp-success: #1F6B48; --pp-success-soft: #E7F2EC; --pp-warning: #8A5A10; --pp-warning-soft: #FAF1E0; --pp-danger: #A32A2A; --pp-danger-soft: #FAEBEB; /* --- Six séries de graphique, distinguables en clair et en sombre ------ */ --pp-chart-1: #0E3A63; /* marine */ --pp-chart-2: #3F6B50; /* turquoise */ --pp-chart-3: #7A5A10; /* ocre */ --pp-chart-4: #2F6E76; /* teal profond */ --pp-chart-5: #7A6E62; /* taupe */ --pp-chart-6: #0E96A0; /* électrique — la série désignée, une seule */ --pp-chart-grid: #E4E9F0; --pp-chart-axis: #5C6B80; /* --- Couleurs par enseigne -------------------------------------------- * Identifiants visuels, pas des couleurs de marque et pas un classement : aucune teinte ne vaut mieux qu'une autre. Au-delà de huit catégories affichées ensemble, la couleur seule ne suffit plus — voir la règle de regroupement dans DESIGN-SYSTEM.md. */ --pp-brand-bk: #8A6A15; /* Burger King — ocre */ --pp-brand-mcdo: #A32A2A; /* McDonald's — brique */ --pp-brand-kfc: #2F6E76; /* KFC — teal */ --pp-brand-quick: #3F6B50; /* Quick — turquoise */ --pp-brand-fiveguys: #7B3F63; /* Five Guys — prune */ --pp-brand-popeyes: #A85420; /* Popeyes — orange brûlé */ --pp-brand-otacos: #4C51A8; /* O'Tacos — indigo */ --pp-brand-indep: #7A6E62; /* indépendants — taupe */ --pp-brand-aubureau: #1F4E79; /* Au Bureau — ardoise */ --pp-brand-hippo: #6F4A2E; /* Hippopotamus — cuir */ --pp-brand-leon: #6E8C3A; /* Léon — olive */ --pp-brand-volfoni: #8C2F4A; /* Volfoni — bordeaux */ --pp-brand-pitaya: #93357A; /* Pitaya — magenta sourd */ --pp-brand-bertrand: #5C6B80; /* autres enseignes Bertrand — gris bleu */ /* --- Cartographie ----------------------------------------------------- */ --pp-map-target: #0E96A0; /* emplacement étudié — le seul point électrique */ --pp-map-surface: #EDF1F6; /* fond de conteneur avant chargement des tuiles */ --pp-map-stroke: #FFFFFF; /* liseré de marqueur */ --pp-map-radius: #0E3A63; /* cercle de rayon d'analyse */ /* --- Typographie ------------------------------------------------------ */ --pp-font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --pp-font-display: "Sora", "Source Sans 3", "Segoe UI", system-ui, sans-serif; --pp-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Échelle 12 → 64 px */ --pp-text-2xs: 0.75rem; /* 12 — micro-label, pastille source */ --pp-text-xs: 0.8125rem; /* 13 — méta, légende */ --pp-text-sm: 0.875rem; /* 14 — interface, tableau */ --pp-text-md: 1rem; /* 16 — corps d'interface */ --pp-text-prose: 1.0625rem; /* 17 — corps de rapport (greffe B) */ --pp-text-lg: 1.125rem; /* 18 — chapô */ --pp-text-xl: 1.375rem; /* 22 — titre de carte */ --pp-text-2xl: 1.75rem; /* 28 — titre de section */ --pp-text-3xl: 2.25rem; /* 36 — titre de chapitre */ --pp-text-4xl: 2.75rem; /* 44 — hero mobile, titre de slide bas */ --pp-text-5xl: 3.5rem; /* 56 — hero desktop */ --pp-text-6xl: 4rem; /* 64 — titre de slide haut, chiffre de garde */ --pp-weight-regular: 400; --pp-weight-medium: 500; --pp-weight-semibold: 600; --pp-weight-bold: 700; /* plafond : jamais 800 ni 900 */ --pp-leading-tight: 1.12; --pp-leading-snug: 1.25; --pp-leading-normal: 1.5; --pp-leading-prose: 1.62; /* corps de rapport (greffe B) */ --pp-tracking-display: -0.022em; --pp-tracking-title: -0.012em; --pp-tracking-normal: 0em; --pp-tracking-label: 0.06em; --pp-numeric: tabular-nums lining-nums; /* règle par défaut du système */ /* --- Espacements, échelle 4 px ---------------------------------------- */ --pp-space-1: 0.25rem; --pp-space-2: 0.5rem; --pp-space-3: 0.75rem; --pp-space-4: 1rem; --pp-space-5: 1.25rem; --pp-space-6: 1.5rem; --pp-space-8: 2rem; --pp-space-10: 2.5rem; --pp-space-12: 3rem; --pp-space-16: 4rem; --pp-space-20: 5rem; --pp-space-24: 6rem; --pp-space-32: 8rem; /* --- Rayons — 6 à 10 px ; le pill est réservé aux badges --------------- */ --pp-radius-xs: 2px; --pp-radius-sm: 4px; --pp-radius-md: 6px; --pp-radius-lg: 8px; --pp-radius-xl: 10px; --pp-radius-pill: 999px; /* --- Ombres discrètes — le filet fait le travail ----------------------- */ --pp-shadow-none: none; --pp-shadow-xs: 0 1px 1px rgba(11, 27, 46, 0.04); --pp-shadow-sm: 0 1px 2px rgba(11, 27, 46, 0.06); --pp-shadow-md: 0 2px 6px rgba(11, 27, 46, 0.07); --pp-shadow-lg: 0 8px 24px rgba(11, 27, 46, 0.09); --pp-ring: 0 0 0 3px rgba(12, 115, 123, 0.35); /* --- Transitions ------------------------------------------------------ */ --pp-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --pp-dur-fast: 120ms; --pp-dur-normal: 200ms; --pp-dur-slow: 320ms; /* --- Gabarit ---------------------------------------------------------- */ --pp-measure-prose: 68ch; --pp-measure-lead: 56ch; --pp-container: 1200px; --pp-container-wide: 1440px; --pp-gutter: 1.25rem; --pp-nav-height: 64px; /* --- z-index ---------------------------------------------------------- */ --pp-z-base: 0; --pp-z-map: 10; --pp-z-sticky: 100; --pp-z-nav: 200; --pp-z-overlay: 300; --pp-z-modal: 400; --pp-z-toast: 500; /* ========================================================================== 2. TOKENS — valeurs sombres, déclarées UNE SEULE FOIS -------------------------------------------------------------------------- Le mode sombre n'est pas une inversion : chaque rôle a sa valeur propre, recalculée. Ces valeurs vivent ici, sous des noms préfixés --pp-dk-* ; la section 3 se contente de les brancher. Aucun hexadécimal n'est donc écrit deux fois dans cette feuille — la critique reprochait ~70 déclarations dupliquées à la variante C. ====================================================================== */ --pp-dk-bg: #0C1520; --pp-dk-surface-1: #111C29; --pp-dk-surface-2: #172434; --pp-dk-surface-3: #1F2F42; --pp-dk-surface-inset: #101A26; --pp-dk-text-1: #E8EEF6; --pp-dk-text-2: #A8B6C8; --pp-dk-text-3: #8394A9; --pp-dk-text-invert: #0C1520; --pp-dk-border: #22303F; --pp-dk-border-strong: #35485E; --pp-dk-border-field: #6B7C91; --pp-dk-border-focus: #19C6D1; --pp-dk-primary: #8CBCEC; --pp-dk-primary-hover: #A8CDF3; --pp-dk-primary-press: #C2DCF7; --pp-dk-primary-soft: #15283B; --pp-dk-primary-line: #294059; --pp-dk-on-primary: #08131F; --pp-dk-accent: #19C6D1; --pp-dk-accent-hover: #3FD4DD; --pp-dk-accent-soft: #0F3438; --pp-dk-accent-line: #1E5A60; --pp-dk-on-accent: #08131F; --pp-dk-gold: #5FDBE3; --pp-dk-gold-soft: #0F3438; --pp-dk-gold-line: #1E5A60; --pp-dk-electric: #19C6D1; --pp-dk-electric-ink: #5FDBE3; --pp-dk-electric-soft: #0F3438; --pp-dk-success: #6FCF9B; --pp-dk-success-soft: #12271D; --pp-dk-warning: #E3B341; --pp-dk-warning-soft: #2A2212; --pp-dk-danger: #F08A8A; --pp-dk-danger-soft: #2C1717; /* Séries sombres : éclaircies juste assez pour tenir 3:1, jamais pastel — le registre sourd du mode clair est conservé. */ --pp-dk-chart-1: #6E9BD1; --pp-dk-chart-2: #74AE8B; --pp-dk-chart-3: #C0A050; --pp-dk-chart-4: #5AA0A8; --pp-dk-chart-5: #A79B88; --pp-dk-chart-6: #4FA3F7; --pp-dk-chart-grid: #22303F; --pp-dk-chart-axis: #8394A9; --pp-dk-brand-bk: #D2B05A; --pp-dk-brand-mcdo: #E88C8C; --pp-dk-brand-kfc: #6FBCC4; --pp-dk-brand-quick: #86C49B; --pp-dk-brand-fiveguys: #B2809E; --pp-dk-brand-popeyes: #E39A62; --pp-dk-brand-otacos: #9EA2E8; --pp-dk-brand-indep: #BFB3A1; --pp-dk-brand-aubureau: #8FB8E0; --pp-dk-brand-hippo: #C39A75; --pp-dk-brand-leon: #B3CC77; --pp-dk-brand-volfoni: #C2607F; --pp-dk-brand-pitaya: #CE7FC0; --pp-dk-brand-bertrand: #98A6B8; --pp-dk-map-target: #19C6D1; --pp-dk-map-surface: #172434; --pp-dk-map-stroke: #0C1520; --pp-dk-map-radius: #8CBCEC; } /* ============================================================================ 3. APPLICATION DU MODE SOMBRE ---------------------------------------------------------------------------- Deux points d'entrée, une seule source de valeurs : · préférence système, sauf si [data-theme="light"] force le clair ; · [data-theme="dark"] posé sur , qui gagne contre la préférence. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pp-bg: var(--pp-dk-bg); --pp-surface-1: var(--pp-dk-surface-1); --pp-surface-2: var(--pp-dk-surface-2); --pp-surface-3: var(--pp-dk-surface-3); --pp-surface-inset: var(--pp-dk-surface-inset); --pp-text-1: var(--pp-dk-text-1); --pp-text-2: var(--pp-dk-text-2); --pp-text-3: var(--pp-dk-text-3); --pp-text-invert: var(--pp-dk-text-invert); --pp-border: var(--pp-dk-border); --pp-border-strong: var(--pp-dk-border-strong); --pp-border-field: var(--pp-dk-border-field); --pp-border-focus: var(--pp-dk-border-focus); --pp-primary: var(--pp-dk-primary); --pp-primary-hover: var(--pp-dk-primary-hover); --pp-primary-press: var(--pp-dk-primary-press); --pp-primary-soft: var(--pp-dk-primary-soft); --pp-primary-line: var(--pp-dk-primary-line); --pp-on-primary: var(--pp-dk-on-primary); --pp-accent: var(--pp-dk-accent); --pp-accent-hover: var(--pp-dk-accent-hover); --pp-accent-soft: var(--pp-dk-accent-soft); --pp-accent-line: var(--pp-dk-accent-line); --pp-on-accent: var(--pp-dk-on-accent); --pp-gold: var(--pp-dk-gold); --pp-gold-soft: var(--pp-dk-gold-soft); --pp-gold-line: var(--pp-dk-gold-line); --pp-electric: var(--pp-dk-electric); --pp-electric-ink: var(--pp-dk-electric-ink); --pp-electric-soft: var(--pp-dk-electric-soft); --pp-success: var(--pp-dk-success); --pp-success-soft: var(--pp-dk-success-soft); --pp-warning: var(--pp-dk-warning); --pp-warning-soft: var(--pp-dk-warning-soft); --pp-danger: var(--pp-dk-danger); --pp-danger-soft: var(--pp-dk-danger-soft); --pp-chart-1: var(--pp-dk-chart-1); --pp-chart-2: var(--pp-dk-chart-2); --pp-chart-3: var(--pp-dk-chart-3); --pp-chart-4: var(--pp-dk-chart-4); --pp-chart-5: var(--pp-dk-chart-5); --pp-chart-6: var(--pp-dk-chart-6); --pp-chart-grid: var(--pp-dk-chart-grid); --pp-chart-axis: var(--pp-dk-chart-axis); --pp-brand-bk: var(--pp-dk-brand-bk); --pp-brand-mcdo: var(--pp-dk-brand-mcdo); --pp-brand-kfc: var(--pp-dk-brand-kfc); --pp-brand-quick: var(--pp-dk-brand-quick); --pp-brand-fiveguys: var(--pp-dk-brand-fiveguys); --pp-brand-popeyes: var(--pp-dk-brand-popeyes); --pp-brand-otacos: var(--pp-dk-brand-otacos); --pp-brand-indep: var(--pp-dk-brand-indep); --pp-brand-aubureau: var(--pp-dk-brand-aubureau); --pp-brand-hippo: var(--pp-dk-brand-hippo); --pp-brand-leon: var(--pp-dk-brand-leon); --pp-brand-volfoni: var(--pp-dk-brand-volfoni); --pp-brand-pitaya: var(--pp-dk-brand-pitaya); --pp-brand-bertrand: var(--pp-dk-brand-bertrand); --pp-map-target: var(--pp-dk-map-target); --pp-map-surface: var(--pp-dk-map-surface); --pp-map-stroke: var(--pp-dk-map-stroke); --pp-map-radius: var(--pp-dk-map-radius); --pp-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.40); --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --pp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50); --pp-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --pp-ring: 0 0 0 3px rgba(25, 198, 209, 0.40); } } :root[data-theme="dark"] { color-scheme: dark; --pp-bg: var(--pp-dk-bg); --pp-surface-1: var(--pp-dk-surface-1); --pp-surface-2: var(--pp-dk-surface-2); --pp-surface-3: var(--pp-dk-surface-3); --pp-surface-inset: var(--pp-dk-surface-inset); --pp-text-1: var(--pp-dk-text-1); --pp-text-2: var(--pp-dk-text-2); --pp-text-3: var(--pp-dk-text-3); --pp-text-invert: var(--pp-dk-text-invert); --pp-border: var(--pp-dk-border); --pp-border-strong: var(--pp-dk-border-strong); --pp-border-field: var(--pp-dk-border-field); --pp-border-focus: var(--pp-dk-border-focus); --pp-primary: var(--pp-dk-primary); --pp-primary-hover: var(--pp-dk-primary-hover); --pp-primary-press: var(--pp-dk-primary-press); --pp-primary-soft: var(--pp-dk-primary-soft); --pp-primary-line: var(--pp-dk-primary-line); --pp-on-primary: var(--pp-dk-on-primary); --pp-accent: var(--pp-dk-accent); --pp-accent-hover: var(--pp-dk-accent-hover); --pp-accent-soft: var(--pp-dk-accent-soft); --pp-accent-line: var(--pp-dk-accent-line); --pp-on-accent: var(--pp-dk-on-accent); --pp-gold: var(--pp-dk-gold); --pp-gold-soft: var(--pp-dk-gold-soft); --pp-gold-line: var(--pp-dk-gold-line); --pp-electric: var(--pp-dk-electric); --pp-electric-ink: var(--pp-dk-electric-ink); --pp-electric-soft: var(--pp-dk-electric-soft); --pp-success: var(--pp-dk-success); --pp-success-soft: var(--pp-dk-success-soft); --pp-warning: var(--pp-dk-warning); --pp-warning-soft: var(--pp-dk-warning-soft); --pp-danger: var(--pp-dk-danger); --pp-danger-soft: var(--pp-dk-danger-soft); --pp-chart-1: var(--pp-dk-chart-1); --pp-chart-2: var(--pp-dk-chart-2); --pp-chart-3: var(--pp-dk-chart-3); --pp-chart-4: var(--pp-dk-chart-4); --pp-chart-5: var(--pp-dk-chart-5); --pp-chart-6: var(--pp-dk-chart-6); --pp-chart-grid: var(--pp-dk-chart-grid); --pp-chart-axis: var(--pp-dk-chart-axis); --pp-brand-bk: var(--pp-dk-brand-bk); --pp-brand-mcdo: var(--pp-dk-brand-mcdo); --pp-brand-kfc: var(--pp-dk-brand-kfc); --pp-brand-quick: var(--pp-dk-brand-quick); --pp-brand-fiveguys: var(--pp-dk-brand-fiveguys); --pp-brand-popeyes: var(--pp-dk-brand-popeyes); --pp-brand-otacos: var(--pp-dk-brand-otacos); --pp-brand-indep: var(--pp-dk-brand-indep); --pp-brand-aubureau: var(--pp-dk-brand-aubureau); --pp-brand-hippo: var(--pp-dk-brand-hippo); --pp-brand-leon: var(--pp-dk-brand-leon); --pp-brand-volfoni: var(--pp-dk-brand-volfoni); --pp-brand-pitaya: var(--pp-dk-brand-pitaya); --pp-brand-bertrand: var(--pp-dk-brand-bertrand); --pp-map-target: var(--pp-dk-map-target); --pp-map-surface: var(--pp-dk-map-surface); --pp-map-stroke: var(--pp-dk-map-stroke); --pp-map-radius: var(--pp-dk-map-radius); --pp-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.40); --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --pp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50); --pp-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); --pp-ring: 0 0 0 3px rgba(25, 198, 209, 0.40); } /* Le clair forcé, contre la préférence système : les livrables présentés ou imprimés portent cet attribut. */ :root[data-theme="light"] { color-scheme: light; } /* ============================================================================ 4. BASE ET REMISE À ZÉRO ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--pp-nav-height) + var(--pp-space-4)); } body { margin: 0; background: var(--pp-bg); color: var(--pp-text-1); font-family: var(--pp-font-sans); font-size: var(--pp-text-md); line-height: var(--pp-leading-normal); font-variant-numeric: var(--pp-numeric); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--pp-font-display); color: var(--pp-text-1); font-weight: var(--pp-weight-semibold); line-height: var(--pp-leading-snug); letter-spacing: var(--pp-tracking-title); margin: 0 0 var(--pp-space-3); text-wrap: balance; } h1 { font-size: var(--pp-text-3xl); line-height: var(--pp-leading-tight); letter-spacing: var(--pp-tracking-display); } h2 { font-size: var(--pp-text-2xl); } h3 { font-size: var(--pp-text-xl); } h4 { font-size: var(--pp-text-lg); } h5, h6 { font-size: var(--pp-text-md); } p { margin: 0 0 var(--pp-space-4); max-width: var(--pp-measure-prose); } ul, ol { margin: 0 0 var(--pp-space-4); padding-left: var(--pp-space-5); } li { margin-bottom: var(--pp-space-2); max-width: var(--pp-measure-prose); } a { color: var(--pp-electric-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--pp-primary); } /* Correctif Anouk 17 : code/mono et boutons ne retombent plus sur les polices systeme */ code, kbd, samp, pre { font-family: var(--pp-font-mono); font-size: .92em; } button { font: inherit; } img, svg, canvas { max-width: 100%; } img { height: auto; } :where(a, button, [tabindex], input, select, textarea, summary):focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 2px; border-radius: var(--pp-radius-sm); } /* Champs de formulaire — le seul endroit où --pp-border-field est exigé */ input, select, textarea { font: inherit; color: var(--pp-text-1); background: var(--pp-bg); border: 1px solid var(--pp-border-field); border-radius: var(--pp-radius-md); padding: var(--pp-space-3) var(--pp-space-4); min-height: 44px; width: 100%; } textarea { min-height: 120px; } input::placeholder, textarea::placeholder { color: var(--pp-text-3); } hr.pp-rule { border: 0; border-top: 1px solid var(--pp-border); margin: var(--pp-space-10) 0; } /* ============================================================================ 5. TYPOGRAPHIE UTILITAIRE ========================================================================== */ /* Lien d'évitement — première chose dans le */ .pp-skip { position: absolute; left: var(--pp-space-4); top: -5rem; z-index: var(--pp-z-toast); background: var(--pp-primary); color: var(--pp-on-primary); padding: var(--pp-space-3) var(--pp-space-4); border-radius: var(--pp-radius-md); text-decoration: none; transition: top var(--pp-dur-fast) var(--pp-ease); } .pp-skip:focus { top: var(--pp-space-3); color: var(--pp-on-primary); } .pp-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Sur-titre mono à tiret cadratin — greffe B. C'est le marqueur « tech » du système : purement typographique, gratuit. */ .pp-label { display: inline-flex; align-items: center; gap: var(--pp-space-2); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-medium); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: 0 0 var(--pp-space-3); } .pp-label::before { content: "\2014"; color: var(--pp-electric-ink); } .pp-label--bare::before { content: none; } .pp-label--accent { color: var(--pp-electric-ink); } .pp-label--gold { color: var(--pp-gold); } .pp-label--gold::before { color: var(--pp-gold); } .pp-lead { font-size: var(--pp-text-lg); line-height: var(--pp-leading-normal); color: var(--pp-text-2); max-width: var(--pp-measure-lead); } /* Corps de rapport — 17 px / 1,62 (greffe B) */ .pp-prose { font-size: var(--pp-text-prose); line-height: var(--pp-leading-prose); color: var(--pp-text-2); max-width: none; } .pp-prose > p, .pp-prose > ul, .pp-prose > ol { max-width: var(--pp-measure-prose); } .pp-prose strong { color: var(--pp-text-1); font-weight: var(--pp-weight-semibold); } .pp-prose > :where(h2, h3, h4):not(:first-child) { margin-top: var(--pp-space-10); } .pp-prose > h4:not(:first-child) { margin-top: var(--pp-space-8); } /* Mono sur les chiffres SEULS — greffe A. Jamais sur une phrase. */ .pp-num { font-family: var(--pp-font-mono); font-variant-numeric: var(--pp-numeric); font-feature-settings: "zero" 1; } /* Citation : Source Sans 3 italique. Source Serif 4 a été retirée du système. */ .pp-quote { font-style: italic; font-size: var(--pp-text-lg); line-height: var(--pp-leading-normal); color: var(--pp-text-2); border-left: 2px solid var(--pp-primary-line); padding-left: var(--pp-space-4); margin: var(--pp-space-6) 0; max-width: var(--pp-measure-prose); } .pp-quote cite { display: block; margin-top: var(--pp-space-2); font-style: normal; font-size: var(--pp-text-sm); color: var(--pp-text-3); } /* ============================================================================ 6. GABARIT : CONTENEUR, SECTIONS, GRILLES ========================================================================== */ .pp-container { width: 100%; max-width: var(--pp-container); margin-inline: auto; padding-inline: var(--pp-gutter); } .pp-container--wide { max-width: var(--pp-container-wide); } .pp-container--prose { max-width: 820px; } .pp-section { padding-block: var(--pp-space-16); } .pp-section--tint { background: var(--pp-surface-1); } .pp-section--tight { padding-block: var(--pp-space-10); } .pp-stack > * + * { margin-top: var(--pp-space-6); } .pp-grid { display: grid; gap: var(--pp-space-5); } .pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .pp-grid--3, .pp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .pp-grid--2, .pp-grid--3, .pp-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* Gabarit de document : sommaire collant + corps */ .pp-layout-doc { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--pp-space-10); align-items: start; } @media (max-width: 900px) { .pp-layout-doc { grid-template-columns: minmax(0, 1fr); gap: var(--pp-space-6); } } /* ============================================================================ 7. NAV COLLANTE ========================================================================== */ .pp-nav { position: sticky; top: 0; z-index: var(--pp-z-nav); background: color-mix(in srgb, var(--pp-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--pp-border); } .pp-nav__inner { max-width: var(--pp-container); margin-inline: auto; padding-inline: var(--pp-gutter); min-height: var(--pp-nav-height); display: flex; align-items: center; gap: var(--pp-space-6); } .pp-brand { display: inline-flex; align-items: center; gap: var(--pp-space-3); font-family: var(--pp-font-display); font-weight: var(--pp-weight-semibold); font-size: var(--pp-text-md); letter-spacing: var(--pp-tracking-title); color: var(--pp-text-1); text-decoration: none; } .pp-brand:hover { color: var(--pp-primary); } .pp-brand__mark { flex: none; display: block; } .pp-nav__links { display: flex; align-items: center; gap: var(--pp-space-1); margin-left: auto; list-style: none; padding: 0; margin-block: 0; } .pp-nav__links li { margin: 0; } .pp-nav__link { display: inline-block; padding: var(--pp-space-2) var(--pp-space-3); border-radius: var(--pp-radius-sm); font-size: var(--pp-text-sm); font-weight: var(--pp-weight-medium); color: var(--pp-text-2); text-decoration: none; transition: background var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease); } /* Hover teinté marque, jamais gris — greffe A */ .pp-nav__link:hover { background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-nav__link[aria-current="page"], .pp-nav__link.is-active { color: var(--pp-primary); background: var(--pp-primary-soft); font-weight: var(--pp-weight-semibold); } .pp-nav__actions { display: flex; align-items: center; gap: var(--pp-space-2); margin-left: auto; } .pp-nav__links + .pp-nav__actions { margin-left: var(--pp-space-3); } @media (max-width: 860px) { .pp-nav__links { display: none; } .pp-nav__inner { gap: var(--pp-space-3); } } @media (max-width: 520px) { .pp-brand { font-size: var(--pp-text-sm); gap: var(--pp-space-2); white-space: nowrap; } .pp-theme-toggle { width: 40px; padding: 0; justify-content: center; } .pp-theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ============================================================================ 8. HERO ---------------------------------------------------------------------------- La dernière ligne du titre passe en accent de désignation (.pp-hero-accent) — greffe B. Le surlignage or de la variante C a été supprimé : il évoquait le surligneur, donc le registre papier que Nicolas rejette. ========================================================================== */ .pp-hero { padding-block: clamp(3rem, 8vw, 6.5rem); border-bottom: 1px solid var(--pp-border); background: linear-gradient(180deg, var(--pp-surface-1) 0%, var(--pp-bg) 100%); } .pp-hero__title { font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: var(--pp-leading-tight); letter-spacing: var(--pp-tracking-display); font-weight: var(--pp-weight-semibold); max-width: 20ch; margin-bottom: var(--pp-space-5); } /* La désignation : une couleur, à l'endroit exact de la promesse. */ .pp-hero-accent, .pp-hero__title em { font-style: normal; color: var(--pp-electric-ink); } .pp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pp-space-3); margin-top: var(--pp-space-8); } .pp-hero__meta { margin-top: var(--pp-space-8); display: flex; flex-wrap: wrap; gap: var(--pp-space-3) var(--pp-space-6); font-size: var(--pp-text-sm); color: var(--pp-text-3); max-width: none; } .pp-hero__meta span { display: inline-flex; align-items: center; gap: var(--pp-space-2); } /* ============================================================================ 9. BOUTONS — cible tactile 44 px ========================================================================== */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pp-space-2); min-height: 44px; padding: 0 var(--pp-space-5); border: 1px solid transparent; border-radius: var(--pp-radius-md); font-family: var(--pp-font-sans); font-size: var(--pp-text-sm); font-weight: var(--pp-weight-semibold); letter-spacing: 0.01em; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease); } .pp-btn:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 2px; } .pp-btn--primary { background: var(--pp-primary); color: var(--pp-on-primary); border-color: var(--pp-primary); } .pp-btn--primary:hover { background: var(--pp-primary-hover); border-color: var(--pp-primary-hover); color: var(--pp-on-primary); } .pp-btn--primary:active { background: var(--pp-primary-press); border-color: var(--pp-primary-press); } .pp-btn--secondary { background: var(--pp-bg); color: var(--pp-primary); border-color: var(--pp-border-strong); } .pp-btn--secondary:hover { background: var(--pp-primary-soft); border-color: var(--pp-primary); color: var(--pp-primary); } /* Bouton fantôme : hover teinté marque, jamais gris — greffe A */ .pp-btn--ghost { background: transparent; color: var(--pp-text-2); border-color: transparent; } .pp-btn--ghost:hover { background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-btn--sm { min-height: 36px; padding: 0 var(--pp-space-3); font-size: var(--pp-text-xs); } .pp-btn--lg { min-height: 52px; padding: 0 var(--pp-space-8); font-size: var(--pp-text-md); } .pp-btn--icon { min-height: 44px; width: 44px; padding: 0; } .pp-btn--block { width: 100%; } /* ============================================================================ 10. CARTE ========================================================================== */ .pp-card { background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-6); box-shadow: var(--pp-shadow-none); transition: border-color var(--pp-dur-normal) var(--pp-ease), background var(--pp-dur-normal) var(--pp-ease); } .pp-card--tint { background: var(--pp-surface-1); } .pp-card--flush { padding: 0; overflow: hidden; } /* Survol : le bord fonce et le fond se teinte marque — le document ne rebondit pas */ .pp-card--interactive:hover { border-color: var(--pp-primary-line); background: var(--pp-primary-soft); } .pp-card--feature { border-color: var(--pp-primary); box-shadow: var(--pp-shadow-md); } .pp-card__title { font-size: var(--pp-text-xl); margin-bottom: var(--pp-space-2); } .pp-card__desc { color: var(--pp-text-2); font-size: var(--pp-text-sm); margin: 0; } /* ============================================================================ 11. TUILE KPI — chiffre en mono (greffe A), filet d'accent de 2 px ========================================================================== */ .pp-kpi { background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-5); position: relative; overflow: hidden; } .pp-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--pp-primary); } .pp-kpi--accent::before { background: var(--pp-accent); } .pp-kpi--electric::before { background: var(--pp-electric); } .pp-kpi--gold::before { background: var(--pp-gold); } .pp-kpi__label { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: 0 0 var(--pp-space-2); max-width: none; } .pp-kpi__value { font-family: var(--pp-font-mono); /* greffe A : le chiffre seul, en mono */ font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: var(--pp-weight-semibold); letter-spacing: -0.015em; line-height: 1.05; font-variant-numeric: var(--pp-numeric); font-feature-settings: "zero" 1; color: var(--pp-text-1); margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em; max-width: none; } /* L'unité reste en sans : la mono ne porte que le nombre */ .pp-kpi__unit { font-family: var(--pp-font-sans); font-size: var(--pp-text-md); font-weight: var(--pp-weight-medium); color: var(--pp-text-2); letter-spacing: 0; } .pp-kpi__note { margin: var(--pp-space-3) 0 0; font-size: var(--pp-text-sm); color: var(--pp-text-2); line-height: var(--pp-leading-normal); max-width: none; } /* ============================================================================ 12. PASTILLE SOURCE ========================================================================== */ .pp-source { display: inline-flex; align-items: center; gap: var(--pp-space-2); padding: 3px var(--pp-space-2) 3px 6px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); background: var(--pp-surface-1); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); color: var(--pp-text-2); text-decoration: none; white-space: nowrap; transition: border-color var(--pp-dur-fast) var(--pp-ease), background var(--pp-dur-fast) var(--pp-ease); } .pp-source:hover { border-color: var(--pp-primary-line); background: var(--pp-primary-soft); color: var(--pp-text-1); } .pp-source__dot { width: 6px; height: 6px; border-radius: var(--pp-radius-pill); background: var(--pp-electric); flex: none; } .pp-source--verified .pp-source__dot { background: var(--pp-accent); } .pp-source--stale .pp-source__dot { background: var(--pp-warning); } .pp-source--missing .pp-source__dot { background: var(--pp-danger); } .pp-source__date { color: var(--pp-text-3); } .pp-sources-row { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); margin-top: var(--pp-space-4); } /* Sur téléphone la pastille se replie au lieu de déborder de l'écran */ @media (max-width: 520px) { .pp-source { white-space: normal; max-width: 100%; } } /* ============================================================================ 13. ENCADRÉ « CE QUE ÇA VEUT DIRE » ---------------------------------------------------------------------------- .pp-callout est le nom canonique. .pp-meaning reste accepté : les pages déjà intégrées en variante C le portent. ========================================================================== */ .pp-callout, .pp-meaning { border: 1px solid var(--pp-accent-line); border-left: 3px solid var(--pp-accent); border-radius: var(--pp-radius-md); background: var(--pp-accent-soft); padding: var(--pp-space-5); margin: var(--pp-space-6) 0; max-width: var(--pp-measure-prose); } .pp-callout__title, .pp-meaning__title { display: flex; align-items: center; gap: var(--pp-space-2); font-family: var(--pp-font-sans); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-semibold); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-accent); margin: 0 0 var(--pp-space-2); max-width: none; } .pp-callout p, .pp-meaning p { margin: 0; color: var(--pp-text-1); font-size: var(--pp-text-md); line-height: var(--pp-leading-normal); max-width: none; } /* Variantes : estimation et proxy portent chacune une marque visuelle propre */ .pp-callout--estimation { border-color: var(--pp-primary-line); border-left-color: var(--pp-primary); background: var(--pp-primary-soft); } .pp-callout--estimation .pp-callout__title { color: var(--pp-primary); } .pp-callout--proxy { border-color: var(--pp-gold-line); border-left-color: var(--pp-gold); background: var(--pp-gold-soft); } .pp-callout--proxy .pp-callout__title { color: var(--pp-gold); } /* ============================================================================ 14. BANDEAU D'HONNÊTETÉ ---------------------------------------------------------------------------- .pp-notice est le nom canonique ; .pp-honesty reste accepté. ========================================================================== */ .pp-notice, .pp-honesty { display: flex; gap: var(--pp-space-4); align-items: flex-start; border: 1px solid var(--pp-border); border-top: 3px solid var(--pp-gold); border-radius: var(--pp-radius-md); background: var(--pp-surface-1); padding: var(--pp-space-5); margin: var(--pp-space-8) 0; } .pp-notice__icon, .pp-honesty__icon { flex: none; color: var(--pp-gold); margin-top: 2px; } .pp-notice__title, .pp-honesty__title { font-family: var(--pp-font-sans); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-semibold); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-gold); margin: 0 0 var(--pp-space-2); max-width: none; } .pp-notice p, .pp-honesty p { margin: 0; font-size: var(--pp-text-sm); color: var(--pp-text-2); line-height: var(--pp-leading-normal); max-width: none; } .pp-notice--danger { border-top-color: var(--pp-danger); } .pp-notice--danger .pp-notice__title, .pp-notice--danger .pp-notice__icon { color: var(--pp-danger); } /* ============================================================================ 15. BADGE ET PUCE ========================================================================== */ .pp-badge { display: inline-flex; align-items: center; gap: var(--pp-space-1); padding: 2px var(--pp-space-2); border-radius: var(--pp-radius-pill); border: 1px solid transparent; font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-semibold); letter-spacing: 0.02em; line-height: 1.6; white-space: nowrap; } .pp-badge--neutral { background: var(--pp-surface-2); color: var(--pp-text-2); border-color: var(--pp-border-strong); } .pp-badge--primary { background: var(--pp-primary-soft); color: var(--pp-primary); border-color: var(--pp-primary-line); } .pp-badge--accent { background: var(--pp-accent-soft); color: var(--pp-accent); border-color: var(--pp-accent-line); } .pp-badge--gold { background: var(--pp-gold-soft); color: var(--pp-gold); border-color: var(--pp-gold-line); } .pp-badge--warning { background: var(--pp-warning-soft); color: var(--pp-warning); border-color: var(--pp-gold-line); } .pp-badge--danger { background: var(--pp-danger-soft); color: var(--pp-danger); border-color: var(--pp-danger); } /* Correctif Anouk 7 : estimation/proxy doit se distinguer sans dependre du seul texte */ .pp-badge--gold, .pp-monogram--gold { border-style: dashed; } .pp-callout--proxy { border-left-style: dashed; } .pp-badge--gold::before { content: "≈ "; } /* Puce mono : référence, outil, identifiant technique */ .pp-chip { display: inline-flex; align-items: center; padding: 2px var(--pp-space-2); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); background: var(--pp-surface-1); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); color: var(--pp-text-2); white-space: nowrap; } /* ============================================================================ 16. TABLEAU RESPONSIVE ---------------------------------------------------------------------------- Deux comportements sous 720 px : · par défaut, défilement horizontal avec première colonne collante et indicateur visible (« faites défiler ») ; · .pp-table--cards : chaque ligne devient une carte, chaque cellule affiche son en-tête via l'attribut data-label. ========================================================================== */ .pp-table-wrap { position: relative; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); overflow: auto; -webkit-overflow-scrolling: touch; } .pp-table { width: 100%; border-collapse: collapse; font-size: var(--pp-text-sm); font-variant-numeric: var(--pp-numeric); } .pp-table caption { caption-side: top; text-align: left; padding: var(--pp-space-4) var(--pp-space-4) var(--pp-space-2); font-size: var(--pp-text-xs); color: var(--pp-text-3); } .pp-table th, .pp-table td { padding: var(--pp-space-3) var(--pp-space-4); text-align: left; border-bottom: 1px solid var(--pp-border); white-space: nowrap; } .pp-table thead th { background: var(--pp-surface-2); color: var(--pp-text-2); font-family: var(--pp-font-sans); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-semibold); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; border-bottom: 1px solid var(--pp-border-strong); } .pp-table tbody tr:last-child td, .pp-table tbody tr:last-child th { border-bottom: 0; } /* Ligne survolée teintée marque — greffe A */ .pp-table tbody tr:hover td, .pp-table tbody tr:hover th { background: var(--pp-primary-soft); } .pp-table .is-num { text-align: right; font-family: var(--pp-font-mono); /* greffe A : colonne de chiffres seuls */ font-variant-numeric: var(--pp-numeric); font-feature-settings: "zero" 1; } .pp-table .is-strong { font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); } .pp-table th[scope="row"] { font-weight: var(--pp-weight-semibold); white-space: normal; color: var(--pp-text-1); } /* Première colonne collante en défilement horizontal */ @media (max-width: 719px) { .pp-table:not(.pp-table--cards) th[scope="row"] { position: sticky; left: 0; background: var(--pp-bg); border-right: 1px solid var(--pp-border-strong); z-index: 1; } .pp-table:not(.pp-table--cards) tbody tr:hover th[scope="row"] { background: var(--pp-primary-soft); } .pp-table th, .pp-table td { padding: var(--pp-space-2) var(--pp-space-3); font-size: var(--pp-text-xs); } } /* Indicateur de défilement — visible, jamais deviné */ .pp-table-hint { display: none; font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: var(--pp-space-2) 0 0; } @media (max-width: 719px) { .pp-table-hint { display: block; } } /* Passage en cartes — chaque cellule porte data-label */ @media (max-width: 719px) { .pp-table--cards, .pp-table--cards tbody, .pp-table--cards tr, .pp-table--cards td, .pp-table--cards th { display: block; } .pp-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pp-table--cards tr { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-bg); padding: var(--pp-space-3) var(--pp-space-4); margin-bottom: var(--pp-space-3); } .pp-table--cards tr:last-child { margin-bottom: 0; } .pp-table--cards th[scope="row"] { position: static; font-size: var(--pp-text-md); border: 0; border-bottom: 1px solid var(--pp-border); padding: 0 0 var(--pp-space-2); margin-bottom: var(--pp-space-2); } .pp-table--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pp-space-4); border: 0; padding: var(--pp-space-1) 0; white-space: normal; text-align: left; } .pp-table--cards td::before { content: attr(data-label); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); flex: none; } .pp-table--cards tbody tr:hover td, .pp-table--cards tbody tr:hover th { background: transparent; } .pp-table--cards .is-num { text-align: right; } } /* ============================================================================ 17. ONGLETS ACCESSIBLES ========================================================================== */ .pp-tabs__list { display: flex; gap: var(--pp-space-1); border-bottom: 1px solid var(--pp-border); overflow-x: auto; scrollbar-width: none; } .pp-tabs__list::-webkit-scrollbar { display: none; } .pp-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; padding: var(--pp-space-3) var(--pp-space-4); font-family: var(--pp-font-sans); font-size: var(--pp-text-sm); font-weight: var(--pp-weight-medium); color: var(--pp-text-3); cursor: pointer; white-space: nowrap; transition: color var(--pp-dur-fast) var(--pp-ease), background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease); } /* Hover teinté marque — greffe A */ .pp-tab:hover { color: var(--pp-primary); background: var(--pp-primary-soft); } .pp-tab[aria-selected="true"] { color: var(--pp-primary); border-bottom-color: var(--pp-primary); font-weight: var(--pp-weight-semibold); } .pp-tabs__panel { padding-top: var(--pp-space-6); } .pp-tabs__panel[hidden] { display: none; } /* Titre d'onglet promu en sous-titre à l'impression (voir § 29) */ .pp-tabs__panel-title { display: none; } /* ============================================================================ 18. SOMMAIRE LATÉRAL COLLANT ========================================================================== */ .pp-toc { position: sticky; top: calc(var(--pp-nav-height) + var(--pp-space-6)); border-left: 1px solid var(--pp-border); padding-left: var(--pp-space-4); } @media (max-width: 900px) { .pp-toc { position: static; border-left: 0; border-top: 1px solid var(--pp-border); padding: var(--pp-space-4) 0 0; } } .pp-toc__title { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: 0 0 var(--pp-space-3); max-width: none; } .pp-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .pp-toc__list li { margin: 0; } .pp-toc__link { display: block; margin-left: calc(-1 * var(--pp-space-4) - 1px); border-left: 2px solid transparent; padding: var(--pp-space-2) var(--pp-space-2) var(--pp-space-2) calc(var(--pp-space-4) - 1px); font-size: var(--pp-text-sm); color: var(--pp-text-3); text-decoration: none; } .pp-toc__link:hover { color: var(--pp-primary); background: var(--pp-primary-soft); } .pp-toc__link[aria-current="true"] { color: var(--pp-primary); border-left-color: var(--pp-primary); font-weight: var(--pp-weight-semibold); } /* ============================================================================ 19. FIGURE, GRAPHIQUE, LÉGENDE ========================================================================== */ .pp-figure { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); background: var(--pp-bg); padding: var(--pp-space-5); margin: var(--pp-space-6) 0; } .pp-figure__head { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); align-items: baseline; justify-content: space-between; margin-bottom: var(--pp-space-4); } .pp-figure__title { font-family: var(--pp-font-display); font-size: var(--pp-text-md); font-weight: var(--pp-weight-semibold); margin: 0; } .pp-figure__canvas { position: relative; height: 288px; } @media (max-width: 600px) { .pp-figure__canvas { height: 244px; } } .pp-figure__foot { margin-top: var(--pp-space-4); padding-top: var(--pp-space-3); border-top: 1px solid var(--pp-border); display: flex; flex-wrap: wrap; gap: var(--pp-space-3); align-items: center; justify-content: space-between; } .pp-legend { display: flex; flex-wrap: wrap; gap: var(--pp-space-2) var(--pp-space-4); list-style: none; margin: 0; padding: 0; } .pp-legend__item { display: inline-flex; align-items: center; gap: var(--pp-space-2); font-size: var(--pp-text-xs); color: var(--pp-text-2); margin: 0; max-width: none; } .pp-legend__swatch { width: 10px; height: 10px; border-radius: var(--pp-radius-xs); flex: none; } .pp-legend__swatch--line { width: 16px; height: 3px; border-radius: var(--pp-radius-pill); } .pp-legend__swatch--ring { border-radius: var(--pp-radius-pill); border: 2px solid var(--pp-map-stroke); } /* ============================================================================ 20. CARTE CARTOGRAPHIQUE (LEAFLET) ========================================================================== */ .pp-map { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); overflow: hidden; background: var(--pp-bg); margin: var(--pp-space-6) 0; } .pp-map__canvas { position: relative; z-index: var(--pp-z-map); min-height: 320px; background: linear-gradient(0deg, var(--pp-border) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--pp-border) 1px, transparent 1px) 0 0 / 48px 100%, var(--pp-map-surface); } .pp-map__pin { position: absolute; transform: translate(-50%, -50%); } .pp-map__dot { display: block; width: 12px; height: 12px; border-radius: var(--pp-radius-pill); border: 2px solid var(--pp-map-stroke); box-shadow: var(--pp-shadow-sm); } .pp-map__dot--target { width: 18px; height: 18px; background: var(--pp-map-target); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pp-map-target) 22%, transparent); } .pp-map__scale { position: absolute; left: 12px; bottom: 12px; font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); color: var(--pp-text-2); background: color-mix(in srgb, var(--pp-bg) 88%, transparent); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-xs); padding: 2px 6px; } .pp-map__legend { border-top: 1px solid var(--pp-border); padding: var(--pp-space-3) var(--pp-space-4); background: var(--pp-surface-1); } .pp-map__attrib { padding: var(--pp-space-2) var(--pp-space-4); border-top: 1px solid var(--pp-border); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); color: var(--pp-text-3); margin: 0; max-width: none; } /* Leaflet dans notre conteneur : même police, mêmes rayons, mêmes surfaces */ .pp-map .leaflet-container { font-family: var(--pp-font-sans); background: var(--pp-map-surface); } .pp-map .leaflet-popup-content-wrapper, .pp-map .leaflet-bar a { border-radius: var(--pp-radius-sm); } .pp-map .leaflet-popup-content-wrapper, .pp-map .leaflet-popup-tip { background: var(--pp-bg); color: var(--pp-text-1); } .pp-map .leaflet-bar a { background: var(--pp-bg); color: var(--pp-text-1); border-bottom-color: var(--pp-border); } .pp-map .leaflet-bar a:hover { background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-map .leaflet-control-attribution { background: var(--pp-bg); color: var(--pp-text-2); font-family: var(--pp-font-mono); font-size: 10px; } .pp-map .leaflet-control-attribution a { color: var(--pp-electric-ink); } /* Grappe de marqueurs (markercluster) — surface du système, pas le vert par défaut */ .pp-map .marker-cluster, .pp-map .marker-cluster div { background: color-mix(in srgb, var(--pp-primary) 22%, transparent); border-radius: var(--pp-radius-pill); } .pp-map .marker-cluster div { background: var(--pp-primary); color: var(--pp-on-primary); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-semibold); } /* ============================================================================ 21. FRISE CHRONOLOGIQUE ========================================================================== */ .pp-timeline { list-style: none; margin: var(--pp-space-6) 0; padding: 0 0 0 var(--pp-space-6); position: relative; } .pp-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--pp-border-strong); } .pp-timeline__item { position: relative; margin: 0 0 var(--pp-space-6); max-width: var(--pp-measure-prose); } .pp-timeline__item:last-child { margin-bottom: 0; } .pp-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--pp-space-6) + 1px); top: 6px; width: 9px; height: 9px; border-radius: var(--pp-radius-pill); background: var(--pp-bg); border: 2px solid var(--pp-primary); } .pp-timeline__item--done::before { background: var(--pp-accent); border-color: var(--pp-accent); } .pp-timeline__item--now::before { background: var(--pp-electric); border-color: var(--pp-electric); } .pp-timeline__date { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: 0 0 var(--pp-space-1); max-width: none; } .pp-timeline__title { font-size: var(--pp-text-md); margin: 0 0 var(--pp-space-1); } .pp-timeline__desc { margin: 0; font-size: var(--pp-text-sm); color: var(--pp-text-2); } /* ============================================================================ 22. MONOGRAMME ET TROMBINOSCOPE ---------------------------------------------------------------------------- Aucune photographie : un monogramme dessiné. Les agents sont des personas, pas des personnes physiques. ========================================================================== */ .pp-monogram { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--pp-radius-lg); background: var(--pp-primary-soft); border: 1px solid var(--pp-primary-line); color: var(--pp-primary); font-family: var(--pp-font-display); font-size: var(--pp-text-xl); font-weight: var(--pp-weight-semibold); letter-spacing: 0; line-height: 1; } .pp-monogram--accent { background: var(--pp-accent-soft); border-color: var(--pp-accent-line); color: var(--pp-accent); } .pp-monogram--gold { background: var(--pp-gold-soft); border-color: var(--pp-gold-line); color: var(--pp-gold); } .pp-monogram--sm { width: 40px; height: 40px; font-size: var(--pp-text-md); border-radius: var(--pp-radius-md); } .pp-crew__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--pp-space-4); align-items: start; } .pp-crew__name { font-family: var(--pp-font-display); font-size: var(--pp-text-lg); font-weight: var(--pp-weight-semibold); margin: 0; } .pp-crew__role { font-size: var(--pp-text-sm); color: var(--pp-text-2); margin: 2px 0 var(--pp-space-3); max-width: none; } .pp-crew__tools { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); } /* ============================================================================ 23. OFFRE ET TARIFS — le prix est un chiffre seul, donc en mono (greffe A) ========================================================================== */ .pp-offer { display: flex; flex-direction: column; height: 100%; } .pp-offer__head { padding-bottom: var(--pp-space-4); border-bottom: 1px solid var(--pp-border); margin-bottom: var(--pp-space-4); } .pp-offer__name { font-size: var(--pp-text-lg); margin-bottom: var(--pp-space-2); } .pp-offer__price { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xl); font-weight: var(--pp-weight-semibold); letter-spacing: -0.02em; font-variant-numeric: var(--pp-numeric); font-feature-settings: "zero" 1; color: var(--pp-text-1); margin: 0; display: flex; align-items: baseline; gap: 0.25em; flex-wrap: wrap; max-width: none; } .pp-offer__period { font-family: var(--pp-font-sans); font-size: var(--pp-text-sm); font-weight: var(--pp-weight-regular); color: var(--pp-text-3); letter-spacing: 0; } .pp-offer__list { list-style: none; margin: 0 0 var(--pp-space-5); padding: 0; display: grid; gap: var(--pp-space-2); } .pp-offer__list li { display: flex; gap: var(--pp-space-2); font-size: var(--pp-text-sm); color: var(--pp-text-2); line-height: var(--pp-leading-normal); margin: 0; } .pp-offer__list svg { flex: none; color: var(--pp-accent); margin-top: 4px; } .pp-offer .pp-btn { margin-top: auto; width: 100%; } /* ============================================================================ 24. DECK PLEIN ÉCRAN ---------------------------------------------------------------------------- Une slide occupe la hauteur de l'écran (100dvh) et, à l'impression, sa page A4 — break-after: page, greffe B. ========================================================================== */ .pp-deck { display: grid; } .pp-deck--snap { scroll-snap-type: y mandatory; } .pp-slide { min-height: 100dvh; container-type: inline-size; display: grid; grid-template-rows: auto 1fr auto; gap: var(--pp-space-6); padding: clamp(1.5rem, 4vw, 4rem); background: var(--pp-bg); border-bottom: 1px solid var(--pp-border); scroll-snap-align: start; } /* Slide enchâssée dans une page (aperçu, propale) : cadre 16:9 au lieu de l'écran */ .pp-slide--frame { min-height: 0; aspect-ratio: 16 / 9; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); overflow: hidden; padding: clamp(1rem, 3.5cqw, 3rem); } .pp-slide--tint { background: var(--pp-surface-1); } .pp-slide__rail { display: block; height: 3px; width: 72px; background: var(--pp-electric); border-radius: var(--pp-radius-pill); margin-bottom: var(--pp-space-4); } .pp-slide__title { font-family: var(--pp-font-display); font-size: clamp(2.75rem, 5.4cqw, 4rem); /* 44 → 64 px */ line-height: 1.06; letter-spacing: var(--pp-tracking-display); font-weight: var(--pp-weight-semibold); margin: 0; max-width: 18ch; } .pp-slide--frame .pp-slide__title { font-size: clamp(1.25rem, 5.2cqw, 3.5rem); } .pp-slide__figure { font-family: var(--pp-font-mono); /* greffe A : le chiffre seul */ font-size: clamp(3rem, 11cqw, 7rem); font-weight: var(--pp-weight-semibold); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: var(--pp-numeric); font-feature-settings: "zero" 1; color: var(--pp-primary); align-self: center; margin: 0; max-width: none; } .pp-slide__body { align-self: center; font-size: var(--pp-text-lg); color: var(--pp-text-2); max-width: 60ch; } .pp-slide__note { font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: var(--pp-text-3); margin: 0; max-width: none; } .pp-slide__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pp-space-4); border-top: 1px solid var(--pp-border); padding-top: var(--pp-space-4); } /* ============================================================================ 25. PAGE DE GARDE ========================================================================== */ .pp-cover { border: 1px solid var(--pp-border); border-top: 4px solid var(--pp-primary); border-radius: var(--pp-radius-lg); background: var(--pp-bg); padding: clamp(1.5rem, 5vw, 3rem); display: grid; gap: var(--pp-space-8); aspect-ratio: 210 / 297; max-width: 540px; grid-template-rows: auto 1fr auto; margin-inline: auto; } @media (max-width: 600px) { .pp-cover { aspect-ratio: auto; } } @media screen { .pp-cover { aspect-ratio: auto; min-height: 70vh; } } .pp-cover__title { font-size: clamp(1.5rem, 4.4vw, 2.25rem); letter-spacing: var(--pp-tracking-display); margin: 0 0 var(--pp-space-3); } .pp-cover__meta { align-self: end; font-size: var(--pp-text-sm); } .pp-cover__meta dl { display: grid; grid-template-columns: minmax(12ch, max-content) minmax(0, 1fr); gap: var(--pp-space-2) var(--pp-space-5); margin: 0; } .pp-cover__meta dt { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); align-self: center; } .pp-cover__meta dd { margin: 0; color: var(--pp-text-1); font-weight: var(--pp-weight-medium); } /* ============================================================================ 26. PIED DE PAGE ========================================================================== */ .pp-footer { border-top: 1px solid var(--pp-border); background: var(--pp-surface-1); padding-block: var(--pp-space-10) var(--pp-space-8); } .pp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--pp-space-8); } @media (max-width: 760px) { .pp-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--pp-space-6); } } .pp-footer__title { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); margin: 0 0 var(--pp-space-3); max-width: none; } .pp-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pp-space-2); font-size: var(--pp-text-sm); } .pp-footer__list li { margin: 0; } .pp-footer__list a { color: var(--pp-text-2); text-decoration: none; } .pp-footer__list a:hover { color: var(--pp-primary); text-decoration: underline; } .pp-footer__legal { margin-top: var(--pp-space-8); padding-top: var(--pp-space-4); border-top: 1px solid var(--pp-border); font-size: var(--pp-text-xs); color: var(--pp-text-3); display: flex; flex-wrap: wrap; gap: var(--pp-space-2) var(--pp-space-6); justify-content: space-between; max-width: none; } /* Correctif Anouk 15 : signature identique en pied de page, sur les onze pages */ .pp-footer__sig { font-style: italic; color: var(--pp-text-2); margin-top: var(--pp-space-4); } /* ============================================================================ 27. BASCULE DE THÈME ========================================================================== */ .pp-theme-toggle { display: inline-flex; align-items: center; gap: var(--pp-space-2); min-height: 44px; padding: 0 var(--pp-space-3); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-bg); color: var(--pp-text-2); font-family: var(--pp-font-sans); font-size: var(--pp-text-xs); font-weight: var(--pp-weight-medium); cursor: pointer; transition: background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease); } .pp-theme-toggle:hover { background: var(--pp-primary-soft); border-color: var(--pp-primary-line); color: var(--pp-primary); } /* ============================================================================ 28. MOUVEMENT RÉDUIT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ 29. IMPRESSION A4 ========================================================================== */ @media print { @page { size: A4 portrait; margin: 18mm; } :root, :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: light; --pp-bg: #FFFFFF; --pp-surface-1: #FFFFFF; --pp-surface-2: #F3F5F8; --pp-surface-3: #EDF1F6; --pp-surface-inset: #FFFFFF; --pp-text-1: #000000; --pp-text-2: #26313F; --pp-text-3: #46566E; --pp-border: #B9C3D0; --pp-border-strong: #8C99A9; --pp-border-field: #6B7684; --pp-primary: #0E3A63; --pp-primary-soft: #EEF3F9; --pp-primary-line: #C6D8EA; --pp-accent: #0C737B; --pp-accent-soft: #F1F6F2; --pp-gold: #0C737B; --pp-gold-soft: #F8F4E9; --pp-electric: #0A5FBF; --pp-electric-ink: #0C737B; --pp-shadow-xs: none; --pp-shadow-sm: none; --pp-shadow-md: none; --pp-shadow-lg: none; } html, body { background: #FFFFFF !important; color: #000000 !important; font-size: 10.5pt; line-height: 1.45; } .pp-prose { font-size: 10.5pt; line-height: 1.5; } /* Ce qui ne s'imprime pas : navigation, sommaire, bascules, appels à l'action */ .pp-nav, .pp-toc, .pp-skip, .pp-theme-toggle, .pp-no-print, .pp-hero__actions, .pp-tabs__list, .pp-table-hint { display: none !important; } .pp-container, .pp-container--wide { max-width: none; padding-inline: 0; } .pp-section { padding-block: 0; margin-bottom: 10mm; } .pp-hero { padding-block: 0 8mm; border-bottom: 1px solid var(--pp-border); background: none; } .pp-layout-doc { display: block; } /* Tous les panneaux d'onglets sortent sur le papier, avec leur titre */ [role="tabpanel"][hidden] { display: block !important; } .pp-tabs__panel-title { display: block; font-family: var(--pp-font-display); font-size: 12.5pt; font-weight: 600; margin: 6mm 0 2mm; } .pp-card, .pp-kpi, .pp-figure, .pp-map, .pp-table-wrap, .pp-callout, .pp-meaning, .pp-notice, .pp-honesty, .pp-cover, .pp-crew__card, .pp-offer, .pp-timeline__item { border: 1px solid var(--pp-border) !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; } .pp-card, .pp-kpi, .pp-figure, .pp-map, .pp-cover { background: #FFFFFF !important; } .pp-callout, .pp-meaning { background: #F4F8F5 !important; } .pp-notice, .pp-honesty { background: #FBFCFD !important; } .pp-timeline__item { border: 0 !important; } /* Les aplats de couleur qui portent une information sont conservés */ .pp-kpi::before, .pp-slide__rail, .pp-badge, .pp-source__dot, .pp-legend__swatch, .pp-map__dot, .pp-monogram, .pp-timeline__item::before, .pp-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; } h1 { font-size: 20pt; } h2 { font-size: 15pt; } h3 { font-size: 12.5pt; } p, li, td, th { orphans: 3; widows: 3; } .pp-table { font-size: 9.5pt; } .pp-table-wrap { overflow: visible; } .pp-table thead { display: table-header-group; } .pp-table thead th { background: #EDF1F6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .pp-table th, .pp-table td { white-space: normal; } .pp-table--cards, .pp-table--cards tbody, .pp-table--cards tr { display: revert; } .pp-table--cards thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; } .pp-table--cards td, .pp-table--cards th { display: table-cell; } .pp-table--cards td::before { content: none; } .pp-figure__canvas { height: 62mm; } .pp-map__canvas { min-height: 70mm; } /* Une slide, une page A4 — greffe B */ .pp-slide, .pp-cover { break-after: page; page-break-after: always; break-inside: avoid; min-height: 0; aspect-ratio: auto; border: 0; box-shadow: none; padding: 0; } .pp-slide__title { font-size: 26pt; } .pp-slide__figure { font-size: 48pt; } .pp-deck > .pp-slide:last-child, .pp-cover:last-child { break-after: auto; page-break-after: auto; } /* Les liens externes deviennent lisibles sur papier */ a { color: #000 !important; text-decoration: none; } .pp-prose a[href^="http"]::after, .pp-footer a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--pp-font-mono); font-size: 7.5pt; color: #46566E; word-break: break-all; } .pp-source[data-url]::after { content: " " attr(data-url); color: #46566E; font-size: 7.5pt; } /* Correctif Anouk 18 : source http sans data-url -> URL imprimee quand meme */ .pp-source[href^="http"]:not([data-url])::after { content: " (" attr(href) ")"; font-family: var(--pp-font-mono); font-size: 7.5pt; } .pp-page-break { break-before: page; page-break-before: always; } .pp-footer { margin-top: 8mm; border-top: 1px solid var(--pp-border); background: #FFFFFF !important; } }