/* ==========================================================================
   SYSTÈME DE VARIABLES CSS AVEC TOKENS DESIGN SYSTEM
   Variables pour boutons et composants UI
   ========================================================================== */

:root {
    /* ===========================================
       COULEURS - SYSTÈME FIGMA DESIGN TOKENS
       =========================================== */
    
    /* Couleurs principales du design system Figma */
    --Color-Blue-PPA-Blue-20: #2E2C7E;     /* Token Figma - Bleu principal */
    --Color-Orange-Orange: #FF6642;         /* Token Figma - Orange d'accent */
    
    /* Nouveaux tokens Figma demandés */
    --Color-Orange-Orange-10: #EE5531;      /* Token Figma - Orange hover */
    --Color-Blue-Navy-blue-30: #06006B;     /* Token Figma - Navy blue */
    --Color-Blue-Dark-blue-40: #040136;     /* Token Figma - Dark blue */
    
    /* Gamme des gris Figma */
    --Color-Grey-White-lilac: #F9F8FE;      /* Token Figma - Blanc lilas */
    --Color-Grey-Grey-10: #F8F8F8;          /* Token Figma - Gris très clair */
    --Color-Grey-Grey-20: #F2F2F2;          /* Token Figma - Gris clair */
    --Color-Grey-Grey-30: #E8E8E8;          /* Token Figma - Gris moyen clair */
    --Color-Grey-Grey-40: #D2D2D2;          /* Token Figma - Gris moyen */
    --Color-Grey-Grey-50: #898989;          /* Token Figma - Gris */
    --Color-Grey-Grey-60: #787878;          /* Token Figma - Gris foncé */
    --Color-Grey-Grey-90: #1E1E1E;          /* Token Figma - Gris très foncé */
    
    /* Couleurs de base Figma */
    --Color-Base-Black: #000;               /* Token Figma - Noir pur */
    --Color-Base-White: #FFF;               /* Token Figma - Blanc pur */

    /* ===========================================
       TOKENS DE BOUTONS - BACKGROUNDS
       =========================================== */
    
    /* Primary Button */
    --button-background-primary: var(--Color-Blue-PPA-Blue-20);
    --button-background-primary-hover: var(--Color-Blue-Navy-blue-30);
    
    /* Secondary Button */
    --button-background-secondary: var(--Color-Base-White);
    --button-background-secondary-hover: var(--Color-Grey-Grey-30);
    
    /* Tertiary Button */
    --button-background-tertiary: var(--Color-Orange-Orange);
    --button-background-tertiary-hover: var(--Color-Orange-Orange-10);
    
    /* Quaternary Button */
    --button-background-quaternary: var(--Color-Blue-Navy-blue-30);
    --button-background-quaternary-hover: var(--Color-Blue-Dark-blue-40);
    
    /* Quintenary Button */
    --button-background-quintenary: var(--Color-Grey-Grey-30);
    --button-background-quintenary-hover: var(--Color-Grey-Grey-40);
    
    /* Sextary Button */
    --button-background-sextary: var(--Color-Grey-Grey-20);
    --button-background-sextary-hover: var(--Color-Grey-Grey-30);
    
    /* Septernary Button */
    --button-background-septernary: var(--Color-Grey-Grey-10);
    --button-background-septernary-hover: var(--Color-Grey-Grey-30);

    /* ===========================================
       TOKENS DE BOUTONS - LABELS (TEXTE)
       =========================================== */
    
    /* Primary Button Label */
    --button-label-primary: var(--Color-Base-White);
    
    /* Secondary Button Label */
    --button-label-secondary: var(--Color-Blue-PPA-Blue-20);
    --button-label-secondary-hover: var(--Color-Blue-Dark-blue-40);
    
    /* Tertiary Button Label */
    --button-label-tertiary: var(--Color-Grey-Grey-50);
    
    /* Quaternary Button Label */
    --button-label-quaternary: var(--Color-Grey-Grey-90);

    /* ===========================================
       TOKENS DE SURFACES/BACKGROUNDS
       =========================================== */
    
    /* Background tokens */
    --background-primary: var(--Color-Grey-White-lilac);
    --background-secondary: var(--Color-Blue-PPA-Blue-20);
    --background-tertiary: var(--Color-Base-White);
    
    /* Surface tokens */
    --surface-primary: var(--Color-Base-White);
    --surface-secondary: var(--Color-Blue-PPA-Blue-20);
    --surface-tertiary: var(--Color-Blue-Navy-blue-30);
    --surface-quaternary: var(--Color-Grey-Grey-20);
    --surface-quintenary: var(--Color-Grey-Grey-50);
    --surface-sextary: var(--Color-Grey-White-lilac);
    --surface-septenary: var(--Color-Blue-Dark-blue-40);
    --surface-octonary: var(--Color-Grey-Grey-30);

    /* ===========================================
       ALIAS DE COMPATIBILITÉ - ANCIENNES VARIABLES
       =========================================== */
    
    /* Mapping des anciennes variables vers les nouvelles pour compatibilité */
    
    /* Primary Button - Anciennes variables */
    --btn-primary-bg: var(--button-background-primary);
    --btn-primary-color: var(--button-label-primary);
    --btn-primary-bg-hover: var(--button-background-primary-hover);
    --btn-primary-color-hover: var(--button-label-primary);
    
    /* Secondary Button - Anciennes variables */
    --btn-secondary-bg: var(--button-background-secondary);
    --btn-secondary-color: var(--button-label-secondary);
    --btn-secondary-bg-hover: var(--button-background-secondary-hover);
    --btn-secondary-color-hover: var(--button-label-secondary-hover);
    
    /* Tertiary Button - Anciennes variables */
    --btn-tertiary-bg: var(--button-background-tertiary);
    --btn-tertiary-color: var(--button-label-tertiary);
    --btn-tertiary-bg-hover: var(--button-background-tertiary-hover);
    --btn-tertiary-color-hover: var(--button-label-tertiary);
    
    /* Quaternary Button - Anciennes variables */
    --btn-quaternary-bg: var(--button-background-quaternary);
    --btn-quaternary-color: var(--button-label-quaternary);
    --btn-quaternary-bg-hover: var(--button-background-quaternary-hover);
    --btn-quaternary-color-hover: var(--button-label-quaternary);
    
    /* Alias pour les anciennes couleurs utilisées dans les blocks */
    --surface-dark: var(--Color-Grey-Grey-90);
    --text-inverse: var(--Color-Base-White);
    --neutral-light: var(--Color-Grey-Grey-20);
    --neutral-medium: var(--Color-Grey-Grey-30);
    --neutral-dark: var(--Color-Grey-Grey-50);

    /* ===========================================
       ALIAS SÉMANTIQUES BASÉS SUR LES TOKENS
       =========================================== */
    
    --primary: var(--Color-Blue-PPA-Blue-20);
    --secondary: var(--Color-Orange-Orange);
    --text-primary: var(--Color-Blue-PPA-Blue-20);
    --text-secondary: var(--Color-Grey-Grey-50);
    --text-light: var(--Color-Base-White);
    --text-dark: var(--Color-Base-Black);
    --text-very-dark: var(--Color-Grey-Grey-90);
    
    /* Couleurs de hover basées sur Figma */
    --primary-hover: var(--Color-Blue-Navy-blue-30);
    --secondary-hover: var(--Color-Orange-Orange-10);
    
    /* Backgrounds basés sur les nouveaux tokens */
    --background-site: var(--background-primary);        /* Grey-White-lilac */
    --background-content: var(--surface-primary);        /* White */
    --background-light: var(--surface-quaternary);       /* Grey-20 */
    --background-medium: var(--surface-octonary);        /* Grey-30 */
    --background-dark: var(--surface-septenary);         /* Dark-blue-40 */
    
    /* Bordures basées sur les tokens Figma */
    --border-light: var(--Color-Grey-Grey-20);
    --border-medium: var(--Color-Grey-Grey-40);
    --border-dark: var(--Color-Grey-Grey-60);

    /* ===========================================
       ESPACEMENTS - ÉCHELLE HARMONIQUE
       =========================================== */
    
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 1rem;       /* 16px */
    --space-md: 1.5rem;     /* 24px */
    --space-lg: 2rem;       /* 32px */
    --space-xl: 3rem;       /* 48px */
    --space-2xl: 4rem;      /* 64px */

    /* ===========================================
       ESPACEMENTS ENTRE LES LETTRES - DESKTOP
       =========================================== */
    --letter-spacing-titre-haas-l: 1px;
    --letter-spacing-titre-haas-xl: -1.12px;
    --letter-spacing-titre-haas-xxl: -1.28px;
    --letter-spacing-titre-haas-xxxl: -1.44px;
    --letter-spacing-titre-haas-xxxxl: -1.76px;

    /* ===========================================
       SPACERS - SYSTÈME DE HAUTEURS
       =========================================== */
    
    --Spacer-spacer-XS: 16px;    /* Spacer très petit */
    --Spacer-spacer-S: 24px;     /* Spacer petit */
    --Spacer-spacer-M: 32px;     /* Spacer moyen */
    --Spacer-spacer-L: 44px;     /* Spacer large */
    --Spacer-spacer-XL: 64px;    /* Spacer extra large */
    --Spacer-spacer-XXL: 80px;   /* Spacer double extra large */
    --Spacer-spacer-XXXL: 96px;  /* Spacer triple extra large (défaut) */

    /* ===========================================
       PADDING SYSTÈME GÉNÉRIQUE
       =========================================== */
    
    --padding-xs: 12px;     /* Padding compact */
    --padding-sm: 16px;     /* Padding standard */
    --padding-md: 24px;     /* Padding large */
    
    /* ===========================================
       FONT SIZES TITRE SYSTÈME HAAS GROTESK
       =========================================== */
    
    --titre-haas-CAPS-XXS: 12px;   /* Plus petite taille */
    --titre-haas-XXS: 16px;        /* Très petite */
    --titre-haas-XS: 20px;         /* Petite */
    --titre-haas-S: 24px;          /* Small */
    --titre-haas-M: 32px;          /* Medium */
    --titre-haas-L: 48px;          /* Large */
    --titre-haas-XL: 56px;         /* Extra Large */
    --titre-haas-XXL: 64px;        /* Double Extra Large */
    --titre-haas-XXXL: 72px;       /* Desktop par défaut */
    --titre-haas-XXXXL: 88px;      /* Desktop par défaut */
    --titre-haas-CAPS-XS: 20px;

    /* ===========================================
       TYPESCALE BOUTONS
       =========================================== */
    
    --Typescale-Button-button-haas-XS: 12px;    /* Bouton très petit */
    --Typescale-Button-button-haas-S: 16px;     /* Bouton petit */
    --Typescale-Button-button-haas-M: 20px;     /* Bouton moyen */
    --Typescale-Button-button-corps-haas-S: 16px; /* Bouton corps standard */
    
    /* ===========================================
       BORDER RADIUS SYSTÈME
       =========================================== */
    
    --radius-none: 0;
    --radius-sm: 2px;       /* Petit radius */
    --radius-md: 4px;       /* Radius standard */
    --radius-lg: 8px;       /* Grand radius */
    --radius-xl: 16px;      /* Très grand radius */
    --radius-full: 50%;     /* Cercle parfait */

    /* ===========================================
       TYPOGRAPHIE - SYSTÈME GÉNÉRIQUE
       =========================================== */
    
    /* Font families */
    --font-family-primary: "Neue Haas Grotesk Display Pro";
    --font-family-secondary: 'Wix Madefor Text', sans-serif; /* Fallback */
    

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-regular: 450;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===========================================
       EFFETS - SYSTÈME GÉNÉRIQUE
       =========================================== */
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 0 24px 16px rgba(0,0,0,0.01);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* ===========================================
       ICÔNES ET FLÈCHES
       =========================================== */
    
    /* Tailles d'icônes */
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;
    
    /* Flèches SVG pour les boutons CTA */
    --arrow-icon-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M11.9025 11.5883L12 0C9.0966 0.0288896 3.31147 0.0686127 0.411676 0.0975023L0.386398 1.5492C2.99729 1.52392 6.46404 1.50226 9.51189 1.47337L0 10.9853L1.01475 12L10.5266 2.48811L10.4436 11.6064L11.9025 11.5919V11.5883Z" fill="white"/></svg>');
    --arrow-icon-blue: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="12" viewBox="0 0 5 12" fill="none"><path d="M0.621289 0.5C0.821173 0.5 0.996072 0.573356 1.121 0.744517L4.86883 5.63486C5.04372 5.85493 5.04372 6.14835 4.86883 6.36841L1.121 11.2588C0.921116 11.5277 0.521348 11.5766 0.246507 11.381C-0.0283336 11.1854 -0.0783046 10.7942 0.121579 10.5252L3.59457 6.00164L0.121579 1.47807C-0.078305 1.2091 -0.028334 0.817873 0.246507 0.622259C0.346449 0.548903 0.496362 0.5 0.621289 0.5Z" fill="%232E2C7E"/></svg>');
    --arrow-icon-grey: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M11.9025 11.5883L12 0C9.0966 0.0288896 3.31147 0.0686127 0.411676 0.0975023L0.386398 1.5492C2.99729 1.52392 6.46404 1.50226 9.51189 1.47337L0 10.9853L1.01475 12L10.5266 2.48811L10.4436 11.6064L11.9025 11.5919V11.5883Z" fill="%23898989"/></svg>');
    --arrow-icon-quaternary: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M11.9025 11.5883L12 0C9.0966 0.0288896 3.31147 0.0686127 0.411676 0.0975023L0.386398 1.5492C2.99729 1.52392 6.46404 1.50226 9.51189 1.47337L0 10.9853L1.01475 12L10.5266 2.48811L10.4436 11.6064L11.9025 11.5919V11.5883Z" fill="%231E1E1E"/></svg>');
    --arrow-icon-primary: url('data:image/svg+xml;utf8,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="icon-arrow-right"><path id="Shape" d="M8.02892 3.36177C8.28927 3.10142 8.71138 3.10142 8.97173 3.36177L13.6384 8.02843C13.8987 8.28878 13.8987 8.71089 13.6384 8.97124L8.97173 13.6379C8.71138 13.8983 8.28927 13.8983 8.02892 13.6379C7.76857 13.3776 7.76857 12.9554 8.02892 12.6951L11.5575 9.1665H3.83366C3.46547 9.1665 3.16699 8.86803 3.16699 8.49984C3.16699 8.13165 3.46547 7.83317 3.83366 7.83317H11.5575L8.02892 4.30457C7.76857 4.04423 7.76857 3.62212 8.02892 3.36177Z" fill="%23FF6642"/></g></svg>');
}
/* ==========================================================================
   SYSTÈME DE VARIABLES CSS GÉNÉRIQUE ET RÉUTILISABLE
   Variables typographiques pour le corps du texte, descriptions, paragraphes, etc.
   ========================================================================== */

