/* Main CSS - Base styles and layout */

/* Import tokens then component styles */
@import 'tokens.css';
@import 'components/navigation.css';
@import 'components/gallery.css';
@import 'components/modal.css';
@import 'components/white-zone.css';
@import 'components/back-to-top.css';
@import 'responsive.css';

/* Base styles */
html,
body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: var(--weight-regular);
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden; /* prevent horizontal scroll with full-bleed media */
}

/* Typography */
h1,
h2 {
    font-size: var(--text-title-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-title-xl);
    margin-bottom: 24px;
    font-family: var(--font-sans-alt);
    color: var(--color-text);
}

/* Container */
.container {
    max-width: var(--container-max);
    margin-left: var(--container-padding-x);
    margin-right: var(--container-padding-x);
    margin-top: var(--page-margin-top);
    margin-bottom: 0;
    width: auto;
    padding: 0;
    box-sizing: border-box;
}

/* Description text */
.desc {
    font-size: var(--text-body-lg);
    line-height: var(--leading-base);
    margin-bottom: 32px;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: var(--weight-extralight);
    max-width: 1300px;
    width: 100%;
}

/* Highlighted phrases - inherits all .desc styles but with custom font-weight */
.highlight-phrase {
    font-weight: 500;
    text-shadow: 0.7px 0 0 currentColor; /* Simule une graisse plus importante */
}

/* Services grid */
.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.services ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-body-lg);
    line-height: var(--leading-base);
    font-family: var(--font-sans);
    font-weight: var(--weight-extralight);
    color: var(--color-text);
    columns: 4;
    column-gap: 32px;
}

.services li {
    color: var(--color-text);
}

/* About section */
.about {
    margin-bottom: 48px;
    color: var(--color-text);
    padding-left: 35px;
    padding-right: 35px;
    box-sizing: border-box;
}