:root {
    --primary:          #368efe;
    --secondary:        #374766;
    --tertiary:         #101624;

    --primary-light:    color-mix(in srgb, var(--primary), white 50%);
    --primary-dark:     color-mix(in srgb, var(--primary), black 40%);

    --secondary-light:  color-mix(in srgb, var(--secondary), white 85%);
    --secondary-dark:   color-mix(in srgb, var(--secondary), black 10%);

    --tertiary-light:   color-mix(in srgb, var(--tertiary), white 85%);
    --tertiary-dark:    color-mix(in srgb, var(--tertiary), black 20%);

    --background:       #f3f3f2;

    --text:             var(--tertiary);
    --text-muted:       color-mix(in srgb, var(--tertiary), white 45%);

    --success:          #4F7942;
    --danger:           #B03A2E;
    --warning:          #D4A017;
    --info:             #5C7285;

    --border:           color-mix(in srgb, var(--secondary), black 8%);
    --card-bg:          var(--secondary);

    --shadow:           0 1rem 3rem -1rem rgba(34, 34, 34, 0.08);
    --shadow-hover:     0 2rem 4rem -1.5rem rgba(34, 34, 34, 0.14);

    --font-title:       "Merriweather", Georgia, serif;
    --font-text:        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- TON MINI RESET COMPACT --- */
* { margin: 0; padding: 0; }
html { box-sizing: border-box; font-size: 62.5%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; font-family: var(--font-title); color: var(--text); }
ul { list-style: none; }
*, *::before, *::after { box-sizing: inherit; }
img, video { max-width: 100%; display: block; }
table { border-collapse: collapse; border-spacing: 0; }
a {color: inherit; text-decoration: none;}

/* --- GLOBAL STYLES --- */
body {
    font-family: var(--font-text);
    background-color: var(--background);
    color: var(--text);
    font-size: 2rem; /* 16px par défaut */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
hr{
	margin: 20px 0;
}
.success	{ color: var(--success); font-weight: 800; }
.danger		{ color: var(--danger);  font-weight: 800; }
.warning	{ color: var(--warning); font-weight: 800; }
.info		{ color: var(--info);    font-weight: 800; }

.container{
	margin: 0 auto;
	padding: 0 15px 20px;
}
/*			Small		*/
@media screen and (min-width:576px) {
	.container{
		max-width: 540px;
	}
}

/*			Medium		*/
@media screen and (min-width:768px) {
	.container{
		max-width: 720px;
	}
}

/*			Large		*/
@media screen and (min-width:992px) {
	.container{
		max-width: 960px;
	}
}

/*			Extra large		*/
@media screen and (min-width:1200px) {
	.container{
		max-width: 1140px;
	}
}

/*			Extra extra large		*/
@media screen and (min-width:1400px) {
	.container{
		max-width: 1320px;
	}
}