/* =========================================
   ADAPTACCESSOIRES — BASE
   ========================================= */


/* =========================================
   RESET
   ========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================
   HTML / BODY
   ========================================= */

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--aa-background);
    color: var(--aa-text);

    font-family: var(--aa-font-body);
    font-size: var(--aa-text-md);

    line-height: var(--aa-line-normal);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================
   IMAGES
   ========================================= */

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* =========================================
   LINKS
   ========================================= */

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--aa-transition-fast),
        opacity var(--aa-transition-fast);
}

a:hover {
    color: var(--aa-primary);
}


/* =========================================
   HEADINGS
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: var(--aa-font-heading);
    font-weight: 700;

    line-height: var(--aa-line-heading);

    color: var(--aa-plum);
}

h1 {
    font-size: var(--aa-heading-xl);
}

h2 {
    font-size: var(--aa-heading-lg);
}

h3 {
    font-size: var(--aa-heading-md);
}

h4 {
    font-size: var(--aa-heading-sm);
}


/* =========================================
   PARAGRAPHS
   ========================================= */

p {
    margin-top: 0;
}


/* =========================================
   LISTS
   ========================================= */

ul,
ol {
    margin-top: 0;
}


/* =========================================
   BUTTONS / FORM ELEMENTS
   ========================================= */

button,
input,
textarea,
select {
    font-family: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}


/* =========================================
   FOCUS
   ========================================= */

:focus-visible {
    outline: 3px solid var(--aa-secondary);
    outline-offset: 3px;
}


/* =========================================
   SELECTION
   ========================================= */

::selection {
    background: var(--aa-plum);
    color: var(--aa-white);
}


/* =========================================
   CONTAINER
   ========================================= */

.aa-container {
    width: min(
        calc(100% - 40px),
        var(--aa-container)
    );

    margin-inline: auto;
}

.aa-container--narrow {
    width: min(
        calc(100% - 40px),
        var(--aa-container-narrow)
    );

    margin-inline: auto;
}


/* =========================================
   SECTION
   ========================================= */

.aa-section {
    padding-block: var(--aa-space-13);
}

.aa-section--soft {
    background: var(--aa-background);
}

.aa-section--dark {
    background: var(--aa-dark);
    color: var(--aa-dark-text);
}


/* =========================================
   SECTION HEADER
   ========================================= */

.aa-section-header {
    max-width: 760px;

    margin-inline: auto;
    margin-bottom: var(--aa-space-10);

    text-align: center;
}


/* =========================================
   SECTION EYEBROW
   ========================================= */

.aa-section-header__eyebrow {
    display: block;

    margin-bottom: var(--aa-space-3);

    color: var(--aa-secondary);

    font-size: var(--aa-text-sm);
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================
   SECTION TITLE
   ========================================= */

.aa-section-header__title {
    margin-bottom: var(--aa-space-4);

    color: var(--aa-plum);
}


/* =========================================
   SECTION DESCRIPTION
   ========================================= */

.aa-section-header__description {
    margin-bottom: 0;

    color: var(--aa-text-light);
}