:root {
    /* ===========================================
       TAILLES DE TEXTE - CORPS ET PARAGRAPHES (NOUVEAU SYSTÈME UNIQUEMENT)
       =========================================== */
    --corps-wix-XXS: 8px;
    --corps-wix-XS: 12px;
    --corps-wix-S: 16px;
    --corps-haas-CAPS-XXS: 12px;
    --corps-haas-XXXS: 12px;
    --corps-haas-XXS: 16px;
    --corps-haas-XS: 16px;
    --corps-haas-S: 20px;
    --corps-haas-M: 24px;
    --corps-haas-L: 32px;
    --corps-haas-XL: 40px;
   

    /* Responsive - mobile (max 768px) : mêmes valeurs sauf XXS */
}

@media (max-width: 768px) {
    :root {
        --corps-wix-XXS: 12px;
        --corps-wix-XS: 12px;
        --corps-wix-S: 16px;
        --corps-haas-CAPS-XXS: 12px;
        --corps-haas-XXS: 12px;
        --corps-haas-XS: 16px;
        --corps-haas-S: 20px;
        --corps-haas-M: 24px;
        --corps-haas-L: 32px;
        --corps-haas-XL: 40px;
    }
}

@media (max-width: 768px) {
    :root {
    --titre-haas-CAPS-XXS: 12px;   /* Plus petite taille */
    --titre-haas-XXS: 16px;        /* Très petite */
    --titre-haas-XS: 20px;         /* Petite */
    --titre-haas-S: 24px;          /* Small */
    --titre-haas-M: 28px;          /* Medium */
    --titre-haas-L: 40px;          /* Large */
    --titre-haas-XL: 48px;         /* Extra Large */
    --titre-haas-XXL: 56px;        /* Double Extra Large */
    --titre-haas-XXXL: 64px;       /* Desktop par défaut */
    --titre-haas-XXXXL: 64px;      /* Desktop par défaut */

   /* ===========================================
   ESPACEMENTS ENTRE LES LETTRES - MOBILE
   =========================================== */
   --letter-spacing-titre-haas-l: 1px;
   --letter-spacing-titre-haas-xl: -0.96px;
   --letter-spacing-titre-haas-xxl: -1.12px;
   --letter-spacing-titre-haas-xxxl: -1.28px;
   --letter-spacing-titre-haas-xxxxl: -1.28px;
   }
}



