/* Popinz Design System CSS v2.0.0 - Generated 2026-05-14T21:21:47.821Z */
:root{
--ppz-color-brand-primary: #E91E63;
--ppz-color-brand-secondary: #19db9a;
--ppz-color-brand-tertiary: #6a4ab8;
--ppz-color-brand-accent: #FB923C;
--ppz-color-brand-aqua: #19db9a;
--ppz-color-brand-mauve: #40097b;
--ppz-color-brand-pink-50: #FCE4EC;
--ppz-color-brand-pink-100: #F8BBD0;
--ppz-color-brand-pink-200: #F48FB1;
--ppz-color-brand-pink-300: #F06292;
--ppz-color-brand-pink-400: #EC407A;
--ppz-color-brand-pink-500: #E91E63;
--ppz-color-brand-pink-600: #D81B60;
--ppz-color-brand-pink-700: #C2185B;
--ppz-color-brand-pink-800: #AD1457;
--ppz-color-brand-pink-900: #880E4F;
--ppz-color-brand-green-50: #E8F5E9;
--ppz-color-brand-green-100: #C8E6C9;
--ppz-color-brand-green-200: #A5D6A7;
--ppz-color-brand-green-300: #81C784;
--ppz-color-brand-green-400: #66BB6A;
--ppz-color-brand-green-500: #4CAF50;
--ppz-color-brand-green-600: #43A047;
--ppz-color-brand-green-700: #388E3C;
--ppz-color-brand-green-800: #2E7D32;
--ppz-color-brand-green-900: #1B5E20;
--ppz-color-brand-purple-50: #F3E5F5;
--ppz-color-brand-purple-100: #E1BEE7;
--ppz-color-brand-purple-200: #CE93D8;
--ppz-color-brand-purple-300: #BA68C8;
--ppz-color-brand-purple-400: #AB47BC;
--ppz-color-brand-purple-500: #40097b;
--ppz-color-brand-purple-600: #8E24AA;
--ppz-color-brand-purple-700: #7B1FA2;
--ppz-color-brand-purple-800: #6A1B9A;
--ppz-color-brand-purple-900: #4A148C;
--ppz-color-brand-teal-50: #E0F2F1;
--ppz-color-brand-teal-100: #B2DFDB;
--ppz-color-brand-teal-200: #80CBC4;
--ppz-color-brand-teal-300: #4DB6AC;
--ppz-color-brand-teal-400: #26A69A;
--ppz-color-brand-teal-500: #19db9a;
--ppz-color-brand-teal-600: #00897B;
--ppz-color-brand-teal-700: #00796B;
--ppz-color-brand-teal-800: #00695C;
--ppz-color-brand-teal-900: #004D40;
--ppz-color-success-light: #16A34A;
--ppz-color-success-main: #16A34A;
--ppz-color-success-dark: #15803D;
--ppz-color-warning-light: #FDE047;
--ppz-color-warning-main: #F59E0B;
--ppz-color-warning-dark: #D97706;
--ppz-color-danger-light: #FCA5A5;
--ppz-color-danger-main: #DC2626;
--ppz-color-danger-dark: #B91C1C;
--ppz-color-info-light: #7DD3FC;
--ppz-color-info-main: #0EA5E9;
--ppz-color-info-dark: #0284C7;
--ppz-color-neutral-0: #FFFFFF;
--ppz-color-neutral-50: #FCFCFD;
--ppz-color-neutral-100: #F5F6F7;
--ppz-color-neutral-200: #E5E7EB;
--ppz-color-neutral-300: #D1D5DB;
--ppz-color-neutral-400: #9CA3AF;
--ppz-color-neutral-500: #6B7280;
--ppz-color-neutral-600: #4B5563;
--ppz-color-neutral-700: #374151;
--ppz-color-neutral-800: #1F2937;
--ppz-color-neutral-900: #111827;
--ppz-color-neutral-950: #0A0E14;
--ppz-subject-etude-bg: #FFF4E6;
--ppz-subject-etude-border: #FFB74D;
--ppz-subject-etude-text: #E65100;
--ppz-subject-layout-bg: #E8F5E9;
--ppz-subject-layout-border: #81C784;
--ppz-subject-layout-text: #2E7D32;
--ppz-subject-animation-bg: #FCE4EC;
--ppz-subject-animation-border: #F48FB1;
--ppz-subject-animation-text: #AD1457;
--ppz-subject-dessin-bg: #E1BEE7;
--ppz-subject-dessin-border: #CE93D8;
--ppz-subject-dessin-text: #6A1B9A;
--ppz-subject-histoire-bg: #FFF9C4;
--ppz-subject-histoire-border: #FFF176;
--ppz-subject-histoire-text: #F57F17;
--ppz-subject-rentree-bg: #B3E5FC;
--ppz-subject-rentree-border: #4FC3F7;
--ppz-subject-rentree-text: #01579B;
--ppz-subject-artistique-bg: #F8BBD0;
--ppz-subject-artistique-border: #F06292;
--ppz-subject-artistique-text: #C2185B;
--ppz-subject-technique-bg: #CFD8DC;
--ppz-subject-technique-border: #90A4AE;
--ppz-subject-technique-text: #37474F;
--ppz-subject-evenement-bg: #FFCCBC;
--ppz-subject-evenement-border: #FF8A65;
--ppz-subject-evenement-text: #D84315;
--ppz-subject-general-bg: #E0E0E0;
--ppz-subject-general-border: #BDBDBD;
--ppz-subject-general-text: #424242;
--ppz-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ppz-font-family-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--ppz-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
--ppz-font-size-2xs: 0.625rem;
--ppz-font-size-xs: 0.75rem;
--ppz-font-size-sm: 0.8125rem;
--ppz-font-size-md: 0.875rem;
--ppz-font-size-base: 1rem;
--ppz-font-size-lg: 1.125rem;
--ppz-font-size-xl: 1.25rem;
--ppz-font-size-2xl: 1.5rem;
--ppz-font-size-3xl: 1.875rem;
--ppz-font-size-4xl: 2.25rem;
--ppz-font-size-5xl: 3rem;
--ppz-font-weight-thin: 100;
--ppz-font-weight-extralight: 200;
--ppz-font-weight-light: 300;
--ppz-font-weight-regular: 400;
--ppz-font-weight-medium: 500;
--ppz-font-weight-semibold: 600;
--ppz-font-weight-bold: 700;
--ppz-font-weight-extrabold: 800;
--ppz-font-weight-black: 900;
--ppz-line-height-none: 1;
--ppz-line-height-tight: 1.15;
--ppz-line-height-snug: 1.25;
--ppz-line-height-normal: 1.4;
--ppz-line-height-relaxed: 1.5;
--ppz-line-height-loose: 1.75;
--ppz-letter-spacing-tighter: -0.05em;
--ppz-letter-spacing-tight: -0.025em;
--ppz-letter-spacing-normal: 0;
--ppz-letter-spacing-wide: 0.025em;
--ppz-letter-spacing-wider: 0.05em;
--ppz-letter-spacing-widest: 0.1em;
--ppz-space-0: 0;
--ppz-space-1: 0.25rem;
--ppz-space-2: 0.5rem;
--ppz-space-3: 0.75rem;
--ppz-space-4: 1rem;
--ppz-space-5: 1.25rem;
--ppz-space-6: 1.5rem;
--ppz-space-7: 1.75rem;
--ppz-space-8: 2rem;
--ppz-space-9: 2.25rem;
--ppz-space-10: 2.5rem;
--ppz-space-12: 3rem;
--ppz-space-14: 3.5rem;
--ppz-space-16: 4rem;
--ppz-space-20: 5rem;
--ppz-space-24: 6rem;
--ppz-space-32: 8rem;
--ppz-space-0-5: 0.125rem;
--ppz-space-1-5: 0.375rem;
--ppz-space-2-5: 0.625rem;
--ppz-space-3-5: 0.875rem;
--ppz-radius-none: 0;
--ppz-radius-sm: 0.125rem;
--ppz-radius-md: 0.25rem;
--ppz-radius-lg: 0.5rem;
--ppz-radius-xl: 0.75rem;
--ppz-radius-2xl: 1rem;
--ppz-radius-3xl: 1.5rem;
--ppz-radius-full: 9999px;
--ppz-shadow-none: none;
--ppz-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--ppz-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--ppz-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--ppz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--ppz-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--ppz-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--ppz-elevation-0: 0 0 0 0 rgba(0,0,0,0);
--ppz-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--ppz-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ppz-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ppz-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ppz-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-opacity-0: 0;
--ppz-opacity-5: 0.05;
--ppz-opacity-10: 0.1;
--ppz-opacity-20: 0.2;
--ppz-opacity-25: 0.25;
--ppz-opacity-30: 0.3;
--ppz-opacity-40: 0.4;
--ppz-opacity-50: 0.5;
--ppz-opacity-60: 0.6;
--ppz-opacity-70: 0.7;
--ppz-opacity-75: 0.75;
--ppz-opacity-80: 0.8;
--ppz-opacity-90: 0.9;
--ppz-opacity-95: 0.95;
--ppz-opacity-100: 1;
--ppz-ease-linear: linear;
--ppz-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ppz-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ppz-ease-inOut: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-base: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ppz-duration-instant: 50ms;
--ppz-duration-fast: 120ms;
--ppz-duration-base: 200ms;
--ppz-duration-moderate: 300ms;
--ppz-duration-slow: 400ms;
--ppz-duration-slower: 600ms;
--ppz-duration-slowest: 800ms;
--ppz-breakpoint-xs: 320px;
--ppz-breakpoint-sm: 640px;
--ppz-breakpoint-md: 768px;
--ppz-breakpoint-lg: 1024px;
--ppz-breakpoint-xl: 1280px;
--ppz-breakpoint-2xl: 1536px;
--ppz-z-index-base: 0;
--ppz-z-index-dropdown: 1000;
--ppz-z-index-sticky: 1100;
--ppz-z-index-fixed: 1200;
--ppz-z-index-overlay: 1300;
--ppz-z-index-modal: 1400;
--ppz-z-index-popover: 1500;
--ppz-z-index-tooltip: 1600;
--ppz-z-index-notification: 1700;
--ppz-bg-root: #F5F6F7;
--ppz-bg-surface: #FFFFFF;
--ppz-bg-surfaceVariant: #FCFCFD;
--ppz-bg-subtle: #F5F6F7;
--ppz-bg-overlay: rgba(17, 24, 39, 0.55);
--ppz-text-primary: #111827;
--ppz-text-secondary: #4B5563;
--ppz-text-tertiary: #6B7280;
--ppz-text-muted: #9CA3AF;
--ppz-text-inverse: #FFFFFF;
--ppz-text-disabled: #D1D5DB;
--ppz-border-subtle: #E5E7EB;
--ppz-border-default: #D1D5DB;
--ppz-border-strong: #9CA3AF;
--ppz-border-inverse: #FFFFFF;
--ppz-interactive-default: #E91E63;
--ppz-interactive-hover: #D81B60;
--ppz-interactive-active: #C2185B;
--ppz-interactive-disabled: #F48FB1;
--ppz-focus-ring: #E91E63;
--ppz-focus-ringOffset: #FFFFFF;
--ppz-button-paddingX-sm: var(--ppz-space-2);
--ppz-button-paddingX-md: var(--ppz-space-3);
--ppz-button-paddingX-lg: var(--ppz-space-4);
--ppz-button-paddingY-sm: var(--ppz-space-1);
--ppz-button-paddingY-md: var(--ppz-space-2);
--ppz-button-paddingY-lg: var(--ppz-space-2-5);
--ppz-button-height-sm: 28px;
--ppz-button-height-md: 36px;
--ppz-button-height-lg: 44px;
--ppz-button-gap: var(--ppz-space-1-5);
--ppz-input-paddingX: var(--ppz-space-3);
--ppz-input-paddingY: var(--ppz-space-2);
--ppz-input-height: 40px;
--ppz-input-borderWidth: 1px;
--ppz-input-focusRingWidth: 3px;
--ppz-input-focusRingOpacity: 0.25;
--ppz-card-padding-sm: var(--ppz-space-3);
--ppz-card-padding-md: var(--ppz-space-4);
--ppz-card-padding-lg: var(--ppz-space-6);
--ppz-card-gap: var(--ppz-space-3);
--ppz-modal-width-sm: 360px;
--ppz-modal-width-md: 560px;
--ppz-modal-width-lg: 720px;
--ppz-modal-width-xl: 960px;
--ppz-modal-width-full: 100%;
--ppz-modal-padding-header: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-body: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-footer: var(--ppz-space-3) var(--ppz-space-5);
--ppz-a11y-minTouchTarget: 44px;
--ppz-a11y-minTextContrast: 4.5;
--ppz-a11y-minLargeTextContrast: 3;
--ppz-a11y-focusRingWidth: 2px;
--ppz-a11y-focusRingOffset: 2px;
--nearly-white: var(--ppz-bg-root); /* legacy */
--medium-gray: var(--ppz-color-neutral-300); /* legacy */
--light-gray: var(--ppz-color-neutral-200); /* legacy */
--dark-color: var(--ppz-color-neutral-800); /* legacy */
--dark-color-text: var(--ppz-color-neutral-800); /* legacy */
--primary-color: var(--ppz-color-brand-primary); /* legacy */
--box-shadow: rgba(0,0,0,0.15); /* legacy */
--border-radius: var(--ppz-radius-md); /* legacy */
--danger-color: var(--ppz-color-danger-main); /* legacy */
--aqua: #19db9a; /* legacy */
--mauve: #40097b; /* legacy */
--brand-tertiary: #6a4ab8; /* legacy */
}
[data-theme="dark"]{
--ppz-color-brand-primary: #E91E63;
--ppz-color-brand-secondary: #19db9a;
--ppz-color-brand-tertiary: #6a4ab8;
--ppz-color-brand-accent: #FB923C;
--ppz-color-brand-aqua: #19db9a;
--ppz-color-brand-mauve: #40097b;
--ppz-color-brand-pink-50: #FCE4EC;
--ppz-color-brand-pink-100: #F8BBD0;
--ppz-color-brand-pink-200: #F48FB1;
--ppz-color-brand-pink-300: #F06292;
--ppz-color-brand-pink-400: #EC407A;
--ppz-color-brand-pink-500: #E91E63;
--ppz-color-brand-pink-600: #D81B60;
--ppz-color-brand-pink-700: #C2185B;
--ppz-color-brand-pink-800: #AD1457;
--ppz-color-brand-pink-900: #880E4F;
--ppz-color-brand-green-50: #E8F5E9;
--ppz-color-brand-green-100: #C8E6C9;
--ppz-color-brand-green-200: #A5D6A7;
--ppz-color-brand-green-300: #81C784;
--ppz-color-brand-green-400: #66BB6A;
--ppz-color-brand-green-500: #4CAF50;
--ppz-color-brand-green-600: #43A047;
--ppz-color-brand-green-700: #388E3C;
--ppz-color-brand-green-800: #2E7D32;
--ppz-color-brand-green-900: #1B5E20;
--ppz-color-brand-purple-50: #F3E5F5;
--ppz-color-brand-purple-100: #E1BEE7;
--ppz-color-brand-purple-200: #CE93D8;
--ppz-color-brand-purple-300: #BA68C8;
--ppz-color-brand-purple-400: #AB47BC;
--ppz-color-brand-purple-500: #40097b;
--ppz-color-brand-purple-600: #8E24AA;
--ppz-color-brand-purple-700: #7B1FA2;
--ppz-color-brand-purple-800: #6A1B9A;
--ppz-color-brand-purple-900: #4A148C;
--ppz-color-brand-teal-50: #E0F2F1;
--ppz-color-brand-teal-100: #B2DFDB;
--ppz-color-brand-teal-200: #80CBC4;
--ppz-color-brand-teal-300: #4DB6AC;
--ppz-color-brand-teal-400: #26A69A;
--ppz-color-brand-teal-500: #19db9a;
--ppz-color-brand-teal-600: #00897B;
--ppz-color-brand-teal-700: #00796B;
--ppz-color-brand-teal-800: #00695C;
--ppz-color-brand-teal-900: #004D40;
--ppz-color-success-light: #16A34A;
--ppz-color-success-main: #16A34A;
--ppz-color-success-dark: #15803D;
--ppz-color-warning-light: #FDE047;
--ppz-color-warning-main: #F59E0B;
--ppz-color-warning-dark: #D97706;
--ppz-color-danger-light: #FCA5A5;
--ppz-color-danger-main: #DC2626;
--ppz-color-danger-dark: #B91C1C;
--ppz-color-info-light: #7DD3FC;
--ppz-color-info-main: #0EA5E9;
--ppz-color-info-dark: #0284C7;
--ppz-color-neutral-0: #FFFFFF;
--ppz-color-neutral-50: #FCFCFD;
--ppz-color-neutral-100: #F5F6F7;
--ppz-color-neutral-200: #E5E7EB;
--ppz-color-neutral-300: #D1D5DB;
--ppz-color-neutral-400: #9CA3AF;
--ppz-color-neutral-500: #6B7280;
--ppz-color-neutral-600: #4B5563;
--ppz-color-neutral-700: #374151;
--ppz-color-neutral-800: #1F2937;
--ppz-color-neutral-900: #111827;
--ppz-color-neutral-950: #0A0E14;
--ppz-subject-etude-bg: #FFF4E6;
--ppz-subject-etude-border: #FFB74D;
--ppz-subject-etude-text: #E65100;
--ppz-subject-layout-bg: #E8F5E9;
--ppz-subject-layout-border: #81C784;
--ppz-subject-layout-text: #2E7D32;
--ppz-subject-animation-bg: #FCE4EC;
--ppz-subject-animation-border: #F48FB1;
--ppz-subject-animation-text: #AD1457;
--ppz-subject-dessin-bg: #E1BEE7;
--ppz-subject-dessin-border: #CE93D8;
--ppz-subject-dessin-text: #6A1B9A;
--ppz-subject-histoire-bg: #FFF9C4;
--ppz-subject-histoire-border: #FFF176;
--ppz-subject-histoire-text: #F57F17;
--ppz-subject-rentree-bg: #B3E5FC;
--ppz-subject-rentree-border: #4FC3F7;
--ppz-subject-rentree-text: #01579B;
--ppz-subject-artistique-bg: #F8BBD0;
--ppz-subject-artistique-border: #F06292;
--ppz-subject-artistique-text: #C2185B;
--ppz-subject-technique-bg: #CFD8DC;
--ppz-subject-technique-border: #90A4AE;
--ppz-subject-technique-text: #37474F;
--ppz-subject-evenement-bg: #FFCCBC;
--ppz-subject-evenement-border: #FF8A65;
--ppz-subject-evenement-text: #D84315;
--ppz-subject-general-bg: #E0E0E0;
--ppz-subject-general-border: #BDBDBD;
--ppz-subject-general-text: #424242;
--ppz-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ppz-font-family-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--ppz-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
--ppz-font-size-2xs: 0.625rem;
--ppz-font-size-xs: 0.75rem;
--ppz-font-size-sm: 0.8125rem;
--ppz-font-size-md: 0.875rem;
--ppz-font-size-base: 1rem;
--ppz-font-size-lg: 1.125rem;
--ppz-font-size-xl: 1.25rem;
--ppz-font-size-2xl: 1.5rem;
--ppz-font-size-3xl: 1.875rem;
--ppz-font-size-4xl: 2.25rem;
--ppz-font-size-5xl: 3rem;
--ppz-font-weight-thin: 100;
--ppz-font-weight-extralight: 200;
--ppz-font-weight-light: 300;
--ppz-font-weight-regular: 400;
--ppz-font-weight-medium: 500;
--ppz-font-weight-semibold: 600;
--ppz-font-weight-bold: 700;
--ppz-font-weight-extrabold: 800;
--ppz-font-weight-black: 900;
--ppz-line-height-none: 1;
--ppz-line-height-tight: 1.15;
--ppz-line-height-snug: 1.25;
--ppz-line-height-normal: 1.4;
--ppz-line-height-relaxed: 1.5;
--ppz-line-height-loose: 1.75;
--ppz-letter-spacing-tighter: -0.05em;
--ppz-letter-spacing-tight: -0.025em;
--ppz-letter-spacing-normal: 0;
--ppz-letter-spacing-wide: 0.025em;
--ppz-letter-spacing-wider: 0.05em;
--ppz-letter-spacing-widest: 0.1em;
--ppz-space-0: 0;
--ppz-space-1: 0.25rem;
--ppz-space-2: 0.5rem;
--ppz-space-3: 0.75rem;
--ppz-space-4: 1rem;
--ppz-space-5: 1.25rem;
--ppz-space-6: 1.5rem;
--ppz-space-7: 1.75rem;
--ppz-space-8: 2rem;
--ppz-space-9: 2.25rem;
--ppz-space-10: 2.5rem;
--ppz-space-12: 3rem;
--ppz-space-14: 3.5rem;
--ppz-space-16: 4rem;
--ppz-space-20: 5rem;
--ppz-space-24: 6rem;
--ppz-space-32: 8rem;
--ppz-space-0-5: 0.125rem;
--ppz-space-1-5: 0.375rem;
--ppz-space-2-5: 0.625rem;
--ppz-space-3-5: 0.875rem;
--ppz-radius-none: 0;
--ppz-radius-sm: 0.125rem;
--ppz-radius-md: 0.25rem;
--ppz-radius-lg: 0.5rem;
--ppz-radius-xl: 0.75rem;
--ppz-radius-2xl: 1rem;
--ppz-radius-3xl: 1.5rem;
--ppz-radius-full: 9999px;
--ppz-shadow-none: none;
--ppz-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--ppz-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--ppz-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--ppz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--ppz-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--ppz-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--ppz-elevation-0: 0 0 0 0 rgba(0,0,0,0);
--ppz-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--ppz-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ppz-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ppz-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ppz-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-opacity-0: 0;
--ppz-opacity-5: 0.05;
--ppz-opacity-10: 0.1;
--ppz-opacity-20: 0.2;
--ppz-opacity-25: 0.25;
--ppz-opacity-30: 0.3;
--ppz-opacity-40: 0.4;
--ppz-opacity-50: 0.5;
--ppz-opacity-60: 0.6;
--ppz-opacity-70: 0.7;
--ppz-opacity-75: 0.75;
--ppz-opacity-80: 0.8;
--ppz-opacity-90: 0.9;
--ppz-opacity-95: 0.95;
--ppz-opacity-100: 1;
--ppz-ease-linear: linear;
--ppz-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ppz-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ppz-ease-inOut: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-base: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ppz-duration-instant: 50ms;
--ppz-duration-fast: 120ms;
--ppz-duration-base: 200ms;
--ppz-duration-moderate: 300ms;
--ppz-duration-slow: 400ms;
--ppz-duration-slower: 600ms;
--ppz-duration-slowest: 800ms;
--ppz-breakpoint-xs: 320px;
--ppz-breakpoint-sm: 640px;
--ppz-breakpoint-md: 768px;
--ppz-breakpoint-lg: 1024px;
--ppz-breakpoint-xl: 1280px;
--ppz-breakpoint-2xl: 1536px;
--ppz-z-index-base: 0;
--ppz-z-index-dropdown: 1000;
--ppz-z-index-sticky: 1100;
--ppz-z-index-fixed: 1200;
--ppz-z-index-overlay: 1300;
--ppz-z-index-modal: 1400;
--ppz-z-index-popover: 1500;
--ppz-z-index-tooltip: 1600;
--ppz-z-index-notification: 1700;
--ppz-bg-root: #0A0E14;
--ppz-bg-surface: #1F2937;
--ppz-bg-surfaceVariant: #111827;
--ppz-bg-subtle: #374151;
--ppz-bg-overlay: rgba(0, 0, 0, 0.7);
--ppz-text-primary: #F9FAFB;
--ppz-text-secondary: #E5E7EB;
--ppz-text-tertiary: #D1D5DB;
--ppz-text-muted: #9CA3AF;
--ppz-text-inverse: #111827;
--ppz-text-disabled: #6B7280;
--ppz-border-subtle: #374151;
--ppz-border-default: #4B5563;
--ppz-border-strong: #6B7280;
--ppz-border-inverse: #111827;
--ppz-interactive-default: #F48FB1;
--ppz-interactive-hover: #F06292;
--ppz-interactive-active: #EC407A;
--ppz-interactive-disabled: #880E4F;
--ppz-focus-ring: #F48FB1;
--ppz-focus-ringOffset: #1F2937;
--ppz-button-paddingX-sm: var(--ppz-space-2);
--ppz-button-paddingX-md: var(--ppz-space-3);
--ppz-button-paddingX-lg: var(--ppz-space-4);
--ppz-button-paddingY-sm: var(--ppz-space-1);
--ppz-button-paddingY-md: var(--ppz-space-2);
--ppz-button-paddingY-lg: var(--ppz-space-2-5);
--ppz-button-height-sm: 28px;
--ppz-button-height-md: 36px;
--ppz-button-height-lg: 44px;
--ppz-button-gap: var(--ppz-space-1-5);
--ppz-input-paddingX: var(--ppz-space-3);
--ppz-input-paddingY: var(--ppz-space-2);
--ppz-input-height: 40px;
--ppz-input-borderWidth: 1px;
--ppz-input-focusRingWidth: 3px;
--ppz-input-focusRingOpacity: 0.25;
--ppz-card-padding-sm: var(--ppz-space-3);
--ppz-card-padding-md: var(--ppz-space-4);
--ppz-card-padding-lg: var(--ppz-space-6);
--ppz-card-gap: var(--ppz-space-3);
--ppz-modal-width-sm: 360px;
--ppz-modal-width-md: 560px;
--ppz-modal-width-lg: 720px;
--ppz-modal-width-xl: 960px;
--ppz-modal-width-full: 100%;
--ppz-modal-padding-header: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-body: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-footer: var(--ppz-space-3) var(--ppz-space-5);
--ppz-a11y-minTouchTarget: 44px;
--ppz-a11y-minTextContrast: 4.5;
--ppz-a11y-minLargeTextContrast: 3;
--ppz-a11y-focusRingWidth: 2px;
--ppz-a11y-focusRingOffset: 2px;
--nearly-white: var(--ppz-bg-root); /* legacy */
--medium-gray: var(--ppz-color-neutral-300); /* legacy */
--light-gray: var(--ppz-color-neutral-200); /* legacy */
--dark-color: var(--ppz-color-neutral-800); /* legacy */
--dark-color-text: var(--ppz-color-neutral-800); /* legacy */
--primary-color: var(--ppz-color-brand-primary); /* legacy */
--box-shadow: rgba(0,0,0,0.15); /* legacy */
--border-radius: var(--ppz-radius-md); /* legacy */
--danger-color: var(--ppz-color-danger-main); /* legacy */
--aqua: #19db9a; /* legacy */
--mauve: #40097b; /* legacy */
--brand-tertiary: #6a4ab8; /* legacy */
}
[data-theme="light"][data-contrast="high"]{
--ppz-color-brand-primary: #E91E63;
--ppz-color-brand-secondary: #19db9a;
--ppz-color-brand-tertiary: #6a4ab8;
--ppz-color-brand-accent: #FB923C;
--ppz-color-brand-aqua: #19db9a;
--ppz-color-brand-mauve: #40097b;
--ppz-color-brand-pink-50: #FCE4EC;
--ppz-color-brand-pink-100: #F8BBD0;
--ppz-color-brand-pink-200: #F48FB1;
--ppz-color-brand-pink-300: #F06292;
--ppz-color-brand-pink-400: #EC407A;
--ppz-color-brand-pink-500: #E91E63;
--ppz-color-brand-pink-600: #D81B60;
--ppz-color-brand-pink-700: #C2185B;
--ppz-color-brand-pink-800: #AD1457;
--ppz-color-brand-pink-900: #880E4F;
--ppz-color-brand-green-50: #E8F5E9;
--ppz-color-brand-green-100: #C8E6C9;
--ppz-color-brand-green-200: #A5D6A7;
--ppz-color-brand-green-300: #81C784;
--ppz-color-brand-green-400: #66BB6A;
--ppz-color-brand-green-500: #4CAF50;
--ppz-color-brand-green-600: #43A047;
--ppz-color-brand-green-700: #388E3C;
--ppz-color-brand-green-800: #2E7D32;
--ppz-color-brand-green-900: #1B5E20;
--ppz-color-brand-purple-50: #F3E5F5;
--ppz-color-brand-purple-100: #E1BEE7;
--ppz-color-brand-purple-200: #CE93D8;
--ppz-color-brand-purple-300: #BA68C8;
--ppz-color-brand-purple-400: #AB47BC;
--ppz-color-brand-purple-500: #40097b;
--ppz-color-brand-purple-600: #8E24AA;
--ppz-color-brand-purple-700: #7B1FA2;
--ppz-color-brand-purple-800: #6A1B9A;
--ppz-color-brand-purple-900: #4A148C;
--ppz-color-brand-teal-50: #E0F2F1;
--ppz-color-brand-teal-100: #B2DFDB;
--ppz-color-brand-teal-200: #80CBC4;
--ppz-color-brand-teal-300: #4DB6AC;
--ppz-color-brand-teal-400: #26A69A;
--ppz-color-brand-teal-500: #19db9a;
--ppz-color-brand-teal-600: #00897B;
--ppz-color-brand-teal-700: #00796B;
--ppz-color-brand-teal-800: #00695C;
--ppz-color-brand-teal-900: #004D40;
--ppz-color-success-light: #16A34A;
--ppz-color-success-main: #16A34A;
--ppz-color-success-dark: #15803D;
--ppz-color-warning-light: #FDE047;
--ppz-color-warning-main: #F59E0B;
--ppz-color-warning-dark: #D97706;
--ppz-color-danger-light: #FCA5A5;
--ppz-color-danger-main: #DC2626;
--ppz-color-danger-dark: #B91C1C;
--ppz-color-info-light: #7DD3FC;
--ppz-color-info-main: #0EA5E9;
--ppz-color-info-dark: #0284C7;
--ppz-color-neutral-0: #FFFFFF;
--ppz-color-neutral-50: #FCFCFD;
--ppz-color-neutral-100: #F5F6F7;
--ppz-color-neutral-200: #E5E7EB;
--ppz-color-neutral-300: #D1D5DB;
--ppz-color-neutral-400: #9CA3AF;
--ppz-color-neutral-500: #6B7280;
--ppz-color-neutral-600: #4B5563;
--ppz-color-neutral-700: #374151;
--ppz-color-neutral-800: #1F2937;
--ppz-color-neutral-900: #111827;
--ppz-color-neutral-950: #0A0E14;
--ppz-subject-etude-bg: #FFF4E6;
--ppz-subject-etude-border: #FFB74D;
--ppz-subject-etude-text: #E65100;
--ppz-subject-layout-bg: #E8F5E9;
--ppz-subject-layout-border: #81C784;
--ppz-subject-layout-text: #2E7D32;
--ppz-subject-animation-bg: #FCE4EC;
--ppz-subject-animation-border: #F48FB1;
--ppz-subject-animation-text: #AD1457;
--ppz-subject-dessin-bg: #E1BEE7;
--ppz-subject-dessin-border: #CE93D8;
--ppz-subject-dessin-text: #6A1B9A;
--ppz-subject-histoire-bg: #FFF9C4;
--ppz-subject-histoire-border: #FFF176;
--ppz-subject-histoire-text: #F57F17;
--ppz-subject-rentree-bg: #B3E5FC;
--ppz-subject-rentree-border: #4FC3F7;
--ppz-subject-rentree-text: #01579B;
--ppz-subject-artistique-bg: #F8BBD0;
--ppz-subject-artistique-border: #F06292;
--ppz-subject-artistique-text: #C2185B;
--ppz-subject-technique-bg: #CFD8DC;
--ppz-subject-technique-border: #90A4AE;
--ppz-subject-technique-text: #37474F;
--ppz-subject-evenement-bg: #FFCCBC;
--ppz-subject-evenement-border: #FF8A65;
--ppz-subject-evenement-text: #D84315;
--ppz-subject-general-bg: #E0E0E0;
--ppz-subject-general-border: #BDBDBD;
--ppz-subject-general-text: #424242;
--ppz-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ppz-font-family-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--ppz-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
--ppz-font-size-2xs: 0.625rem;
--ppz-font-size-xs: 0.75rem;
--ppz-font-size-sm: 0.8125rem;
--ppz-font-size-md: 0.875rem;
--ppz-font-size-base: 1rem;
--ppz-font-size-lg: 1.125rem;
--ppz-font-size-xl: 1.25rem;
--ppz-font-size-2xl: 1.5rem;
--ppz-font-size-3xl: 1.875rem;
--ppz-font-size-4xl: 2.25rem;
--ppz-font-size-5xl: 3rem;
--ppz-font-weight-thin: 100;
--ppz-font-weight-extralight: 200;
--ppz-font-weight-light: 300;
--ppz-font-weight-regular: 400;
--ppz-font-weight-medium: 500;
--ppz-font-weight-semibold: 600;
--ppz-font-weight-bold: 700;
--ppz-font-weight-extrabold: 800;
--ppz-font-weight-black: 900;
--ppz-line-height-none: 1;
--ppz-line-height-tight: 1.15;
--ppz-line-height-snug: 1.25;
--ppz-line-height-normal: 1.4;
--ppz-line-height-relaxed: 1.5;
--ppz-line-height-loose: 1.75;
--ppz-letter-spacing-tighter: -0.05em;
--ppz-letter-spacing-tight: -0.025em;
--ppz-letter-spacing-normal: 0;
--ppz-letter-spacing-wide: 0.025em;
--ppz-letter-spacing-wider: 0.05em;
--ppz-letter-spacing-widest: 0.1em;
--ppz-space-0: 0;
--ppz-space-1: 0.25rem;
--ppz-space-2: 0.5rem;
--ppz-space-3: 0.75rem;
--ppz-space-4: 1rem;
--ppz-space-5: 1.25rem;
--ppz-space-6: 1.5rem;
--ppz-space-7: 1.75rem;
--ppz-space-8: 2rem;
--ppz-space-9: 2.25rem;
--ppz-space-10: 2.5rem;
--ppz-space-12: 3rem;
--ppz-space-14: 3.5rem;
--ppz-space-16: 4rem;
--ppz-space-20: 5rem;
--ppz-space-24: 6rem;
--ppz-space-32: 8rem;
--ppz-space-0-5: 0.125rem;
--ppz-space-1-5: 0.375rem;
--ppz-space-2-5: 0.625rem;
--ppz-space-3-5: 0.875rem;
--ppz-radius-none: 0;
--ppz-radius-sm: 0.125rem;
--ppz-radius-md: 0.25rem;
--ppz-radius-lg: 0.5rem;
--ppz-radius-xl: 0.75rem;
--ppz-radius-2xl: 1rem;
--ppz-radius-3xl: 1.5rem;
--ppz-radius-full: 9999px;
--ppz-shadow-none: none;
--ppz-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--ppz-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--ppz-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--ppz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--ppz-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--ppz-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--ppz-elevation-0: 0 0 0 0 rgba(0,0,0,0);
--ppz-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--ppz-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ppz-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ppz-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ppz-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-opacity-0: 0;
--ppz-opacity-5: 0.05;
--ppz-opacity-10: 0.1;
--ppz-opacity-20: 0.2;
--ppz-opacity-25: 0.25;
--ppz-opacity-30: 0.3;
--ppz-opacity-40: 0.4;
--ppz-opacity-50: 0.5;
--ppz-opacity-60: 0.6;
--ppz-opacity-70: 0.7;
--ppz-opacity-75: 0.75;
--ppz-opacity-80: 0.8;
--ppz-opacity-90: 0.9;
--ppz-opacity-95: 0.95;
--ppz-opacity-100: 1;
--ppz-ease-linear: linear;
--ppz-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ppz-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ppz-ease-inOut: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-base: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ppz-duration-instant: 50ms;
--ppz-duration-fast: 120ms;
--ppz-duration-base: 200ms;
--ppz-duration-moderate: 300ms;
--ppz-duration-slow: 400ms;
--ppz-duration-slower: 600ms;
--ppz-duration-slowest: 800ms;
--ppz-breakpoint-xs: 320px;
--ppz-breakpoint-sm: 640px;
--ppz-breakpoint-md: 768px;
--ppz-breakpoint-lg: 1024px;
--ppz-breakpoint-xl: 1280px;
--ppz-breakpoint-2xl: 1536px;
--ppz-z-index-base: 0;
--ppz-z-index-dropdown: 1000;
--ppz-z-index-sticky: 1100;
--ppz-z-index-fixed: 1200;
--ppz-z-index-overlay: 1300;
--ppz-z-index-modal: 1400;
--ppz-z-index-popover: 1500;
--ppz-z-index-tooltip: 1600;
--ppz-z-index-notification: 1700;
--ppz-bg-root: #FFFFFF;
--ppz-bg-surface: #FFFFFF;
--ppz-bg-surfaceVariant: #F5F6F7;
--ppz-bg-subtle: #E5E7EB;
--ppz-bg-overlay: rgba(0, 0, 0, 0.9);
--ppz-text-primary: #000000;
--ppz-text-secondary: #1F2937;
--ppz-text-tertiary: #374151;
--ppz-text-muted: #4B5563;
--ppz-text-inverse: #FFFFFF;
--ppz-text-disabled: #9CA3AF;
--ppz-border-subtle: #000000;
--ppz-border-default: #000000;
--ppz-border-strong: #000000;
--ppz-border-inverse: #FFFFFF;
--ppz-interactive-default: #AD1457;
--ppz-interactive-hover: #880E4F;
--ppz-interactive-active: #6A0E3F;
--ppz-interactive-disabled: #9CA3AF;
--ppz-focus-ring: #000000;
--ppz-focus-ringOffset: #FFFFFF;
--ppz-button-paddingX-sm: var(--ppz-space-2);
--ppz-button-paddingX-md: var(--ppz-space-3);
--ppz-button-paddingX-lg: var(--ppz-space-4);
--ppz-button-paddingY-sm: var(--ppz-space-1);
--ppz-button-paddingY-md: var(--ppz-space-2);
--ppz-button-paddingY-lg: var(--ppz-space-2-5);
--ppz-button-height-sm: 28px;
--ppz-button-height-md: 36px;
--ppz-button-height-lg: 44px;
--ppz-button-gap: var(--ppz-space-1-5);
--ppz-input-paddingX: var(--ppz-space-3);
--ppz-input-paddingY: var(--ppz-space-2);
--ppz-input-height: 40px;
--ppz-input-borderWidth: 1px;
--ppz-input-focusRingWidth: 3px;
--ppz-input-focusRingOpacity: 0.25;
--ppz-card-padding-sm: var(--ppz-space-3);
--ppz-card-padding-md: var(--ppz-space-4);
--ppz-card-padding-lg: var(--ppz-space-6);
--ppz-card-gap: var(--ppz-space-3);
--ppz-modal-width-sm: 360px;
--ppz-modal-width-md: 560px;
--ppz-modal-width-lg: 720px;
--ppz-modal-width-xl: 960px;
--ppz-modal-width-full: 100%;
--ppz-modal-padding-header: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-body: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-footer: var(--ppz-space-3) var(--ppz-space-5);
--ppz-a11y-minTouchTarget: 44px;
--ppz-a11y-minTextContrast: 4.5;
--ppz-a11y-minLargeTextContrast: 3;
--ppz-a11y-focusRingWidth: 2px;
--ppz-a11y-focusRingOffset: 2px;
--nearly-white: var(--ppz-bg-root); /* legacy */
--medium-gray: var(--ppz-color-neutral-300); /* legacy */
--light-gray: var(--ppz-color-neutral-200); /* legacy */
--dark-color: var(--ppz-color-neutral-800); /* legacy */
--dark-color-text: var(--ppz-color-neutral-800); /* legacy */
--primary-color: var(--ppz-color-brand-primary); /* legacy */
--box-shadow: rgba(0,0,0,0.15); /* legacy */
--border-radius: var(--ppz-radius-md); /* legacy */
--danger-color: var(--ppz-color-danger-main); /* legacy */
--aqua: #19db9a; /* legacy */
--mauve: #40097b; /* legacy */
--brand-tertiary: #6a4ab8; /* legacy */
/* Override semantic tokens for light high-contrast */
--ppz-text-primary: #000 !important;
--ppz-text-secondary: #000 !important;
--ppz-text-muted: #333 !important;
--ppz-bg-surface: #fff !important;
--ppz-bg-root: #fff !important;
--ppz-border-default: #000 !important;
--ppz-border-subtle: #333 !important;
--ppz-interactive-default: #000 !important;
}
[data-theme="dark"][data-contrast="high"]{
--ppz-color-brand-primary: #E91E63;
--ppz-color-brand-secondary: #19db9a;
--ppz-color-brand-tertiary: #6a4ab8;
--ppz-color-brand-accent: #FB923C;
--ppz-color-brand-aqua: #19db9a;
--ppz-color-brand-mauve: #40097b;
--ppz-color-brand-pink-50: #FCE4EC;
--ppz-color-brand-pink-100: #F8BBD0;
--ppz-color-brand-pink-200: #F48FB1;
--ppz-color-brand-pink-300: #F06292;
--ppz-color-brand-pink-400: #EC407A;
--ppz-color-brand-pink-500: #E91E63;
--ppz-color-brand-pink-600: #D81B60;
--ppz-color-brand-pink-700: #C2185B;
--ppz-color-brand-pink-800: #AD1457;
--ppz-color-brand-pink-900: #880E4F;
--ppz-color-brand-green-50: #E8F5E9;
--ppz-color-brand-green-100: #C8E6C9;
--ppz-color-brand-green-200: #A5D6A7;
--ppz-color-brand-green-300: #81C784;
--ppz-color-brand-green-400: #66BB6A;
--ppz-color-brand-green-500: #4CAF50;
--ppz-color-brand-green-600: #43A047;
--ppz-color-brand-green-700: #388E3C;
--ppz-color-brand-green-800: #2E7D32;
--ppz-color-brand-green-900: #1B5E20;
--ppz-color-brand-purple-50: #F3E5F5;
--ppz-color-brand-purple-100: #E1BEE7;
--ppz-color-brand-purple-200: #CE93D8;
--ppz-color-brand-purple-300: #BA68C8;
--ppz-color-brand-purple-400: #AB47BC;
--ppz-color-brand-purple-500: #40097b;
--ppz-color-brand-purple-600: #8E24AA;
--ppz-color-brand-purple-700: #7B1FA2;
--ppz-color-brand-purple-800: #6A1B9A;
--ppz-color-brand-purple-900: #4A148C;
--ppz-color-brand-teal-50: #E0F2F1;
--ppz-color-brand-teal-100: #B2DFDB;
--ppz-color-brand-teal-200: #80CBC4;
--ppz-color-brand-teal-300: #4DB6AC;
--ppz-color-brand-teal-400: #26A69A;
--ppz-color-brand-teal-500: #19db9a;
--ppz-color-brand-teal-600: #00897B;
--ppz-color-brand-teal-700: #00796B;
--ppz-color-brand-teal-800: #00695C;
--ppz-color-brand-teal-900: #004D40;
--ppz-color-success-light: #16A34A;
--ppz-color-success-main: #16A34A;
--ppz-color-success-dark: #15803D;
--ppz-color-warning-light: #FDE047;
--ppz-color-warning-main: #F59E0B;
--ppz-color-warning-dark: #D97706;
--ppz-color-danger-light: #FCA5A5;
--ppz-color-danger-main: #DC2626;
--ppz-color-danger-dark: #B91C1C;
--ppz-color-info-light: #7DD3FC;
--ppz-color-info-main: #0EA5E9;
--ppz-color-info-dark: #0284C7;
--ppz-color-neutral-0: #FFFFFF;
--ppz-color-neutral-50: #FCFCFD;
--ppz-color-neutral-100: #F5F6F7;
--ppz-color-neutral-200: #E5E7EB;
--ppz-color-neutral-300: #D1D5DB;
--ppz-color-neutral-400: #9CA3AF;
--ppz-color-neutral-500: #6B7280;
--ppz-color-neutral-600: #4B5563;
--ppz-color-neutral-700: #374151;
--ppz-color-neutral-800: #1F2937;
--ppz-color-neutral-900: #111827;
--ppz-color-neutral-950: #0A0E14;
--ppz-subject-etude-bg: #FFF4E6;
--ppz-subject-etude-border: #FFB74D;
--ppz-subject-etude-text: #E65100;
--ppz-subject-layout-bg: #E8F5E9;
--ppz-subject-layout-border: #81C784;
--ppz-subject-layout-text: #2E7D32;
--ppz-subject-animation-bg: #FCE4EC;
--ppz-subject-animation-border: #F48FB1;
--ppz-subject-animation-text: #AD1457;
--ppz-subject-dessin-bg: #E1BEE7;
--ppz-subject-dessin-border: #CE93D8;
--ppz-subject-dessin-text: #6A1B9A;
--ppz-subject-histoire-bg: #FFF9C4;
--ppz-subject-histoire-border: #FFF176;
--ppz-subject-histoire-text: #F57F17;
--ppz-subject-rentree-bg: #B3E5FC;
--ppz-subject-rentree-border: #4FC3F7;
--ppz-subject-rentree-text: #01579B;
--ppz-subject-artistique-bg: #F8BBD0;
--ppz-subject-artistique-border: #F06292;
--ppz-subject-artistique-text: #C2185B;
--ppz-subject-technique-bg: #CFD8DC;
--ppz-subject-technique-border: #90A4AE;
--ppz-subject-technique-text: #37474F;
--ppz-subject-evenement-bg: #FFCCBC;
--ppz-subject-evenement-border: #FF8A65;
--ppz-subject-evenement-text: #D84315;
--ppz-subject-general-bg: #E0E0E0;
--ppz-subject-general-border: #BDBDBD;
--ppz-subject-general-text: #424242;
--ppz-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ppz-font-family-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
--ppz-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
--ppz-font-size-2xs: 0.625rem;
--ppz-font-size-xs: 0.75rem;
--ppz-font-size-sm: 0.8125rem;
--ppz-font-size-md: 0.875rem;
--ppz-font-size-base: 1rem;
--ppz-font-size-lg: 1.125rem;
--ppz-font-size-xl: 1.25rem;
--ppz-font-size-2xl: 1.5rem;
--ppz-font-size-3xl: 1.875rem;
--ppz-font-size-4xl: 2.25rem;
--ppz-font-size-5xl: 3rem;
--ppz-font-weight-thin: 100;
--ppz-font-weight-extralight: 200;
--ppz-font-weight-light: 300;
--ppz-font-weight-regular: 400;
--ppz-font-weight-medium: 500;
--ppz-font-weight-semibold: 600;
--ppz-font-weight-bold: 700;
--ppz-font-weight-extrabold: 800;
--ppz-font-weight-black: 900;
--ppz-line-height-none: 1;
--ppz-line-height-tight: 1.15;
--ppz-line-height-snug: 1.25;
--ppz-line-height-normal: 1.4;
--ppz-line-height-relaxed: 1.5;
--ppz-line-height-loose: 1.75;
--ppz-letter-spacing-tighter: -0.05em;
--ppz-letter-spacing-tight: -0.025em;
--ppz-letter-spacing-normal: 0;
--ppz-letter-spacing-wide: 0.025em;
--ppz-letter-spacing-wider: 0.05em;
--ppz-letter-spacing-widest: 0.1em;
--ppz-space-0: 0;
--ppz-space-1: 0.25rem;
--ppz-space-2: 0.5rem;
--ppz-space-3: 0.75rem;
--ppz-space-4: 1rem;
--ppz-space-5: 1.25rem;
--ppz-space-6: 1.5rem;
--ppz-space-7: 1.75rem;
--ppz-space-8: 2rem;
--ppz-space-9: 2.25rem;
--ppz-space-10: 2.5rem;
--ppz-space-12: 3rem;
--ppz-space-14: 3.5rem;
--ppz-space-16: 4rem;
--ppz-space-20: 5rem;
--ppz-space-24: 6rem;
--ppz-space-32: 8rem;
--ppz-space-0-5: 0.125rem;
--ppz-space-1-5: 0.375rem;
--ppz-space-2-5: 0.625rem;
--ppz-space-3-5: 0.875rem;
--ppz-radius-none: 0;
--ppz-radius-sm: 0.125rem;
--ppz-radius-md: 0.25rem;
--ppz-radius-lg: 0.5rem;
--ppz-radius-xl: 0.75rem;
--ppz-radius-2xl: 1rem;
--ppz-radius-3xl: 1.5rem;
--ppz-radius-full: 9999px;
--ppz-shadow-none: none;
--ppz-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--ppz-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--ppz-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--ppz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--ppz-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--ppz-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--ppz-elevation-0: 0 0 0 0 rgba(0,0,0,0);
--ppz-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--ppz-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ppz-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ppz-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ppz-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ppz-opacity-0: 0;
--ppz-opacity-5: 0.05;
--ppz-opacity-10: 0.1;
--ppz-opacity-20: 0.2;
--ppz-opacity-25: 0.25;
--ppz-opacity-30: 0.3;
--ppz-opacity-40: 0.4;
--ppz-opacity-50: 0.5;
--ppz-opacity-60: 0.6;
--ppz-opacity-70: 0.7;
--ppz-opacity-75: 0.75;
--ppz-opacity-80: 0.8;
--ppz-opacity-90: 0.9;
--ppz-opacity-95: 0.95;
--ppz-opacity-100: 1;
--ppz-ease-linear: linear;
--ppz-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ppz-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ppz-ease-inOut: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-base: cubic-bezier(0.4, 0, 0.2, 1);
--ppz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ppz-duration-instant: 50ms;
--ppz-duration-fast: 120ms;
--ppz-duration-base: 200ms;
--ppz-duration-moderate: 300ms;
--ppz-duration-slow: 400ms;
--ppz-duration-slower: 600ms;
--ppz-duration-slowest: 800ms;
--ppz-breakpoint-xs: 320px;
--ppz-breakpoint-sm: 640px;
--ppz-breakpoint-md: 768px;
--ppz-breakpoint-lg: 1024px;
--ppz-breakpoint-xl: 1280px;
--ppz-breakpoint-2xl: 1536px;
--ppz-z-index-base: 0;
--ppz-z-index-dropdown: 1000;
--ppz-z-index-sticky: 1100;
--ppz-z-index-fixed: 1200;
--ppz-z-index-overlay: 1300;
--ppz-z-index-modal: 1400;
--ppz-z-index-popover: 1500;
--ppz-z-index-tooltip: 1600;
--ppz-z-index-notification: 1700;
--ppz-bg-root: #FFFFFF;
--ppz-bg-surface: #FFFFFF;
--ppz-bg-surfaceVariant: #F5F6F7;
--ppz-bg-subtle: #E5E7EB;
--ppz-bg-overlay: rgba(0, 0, 0, 0.9);
--ppz-text-primary: #000000;
--ppz-text-secondary: #1F2937;
--ppz-text-tertiary: #374151;
--ppz-text-muted: #4B5563;
--ppz-text-inverse: #FFFFFF;
--ppz-text-disabled: #9CA3AF;
--ppz-border-subtle: #000000;
--ppz-border-default: #000000;
--ppz-border-strong: #000000;
--ppz-border-inverse: #FFFFFF;
--ppz-interactive-default: #AD1457;
--ppz-interactive-hover: #880E4F;
--ppz-interactive-active: #6A0E3F;
--ppz-interactive-disabled: #9CA3AF;
--ppz-focus-ring: #000000;
--ppz-focus-ringOffset: #FFFFFF;
--ppz-button-paddingX-sm: var(--ppz-space-2);
--ppz-button-paddingX-md: var(--ppz-space-3);
--ppz-button-paddingX-lg: var(--ppz-space-4);
--ppz-button-paddingY-sm: var(--ppz-space-1);
--ppz-button-paddingY-md: var(--ppz-space-2);
--ppz-button-paddingY-lg: var(--ppz-space-2-5);
--ppz-button-height-sm: 28px;
--ppz-button-height-md: 36px;
--ppz-button-height-lg: 44px;
--ppz-button-gap: var(--ppz-space-1-5);
--ppz-input-paddingX: var(--ppz-space-3);
--ppz-input-paddingY: var(--ppz-space-2);
--ppz-input-height: 40px;
--ppz-input-borderWidth: 1px;
--ppz-input-focusRingWidth: 3px;
--ppz-input-focusRingOpacity: 0.25;
--ppz-card-padding-sm: var(--ppz-space-3);
--ppz-card-padding-md: var(--ppz-space-4);
--ppz-card-padding-lg: var(--ppz-space-6);
--ppz-card-gap: var(--ppz-space-3);
--ppz-modal-width-sm: 360px;
--ppz-modal-width-md: 560px;
--ppz-modal-width-lg: 720px;
--ppz-modal-width-xl: 960px;
--ppz-modal-width-full: 100%;
--ppz-modal-padding-header: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-body: var(--ppz-space-4) var(--ppz-space-5);
--ppz-modal-padding-footer: var(--ppz-space-3) var(--ppz-space-5);
--ppz-a11y-minTouchTarget: 44px;
--ppz-a11y-minTextContrast: 4.5;
--ppz-a11y-minLargeTextContrast: 3;
--ppz-a11y-focusRingWidth: 2px;
--ppz-a11y-focusRingOffset: 2px;
--nearly-white: var(--ppz-bg-root); /* legacy */
--medium-gray: var(--ppz-color-neutral-300); /* legacy */
--light-gray: var(--ppz-color-neutral-200); /* legacy */
--dark-color: var(--ppz-color-neutral-800); /* legacy */
--dark-color-text: var(--ppz-color-neutral-800); /* legacy */
--primary-color: var(--ppz-color-brand-primary); /* legacy */
--box-shadow: rgba(0,0,0,0.15); /* legacy */
--border-radius: var(--ppz-radius-md); /* legacy */
--danger-color: var(--ppz-color-danger-main); /* legacy */
--aqua: #19db9a; /* legacy */
--mauve: #40097b; /* legacy */
--brand-tertiary: #6a4ab8; /* legacy */
/* Override semantic tokens for dark high-contrast */
--ppz-text-primary: #fff !important;
--ppz-text-secondary: #fff !important;
--ppz-text-muted: #ccc !important;
--ppz-bg-surface: #000 !important;
--ppz-bg-root: #000 !important;
--ppz-border-default: #fff !important;
--ppz-border-subtle: #ccc !important;
--ppz-interactive-default: #fff !important;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--ppz-font-family-sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; padding: 0; background: var(--ppz-bg-root); color: var(--ppz-text-primary); font-size: var(--ppz-font-size-md); line-height: var(--ppz-line-height-normal); }
:focus-visible { outline: 2px solid var(--ppz-focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--ppz-font-weight-semibold); line-height: var(--ppz-line-height-tight); color: var(--ppz-text-primary); }
h1 { font-size: var(--ppz-font-size-3xl); letter-spacing: var(--ppz-letter-spacing-tight); margin-bottom: var(--ppz-space-5); }
h2 { font-size: var(--ppz-font-size-2xl); letter-spacing: var(--ppz-letter-spacing-tight); margin-bottom: var(--ppz-space-4); }
h3 { font-size: var(--ppz-font-size-xl); margin-bottom: var(--ppz-space-3); }
h4 { font-size: var(--ppz-font-size-xl); margin-bottom: var(--ppz-space-2); }
h5 { font-size: var(--ppz-font-size-lg); font-weight: var(--ppz-font-weight-medium); margin-bottom: var(--ppz-space-2); }
h6 { font-size: var(--ppz-font-size-md); font-weight: var(--ppz-font-weight-medium); text-transform: uppercase; letter-spacing: var(--ppz-letter-spacing-wide); color: var(--ppz-text-tertiary); margin-bottom: var(--ppz-space-2); }
/* Empty state */
.ppz-card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ppz-space-3); text-align: center; padding: var(--ppz-space-8) var(--ppz-space-6); color: var(--ppz-text-secondary); }
.ppz-card-empty svg { width: 48px; height: 48px; color: var(--ppz-text-muted); flex: 0 0 auto; }
.ppz-card-empty-title { margin: 0; font-size: var(--ppz-font-size-lg); line-height: var(--ppz-line-height-snug); font-weight: var(--ppz-font-weight-semibold); letter-spacing: 0; color: var(--ppz-text-primary); }
.ppz-card-empty-text { margin: 0; font-size: var(--ppz-font-size-sm); line-height: var(--ppz-line-height-relaxed); color: var(--ppz-text-secondary); max-width: 32rem; }
p { margin-bottom: var(--ppz-space-3); line-height: var(--ppz-line-height-relaxed); }
a { color: var(--ppz-interactive-default); text-decoration: none; transition: color var(--ppz-duration-fast) var(--ppz-ease-out); }
a:hover { color: var(--ppz-interactive-hover); text-decoration: underline; }
/* Heading classes */
.ppz-heading { font-weight: var(--ppz-font-weight-semibold); line-height: var(--ppz-line-height-tight); color: var(--ppz-text-primary); margin: 0; }
.ppz-heading--4xl { font-size: var(--ppz-font-size-4xl); letter-spacing: var(--ppz-letter-spacing-tight); }
.ppz-heading--3xl { font-size: var(--ppz-font-size-3xl); letter-spacing: var(--ppz-letter-spacing-tight); }
.ppz-heading--2xl { font-size: var(--ppz-font-size-2xl); }
.ppz-heading--xl { font-size: var(--ppz-font-size-xl); }
.ppz-heading--lg { font-size: var(--ppz-font-size-lg); font-weight: var(--ppz-font-weight-medium); }
.ppz-heading--md { font-size: var(--ppz-font-size-md); font-weight: var(--ppz-font-weight-medium); text-transform: uppercase; letter-spacing: var(--ppz-letter-spacing-wide); }
/* Text classes */
.ppz-text { margin: 0; line-height: var(--ppz-line-height-relaxed); color: var(--ppz-text-primary); }
.ppz-text--secondary { color: var(--ppz-text-secondary); }
.ppz-text--muted { color: var(--ppz-text-muted); }
.ppz-text--sm { font-size: var(--ppz-font-size-sm); }
.ppz-text--lg { font-size: var(--ppz-font-size-lg); }
/* Link classes */
.ppz-link { color: var(--ppz-interactive-default); text-decoration: none; transition: color var(--ppz-duration-fast) var(--ppz-ease-out); }
.ppz-link:hover { color: var(--ppz-interactive-hover); text-decoration: underline; }
.ppz-link--secondary { color: var(--ppz-text-secondary); }
.ppz-link--secondary:hover { color: var(--ppz-text-primary); }
.ppz-flex { display: flex; }
.ppz-flex-col { display: flex; flex-direction: column; }
.ppz-inline-flex { display: inline-flex; }
.ppz-grid { display: grid; }
.ppz-items-center { align-items: center; }
.ppz-items-start { align-items: flex-start; }
.ppz-justify-center { justify-content: center; }
.ppz-justify-between { justify-content: space-between; }
.ppz-gap-1 { gap: var(--ppz-space-1); }
.ppz-gap-2 { gap: var(--ppz-space-2); }
.ppz-gap-3 { gap: var(--ppz-space-3); }
.ppz-gap-4 { gap: var(--ppz-space-4); }
.ppz-p-2 { padding: var(--ppz-space-2); }
.ppz-p-3 { padding: var(--ppz-space-3); }
.ppz-p-4 { padding: var(--ppz-space-4); }
.ppz-px-3 { padding-left: var(--ppz-space-3); padding-right: var(--ppz-space-3); }
.ppz-py-2 { padding-top: var(--ppz-space-2); padding-bottom: var(--ppz-space-2); }
.ppz-mb-2 { margin-bottom: var(--ppz-space-2); }
.ppz-mb-3 { margin-bottom: var(--ppz-space-3); }
.ppz-text-muted { color: var(--ppz-text-muted); }
.ppz-text-sm { font-size: var(--ppz-font-size-sm); }
.ppz-text-center { text-align: center; }
.ppz-font-semibold { font-weight: var(--ppz-font-weight-semibold); }
.ppz-rounded { border-radius: var(--ppz-radius-md); }
.ppz-rounded-lg { border-radius: var(--ppz-radius-lg); }
.ppz-shadow-sm { box-shadow: var(--ppz-shadow-sm); }
.ppz-shadow-md { box-shadow: var(--ppz-shadow-md); }
.ppz-bg-surface { background: var(--ppz-bg-surface); }
.ppz-list-table__head,
.ppz-list-table__head-row,
.ppz-list-table__head-cell {
background: var(--ppz-bg-surface);
}
.ppz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ppz-btn {
--_bg: var(--ppz-bg-subtle);
--_color: var(--ppz-text-primary);
--_border: var(--ppz-border-subtle);
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ppz-space-1-5);
padding: var(--ppz-space-2) var(--ppz-space-3);
min-height: 36px;
font-family: inherit;
font-size: var(--ppz-font-size-md);
font-weight: var(--ppz-font-weight-medium);
line-height: var(--ppz-line-height-tight);
text-decoration: none;
white-space: nowrap;
color: var(--_color);
background: var(--_bg);
border: 1px solid var(--_border);
border-radius: var(--ppz-radius-md);
box-shadow: var(--ppz-shadow-xs);
cursor: pointer;
user-select: none;
transition: background-color var(--ppz-duration-fast) var(--ppz-ease-out),
border-color var(--ppz-duration-fast) var(--ppz-ease-out),
color var(--ppz-duration-fast) var(--ppz-ease-out),
box-shadow var(--ppz-duration-base) var(--ppz-ease-out),
transform var(--ppz-duration-base) var(--ppz-ease-spring);
}
.ppz-btn:hover:not(:disabled),
.ppz-btn:focus-visible:not(:disabled) {
color: var(--_color);
text-decoration: none;
box-shadow: var(--ppz-shadow-md);
transform: translateY(-2px) scale(1.015);
}
.ppz-btn:active:not(:disabled) {
color: var(--_color);
text-decoration: none;
box-shadow: var(--ppz-shadow-xs);
transform: translateY(1px) scale(0.985);
}
.ppz-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ppz-btn--primary, .ppz-btn--main { --_bg: var(--ppz-color-brand-primary); --_color: white; --_border: var(--ppz-color-brand-primary); }
.ppz-btn--secondary { --_bg: var(--ppz-color-brand-secondary); --_color: white; --_border: var(--ppz-color-brand-secondary); }
.ppz-btn--tertiary { --_bg: var(--ppz-color-brand-tertiary); --_color: white; --_border: var(--ppz-color-brand-tertiary); }
.ppz-btn--danger { --_bg: var(--ppz-color-danger-main); --_color: white; --_border: var(--ppz-color-danger-main); }
.ppz-btn--outline { --_bg: transparent; --_color: var(--ppz-text-primary); }
.ppz-btn--outline:hover { --_bg: var(--ppz-bg-subtle); }
.ppz-btn--ghost { --_bg: transparent; --_border: transparent; box-shadow: none; }
.ppz-btn--mode-border { background: transparent !important; color: var(--_border) !important; }
.ppz-btn--sm { padding: var(--ppz-space-1) var(--ppz-space-2); min-height: 28px; font-size: var(--ppz-font-size-sm); }
.ppz-btn--lg { padding: var(--ppz-space-2-5) var(--ppz-space-4); min-height: 44px; font-size: var(--ppz-font-size-base); }
.ppz-btn--pill { border-radius: var(--ppz-radius-full); }
.ppz-btn--block { display: flex; width: 100%; }
.ppz-btn--full-width { display: flex; width: 100%; }
.ppz-button-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
line-height: 1;
text-align: center;
}
.ppz-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
}
.ppz-button-icon svg {
display: block;
width: 1em;
height: 1em;
}
.ppz-card {
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
padding: var(--ppz-space-4);
box-shadow: var(--ppz-shadow-sm);
}
.ppz-card--sm { padding: var(--ppz-space-3); }
.ppz-card--lg { padding: var(--ppz-space-6); }
.ppz-card--interactive { cursor: pointer; transition: all var(--ppz-duration-base) var(--ppz-ease-out); }
.ppz-card--interactive:hover { box-shadow: var(--ppz-shadow-md); transform: translateY(-2px); }
.ppz-card__header { margin-bottom: var(--ppz-space-3); padding-bottom: var(--ppz-space-3); border-bottom: 1px solid var(--ppz-border-subtle); display: flex; align-items: center; justify-content: space-between; }
.ppz-card__title { font-size: var(--ppz-font-size-lg); font-weight: var(--ppz-font-weight-semibold); color: var(--ppz-text-primary); margin: 0; flex: 1; }
.ppz-card__subtitle { font-size: var(--ppz-font-size-sm); color: var(--ppz-text-muted); margin-top: var(--ppz-space-0-5); font-weight: var(--ppz-font-weight-regular); }
.ppz-card__body { color: var(--ppz-text-secondary); line-height: var(--ppz-line-height-relaxed); }
.ppz-card__footer { margin-top: var(--ppz-space-3); padding-top: var(--ppz-space-3); border-top: 1px solid var(--ppz-border-subtle); font-size: var(--ppz-font-size-sm); color: var(--ppz-text-muted); }
/* Card with menu variant */
.ppz-card--menu .ppz-card__header { border-bottom: 2px solid var(--ppz-color-brand-primary); margin-bottom: var(--ppz-space-4); padding-bottom: var(--ppz-space-2); }
.ppz-card__menu { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.ppz-card__menu-item { border-bottom: 1px solid var(--ppz-border-subtle); }
.ppz-card__menu-item:last-child { border-bottom: none; }
.ppz-card__menu-link { display: flex; align-items: center; padding: var(--ppz-space-2-5) var(--ppz-space-3); color: var(--ppz-text-secondary); text-decoration: none; font-size: var(--ppz-font-size-md); transition: all var(--ppz-duration-fast) var(--ppz-ease-out); border-left: 3px solid transparent; }
.ppz-card__menu-link:hover { background: var(--ppz-bg-subtle); color: var(--ppz-text-primary); border-left-color: var(--ppz-color-brand-primary); }
.ppz-card__menu-link:active { background: var(--ppz-bg-hover); }
.ppz-card__menu-link--active { background: var(--ppz-bg-subtle); color: var(--ppz-color-brand-primary); font-weight: var(--ppz-font-weight-semibold); border-left-color: var(--ppz-color-brand-primary); }
/* Card with actions variant */
.ppz-card--actions { display: flex; flex-direction: column; }
.ppz-card--actions .ppz-card__body { flex: 1; }
.ppz-card__actions { display: flex; gap: var(--ppz-space-2); margin-top: var(--ppz-space-3); padding-top: var(--ppz-space-3); border-top: 1px solid var(--ppz-border-subtle); }
.ppz-card__actions--single { justify-content: flex-end; }
.ppz-card__actions--dual { justify-content: space-between; }
.ppz-card__actions--centered { justify-content: center; }
.ppz-card__actions .ppz-btn { flex: 1; }
.ppz-card__actions--single .ppz-btn { flex: 0 0 auto; min-width: 120px; }
/* Card event variant (for planning/courses) */
.ppz-card--event { padding: 0; overflow: hidden; border-radius: var(--ppz-radius-md); }
.ppz-card--event .ppz-card__header { padding: var(--ppz-space-3) var(--ppz-space-3); margin: 0; border-bottom: none; background: var(--ppz-bg-subtle); }
.ppz-card--event .ppz-card__title { font-size: var(--ppz-font-size-md); }
.ppz-card--event .ppz-card__body { padding: var(--ppz-space-3); }
.ppz-card__event-time { display: inline-flex; align-items: center; gap: var(--ppz-space-1); font-size: var(--ppz-font-size-sm); color: var(--ppz-text-muted); font-weight: var(--ppz-font-weight-medium); }
.ppz-card__event-location { display: inline-flex; align-items: center; gap: var(--ppz-space-1); font-size: var(--ppz-font-size-sm); color: var(--ppz-text-muted); margin-top: var(--ppz-space-1); }
.ppz-card__event-color { width: 4px; height: 100%; position: absolute; left: 0; top: 0; }
.ppz-card--event { position: relative; }
.ppz-card__event-meta { display: flex; flex-wrap: wrap; gap: var(--ppz-space-2); margin-top: var(--ppz-space-2); }
.ppz-card__event-tag { display: inline-flex; align-items: center; padding: var(--ppz-space-0-5) var(--ppz-space-2); background: var(--ppz-bg-subtle); border-radius: var(--ppz-radius-full); font-size: var(--ppz-font-size-xs); font-weight: var(--ppz-font-weight-medium); color: var(--ppz-text-secondary); }
/* Card settings gear icon */
.ppz-card__settings-btn { appearance: none; background: none; border: none; padding: var(--ppz-space-1); color: var(--ppz-text-muted); cursor: pointer; border-radius: var(--ppz-radius-sm); transition: all var(--ppz-duration-fast) var(--ppz-ease-out); }
.ppz-card__settings-btn:hover { background: var(--ppz-bg-hover); color: var(--ppz-text-primary); }
.ppz-card__settings-btn svg { width: 20px; height: 20px; }
/* Card settings button with mask icon */
.ppz-card__settings { appearance: none; background: none; border: none; padding: var(--ppz-space-1); cursor: pointer; border-radius: var(--ppz-radius-sm); transition: all var(--ppz-duration-fast) var(--ppz-ease-out); display: flex; align-items: center; justify-content: center; }
.ppz-card__settings:hover { background: var(--ppz-bg-hover); }
.ppz-card__settings:focus-visible { outline: 2px solid var(--ppz-focus-ring); outline-offset: 2px; }
.icon-settings {
background: var(--ppz-text-primary);
mask-position: center;
-webkit-mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
mask-size: contain;
-webkit-mask-size: contain;
}
.ppz-card__settings:hover .icon-settings {
background: var(--ppz-text-primary);
}
.ppz-input {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ppz-space-1);
}
.ppz-input__label { font-size: var(--ppz-font-size-sm); font-weight: var(--ppz-font-weight-medium); color: var(--ppz-text-primary); }
.ppz-input__field {
width: 100%;
min-height: 40px;
padding: var(--ppz-space-2) var(--ppz-space-3);
font-family: inherit;
font-size: var(--ppz-font-size-md);
color: var(--ppz-text-primary);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-md);
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-input__field::placeholder { color: var(--ppz-text-muted); }
.ppz-input__field:hover:not(:disabled) { border-color: var(--ppz-border-default); }
.ppz-input__field:focus { outline: none; border-color: var(--ppz-focus-ring); box-shadow: 0 0 0 3px rgba(233,30,99,0.25); }
.ppz-input__field:disabled { background: var(--ppz-bg-subtle); opacity: 0.6; cursor: not-allowed; }
.ppz-input--error .ppz-input__field { border-color: var(--ppz-color-danger-main); }
.ppz-input--error .ppz-input__field:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }
.ppz-input__helper { font-size: var(--ppz-font-size-xs); color: var(--ppz-text-muted); }
.ppz-input__error { font-size: var(--ppz-font-size-xs); color: var(--ppz-color-danger-main); font-weight: var(--ppz-font-weight-medium); }
/* Select */
.ppz-select {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ppz-space-1);
}
.ppz-select__label { font-size: var(--ppz-font-size-sm); font-weight: var(--ppz-font-weight-medium); color: var(--ppz-text-primary); }
.ppz-select__field {
width: 100%;
min-height: 40px;
padding: var(--ppz-space-2) var(--ppz-space-3);
font-size: var(--ppz-font-size-base);
font-family: inherit;
color: var(--ppz-text-primary);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-md);
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--ppz-space-3) center;
background-size: 12px;
padding-right: calc(var(--ppz-space-3) * 2 + 12px);
}
.ppz-select__field:hover:not(:disabled) { border-color: var(--ppz-border-default); }
.ppz-select__field:focus { outline: none; border-color: var(--ppz-focus-ring); box-shadow: 0 0 0 3px rgba(233,30,99,0.25); }
.ppz-select__field:disabled { background: var(--ppz-bg-subtle); opacity: 0.6; cursor: not-allowed; }
.ppz-select--error .ppz-select__field { border-color: var(--ppz-color-danger-main); }
.ppz-select--error .ppz-select__field:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }
.ppz-select__helper { font-size: var(--ppz-font-size-xs); color: var(--ppz-text-muted); }
.ppz-select__error { font-size: var(--ppz-font-size-xs); color: var(--ppz-color-danger-main); font-weight: var(--ppz-font-weight-medium); }
.ppz-alert {
display: flex;
gap: var(--ppz-space-2);
align-items: flex-start;
padding: var(--ppz-space-3) var(--ppz-space-4);
border: 1px solid;
border-radius: var(--ppz-radius-md);
font-size: var(--ppz-font-size-sm);
}
.ppz-alert--info { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.4); color: var(--ppz-color-info-dark); }
.ppz-alert--success { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.4); color: var(--ppz-color-success-dark); }
.ppz-alert--warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.45); color: var(--ppz-color-warning-dark); }
.ppz-alert--danger { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.45); color: var(--ppz-color-danger-dark); }
.ppz-alert__icon { flex-shrink: 0; line-height: 1; }
.ppz-alert__body { flex: 1; }
.ppz-alert__close { flex-shrink: 0; appearance: none; background: none; border: none; padding: 0; cursor: pointer; color: inherit; opacity: 0.7; }
.ppz-alert__close:hover { opacity: 1; }
.ppz-badge {
display: inline-flex;
align-items: center;
padding: var(--ppz-space-0-5) var(--ppz-space-2);
font-size: var(--ppz-font-size-xs);
font-weight: var(--ppz-font-weight-semibold);
line-height: 1;
border-radius: var(--ppz-radius-full);
}
.ppz-badge--primary { background: var(--ppz-color-brand-pink-100); color: var(--ppz-color-brand-pink-800); }
.ppz-badge--success { background: rgba(22,163,74,0.1); color: var(--ppz-color-success-dark); }
.ppz-badge--warning { background: rgba(245,158,11,0.15); color: var(--ppz-color-warning-dark); }
.ppz-badge--danger { background: rgba(220,38,38,0.1); color: var(--ppz-color-danger-dark); }
.ppz-badge--neutral { background: var(--ppz-bg-subtle); color: var(--ppz-text-secondary); }
.ppz-tag {
display: inline-flex;
align-items: center;
gap: var(--ppz-space-1);
padding: var(--ppz-space-0-5) var(--ppz-space-2);
font-size: var(--ppz-font-size-xs);
font-weight: var(--ppz-font-weight-semibold);
border: 1px solid transparent;
border-radius: var(--ppz-radius-sm);
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-tag--pill {
border-radius: var(--ppz-radius-full);
}
/* Tags matières Popinz (subjects) */
.ppz-tag--etude.ppz-tag--full { background: var(--ppz-subject-etude-bg); color: var(--ppz-subject-etude-text); border-color: var(--ppz-subject-etude-border); }
.ppz-tag--etude.ppz-tag--outline { background: transparent; color: var(--ppz-subject-etude-text); border-color: var(--ppz-subject-etude-border); }
.ppz-tag--layout.ppz-tag--full { background: var(--ppz-subject-layout-bg); color: var(--ppz-subject-layout-text); border-color: var(--ppz-subject-layout-border); }
.ppz-tag--layout.ppz-tag--outline { background: transparent; color: var(--ppz-subject-layout-text); border-color: var(--ppz-subject-layout-border); }
.ppz-tag--animation.ppz-tag--full { background: var(--ppz-subject-animation-bg); color: var(--ppz-subject-animation-text); border-color: var(--ppz-subject-animation-border); }
.ppz-tag--animation.ppz-tag--outline { background: transparent; color: var(--ppz-subject-animation-text); border-color: var(--ppz-subject-animation-border); }
.ppz-tag--dessin.ppz-tag--full { background: var(--ppz-subject-dessin-bg); color: var(--ppz-subject-dessin-text); border-color: var(--ppz-subject-dessin-border); }
.ppz-tag--dessin.ppz-tag--outline { background: transparent; color: var(--ppz-subject-dessin-text); border-color: var(--ppz-subject-dessin-border); }
.ppz-tag--histoire.ppz-tag--full { background: var(--ppz-subject-histoire-bg); color: var(--ppz-subject-histoire-text); border-color: var(--ppz-subject-histoire-border); }
.ppz-tag--histoire.ppz-tag--outline { background: transparent; color: var(--ppz-subject-histoire-text); border-color: var(--ppz-subject-histoire-border); }
.ppz-tag--rentree.ppz-tag--full { background: var(--ppz-subject-rentree-bg); color: var(--ppz-subject-rentree-text); border-color: var(--ppz-subject-rentree-border); }
.ppz-tag--rentree.ppz-tag--outline { background: transparent; color: var(--ppz-subject-rentree-text); border-color: var(--ppz-subject-rentree-border); }
.ppz-tag--artistique.ppz-tag--full { background: var(--ppz-subject-artistique-bg); color: var(--ppz-subject-artistique-text); border-color: var(--ppz-subject-artistique-border); }
.ppz-tag--artistique.ppz-tag--outline { background: transparent; color: var(--ppz-subject-artistique-text); border-color: var(--ppz-subject-artistique-border); }
.ppz-tag--technique.ppz-tag--full { background: var(--ppz-subject-technique-bg); color: var(--ppz-subject-technique-text); border-color: var(--ppz-subject-technique-border); }
.ppz-tag--technique.ppz-tag--outline { background: transparent; color: var(--ppz-subject-technique-text); border-color: var(--ppz-subject-technique-border); }
.ppz-tag--evenement.ppz-tag--full { background: var(--ppz-subject-evenement-bg); color: var(--ppz-subject-evenement-text); border-color: var(--ppz-subject-evenement-border); }
.ppz-tag--evenement.ppz-tag--outline { background: transparent; color: var(--ppz-subject-evenement-text); border-color: var(--ppz-subject-evenement-border); }
.ppz-tag--general.ppz-tag--full { background: var(--ppz-subject-general-bg); color: var(--ppz-subject-general-text); border-color: var(--ppz-subject-general-border); }
.ppz-tag--general.ppz-tag--outline { background: transparent; color: var(--ppz-subject-general-text); border-color: var(--ppz-subject-general-border); }
/* Tags variantes génériques (full) */
.ppz-tag--primary.ppz-tag--full {
background: var(--ppz-color-brand-primary);
color: white;
border-color: var(--ppz-color-brand-primary);
}
.ppz-tag--secondary.ppz-tag--full {
background: var(--ppz-color-brand-secondary);
color: white;
border-color: var(--ppz-color-brand-secondary);
}
.ppz-tag--tertiary.ppz-tag--full {
background: var(--ppz-color-brand-tertiary);
color: white;
border-color: var(--ppz-color-brand-tertiary);
}
.ppz-tag--success.ppz-tag--full {
background: var(--ppz-color-success-main);
color: white;
border-color: var(--ppz-color-success-main);
}
.ppz-tag--warning.ppz-tag--full {
background: var(--ppz-color-warning-main);
color: white;
border-color: var(--ppz-color-warning-main);
}
.ppz-tag--danger.ppz-tag--full {
background: var(--ppz-color-danger-main);
color: white;
border-color: var(--ppz-color-danger-main);
}
/* Tags variantes génériques (outline) */
.ppz-tag--primary.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-brand-primary);
border-color: var(--ppz-color-brand-primary);
}
.ppz-tag--secondary.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-brand-secondary);
border-color: var(--ppz-color-brand-secondary);
}
.ppz-tag--tertiary.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-brand-tertiary);
border-color: var(--ppz-color-brand-tertiary);
}
.ppz-tag--success.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-success-main);
border-color: var(--ppz-color-success-main);
}
.ppz-tag--warning.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-warning-main);
border-color: var(--ppz-color-warning-main);
}
.ppz-tag--danger.ppz-tag--outline {
background: transparent;
color: var(--ppz-color-danger-main);
border-color: var(--ppz-color-danger-main);
}
.ppz-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ppz-space-2); margin: 0; padding: 0; list-style: none; }
.ppz-breadcrumb__item { display: flex; align-items: center; gap: var(--ppz-space-2); }
.ppz-breadcrumb__item:not(:last-child)::after { content: "/"; color: var(--ppz-text-muted); }
.ppz-breadcrumb__link { color: var(--ppz-text-muted); text-decoration: none; }
.ppz-breadcrumb__link:hover { color: var(--ppz-text-primary); text-decoration: underline; }
.ppz-breadcrumb__current { font-weight: var(--ppz-font-weight-semibold); color: var(--ppz-text-primary); }
.ppz-tabs {
display: flex;
gap: var(--ppz-space-2);
border-bottom: 2px solid var(--ppz-border-subtle);
}
.ppz-tabs__tab {
appearance: none;
background: none;
border: none;
padding: var(--ppz-space-2) var(--ppz-space-3);
font-family: inherit;
font-size: var(--ppz-font-size-md);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-tabs__tab:hover { color: var(--ppz-text-primary); }
.ppz-tabs__tab--active {
color: var(--ppz-interactive-default);
border-bottom-color: var(--ppz-interactive-default);
}
.ppz-tabs--pills { border-bottom: none; }
.ppz-tabs--pills .ppz-tabs__tab {
border-radius: var(--ppz-radius-full);
margin-bottom: 0;
border: none;
}
.ppz-tabs--pills .ppz-tabs__tab--active {
background: var(--ppz-interactive-default);
color: white;
}
.ppz-tabs--underline .ppz-tabs__tab { border-bottom-width: 3px; }
.ppz-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ppz-font-size-md);
color: var(--ppz-text-primary);
}
.ppz-table th,
.ppz-table td {
padding: var(--ppz-space-2) var(--ppz-space-3);
text-align: left;
border-bottom: 1px solid var(--ppz-border-subtle);
}
.ppz-table th {
background: var(--ppz-bg-surface);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-secondary);
text-transform: uppercase;
font-size: var(--ppz-font-size-sm);
letter-spacing: var(--ppz-letter-spacing-wide);
}
.ppz-table tbody tr:hover {
background: var(--ppz-bg-subtle);
}
.ppz-table--striped tbody tr:nth-child(odd) {
background: var(--ppz-bg-surfaceVariant);
}
.ppz-table--dense th,
.ppz-table--dense td {
padding: var(--ppz-space-1-5) var(--ppz-space-2);
}
.ppz-table--bordered {
border: 1px solid var(--ppz-border-subtle);
}
.ppz-table--bordered th,
.ppz-table--bordered td {
border: 1px solid var(--ppz-border-subtle);
}
.ppz-spinner {
display: inline-block;
position: relative;
}
.ppz-spinner__circle,
.ppz-spinner::before {
content: "";
display: block;
border-radius: var(--ppz-radius-full);
border: 2px solid transparent;
border-top-color: currentColor;
animation: ppz-spin var(--ppz-duration-slow) linear infinite;
}
.ppz-spinner--sm::before { width: 16px; height: 16px; }
.ppz-spinner--md::before { width: 24px; height: 24px; }
.ppz-spinner--lg::before { width: 32px; height: 32px; }
.ppz-spinner--primary { color: var(--ppz-color-brand-primary); }
.ppz-spinner--secondary { color: var(--ppz-color-brand-secondary); }
.ppz-spinner--white { color: white; }
@keyframes ppz-spin {
to { transform: rotate(360deg); }
}
.ppz-divider {
border: 0;
margin: 0;
}
.ppz-divider--horizontal {
height: 1px;
background: var(--ppz-border-subtle);
margin: var(--ppz-space-3) 0;
}
.ppz-divider--vertical {
width: 1px;
background: var(--ppz-border-subtle);
align-self: stretch;
min-height: 100%;
}
.ppz-divider--labeled {
display: flex;
align-items: center;
text-align: center;
background: none;
height: auto;
}
.ppz-divider--labeled::before,
.ppz-divider--labeled::after {
content: "";
flex: 1;
height: 1px;
background: var(--ppz-border-subtle);
}
.ppz-divider__label {
padding: 0 var(--ppz-space-2);
font-size: var(--ppz-font-size-sm);
color: var(--ppz-text-muted);
font-weight: var(--ppz-font-weight-medium);
}
.ppz-tooltip-wrapper {
position: relative;
display: inline-block;
}
.ppz-tooltip {
position: absolute;
background: var(--ppz-text-primary);
color: var(--ppz-bg-root);
padding: var(--ppz-space-2) var(--ppz-space-3);
border-radius: var(--ppz-radius-md);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
line-height: var(--ppz-line-height-tight);
box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
white-space: nowrap;
max-width: 280px;
z-index: 9999;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--ppz-duration-base) var(--ppz-ease-out),
visibility var(--ppz-duration-base) var(--ppz-ease-out),
transform var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-tooltip-wrapper:hover .ppz-tooltip,
.ppz-tooltip-wrapper:focus-within .ppz-tooltip {
opacity: 1;
visibility: visible;
}
.ppz-tooltip::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
.ppz-tooltip--top {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
}
.ppz-tooltip--top::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--ppz-text-primary);
}
.ppz-tooltip-wrapper:hover .ppz-tooltip--top {
transform: translateX(-50%) translateY(0);
}
.ppz-tooltip--bottom {
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
}
.ppz-tooltip--bottom::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--ppz-text-primary);
}
.ppz-tooltip-wrapper:hover .ppz-tooltip--bottom {
transform: translateX(-50%) translateY(0);
}
.ppz-tooltip--left {
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(4px);
}
.ppz-tooltip--left::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: var(--ppz-text-primary);
}
.ppz-tooltip-wrapper:hover .ppz-tooltip--left {
transform: translateY(-50%) translateX(0);
}
.ppz-tooltip--right {
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
}
.ppz-tooltip--right::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: var(--ppz-text-primary);
}
.ppz-tooltip-wrapper:hover .ppz-tooltip--right {
transform: translateY(-50%) translateX(0);
}
.ppz-dropdown {
position: relative;
display: inline-block;
}
.ppz-dropdown__menu {
position: absolute;
top: calc(100% + 4px);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
min-width: 200px;
padding: var(--ppz-space-2);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--ppz-duration-base) var(--ppz-ease-out),
visibility var(--ppz-duration-base) var(--ppz-ease-out),
transform var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-dropdown:hover .ppz-dropdown__menu,
.ppz-dropdown:focus-within .ppz-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ppz-dropdown__menu--left {
left: 0;
}
.ppz-dropdown__menu--right {
right: 0;
}
.ppz-dropdown__item {
display: flex;
align-items: center;
gap: var(--ppz-space-2);
padding: var(--ppz-space-2) var(--ppz-space-3);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-primary);
text-decoration: none;
border-radius: var(--ppz-radius-md);
transition: background var(--ppz-duration-fast) var(--ppz-ease-out),
color var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-dropdown__item:hover {
background: var(--ppz-bg-subtle);
color: var(--ppz-color-brand-primary);
}
.ppz-dropdown__item--danger {
color: var(--ppz-color-danger-main);
}
.ppz-dropdown__item--danger:hover {
background: rgba(220,38,38,0.1);
color: var(--ppz-color-danger-dark);
}
.ppz-dropdown__divider {
height: 1px;
background: var(--ppz-border-subtle);
margin: var(--ppz-space-2) var(--ppz-space-1);
border: none;
}
.ppz-progress {
display: flex;
align-items: center;
gap: var(--ppz-space-3);
width: 100%;
}
.ppz-progress__track {
flex: 1;
background: var(--ppz-bg-subtle);
border-radius: var(--ppz-radius-full);
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.ppz-progress--sm .ppz-progress__track {
height: 6px;
}
.ppz-progress--md .ppz-progress__track {
height: 10px;
}
.ppz-progress--lg .ppz-progress__track {
height: 14px;
}
.ppz-progress__bar {
height: 100%;
border-radius: var(--ppz-radius-full);
position: relative;
transition: width 0.6s var(--ppz-ease-out);
background: linear-gradient(90deg, currentColor, currentColor);
box-shadow: 0 0 8px currentColor;
}
.ppz-progress__bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
animation: ppz-progress-shimmer 2s infinite;
}
@keyframes ppz-progress-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.ppz-progress__bar--primary {
color: var(--ppz-color-brand-primary);
}
.ppz-progress__bar--success {
color: var(--ppz-color-success-main);
}
.ppz-progress__bar--warning {
color: var(--ppz-color-warning-main);
}
.ppz-progress__bar--danger {
color: var(--ppz-color-danger-main);
}
.ppz-progress__label {
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-bold);
color: var(--ppz-text-primary);
min-width: 48px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ppz-skeleton {
background: linear-gradient(110deg,
var(--ppz-bg-subtle) 8%,
var(--ppz-bg-surface) 18%,
var(--ppz-bg-subtle) 33%
);
background-size: 200% 100%;
animation: ppz-shimmer 1.8s linear infinite;
border-radius: var(--ppz-radius-md);
position: relative;
overflow: hidden;
}
.ppz-skeleton--text {
height: 12px;
border-radius: var(--ppz-radius-sm);
margin-bottom: var(--ppz-space-2);
}
.ppz-skeleton--text:last-child {
margin-bottom: 0;
}
.ppz-skeleton--title {
height: 28px;
width: 240px;
border-radius: var(--ppz-radius-md);
margin-bottom: var(--ppz-space-3);
}
.ppz-skeleton--avatar {
width: 48px;
height: 48px;
border-radius: var(--ppz-radius-full);
flex-shrink: 0;
}
.ppz-skeleton--rect {
height: 120px;
border-radius: var(--ppz-radius-lg);
}
.ppz-skeleton--card {
height: 240px;
border-radius: var(--ppz-radius-lg);
}
@keyframes ppz-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.ppz-accordion {
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
background: var(--ppz-bg-surface);
overflow: hidden;
transition: all var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-accordion:hover {
border-color: var(--ppz-border-default);
box-shadow: var(--ppz-shadow-sm);
}
.ppz-accordion__trigger {
appearance: none;
background: transparent;
border: none;
width: 100%;
padding: var(--ppz-space-4);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-family: inherit;
font-size: var(--ppz-font-size-md);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
text-align: left;
transition: all var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-accordion__trigger:hover {
background: var(--ppz-bg-subtle);
}
.ppz-accordion__trigger:focus-visible {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: -2px;
}
.ppz-accordion__title {
flex: 1;
}
.ppz-accordion__icon {
font-size: 14px;
color: var(--ppz-text-muted);
transition: transform var(--ppz-duration-base) var(--ppz-ease-out),
color var(--ppz-duration-base) var(--ppz-ease-out);
margin-left: var(--ppz-space-3);
}
.ppz-accordion--open .ppz-accordion__icon {
transform: rotate(180deg);
color: var(--ppz-color-brand-primary);
}
.ppz-accordion__content {
overflow: hidden;
max-height: 0;
transition: max-height var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-accordion--open .ppz-accordion__content {
max-height: 500px;
}
.ppz-accordion__body {
padding: 0 var(--ppz-space-4) var(--ppz-space-4);
font-size: var(--ppz-font-size-sm);
color: var(--ppz-text-secondary);
line-height: var(--ppz-line-height-relaxed);
}
.ppz-pagination {
display: flex;
align-items: center;
gap: var(--ppz-space-1-5);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
}
.ppz-pagination__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--ppz-space-2);
border-radius: var(--ppz-radius-md);
color: var(--ppz-text-primary);
text-decoration: none;
border: 1px solid transparent;
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
position: relative;
}
.ppz-pagination__item:hover:not(.ppz-pagination__item--active):not([aria-disabled="true"]) {
background: var(--ppz-bg-subtle);
border-color: var(--ppz-border-subtle);
color: var(--ppz-color-brand-primary);
transform: translateY(-1px);
box-shadow: var(--ppz-shadow-xs);
}
.ppz-pagination__item:active:not(.ppz-pagination__item--active):not([aria-disabled="true"]) {
transform: translateY(0);
}
.ppz-pagination__item--active {
background: var(--ppz-color-brand-primary);
color: white;
font-weight: var(--ppz-font-weight-bold);
border-color: var(--ppz-color-brand-primary);
box-shadow: 0 0 0 3px rgba(233,30,99,0.15);
cursor: default;
}
.ppz-pagination__item--prev,
.ppz-pagination__item--next {
font-weight: var(--ppz-font-weight-semibold);
padding: 0 var(--ppz-space-3);
}
.ppz-pagination__item[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.ppz-pagination__info {
padding: 0 var(--ppz-space-2);
color: var(--ppz-text-secondary);
font-weight: var(--ppz-font-weight-medium);
}
/* Toggle / Switch */
.ppz-toggle {
display: inline-flex;
align-items: center;
gap: var(--ppz-space-3);
cursor: pointer;
user-select: none;
position: relative;
}
.ppz-toggle__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ppz-toggle__switch {
position: relative;
width: 48px;
height: 24px;
background: var(--ppz-color-neutral-300);
border: 2px solid var(--ppz-color-neutral-400);
border-radius: var(--ppz-radius-full);
transition: all var(--ppz-duration-base) var(--ppz-ease-out);
flex-shrink: 0;
}
.ppz-toggle__switch::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
transition: transform var(--ppz-duration-base) var(--ppz-ease-out),
box-shadow var(--ppz-duration-base) var(--ppz-ease-out);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 2;
}
/* Icônes pour améliorer le contraste (daltoniens) */
.ppz-toggle__icons {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
pointer-events: none;
z-index: 1;
}
.ppz-toggle__icon-off,
.ppz-toggle__icon-on {
font-size: 10px;
font-weight: bold;
line-height: 1;
transition: opacity var(--ppz-duration-base) var(--ppz-ease-out);
}
.ppz-toggle__icon-off {
color: var(--ppz-color-neutral-600);
opacity: 1;
}
.ppz-toggle__icon-on {
color: white;
opacity: 0;
}
/* État checked (activé) */
.ppz-toggle__input:checked + .ppz-toggle__switch {
background: var(--ppz-color-brand-primary);
border-color: var(--ppz-color-brand-primary);
}
.ppz-toggle__input:checked + .ppz-toggle__switch::after {
transform: translateX(24px);
}
.ppz-toggle__input:checked + .ppz-toggle__switch .ppz-toggle__icon-off {
opacity: 0;
}
.ppz-toggle__input:checked + .ppz-toggle__switch .ppz-toggle__icon-on {
opacity: 1;
}
/* Focus */
.ppz-toggle__input:focus-visible + .ppz-toggle__switch {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: 2px;
}
/* Disabled */
.ppz-toggle__input:disabled + .ppz-toggle__switch {
opacity: 0.5;
cursor: not-allowed;
}
.ppz-toggle__input:disabled ~ .ppz-toggle__label {
opacity: 0.5;
cursor: not-allowed;
}
.ppz-toggle:has(.ppz-toggle__input:disabled) {
cursor: not-allowed;
}
/* Label */
.ppz-toggle__label {
font-size: var(--ppz-font-size-md);
color: var(--ppz-text-primary);
line-height: var(--ppz-line-height-normal);
}
/* Variantes de couleur */
.ppz-toggle--secondary .ppz-toggle__input:checked + .ppz-toggle__switch {
background: var(--ppz-color-brand-secondary);
border-color: var(--ppz-color-brand-secondary);
}
.ppz-toggle--tertiary .ppz-toggle__input:checked + .ppz-toggle__switch {
background: var(--ppz-color-brand-tertiary);
border-color: var(--ppz-color-brand-tertiary);
}
/* Mode High Contrast sur Light theme */
[data-theme="light"][data-contrast="high"] .ppz-toggle__switch {
border-width: 3px !important;
border-color: #000 !important;
background: #fff !important;
}
[data-theme="light"][data-contrast="high"] .ppz-toggle__input:checked + .ppz-toggle__switch {
background: #000 !important;
border-color: #000 !important;
}
[data-theme="light"][data-contrast="high"] .ppz-toggle__switch::after {
border: 2px solid #000 !important;
box-shadow: 0 0 0 1px #fff inset !important;
}
[data-theme="light"][data-contrast="high"] .ppz-toggle__icon-off {
color: #000 !important;
font-weight: 900;
}
[data-theme="light"][data-contrast="high"] .ppz-toggle__icon-on {
color: #fff !important;
font-weight: 900;
}
[data-theme="light"][data-contrast="high"] .ppz-toggle__label {
font-weight: var(--ppz-font-weight-bold);
color: #000 !important;
}
/* Mode High Contrast sur Dark theme */
[data-theme="dark"][data-contrast="high"] .ppz-toggle__switch {
border-width: 3px !important;
border-color: #fff !important;
background: #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-toggle__input:checked + .ppz-toggle__switch {
background: #fff !important;
border-color: #fff !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-toggle__switch::after {
border: 2px solid #fff !important;
box-shadow: 0 0 0 1px #000 inset !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-toggle__icon-off {
color: #fff !important;
font-weight: 900;
}
[data-theme="dark"][data-contrast="high"] .ppz-toggle__icon-on {
color: #000 !important;
font-weight: 900;
}
[data-theme="dark"][data-contrast="high"] .ppz-toggle__label {
font-weight: var(--ppz-font-weight-bold);
color: #fff !important;
}
/* Mode High Contrast (OS preference) - utilise !important pour surcharger les variantes */
@media (prefers-contrast: high) {
.ppz-toggle__switch {
border-width: 3px !important;
border-color: #000 !important;
background: #fff !important;
}
.ppz-toggle__input:checked + .ppz-toggle__switch {
background: #000 !important;
border-color: #000 !important;
}
.ppz-toggle__switch::after {
border: 2px solid #000 !important;
box-shadow: 0 0 0 1px #fff inset !important;
}
.ppz-toggle__icon-off {
color: #000 !important;
font-weight: 900;
}
.ppz-toggle__icon-on {
color: #fff !important;
font-weight: 900;
}
.ppz-toggle__label {
font-weight: var(--ppz-font-weight-bold);
color: #000 !important;
}
}
/* Ajustements tailles en mode high-contrast (light et dark) */
[data-contrast="high"] .ppz-toggle--sm .ppz-toggle__icon-off,
[data-contrast="high"] .ppz-toggle--sm .ppz-toggle__icon-on {
font-size: 10px;
}
[data-contrast="high"] .ppz-toggle__icon-off,
[data-contrast="high"] .ppz-toggle__icon-on {
font-size: 12px;
}
[data-contrast="high"] .ppz-toggle--lg .ppz-toggle__icon-off,
[data-contrast="high"] .ppz-toggle--lg .ppz-toggle__icon-on {
font-size: 14px;
}
/* Toggle sizes */
.ppz-toggle--sm .ppz-toggle__switch {
width: 36px;
height: 20px;
}
.ppz-toggle--sm .ppz-toggle__switch::after {
width: 14px;
height: 14px;
}
.ppz-toggle--sm .ppz-toggle__input:checked + .ppz-toggle__switch::after {
transform: translateX(16px);
}
.ppz-toggle--sm .ppz-toggle__icons {
padding: 0 4px;
}
.ppz-toggle--sm .ppz-toggle__icon-off,
.ppz-toggle--sm .ppz-toggle__icon-on {
font-size: 8px;
}
.ppz-toggle--sm .ppz-toggle__label {
font-size: var(--ppz-font-size-sm);
}
.ppz-toggle--lg .ppz-toggle__switch {
width: 60px;
height: 30px;
}
.ppz-toggle--lg .ppz-toggle__switch::after {
width: 24px;
height: 24px;
}
.ppz-toggle--lg .ppz-toggle__input:checked + .ppz-toggle__switch::after {
transform: translateX(30px);
}
.ppz-toggle--lg .ppz-toggle__icons {
padding: 0 8px;
}
.ppz-toggle--lg .ppz-toggle__icon-off,
.ppz-toggle--lg .ppz-toggle__icon-on {
font-size: 12px;
}
.ppz-toggle--lg .ppz-toggle__label {
font-size: var(--ppz-font-size-lg);
}
/* Radio Inline Component */
.ppz-radio-inline {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.ppz-radio-inline__legend {
margin-bottom: var(--ppz-space-3);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0;
}
.ppz-radio-inline__group {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--ppz-border-default);
border-radius: var(--ppz-radius-md);
overflow: hidden;
background: var(--ppz-bg-surface);
box-shadow: var(--ppz-shadow-xs);
}
.ppz-radio-inline__option {
position: relative;
flex: 1;
min-width: 0;
}
.ppz-radio-inline__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.ppz-radio-inline__label {
display: flex;
align-items: center;
justify-content: center;
padding: var(--ppz-space-2-5) var(--ppz-space-3);
min-height: 44px;
font-size: var(--ppz-font-size-md);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-secondary);
background: var(--ppz-bg-surface);
border-right: 1px solid var(--ppz-border-subtle);
cursor: pointer;
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
white-space: nowrap;
user-select: none;
position: relative;
}
.ppz-radio-inline__option:last-child .ppz-radio-inline__label {
border-right: none;
}
.ppz-radio-inline__label:hover {
background: var(--ppz-bg-subtle);
color: var(--ppz-text-primary);
}
.ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-brand-primary);
color: white;
font-weight: var(--ppz-font-weight-semibold);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
z-index: 1;
}
/* Variantes de couleur */
.ppz-radio-inline--primary .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-brand-primary);
color: white;
}
.ppz-radio-inline--secondary .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-brand-secondary);
color: white;
}
.ppz-radio-inline--tertiary .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-brand-tertiary);
color: white;
}
.ppz-radio-inline--success .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-success-main);
color: white;
}
.ppz-radio-inline--warning .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-warning-main);
color: white;
}
.ppz-radio-inline--danger .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: var(--ppz-color-danger-main);
color: white;
}
.ppz-radio-inline__input:focus-visible + .ppz-radio-inline__label {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: -2px;
z-index: 2;
}
.ppz-radio-inline__input:disabled + .ppz-radio-inline__label {
opacity: 0.5;
cursor: not-allowed;
background: var(--ppz-bg-subtle);
}
/* Tailles */
.ppz-radio-inline--sm .ppz-radio-inline__label {
padding: var(--ppz-space-1-5) var(--ppz-space-2);
min-height: 36px;
font-size: var(--ppz-font-size-sm);
}
.ppz-radio-inline--lg .ppz-radio-inline__label {
padding: var(--ppz-space-3) var(--ppz-space-4);
min-height: 52px;
font-size: var(--ppz-font-size-lg);
}
/* Mode High Contrast */
[data-contrast="high"] .ppz-radio-inline__group {
border-width: 2px !important;
}
[data-theme="light"][data-contrast="high"] .ppz-radio-inline__group {
border-color: #000 !important;
}
[data-theme="light"][data-contrast="high"] .ppz-radio-inline__label {
border-right-color: #000 !important;
border-right-width: 2px !important;
color: #000 !important;
}
[data-theme="light"][data-contrast="high"] .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: #000 !important;
color: #fff !important;
font-weight: var(--ppz-font-weight-bold) !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-radio-inline__group {
border-color: #fff !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-radio-inline__label {
border-right-color: #fff !important;
border-right-width: 2px !important;
color: #fff !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-radio-inline__input:checked + .ppz-radio-inline__label {
background: #fff !important;
color: #000 !important;
font-weight: var(--ppz-font-weight-bold) !important;
}
/* Responsive */
@media (max-width: 640px) {
.ppz-radio-inline__group {
flex-direction: column;
}
.ppz-radio-inline__label {
border-right: none;
border-bottom: 1px solid var(--ppz-border-subtle);
}
.ppz-radio-inline__option:last-child .ppz-radio-inline__label {
border-bottom: none;
}
}
/* ========================================
COLOR PICKER
======================================== */
.ppz-color-picker {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.ppz-color-picker__legend {
margin-bottom: var(--ppz-space-3);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0;
}
.ppz-color-picker__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--ppz-space-2);
}
.ppz-color-picker__option {
position: relative;
}
.ppz-color-picker__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.ppz-color-picker__label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
min-width: 44px;
min-height: 44px;
border-radius: var(--ppz-radius-sm);
cursor: pointer;
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
border: 2px solid transparent;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ppz-color-picker__label:hover {
transform: scale(1.08);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.ppz-color-picker__check {
width: 24px;
height: 24px;
color: white;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
opacity: 0;
transition: opacity var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-color-picker__input:checked + .ppz-color-picker__label {
border-color: var(--ppz-text-primary);
transform: scale(1.05);
}
.ppz-color-picker__input:checked + .ppz-color-picker__label .ppz-color-picker__check {
opacity: 1;
}
.ppz-color-picker__input:focus-visible + .ppz-color-picker__label {
outline: 3px solid var(--ppz-focus-ring);
outline-offset: 2px;
z-index: 2;
}
/* Tailles */
.ppz-color-picker--sm .ppz-color-picker__label {
min-width: 36px;
min-height: 36px;
}
.ppz-color-picker--sm .ppz-color-picker__check {
width: 18px;
height: 18px;
}
.ppz-color-picker--lg .ppz-color-picker__label {
min-width: 52px;
min-height: 52px;
}
.ppz-color-picker--lg .ppz-color-picker__check {
width: 28px;
height: 28px;
}
/* Arrondi */
.ppz-color-picker--rounded .ppz-color-picker__label {
border-radius: var(--ppz-radius-md);
}
/* High Contrast */
[data-contrast="high"] .ppz-color-picker__label {
border-width: 3px !important;
}
[data-theme="light"][data-contrast="high"] .ppz-color-picker__input:checked + .ppz-color-picker__label {
border-color: #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-color-picker__input:checked + .ppz-color-picker__label {
border-color: #fff !important;
}
/* Responsive */
@media (max-width: 1024px) {
.ppz-color-picker__grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (max-width: 640px) {
.ppz-color-picker__grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--ppz-space-3);
}
}
.ppz-course {
position: relative;
display: flex;
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
overflow: hidden;
transition: all var(--ppz-duration-base) var(--ppz-ease-out);
box-shadow: var(--ppz-shadow-sm);
}
.ppz-course:hover {
box-shadow: var(--ppz-shadow-md);
transform: translateY(-2px);
border-color: var(--ppz-border-default);
}
.ppz-course__border {
width: 4px;
flex-shrink: 0;
background: var(--_course-color, var(--ppz-color-neutral-400));
box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
}
.ppz-course__content {
flex: 1;
padding: var(--ppz-space-4);
display: flex;
flex-direction: column;
gap: var(--ppz-space-2);
}
.ppz-course__date {
font-size: var(--ppz-font-size-xs);
color: var(--ppz-text-muted);
text-transform: lowercase;
font-weight: var(--ppz-font-weight-medium);
letter-spacing: var(--ppz-letter-spacing-wide);
}
.ppz-course__title {
font-size: var(--ppz-font-size-lg);
font-weight: var(--ppz-font-weight-bold);
color: var(--ppz-text-primary);
margin: 0;
line-height: var(--ppz-line-height-tight);
}
.ppz-course__tag {
display: inline-flex;
align-items: center;
padding: var(--ppz-space-1) var(--ppz-space-2);
border-radius: var(--ppz-radius-full);
font-size: var(--ppz-font-size-xs);
font-weight: var(--ppz-font-weight-semibold);
background: rgba(233,30,99,0.1);
color: var(--ppz-color-brand-primary);
border: 1px solid var(--ppz-color-brand-primary);
width: fit-content;
white-space: nowrap;
}
.ppz-course__promo {
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-secondary);
}
.ppz-course__meta {
display: flex;
flex-direction: column;
gap: var(--ppz-space-1-5);
margin-top: var(--ppz-space-1);
}
.ppz-course__meta-item {
display: flex;
align-items: center;
gap: var(--ppz-space-2);
font-size: var(--ppz-font-size-sm);
color: var(--ppz-text-secondary);
line-height: var(--ppz-line-height-tight);
}
.ppz-course__icon {
font-size: 14px;
opacity: 0.8;
flex-shrink: 0;
}
.ppz-course--histoire { --_course-color: var(--ppz-subject-histoire-border, #F59E0B); }
.ppz-course--dessin { --_course-color: var(--ppz-subject-dessin-border, #10B981); }
.ppz-course--animation { --_course-color: var(--ppz-subject-animation-border, #3B82F6); }
.ppz-course--technique { --_course-color: var(--ppz-subject-technique-border, #EF4444); }
.ppz-course--general { --_course-color: var(--ppz-color-neutral-500); }
.ppz-course--etude { --_course-color: var(--ppz-subject-etude-border, #8B5CF6); }
.ppz-course--layout { --_course-color: var(--ppz-subject-layout-border, #EC4899); }
.ppz-course--artistique { --_course-color: var(--ppz-subject-artistique-border, #F43F5E); }
.ppz-course--evenement { --_course-color: var(--ppz-subject-evenement-border, #14B8A6); }
.ppz-course--rentree { --_course-color: var(--ppz-subject-rentree-border, #F59E0B); }
/* Image Component (optimized with WebP) */
.ppz-image {
display: block;
position: relative;
overflow: hidden;
background: var(--ppz-bg-subtle);
}
.ppz-image img {
display: block;
width: 100%;
height: auto;
transition: opacity 0.3s ease;
}
.ppz-image--lazy img {
opacity: 0.6;
}
.ppz-image--lazy img[src*=".webp"],
.ppz-image--lazy img[src*=".jpg"],
.ppz-image--lazy img[src*=".png"] {
opacity: 1;
}
.ppz-image--rounded-sm {
border-radius: var(--ppz-radius-sm);
}
.ppz-image--rounded-md {
border-radius: var(--ppz-radius-md);
}
.ppz-image--rounded-lg {
border-radius: var(--ppz-radius-lg);
}
.ppz-image--rounded-full {
border-radius: var(--ppz-radius-full);
}
/* Profile Header Component */
.ppz-profile {
display: block;
width: 100%;
}
.ppz-profile__container {
display: grid;
grid-template-columns: 2fr 1fr auto;
align-items: start;
gap: var(--ppz-space-5, 24px);
padding: var(--ppz-space-5, 24px);
background: var(--ppz-bg-surface, #fff);
border-radius: var(--ppz-radius-lg, 12px);
box-shadow: var(--ppz-elevation-2, 0 2px 8px rgba(0,0,0,0.1));
width: 100%;
}
.ppz-profile__main {
display: flex;
align-items: start;
gap: var(--ppz-space-4, 16px);
}
.ppz-profile__avatar-wrapper {
flex-shrink: 0;
position: relative;
}
.ppz-profile__avatar {
width: 120px;
height: 120px;
border-radius: var(--ppz-radius-full, 50%);
object-fit: cover;
border: 4px solid var(--ppz-border-subtle, #e5e7eb);
transition: opacity 0.3s ease;
}
.ppz-profile__avatar--square {
border-radius: var(--ppz-radius-md, 8px);
}
.ppz-profile__avatar--lazy {
opacity: 0.7;
}
.ppz-profile__avatar--loaded {
opacity: 1;
}
.ppz-profile__avatar--error {
opacity: 1;
}
.ppz-profile__identity {
display: flex;
flex-direction: column;
gap: var(--ppz-space-1, 4px);
}
.ppz-profile__name {
margin: 0;
font-size: var(--ppz-font-size-2xl, 28px);
font-weight: var(--ppz-font-weight-bold, 700);
color: var(--ppz-text-primary, #1a1a1a);
line-height: 1.2;
}
.ppz-profile__role {
margin: 0;
font-size: var(--ppz-font-size-base, 16px);
color: var(--ppz-text-muted, #6b7280);
font-weight: var(--ppz-font-weight-medium, 500);
}
.ppz-profile__badge {
display: inline-block;
margin-top: var(--ppz-space-2, 8px);
padding: var(--ppz-space-1, 4px) var(--ppz-space-3, 12px);
background: var(--ppz-color-brand-secondary, #19db9a);
color: white;
font-size: var(--ppz-font-size-sm, 14px);
font-weight: var(--ppz-font-weight-semibold, 600);
border-radius: var(--ppz-radius-full, 50px);
width: fit-content;
}
.ppz-profile__contact {
display: flex;
flex-direction: column;
gap: var(--ppz-space-1, 4px);
align-items: center;
text-align: center;
}
.ppz-profile__contact-group {
display: flex;
flex-direction: column;
gap: var(--ppz-space-2, 8px);
align-items: center;
}
.ppz-profile__contact-label {
margin: 0;
font-size: var(--ppz-font-size-xs, 12px);
font-weight: var(--ppz-font-weight-bold, 700);
color: var(--ppz-text-muted, #6b7280);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.2;
padding-top: 8px;
}
.ppz-profile__contact-item {
display: flex;
align-items: center;
gap: var(--ppz-space-2, 8px);
font-size: var(--ppz-font-size-base, 16px);
color: var(--ppz-text-secondary, #374151);
text-decoration: none;
transition: color 0.2s ease;
text-align: right;
}
.ppz-profile__contact-item:hover {
color: var(--ppz-color-brand-primary, #E91E63);
text-decoration: underline;
}
.ppz-profile__contact-item:focus-visible {
outline: 2px solid var(--ppz-color-brand-primary, #E91E63);
outline-offset: 2px;
border-radius: var(--ppz-radius-sm, 4px);
}
.ppz-profile__actions {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.ppz-profile__actions .ppz-btn {
min-width: 180px;
}
/* Mode desktop - centrage explicite */
@media (min-width: 769px) {
.ppz-profile__contact {
align-items: center !important;
text-align: center !important;
}
.ppz-profile__contact-group {
align-items: center !important;
}
.ppz-profile__contact-item {
justify-content: center !important;
}
}
/* Mode responsive */
@media (max-width: 768px) {
.ppz-profile__container {
grid-template-columns: 1fr;
gap: var(--ppz-space-4, 16px);
}
.ppz-profile__main {
flex-direction: column;
align-items: center;
}
.ppz-profile__avatar-wrapper {
justify-self: center;
}
.ppz-profile__identity {
text-align: center;
align-items: center;
}
.ppz-profile__contact {
align-items: flex-start !important;
text-align: left !important;
}
.ppz-profile__contact-group {
align-items: flex-start !important;
}
.ppz-profile__contact-item {
text-align: left;
}
.ppz-profile__contact-label {
align-self: flex-start;
}
.ppz-profile__actions {
width: 100%;
}
.ppz-profile__actions .ppz-btn {
width: 100%;
}
}
/* Mode High Contrast */
[data-contrast="high"] .ppz-profile__container {
border: 3px solid #000 !important;
}
[data-theme="light"][data-contrast="high"] .ppz-profile__container {
background: #fff !important;
border-color: #000 !important;
}
[data-theme="light"][data-contrast="high"] .ppz-profile__name,
[data-theme="light"][data-contrast="high"] .ppz-profile__role,
[data-theme="light"][data-contrast="high"] .ppz-profile__contact-label,
[data-theme="light"][data-contrast="high"] .ppz-profile__contact-item {
color: #000 !important;
font-weight: var(--ppz-font-weight-bold, 700) !important;
}
[data-theme="light"][data-contrast="high"] .ppz-profile__badge {
background: #000 !important;
color: #fff !important;
border: 2px solid #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-profile__container {
border-color: #fff !important;
background: #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-profile__name,
[data-theme="dark"][data-contrast="high"] .ppz-profile__role,
[data-theme="dark"][data-contrast="high"] .ppz-profile__contact-label,
[data-theme="dark"][data-contrast="high"] .ppz-profile__contact-item {
color: #fff !important;
font-weight: var(--ppz-font-weight-bold, 700) !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-profile__badge {
background: #fff !important;
color: #000 !important;
border: 2px solid #fff !important;
}
[data-contrast="high"] .ppz-profile__avatar {
border-width: 4px !important;
}
[data-theme="light"][data-contrast="high"] .ppz-profile__avatar {
border-color: #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-profile__avatar {
border-color: #fff !important;
}
[data-contrast="high"] .ppz-profile__contact-item:hover {
text-decoration: underline !important;
}
[data-theme="light"][data-contrast="high"] .ppz-profile__contact-item:hover {
color: #000 !important;
}
[data-theme="dark"][data-contrast="high"] .ppz-profile__contact-item:hover {
color: #fff !important;
}
/* Timeline */
.ppz-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.ppz-timeline--horizontal {
flex-direction: row;
overflow-x: auto;
padding-bottom: var(--ppz-space-2);
}
.ppz-timeline__item {
display: flex;
gap: var(--ppz-space-4);
position: relative;
padding: var(--ppz-space-3) 0;
}
.ppz-timeline--vertical .ppz-timeline__item:not(:last-child)::before {
content: '';
position: absolute;
left: 11px;
top: 40px;
bottom: -12px;
width: 2px;
background: var(--ppz-border-subtle);
}
.ppz-timeline__marker {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: var(--ppz-radius-full);
border: 3px solid var(--ppz-border-default);
background: var(--ppz-bg-surface);
z-index: 1;
position: relative;
}
.ppz-timeline__item--current .ppz-timeline__marker {
border-color: var(--ppz-border-default);
background: var(--ppz-bg-surface);
box-shadow: 0 0 0 4px var(--ppz-bg-surface), 0 0 0 6px var(--ppz-border-subtle);
}
/* Timeline variants - default reste neutre (ci-dessus), on ajoute les variantes colorées */
.ppz-timeline--primary .ppz-timeline__item--current .ppz-timeline__marker {
border-color: var(--ppz-color-brand-primary);
background: var(--ppz-color-brand-primary);
box-shadow: 0 0 0 4px var(--ppz-bg-surface), 0 0 0 6px var(--ppz-color-brand-pink-100);
}
.ppz-timeline--secondary .ppz-timeline__item--current .ppz-timeline__marker {
border-color: var(--ppz-color-brand-secondary);
background: var(--ppz-color-brand-secondary);
box-shadow: 0 0 0 4px var(--ppz-bg-surface), 0 0 0 6px var(--ppz-color-brand-teal-100);
}
.ppz-timeline--tertiary .ppz-timeline__item--current .ppz-timeline__marker {
border-color: var(--ppz-color-brand-tertiary);
background: var(--ppz-color-brand-tertiary);
box-shadow: 0 0 0 4px var(--ppz-bg-surface), 0 0 0 6px rgba(106, 74, 184, 0.3);
}
.ppz-timeline__content {
flex: 1;
padding-bottom: var(--ppz-space-2);
}
.ppz-timeline__date {
display: block;
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-secondary);
margin-bottom: var(--ppz-space-1);
}
.ppz-timeline__title {
margin: 0 0 var(--ppz-space-1);
font-size: var(--ppz-font-size-base);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
}
.ppz-timeline__desc {
margin: 0;
font-size: var(--ppz-font-size-sm);
color: var(--ppz-text-muted);
line-height: 1.5;
}
.ppz-timeline--horizontal .ppz-timeline__item {
flex-direction: column;
min-width: 200px;
padding: 0 var(--ppz-space-4);
}
.ppz-timeline--horizontal .ppz-timeline__item:not(:last-child)::after {
content: '';
position: absolute;
left: 50%;
top: 11px;
right: -var(--ppz-space-4);
height: 2px;
background: var(--ppz-border-subtle);
}
.ppz-timeline--horizontal .ppz-timeline__marker {
margin: 0 auto;
}
/* Stepper */
.ppz-stepper {
width: 100%;
}
.ppz-stepper__list {
display: flex;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.ppz-stepper--horizontal .ppz-stepper__list {
flex-direction: row;
align-items: center;
}
.ppz-stepper--vertical .ppz-stepper__list {
flex-direction: column;
align-items: stretch;
}
.ppz-stepper__step {
display: flex;
align-items: center;
gap: var(--ppz-space-3);
flex: 1;
position: relative;
}
.ppz-stepper--horizontal .ppz-stepper__step:not(:last-child)::after {
content: '';
position: absolute;
left: calc(50% + 20px);
right: calc(-50% + 20px);
top: 20px;
height: 2px;
background: var(--ppz-border-subtle);
z-index: 0;
}
.ppz-stepper--vertical .ppz-stepper__step {
padding: var(--ppz-space-3) 0;
}
.ppz-stepper--vertical .ppz-stepper__step:not(:last-child)::after {
content: '';
position: absolute;
left: 20px;
top: 50px;
bottom: -12px;
width: 2px;
background: var(--ppz-border-subtle);
}
.ppz-stepper__marker {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ppz-radius-full);
border: 2px solid var(--ppz-border-default);
background: var(--ppz-bg-surface);
z-index: 1;
position: relative;
}
.ppz-stepper__number {
font-size: var(--ppz-font-size-base);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-muted);
}
.ppz-stepper__step--active .ppz-stepper__marker {
border-color: var(--ppz-interactive-brand);
background: var(--ppz-interactive-brand);
}
.ppz-stepper__step--active .ppz-stepper__number {
color: #fff;
}
.ppz-stepper__step--done .ppz-stepper__marker {
border-color: var(--ppz-status-success-main);
background: var(--ppz-status-success-main);
}
.ppz-stepper__step--done .ppz-stepper__marker svg {
color: #fff;
}
.ppz-stepper__label {
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-secondary);
}
.ppz-stepper__step--active .ppz-stepper__label {
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
}
@media (max-width: 640px) {
.ppz-stepper--horizontal .ppz-stepper__label {
display: none;
}
}
/* Avatar Group */
.ppz-avatar-group {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.ppz-avatar-group__avatar,
.ppz-avatar-group__overflow {
position: relative;
border-radius: var(--ppz-radius-full);
border: 2px solid var(--ppz-bg-surface);
overflow: hidden;
}
.ppz-avatar-group__avatar:not(:last-child),
.ppz-avatar-group__overflow {
margin-left: -12px;
}
.ppz-avatar-group__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ppz-avatar-group--sm .ppz-avatar-group__avatar,
.ppz-avatar-group--sm .ppz-avatar-group__overflow {
width: 32px;
height: 32px;
}
.ppz-avatar-group--md .ppz-avatar-group__avatar,
.ppz-avatar-group--md .ppz-avatar-group__overflow {
width: 40px;
height: 40px;
}
.ppz-avatar-group--lg .ppz-avatar-group__avatar,
.ppz-avatar-group--lg .ppz-avatar-group__overflow {
width: 48px;
height: 48px;
}
.ppz-avatar-group__overflow {
display: flex;
align-items: center;
justify-content: center;
background: var(--ppz-neutral-200);
color: var(--ppz-neutral-700);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-semibold);
cursor: default;
}
[data-theme="dark"] .ppz-avatar-group__overflow {
background: var(--ppz-neutral-700);
color: var(--ppz-neutral-200);
}
/* Stats Card */
.ppz-stats-card {
display: flex;
align-items: flex-start;
gap: var(--ppz-space-4);
padding: var(--ppz-space-5);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
box-shadow: var(--ppz-shadow-sm);
transition: box-shadow 0.2s ease;
}
.ppz-stats-card:hover {
box-shadow: var(--ppz-shadow-md);
}
.ppz-stats-card__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: var(--ppz-bg-subtle);
border-radius: var(--ppz-radius-md);
}
.ppz-stats-card__content {
flex: 1;
min-width: 0;
}
.ppz-stats-card__label {
margin: 0 0 var(--ppz-space-1);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ppz-stats-card__value {
margin: 0 0 var(--ppz-space-2);
font-size: var(--ppz-font-size-3xl);
font-weight: var(--ppz-font-weight-bold);
color: var(--ppz-text-primary);
line-height: 1;
}
.ppz-stats-card__trend {
display: inline-flex;
align-items: center;
gap: var(--ppz-space-1);
padding: var(--ppz-space-1) var(--ppz-space-2);
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
border-radius: var(--ppz-radius-sm);
}
.ppz-stats-card__trend--success {
color: var(--ppz-color-success-dark);
background: rgba(22, 163, 74, 0.1);
}
.ppz-stats-card__trend--danger {
color: var(--ppz-color-danger-dark);
background: rgba(220, 38, 38, 0.1);
}
.ppz-stats-card__trend--neutral {
color: var(--ppz-text-secondary);
background: var(--ppz-bg-subtle);
}
/* Card Stats (with graph) */
.ppz-card--stats {
position: relative;
}
.ppz-card--stats .ppz-card__body {
display: flex;
flex-direction: column;
gap: var(--ppz-space-2);
}
.ppz-card__graph {
flex-shrink: 0;
}
/* Hide graph in eco mode */
[data-eco="enabled"] .ppz-card__graph,
[data-eco="enabled"] [data-eco-hide] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
.ppz-stats-card,
.ppz-card--stats {
transition: none;
}
}
/* Search Bar */
.ppz-search {
display: inline-block;
max-width: 100%;
}
.ppz-search--full-width {
display: block;
width: 100%;
}
.ppz-search__wrapper {
position: relative;
display: flex;
align-items: center;
}
.ppz-search__icon {
position: absolute;
left: var(--ppz-space-3);
color: var(--ppz-text-muted);
pointer-events: none;
}
.ppz-search__input {
width: 100%;
padding: var(--ppz-space-2) var(--ppz-space-3) var(--ppz-space-2) calc(var(--ppz-space-3) + 24px);
font-size: var(--ppz-font-size-base);
font-family: inherit;
color: var(--ppz-text-primary);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-default);
border-radius: var(--ppz-radius-md);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ppz-search__input::placeholder {
color: var(--ppz-text-muted);
}
.ppz-search__input:focus {
border-color: var(--ppz-interactive-brand);
box-shadow: 0 0 0 3px var(--ppz-focus-ring);
}
.ppz-search--sm .ppz-search__input {
padding: var(--ppz-space-1) var(--ppz-space-2) var(--ppz-space-1) calc(var(--ppz-space-2) + 20px);
font-size: var(--ppz-font-size-sm);
}
.ppz-search--sm .ppz-search__icon {
left: var(--ppz-space-2);
width: 16px;
height: 16px;
}
.ppz-search--lg .ppz-search__input {
padding: var(--ppz-space-3) var(--ppz-space-4) var(--ppz-space-3) calc(var(--ppz-space-4) + 28px);
font-size: var(--ppz-font-size-lg);
}
.ppz-search--lg .ppz-search__icon {
left: var(--ppz-space-4);
width: 24px;
height: 24px;
}
/* File Upload */
.ppz-file-upload {
position: relative;
border: 2px dashed var(--ppz-border-default);
border-radius: var(--ppz-radius-lg);
padding: var(--ppz-space-6);
text-align: center;
background: var(--ppz-bg-surface);
transition: border-color 0.2s ease, background 0.2s ease;
cursor: pointer;
}
.ppz-file-upload:hover,
.ppz-file-upload:focus-within {
border-color: var(--ppz-interactive-brand);
background: var(--ppz-bg-subtle);
}
.ppz-file-upload__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.ppz-file-upload__label {
display: block;
cursor: pointer;
}
.ppz-file-upload__icon {
margin: 0 auto var(--ppz-space-3);
color: var(--ppz-text-muted);
}
.ppz-file-upload__title {
margin: 0 0 var(--ppz-space-1);
font-size: var(--ppz-font-size-base);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
}
.ppz-file-upload__hint {
margin: 0;
font-size: var(--ppz-font-size-sm);
color: var(--ppz-text-muted);
}
.ppz-file-upload:focus-within {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: 2px;
}
.ppz-modal-overlay {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--ppz-space-6) var(--ppz-space-4);
background: var(--ppz-bg-overlay);
backdrop-filter: blur(2px);
overflow-y: auto;
}
.ppz-modal {
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 2 * var(--ppz-space-6));
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-subtle);
border-radius: var(--ppz-radius-lg);
box-shadow: var(--ppz-elevation-5);
}
.ppz-modal--sm { max-width: 360px; }
.ppz-modal--lg { max-width: 720px; }
.ppz-modal--xl { max-width: 960px; }
.ppz-modal--full { max-width: 100%; height: calc(100vh - 2 * var(--ppz-space-6)); }
.ppz-modal__header { display: flex; align-items: center; gap: var(--ppz-space-3); padding: var(--ppz-space-4) var(--ppz-space-5); border-bottom: 1px solid var(--ppz-border-subtle); }
.ppz-modal__title { flex: 1; margin: 0; font-size: var(--ppz-font-size-xl); font-weight: var(--ppz-font-weight-semibold); }
.ppz-modal__close { appearance: none; background: none; border: none; padding: var(--ppz-space-1); cursor: pointer; font-size: 1.5rem; color: var(--ppz-text-muted); border-radius: var(--ppz-radius-sm); }
.ppz-modal__close:hover { background: var(--ppz-bg-subtle); color: var(--ppz-text-primary); }
.ppz-modal__body { flex: 1; padding: var(--ppz-space-4) var(--ppz-space-5); overflow-y: auto; }
.ppz-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--ppz-space-2); padding: var(--ppz-space-3) var(--ppz-space-5); border-top: 1px solid var(--ppz-border-subtle); background: var(--ppz-bg-surfaceVariant); }
/* Modal Pane (Panneau latéral modal) */
.ppz-modal-pane {
position: fixed;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
background: var(--ppz-bg-surface);
box-shadow: var(--ppz-elevation-5);
z-index: calc(var(--ppz-z-index-modal, 1400) + 1);
max-height: 100vh;
overflow: hidden;
transition: transform 0.3s ease-out;
}
.ppz-modal-pane--sm { width: 320px; }
.ppz-modal-pane--md { width: 480px; }
.ppz-modal-pane--lg { width: 640px; }
.ppz-modal-pane--right {
right: 0;
animation: slideInRight 0.3s ease-out;
}
.ppz-modal-pane--left {
left: 0;
animation: slideInLeft 0.3s ease-out;
}
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideInLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.ppz-modal-pane__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ppz-space-5) var(--ppz-space-6);
border-bottom: 1px solid var(--ppz-border-subtle);
background: var(--ppz-bg-surface);
}
.ppz-modal-pane__title {
margin: 0;
font-size: var(--ppz-font-size-xl);
font-weight: var(--ppz-font-weight-semibold);
color: var(--ppz-text-primary);
}
.ppz-modal-pane__close {
appearance: none;
background: none;
border: none;
padding: var(--ppz-space-1);
cursor: pointer;
font-size: 2rem;
line-height: 1;
color: var(--ppz-text-muted);
border-radius: var(--ppz-radius-sm);
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
}
.ppz-modal-pane__close:hover {
color: var(--ppz-text-primary);
background: var(--ppz-bg-subtle);
}
.ppz-modal-pane__close:focus {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: 2px;
}
.ppz-modal-pane__body {
flex: 1;
overflow-y: auto;
padding: var(--ppz-space-6);
background: var(--ppz-bg-surface);
}
.ppz-modal-pane__footer {
padding: var(--ppz-space-4) var(--ppz-space-6);
border-top: 1px solid var(--ppz-border-subtle);
background: var(--ppz-bg-surface);
}
.ppz-modal-pane__form {
display: flex;
flex-direction: column;
gap: var(--ppz-space-4);
}
.ppz-form-group {
display: flex;
flex-direction: column;
gap: var(--ppz-space-2);
}
.ppz-label {
font-size: var(--ppz-font-size-sm);
font-weight: var(--ppz-font-weight-medium);
color: var(--ppz-text-primary);
}
.ppz-textarea__field {
width: 100%;
padding: var(--ppz-space-2) var(--ppz-space-3);
font-size: var(--ppz-font-size-base);
font-family: inherit;
line-height: 1.5;
color: var(--ppz-text-primary);
background: var(--ppz-bg-surface);
border: 1px solid var(--ppz-border-default);
border-radius: var(--ppz-radius-md);
transition: all var(--ppz-duration-fast) var(--ppz-ease-out);
resize: vertical;
}
.ppz-textarea__field:hover {
border-color: var(--ppz-border-hover);
}
.ppz-textarea__field:focus {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: 2px;
border-color: var(--ppz-color-brand-primary);
}
.ppz-color-swatch:focus {
outline: 2px solid var(--ppz-focus-ring);
outline-offset: 2px;
}
/* Responsive */
@media (max-width: 640px) {
.ppz-modal-pane--sm,
.ppz-modal-pane--md,
.ppz-modal-pane--lg {
width: 100%;
}
}
/* High contrast mode */
[data-contrast="high"] .ppz-modal-pane {
border: 3px solid var(--ppz-border-strong);
}
[data-contrast="high"] .ppz-modal-pane__header,
[data-contrast="high"] .ppz-modal-pane__footer {
border-width: 3px;
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.ppz-modal-pane--right,
.ppz-modal-pane--left {
animation: none;
}
.ppz-modal-pane {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-contrast: more) {
.ppz-btn { border-width: 2px; }
.ppz-input__field { border-width: 2px; }
:focus-visible { outline-width: 3px; outline-offset: 3px; }
}
/* Mode Écoresponsable - Économise la bande passante en remplaçant les images */
/* Avatar placeholder SVG (< 1KB) */
[data-eco="enabled"] img[data-eco-type="avatar"],
[data-eco="enabled"] .ppz-img-avatar {
content: url('data:image/svg+xml;utf8,') !important;
background: #f3f4f6 !important;
}
/* Image générique placeholder SVG (< 1KB) */
[data-eco="enabled"] img[data-eco-type="photo"],
[data-eco="enabled"] img[data-eco-type="image"],
[data-eco="enabled"] .ppz-img-photo {
content: url('data:image/svg+xml;utf8,') !important;
background: #f3f4f6 !important;
}
/* Document placeholder SVG */
[data-eco="enabled"] img[data-eco-type="document"],
[data-eco="enabled"] .ppz-img-document {
content: url('data:image/svg+xml;utf8,') !important;
background: #f3f4f6 !important;
}
/* Badge d'économie d'énergie */
[data-eco="enabled"] img[data-eco-type="avatar"]::after,
[data-eco="enabled"] img[data-eco-type="photo"]::after,
[data-eco="enabled"] img[data-eco-type="image"]::after {
content: "🌱";
position: absolute;
bottom: 2px;
right: 2px;
font-size: 12px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
padding: 2px;
display: none; /* Masqué par défaut, peut être activé si besoin */
}
/* Container pour les images éco */
.ppz-img-container {
position: relative;
display: inline-block;
}
.ppz-img-container img {
display: block;
width: 100%;
height: auto;
}
/* Message d'économie (optionnel) */
[data-eco="enabled"] .ppz-img-container::after {
content: "Mode éco: ~" attr(data-eco-savings) " économisés";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(34, 197, 94, 0.9);
color: white;
font-size: 10px;
padding: 4px;
text-align: center;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
[data-eco="enabled"] .ppz-img-container:hover::after {
opacity: 1;
}
/* Styles pour les cartes Course/Event en mode éco */
[data-eco="enabled"] .ppz-course img {
content: url('data:image/svg+xml;utf8,') !important;
}
/* Optimisation: Désactive les animations en mode éco */
[data-eco="enabled"] * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
/* Conserve les transitions essentielles pour l'UX */
[data-eco="enabled"] button,
[data-eco="enabled"] a,
[data-eco="enabled"] input,
[data-eco="enabled"] .ppz-toggle__switch {
transition-duration: 150ms !important;
}
/* Masque les éléments data-eco-hide (ex: graphiques) en mode éco */
[data-eco="enabled"] [data-eco-hide] {
display: none !important;
}