/* IFSUEDE.COM - DESIGN SYSTEM (CORE) v1.3 */

:root {
    /* 1. PRIMITIVES */
    
    /* Identité (Bleus) */
    --palette-blue-dark: rgb(10, 29, 71);
    --palette-blue-main: rgb(53, 88, 162);
    --palette-blue-light:  rgb(184, 207, 255);
    --palette-blue-pale:   rgb(224, 234, 255);

    /* Structure (Neutres) */
    --palette-ink:         rgb(17, 19, 23);
    --palette-grey-dark:   rgb(89, 96, 110);
    --palette-grey-silver: rgb(170, 177, 191);
    --palette-grey-pale:   rgb(243, 247, 255);

	/* Couleurs d'accent */
    --separator-accent: initial;

    /** Corail **/
    --palette-coral:       rgb(255, 129, 110);
    --palette-coral-light: rgb(254, 190, 171);
    --palette-coral-pale:  rgb(255, 240, 235);
	--palette-coral-dark:  rgb(160, 70, 60);

    /** Ambre **/
    --palette-amber:       rgb(255, 207, 88);
    --palette-amber-light: rgb(255, 230, 160);
    --palette-amber-pale:  rgb(255, 250, 235);
	--palette-amber-dark:  rgb(150, 115, 30);
 
    /** Menthe **/
    --palette-mint:        rgb(149, 219, 180);
    --palette-mint-light:  rgb(200, 235, 215);
    --palette-mint-pale:   rgb(235, 250, 245);
	--palette-mint-dark: rgb(25, 125, 100);

    /* Couleurs d'état */
    --palette-green: rgb(16 185 129);
    --palette-orange:      rgb(255, 142, 81);
    --palette-red:         rgb(239, 68, 68);

    /* Transparences */
    --palette-alpha-dark:  rgba(0, 0, 0, 0.85);
	--palette-alpha-grey:  rgba(0, 0, 0, 0.5);
    --palette-alpha-light: rgba(0, 0, 0, 0.3);
    --palette-alpha-white: rgba(243, 247, 255, 0.85);
	--palette-alpha-blue: rgba(88, 140, 255, 0.3);

    /* 2. SÉMANTIQUES */
    
    /* A. Marque IFS */
    --brand-primary:   var(--palette-blue-main);
    --brand-secondary: var(--palette-blue-dark);
    --brand-accent:    var(--palette-coral);

    /* A. Pôles IFS */
    --if-institut:     var(--palette-blue-light);
    --if-langue:       var(--palette-amber);
    --if-culture:      var(--palette-coral);
    --if-etudes:       var(--palette-mint);
  
    /* Corail */
    --accent-coral:        var(--palette-coral);
    --accent-coral-muted:  var(--palette-coral-light);
    --accent-coral-subtle: var(--palette-coral-pale);
	--accent-coral-dark: var(--palette-coral-dark);

    /* Ambre */
    --accent-amber:        var(--palette-amber);
    --accent-amber-muted:  var(--palette-amber-light);
    --accent-amber-subtle: var(--palette-amber-pale);
	--accent-amber-dark: var(--palette-amber-dark);

    /* Menthe */
    --accent-mint:         var(--palette-mint);
    --accent-mint-muted:   var(--palette-mint-light);
    --accent-mint-subtle:  var(--palette-mint-pale);
	--accent-mint-dark:  var(--palette-mint-dark);

    /* C. Textes */
    --text-main:       var(--palette-ink);
    --text-secondary:  var(--palette-grey-dark);
    --text-inverse:    rgb(255, 255, 255);
    --text-link:       var(--palette-blue-main);
    --text-link-hover: var(--palette-blue-dark);
    --text-meta:       var(--palette-grey-silver);
	--text-overlay-dark: var(--palette-alpha-dark);
	--text-overlay-grey: var(--palette-alpha-grey);

    /* D. Fonds */
    --bg-page:           rgb(255, 255, 255);
    --bg-surface:        var(--palette-grey-pale);
    --bg-surface-strong: var(--palette-grey-silver);
    --bg-highlight:      var(--palette-blue-pale);

    /* E. Bordures */
    --border-subtle:   var(--palette-blue-pale);
    --border-main:     var(--palette-blue-light);
    --border-focus:    var(--palette-blue-main);
	--border-dark:    var(--palette-blue-dark);
    --border-overlay-dark:     var(--palette-alpha-dark);

    /* F. Feedback */
    --status-success:  var(--palette-green);
    --status-warning:  var(--palette-orange);
    --status-error:    var(--palette-red);

    /* G. Overlays */
    --overlay-dark:    var(--palette-alpha-dark);
    --overlay-dim:     var(--palette-alpha-light);
    --overlay-white:   var(--palette-alpha-white);
	--overlay-blue:	   var(--palette-alpha-blue);
	
	/* H. Masques progressifs */
    --mask-fade-left:     linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(17,19,23,0.9) 100%);	
	--mask-fade-right:    linear-gradient(-90deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(17,19,23,0.9) 100%);	
	--mask-fade-top:      linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(17,19,23,0.9) 100%);
	--mask-fade-bottom:   linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(17,19,23,0.9) 100%);
  
    /* Pont Elementor */
    --e-global-color-primary: var(--brand-primary);
    --e-global-color-secondary: var(--brand-secondary);
    --e-global-color-text: var(--text-main);
    --e-global-color-accent: var(--brand-accent);

    /* Pont Astra */
    --ast-global-color-0: var(--brand-primary);
    --ast-global-color-1: var(--brand-secondary);
    --ast-global-color-2: var(--text-main);
    --ast-global-color-3: var(--text-secondary);
	--ast-global-color-4: var(--palette-blue-light);
	--ast-global-color-5: var(--palette-blue-pale);
    
	/* Pont Wordpress */
	--wp-components-color-accent: var(--brand-primary);
	--wp-components-color-accent-darker-10: var(--brand-secondary);
	--wp-components-color-accent-inverted: var(--text-inverse);

    /* 3. TYPOGRAPHIE */
    --font-main: 'Marianne', 'Helvetica Neue', Arial, sans-serif;
    
    /* Titres */
	--display-sz: clamp(3rem, calc(6vw + 1rem), 5.5rem);
	--h1-sz: clamp(2rem, calc(5vw + 1rem), 3.5rem);
	--h2-sz: clamp(1.75rem, calc(4vw + 1rem), 2.75rem);
	--h3-sz: clamp(1.5rem, calc(3vw + 0.5rem), 2.25rem);
	--h4-sz: clamp(1.25rem, calc(2vw + 0.5rem), 1.75rem);
	--h5-sz: clamp(1.125rem, calc(1vw + 0.75rem), 1.375rem);
	--h6-sz: clamp(1rem, calc(0.5vw + 0.875rem), 1.125rem);
	
	--display-lh: 0.9;
    --h1-lh: 1.1; 
	--h2-lh: 1.2; 
	--h3-lh: 1.25;
    --h4-lh: 1.3; 
	--h5-lh: 1.3;
	--h6-lh: 1.3;
    
    /* Textes */
    --lead-sz: 1.125rem; 
	--body-sz: 1rem;
    --small-sz: clamp(0.875rem, calc(0.5vw + 0.75rem), 0.9375rem);
	--xs-sz: 0.75rem;
	
	--lead-lh: 1.3;
    --body-lh: 1.5;
    --small-lh: 1.5;
    --xs-lh: 1.5;

    /* 4. UTILITAIRES ET STRUCTURE */
	/* Espacements */
    --space-4: 0.25rem; --space-8: 0.5rem; --space-16: 1rem; --space-24: 1.5rem;
    --space-32: 2rem; --space-48: 3rem; --space-64: 4rem;

	/* Ombres */
    --shadow-subtle: 0px 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-floating: 0px 10px 20px rgba(0, 0, 0, 0.12);
	--shadow-flat: 6px 6px 0px 0px var(--overlay-blue);
	
    /* Bordures */
    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --radius-none: 0px !important;

    --container-max: 1280px;
    --container-narrow: 800px;
    --gutter: var(--space-24);
	
	/* Transitions */
    --timing-fast: 150ms;
    --timing-base: 250ms;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* RESET */