/* ===========================================
   CLASSES DE BOUTONS AVEC NOUVEAUX TOKENS
   =========================================== */

/* Base commune pour tous les boutons */

/* Bouton Primary */
.btn-primary {
    background: var(--button-background-primary);
    color: var(--button-label-primary);
    border-color: var(--button-background-primary);
}

.btn-primary:hover {
    background: var(--button-background-primary-hover);
    color: var(--button-label-primary);
    border-color: var(--button-background-primary-hover);
}

/* Bouton Secondary */
.btn-secondary {
    background: var(--button-background-secondary);
    color: var(--button-label-secondary);
    border-color: var(--button-label-secondary);
}

.btn-secondary:hover {
    background: var(--button-background-secondary-hover);
    color: var(--button-label-secondary-hover);
    border-color: var(--button-label-secondary-hover);
}

/* Bouton Tertiary */
.btn-tertiary {
    background: var(--button-background-tertiary);
    color: var(--Color-Base-White);
    border-color: var(--button-background-tertiary);
}

.btn-tertiary:hover {
    background: var(--button-background-tertiary-hover);
    color: var(--Color-Base-White);
    border-color: var(--button-background-tertiary-hover);
}

/* Bouton Quaternary */
.btn-quaternary {
    background: var(--button-background-quaternary);
    color: var(--Color-Base-White);
    border-color: var(--button-background-quaternary);
}

