/*
Theme Name:   SME Nettoyage
Theme URI:    https://www.smenettoyage.fr
Description:  Site vitrine SME Nettoyage — entreprise de nettoyage professionnel. Thème standalone avec design React intégré.
Author:       SME Nettoyage
Author URI:   https://www.smenettoyage.fr
Version:      2.7.0
Text Domain:  sme-nettoyage
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags:         business, cleaning, react, one-page
*/

:root {
        /* Brand tokens — miroirs des Global Settings Elementor */
        --sme-blue:        #0891B2;
        --sme-blue-dark:   #066E8A;
        --sme-blue-soft:   #E6F4F8;
        --sme-green:       #10B981;
        --sme-green-dark:  #0E9E70;
        --sme-green-soft:  #E7F8F1;
        --sme-white:       #FFFFFF;
        --sme-grey-50:     #F8FAFC;
        --sme-grey-100:    #F1F5F9;
        --sme-grey-200:    #E2E8F0;
        --sme-grey-400:    #94A3B8;
        --sme-grey-600:    #475569;
        --sme-grey-900:    #0F172A;

        --sme-radius-sm:   8px;
        --sme-radius:      16px;
        --sme-radius-lg:   24px;
        --sme-shadow-sm:   0 2px 8px rgba(15, 23, 42, 0.06);
        --sme-shadow:      0 8px 24px rgba(15, 23, 42, 0.08);
        --sme-shadow-lg:   0 24px 48px -12px rgba(15, 23, 42, 0.18);

        --sme-font-head:   'Poppins', system-ui, sans-serif;
        --sme-font-body:   'Inter', system-ui, sans-serif;

        --sme-container:   1200px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
        margin: 0;
        font-family: var(--sme-font-body);
        color: var(--sme-grey-900);
        background: var(--sme-white);
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--sme-font-head);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin: 0;
        color: var(--sme-grey-900);
        text-wrap: balance;
    }
    h1 { font-size: clamp(2.4rem, 4.5vw, 3.75rem); }
    h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
    h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
    p  { margin: 0; }
    a  { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }

    .sme-container {
        max-width: var(--sme-container);
        margin-inline: auto;
        padding-inline: clamp(1.25rem, 4vw, 2rem);
    }

    .eyebrow {
        font-family: var(--sme-font-head);
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--sme-blue);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .eyebrow::before {
        content: "";
        width: 28px;
        height: 2px;
        background: var(--sme-green);
        border-radius: 2px;
    }
    .eyebrow.green { color: var(--sme-green); }
    .eyebrow.green::before { background: var(--sme-blue); }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--sme-font-head);
        font-weight: 600;
        font-size: 0.95rem;
        padding: 14px 26px;
        border-radius: var(--sme-radius);
        border: none;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: all 0.2s ease;
        cursor: pointer;
        text-decoration: none;
    }
    .btn-primary {
        background: var(--sme-blue);
        color: var(--sme-white);
        box-shadow: 0 6px 16px rgba(8, 145, 178, 0.25);
    }
    .btn-primary:hover {
        background: var(--sme-blue-dark);
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(8, 145, 178, 0.32);
    }
    .btn-secondary {
        background: var(--sme-green);
        color: var(--sme-white);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
    }
    .btn-secondary:hover {
        background: var(--sme-green-dark);
        transform: translateY(-1px);
    }
    .btn-ghost {
        background: transparent;
        color: var(--sme-grey-900);
        border: 1.5px solid var(--sme-grey-200);
    }
    .btn-ghost:hover {
        border-color: var(--sme-blue);
        color: var(--sme-blue);
    }
    .btn .arrow {
        transition: transform 0.2s ease;
    }
    .btn:hover .arrow {
        transform: translateX(3px);
    }

    /* Section spacing */
    section { padding-block: clamp(4rem, 8vw, 7rem); }
    section + section { padding-top: 0; }
    .section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

    /* Cards */
    .sme-card {
        background: var(--sme-white);
        border-radius: var(--sme-radius);
        padding: 2rem;
        box-shadow: var(--sme-shadow-sm);
        border: 1px solid var(--sme-grey-100);
        transition: all 0.25s ease;
    }
    .sme-card:hover {
        box-shadow: var(--sme-shadow);
        transform: translateY(-3px);
        border-color: var(--sme-blue-soft);
    }

    /* Decorative logo SVG fallback */
    .sme-logo-text {
        display: inline-flex;
        flex-direction: column;
        line-height: 1;
        gap: 4px;
    }
    .sme-logo-text .sme-mark {
        font-family: var(--sme-font-head);
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: -0.02em;
        color: var(--sme-grey-900);
        position: relative;
    }
    .sme-logo-text .sme-mark::after {
        content: "";
        position: absolute;
        right: -10px;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sme-green);
    }
    .sme-logo-text .sme-sub {
        font-family: var(--sme-font-head);
        font-weight: 500;
        font-size: 0.9rem;
        letter-spacing: 0.18em;
        color: var(--sme-blue);
        text-transform: uppercase;
    }
    .sme-logo-text .sme-tag {
        font-family: var(--sme-font-body);
        font-size: 0.55rem;
        letter-spacing: 0.15em;
        color: var(--sme-grey-400);
        text-transform: uppercase;
        margin-top: 2px;
    }

    /* Image placeholder helper */
    .sme-image-zone {
        position: relative;
        background: linear-gradient(135deg, var(--sme-blue-soft), var(--sme-green-soft));
        border-radius: var(--sme-radius);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sme-grey-600);
    }
    image-slot {
        border-radius: var(--sme-radius);
        overflow: hidden;
    }

    /* Hero image desktop/mobile switch */
    .hero-img-mobile { display: none; }
    @media (max-width: 960px) {
        .hero-img-desktop { display: none !important; }
        .hero-img-mobile { display: block !important; }
    }


    /* Page transition */
    .page-enter {
        animation: pageEnter 0.4s ease;
    }
    @keyframes pageEnter {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--sme-grey-50); }
    ::-webkit-scrollbar-thumb {
        background: var(--sme-grey-200);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--sme-grey-400); }

    /* Skip-link accessibilité (rendu en haut du body, invisible jusqu'au focus) */
    .skip-link.screen-reader-text {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .skip-link.screen-reader-text:focus {
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        padding: 0.75rem 1rem;
        background: var(--sme-blue);
        color: var(--sme-white);
        z-index: 100000;
        border-radius: var(--sme-radius);
        text-decoration: none;
        font-weight: 600;
    }