body { 
    font-family: var(--font-main); 
    line-height: var(--body-lh); 
    background-color: var(--bg-page);
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 { 
    font-family: var(--font-main); 
    margin-top: 0; 
    margin-bottom: var(--space-24); 
    font-weight: 700;
}

h1 { font-size: var(--h1-sz); line-height: var(--h1-lh); }
h2 { font-size: var(--h2-sz); line-height: var(--h2-lh); letter-spacing: -0.01em; }
h3 { font-size: var(--h3-sz); line-height: var(--h3-lh); }
h4 { font-size: var(--h4-sz); line-height: var(--h4-lh); }
h5 { font-size: var(--h5-sz); font-weight: 500; }
h6 { font-size: var(--h6-sz); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

p { font-size: var(--body-sz); margin-bottom: var(--space-16); }

a { 
    transition: all var(--timing-fast) var(--ease-in-out); 
    text-decoration: none; 
    color: var(--brand-secondary);
}
a:hover { text-decoration: underline; color: var(--brand-primary); }

/* Accessibilité */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Suppression globale des arrondis sur les éléments natifs */
button, input, select, textarea, 
.elementor-button, .elementor-post, .elementor-widget-container,
.elementor-widget-wrap, .ast-search-menu-icon.slide-search input.search-field {
    border-radius: var(--radius-none);
}

/* UTILITAIRES */
.text-lead     { font-size: var(--lead-sz); }
.text-small    { font-size: var(--small-sz); }
.text-meta     { font-size: var(--xs-sz); text-transform: uppercase; letter-spacing: 0.05em; }
.color-primary { color: var(--brand-primary) !important; }
.color-accent  { color: var(--brand-accent) !important; }
.bg-surface    { background-color: var(--bg-surface) !important; }