.btn-quaternary:hover {
    background: var(--button-background-quaternary-hover);
    color: var(--Color-Base-White);
    border-color: var(--button-background-quaternary-hover);
}

/* Bouton Quintenary */
.btn-quintenary {
    background: var(--button-background-quintenary);
    color: var(--button-label-tertiary);
    border-color: var(--button-background-quintenary);
}

.btn-quintenary:hover {
    background: var(--button-background-quintenary-hover);
    color: var(--button-label-tertiary);
    border-color: var(--button-background-quintenary-hover);
}

/* Bouton Sextary */
.btn-sextary {
    background: var(--button-background-sextary);
    color: var(--button-label-secondary);
    border-color: var(--button-background-sextary);
}

.btn-sextary:hover {
    background: var(--button-background-sextary-hover);
    color: var(--button-label-secondary);
    border-color: var(--button-background-sextary-hover);
}

/* Bouton Septernary */
.btn-septernary {
    background: var(--button-background-septernary);
    color: var(--button-label-quaternary);
    border-color: var(--button-background-septernary);
}

.btn-septernary:hover {
    background: var(--button-background-septernary-hover);
    color: var(--button-label-quaternary);
    border-color: var(--button-background-septernary-hover);
}

/* ===========================================
   CLASSES UTILITAIRES - COULEURS
   =========================================== */

