/*
Theme Name:   Noveo Terrassement Lenoir
Template:     noveo-core
Description:  Thème enfant pour Guy Lenoir & Fils — Terrassement
Version:      1.0.0
Author:       Noveo
*/

/* ============================================
   VARIABLES — COULEURS & TYPOGRAPHIE
   ============================================ */
:root {
    /* Couleurs brand */
    --color-black:      #111111;
    --color-beige:      #f6f3ec;
    --color-yellow:     #f5c000;
    --color-white:      #ffffff;
    --color-brown:      #514b48;

    /* Polices */
    --font-heading:     'Montserrat', sans-serif;
    --font-tagline:     'Raleway', sans-serif;
    --font-body:        'Open Sans', sans-serif;
    --font-ui:          'Roboto', sans-serif;

    /* Tailles de texte */
    --fs-h1:            56px;
    --fs-h2:            48px;
    --fs-h3:            36px;
    --fs-h4:            20px;
    --fs-stat:          80px;
    --fs-body-lg:       18px;
    --fs-body:          16px;
    --fs-small:         14px;
    --fs-xsmall:        13px;
    --fs-tagline:       16px;

    /* Graisse */
    --fw-regular:       400;
    --fw-semibold:      600;
    --fw-bold:          700;
    --fw-extrabold:     800;

    /* Line heights */
    --lh-heading:       1.3;
    --lh-h1:            1.2;
    --lh-body:          1.5;

    /* Espacements */
    --padding-global:       64px;
    --padding-section-lg:   112px;
    --padding-section-md:   80px;
    --gap-section:          80px;
    --gap-card:             32px;

    /* Rayons */
    --radius-card:      32px;
    --radius-section:   64px;
    --radius-btn:       100px;

    /* Max width contenu */
    --max-width:        1280px;
}

/* ============================================
   BASE
   ============================================ */
.nl-section {
    width: 100%;
    box-sizing: border-box;
}

.nl-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ============================================
   TYPOGRAPHIE COMMUNE
   ============================================ */
.nl-tagline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-tagline);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-tagline);
    line-height: var(--lh-body);
    text-transform: uppercase;
    color: var(--color-brown);
    letter-spacing: 0;
}

.nl-tagline img {
    width: 20px;
    height: auto;
    flex-shrink: 0;
}

.nl-h2 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    color: var(--color-black);
    margin: 0;
}

.nl-h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--color-black);
    margin: 0;
}

.nl-body-lg {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    margin: 0;
}

.nl-body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0;
}

/* ============================================
   BOUTONS
   ============================================ */
.nl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 24px;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.nl-btn:hover {
    opacity: 0.85;
}

.nl-btn .nl-btn-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 50%;
}

.nl-btn--primary {
    background: var(--color-beige);
    color: var(--color-black);
}

.nl-btn--outline-yellow {
    background: transparent;
    color: var(--color-black);
    border-color: var(--color-yellow);
}

.nl-btn--outline-dark {
    background: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
    padding: 16px 24px;
}

.nl-btn--yellow {
    background: var(--color-yellow);
    color: var(--color-black);
    border-color: var(--color-yellow);
    padding: 16px 24px;
}

/* ============================================
   SECTION TITLE CENTRÉ
   ============================================ */
.nl-section-title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --padding-global: 32px;
        --padding-section-lg: 64px;
        --padding-section-md: 48px;
        --fs-h1: 40px;
        --fs-h2: 36px;
        --fs-h3: 28px;
        --fs-stat: 56px;
    }
}

@media (max-width: 768px) {
    :root {
        --padding-global: 20px;
        --padding-section-lg: 48px;
        --padding-section-md: 40px;
        --fs-h1: 32px;
        --fs-h2: 28px;
        --fs-h3: 24px;
        --fs-stat: 48px;
    }

    .nl-btn {
        width: 100%;
        justify-content: center;
    }
}