/* Backgrounds principaux */
.bg-primary    { background: var(--primary); color: var(--text-light); }
.bg-secondary  { background: var(--secondary); color: var(--text-light); }
.bg-white      { background: var(--Color-Base-White); }
.bg-black      { background: var(--Color-Base-Black); color: var(--text-light); }
.bg-grey-10    { background: var(--Color-Grey-Grey-10); }
.bg-grey-20    { background: var(--Color-Grey-Grey-20); }
.bg-grey-30    { background: var(--Color-Grey-Grey-30); }
.bg-grey-40    { background: var(--Color-Grey-Grey-40); }
.bg-grey-50    { background: var(--Color-Grey-Grey-50); color: var(--text-light); }
.bg-grey-60    { background: var(--Color-Grey-Grey-60); color: var(--text-light); }
.bg-grey-90    { background: var(--Color-Grey-Grey-90); color: var(--text-light); }

/* Classes Background tokens */
.background-primary   { background: var(--background-primary); }
.background-secondary { background: var(--background-secondary); color: var(--text-light); }
.background-tertiary  { background: var(--background-tertiary); }

/* Classes Surface tokens */
.surface-primary    { background: var(--surface-primary); }
.surface-secondary  { background: var(--surface-secondary); color: var(--text-light); }
.surface-tertiary   { background: var(--surface-tertiary); color: var(--text-light); }
.surface-quaternary { background: var(--surface-quaternary); }
.surface-quintenary { background: var(--surface-quintenary); color: var(--text-light); }
.surface-sextary    { background: var(--surface-sextary); }
.surface-septenary  { background: var(--surface-septenary); color: var(--text-light); }
.surface-octonary   { background: var(--surface-octonary); }

/* Couleurs de texte */
.text-primary   { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-white     { color: var(--Color-Base-White); }
.text-black     { color: var(--Color-Base-Black); }
.text-grey-50   { color: var(--Color-Grey-Grey-50); }
.text-grey-60   { color: var(--Color-Grey-Grey-60); }
.text-grey-90   { color: var(--Color-Grey-Grey-90); }

/* ===========================================
   CLASSES UTILITAIRES - COULEURS DE RYTHME
   =========================================== */

/* Backgrounds des rythmes - utilisation directe des variables couleurs */
.bg-blue     { background: var(--Color-Blue-PPA-Blue-20); color: var(--Color-Base-White); }
.bg-green    { background: #16A34A; color: var(--Color-Base-White); }
.bg-red      { background: #DC2626; color: var(--Color-Base-White); }
.bg-orange   { background: var(--Color-Orange-Orange); color: var(--Color-Base-White); }
.bg-purple   { background: #6F42C1; color: var(--Color-Base-White); }
.bg-yellow   { background: #FFC107; color: var(--Color-Base-Black); }
.bg-default  { background: var(--Color-Grey-Grey-30); color: var(--Color-Base-Black); }
.bg-navy     { background: var(--Color-Blue-Navy-blue-30); color: var(--Color-Base-White); }
.bg-dark     { background: var(--Color-Blue-Dark-blue-40); color: var(--Color-Base-White); }

/* ===========================================
   STYLE GLOBAL DU BODY
   =========================================== */

/* Style global du body */
body {
    background-color: var(--surface-primary);
    font-family: var(--font-family-primary);
}

/* Style pour le site front - fond gris lilas */
body:not(.wp-admin) {
    background-color: var(--background-primary);
}

/* Conteneurs principaux du site front */
.site-wrapper,
.wp-site-blocks {
    background-color: var(--background-primary);
}

/* ===========================================
   CLASSES UTILITAIRES - ESPACEMENTS
   =========================================== */

/* Padding */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

/* Margin */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

/* ===========================================
   CLASSES UTILITAIRES - TYPOGRAPHIE
   =========================================== */

/* Font sizes */
.text-caps-xxs { font-size: var(--titre-haas-CAPS-XXS); }
.text-xxs  { font-size: var(--titre-haas-XXS); }
.text-xs   { font-size: var(--titre-haas-XS); }
.text-s    { font-size: var(--titre-haas-S); }
.text-m    { font-size: var(--titre-haas-M); }
.text-l    { font-size: var(--titre-haas-L); }
.text-xl   { font-size: var(--titre-haas-XL); }
.text-xxl  { font-size: var(--titre-haas-XXL); }

/* Font weights */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Alignement */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ===========================================
   CLASSES UTILITAIRES - DESIGN
   =========================================== */

/* Border radius */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Transitions */
.transition-fast { transition: var(--transition-fast); }
.transition-normal { transition: var(--transition-normal); }
.transition-slow { transition: var(--transition-slow); }

/* ===========================================
   CLASSES UTILITAIRES - LAYOUT
   =========================================== */

/* Flexbox */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }

/* Gap utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Grid */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }









/* ===========================================
   NEW VARIABLES
   NEW VARIABLES
   =========================================== */

:root {

    --radius-XXS: 4px;
    --radius-XS: 8px;
    --radius-S: 12px;
    --radius-M: 16px;
    --radius-L: 20px;
    --radius-XL: 24px;
    --radius-XXL: 32px;
    --radius-XXXL: 36px;

    --padding-XXXS: 4px;
    --padding-XXS: 8px;
    --padding-XS: 12px;
    --padding-S: 16px;
    --padding-sm: 16px;
    --padding-M: 20px;
    --padding-md: 24px;
    --padding-L: 24px;
    --padding-XL: 32px;
    --padding-XXL: 40px;
    --padding-XXXL: 48px;
    --padding-XXXXL: 60px;
    --padding-5XL: 80px;


    --title-primary: var(--Color-Grey-Grey-90);
    --title-secondary: var(--Color-Blue-PPA-Blue-20);
    --title-tertiary: var(--Color-Base-White);
    --title-quaternary: var(--Color-Orange-Orange);
    --body-primary: var(--Color-Grey-Grey-90);
    --body-secondary: var(--Color-Grey-Grey-50);
    --body-tertiary: var(--Color-Base-White);

    --card-shadow : 0 0px 24px 16px rgba(0, 0, 0, 0.05);
    --card-shadow-light  : 0 0 24px 16px rgba(0, 0, 0, .01)




    /*===================================COLORS===================================*/

    --button-label-primary: var(--Color-Base-White);
    --button-label-primary-hover: var(--Color-Blue-PPA-Blue-20);
    --button-label-secondary: var(--Color-Blue-PPA-Blue-20);
    --button-label-secondary-hover: var(--Color-Blue-Dark-blue-40);
    --button-label-tertiary: var(--Color-Grey-Grey-50);
    --button-label-quaternary: var(--Color-Grey-Grey-90);


}