@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Source+Sans+3:wght@600;700;800&display=swap');

:root {
    /* --- Palette RD Couverture Élagage --- */
    --couleur-primaire: 30 86 49;             /* #1E5631 - vert sapin */
    --couleur-primaire-hover: 20 61 34;       /* #143D22 - vert profond */
    --couleur-primaire-clair: 232 240 234;    /* #E8F0EA - vert très clair (fond neutre) */

    /* Vert sauge — marie le sapin et apporte un contraste doux pour casser le blanc */
    --couleur-sauge: 168 191 154;             /* #A8BF9A - sauge medium (bordures, accents) */
    --couleur-sauge-clair: 224 233 212;       /* #E0E9D4 - sauge pâle (fond de section) */

    --couleur-secondaire: 120 113 108;        /* #78716C - gris chaud */
    --couleur-secondaire-hover: 87 83 78;     /* #57534E */
    --couleur-secondaire-clair: 231 229 228;  /* #E7E5E4 - gris clair */

    --fond-doux: #faf8f4;                     /* fond beige très clair */
    --bois: #8a6a3a;                          /* accent bois/cuivre */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1c1917;
    -webkit-font-smoothing: antialiased;
}

/* Titres : Source Sans 3 — sobre, neutre, lisible (usage pro / institutionnel) */
.font-display {
    font-family: 'Source Sans 3', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.015em;
    font-feature-settings: "kern" 1;
}

/* --- HERO (nature, artisanat, confiance) --- */
.hero-eco {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    background-image:
        radial-gradient(700px 420px at 88% 8%, rgba(var(--couleur-sauge, 168 191 154), 0.22), transparent 55%),
        radial-gradient(900px 500px at 10% -10%, rgba(var(--couleur-primaire, 30 86 49), 0.10), transparent 60%),
        radial-gradient(700px 400px at 95% 110%, rgba(var(--couleur-primaire, 30 86 49), 0.06), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--fond-doux, #faf8f4) 100%);
}

.hero-eco::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(var(--couleur-primaire), 0.05) 0, transparent 1.5px),
        radial-gradient(circle at 78% 60%, rgba(var(--couleur-primaire), 0.045) 0, transparent 1.5px);
    background-size: 42px 42px, 38px 38px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* --- Sections --- */
.section-soft {
    background-color: var(--fond-doux, #faf8f4);
    background-image:
        radial-gradient(900px 500px at 0% 40%, rgba(var(--couleur-sauge, 168 191 154), 0.18), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--fond-doux, #faf8f4) 100%);
}

.section-eco {
    background: #ffffff;
}

/* Fond sauge — casse le blanc et marque le rythme entre sections */
.section-sage {
    position: relative;
    background-color: rgb(var(--couleur-sauge-clair, 224 233 212));
    background-image:
        radial-gradient(900px 500px at 92% 10%, rgba(var(--couleur-primaire, 30 86 49), 0.08), transparent 60%),
        radial-gradient(600px 340px at 8% 95%, rgba(var(--couleur-sauge, 168 191 154), 0.35), transparent 60%),
        linear-gradient(180deg, rgb(var(--couleur-sauge-clair, 224 233 212)) 0%, #edf2e1 100%);
}

.section-sage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(var(--couleur-primaire), 0.05) 0, transparent 1.4px),
        radial-gradient(circle at 72% 70%, rgba(var(--couleur-primaire), 0.04) 0, transparent 1.4px);
    background-size: 46px 46px, 40px 40px;
    opacity: 0.55;
}

.section-sage > * {
    position: relative;
    z-index: 1;
}

.section-dark {
    /* Fond solide robuste (si un dégradé échoue la section reste lisible) */
    background-color: rgb(var(--couleur-primaire-hover, 20 61 34));
    background-image:
        radial-gradient(520px 280px at 100% 100%, rgba(var(--couleur-sauge, 168 191 154), 0.22), transparent 65%),
        radial-gradient(900px 400px at 10% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgb(var(--couleur-primaire-hover, 20 61 34)) 0%, #0f2817 100%);
    color: #f5f5f4;
}

/* --- Pill / badge d'accroche --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background-color: rgba(var(--couleur-primaire), 0.10);
    color: rgb(var(--couleur-primaire-hover));
    border: 1px solid rgba(var(--couleur-primaire), 0.22);
    font-weight: 600;
    font-size: 0.875rem;
}

.pill-primary {
    background-color: rgba(var(--couleur-primaire), 0.10);
    color: rgb(var(--couleur-primaire-hover));
    border-color: rgba(var(--couleur-primaire), 0.22);
}

.pill-dark {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f4;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Variante sauge : pour marquer une section sans rappeler le sapin plein */
.pill-sage {
    background-color: rgba(var(--couleur-sauge), 0.30);
    color: rgb(var(--couleur-primaire-hover));
    border-color: rgba(var(--couleur-sauge), 0.55);
}

/* --- Icon badges (cards) --- */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-color: rgba(var(--couleur-primaire), 0.10);
    color: rgb(var(--couleur-primaire));
    font-size: 22px;
}

.icon-badge-dark {
    background-color: rgb(var(--couleur-primaire));
    color: #ffffff;
}

.icon-badge-grey {
    background-color: rgba(var(--couleur-secondaire), 0.14);
    color: rgb(var(--couleur-secondaire-hover));
}

.icon-badge-sage {
    background-color: rgba(var(--couleur-sauge), 0.35);
    color: rgb(var(--couleur-primaire-hover));
    box-shadow: inset 0 0 0 1px rgba(var(--couleur-sauge), 0.6);
}

/* --- Cartes de service --- */
.service-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(28, 25, 23, 0.08);
    border-radius: 20px;
    padding: 28px;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    display: block;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(var(--couleur-primaire), 0.35);
    border-color: rgba(var(--couleur-primaire), 0.30);
}

.service-card .cta-arrow {
    transition: transform 200ms ease;
}

.service-card:hover .cta-arrow {
    transform: translateX(4px);
}

.service-card-dark {
    background: linear-gradient(160deg, rgb(var(--couleur-primaire)) 0%, rgb(var(--couleur-primaire-hover)) 100%);
    color: #f5f5f4;
    border-color: transparent;
}

.service-card-dark:hover {
    box-shadow: 0 24px 50px -20px rgba(var(--couleur-primaire-hover), 0.55);
}

.service-card-dark .icon-badge {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* --- Boutons --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 9999px;
    background-color: rgb(var(--couleur-primaire));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 12px 26px -10px rgba(var(--couleur-primaire), 0.55);
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 200ms ease;
}

.btn-primary:hover {
    background-color: rgb(var(--couleur-primaire-hover));
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -10px rgba(var(--couleur-primaire), 0.7);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 9999px;
    background-color: rgb(var(--couleur-secondaire-hover));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.35);
    transition: transform 150ms ease, background-color 150ms ease;
}

.btn-secondary:hover {
    background-color: #3f3b36;
    transform: translateY(-1px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 9999px;
    background: #ffffff;
    color: rgb(var(--couleur-primaire-hover));
    font-weight: 600;
    border: 1px solid rgba(var(--couleur-primaire), 0.25);
    transition: background 150ms ease, border-color 150ms ease;
}

.btn-ghost:hover {
    background: rgba(var(--couleur-primaire), 0.06);
    border-color: rgba(var(--couleur-primaire), 0.45);
}

.btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 9999px;
    background: #ffffff;
    color: rgb(var(--couleur-primaire-hover));
    font-weight: 700;
    transition: background 150ms ease, transform 150ms ease;
}

.btn-light:hover {
    background: #f5f5f4;
    transform: translateY(-1px);
}

/* --- Check list --- */
.check-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 10px;
    color: #3f3f46;
}

.check-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(var(--couleur-primaire), 0.15);
    color: rgb(var(--couleur-primaire-hover));
    font-size: 11px;
}

/* --- Note / encart --- */
.note {
    position: relative;
    background: #ffffff;
    border-left: none;
    border-radius: 10px;
    padding: 16px 20px 16px 22px;
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(
        180deg,
        rgb(var(--couleur-sauge)) 0%,
        rgb(var(--couleur-primaire)) 100%
    );
}

/* Carte "alternative" sauge pour casser le blanc des bloc-cartes */
.card-sage {
    background: linear-gradient(160deg, #ffffff 0%, rgb(var(--couleur-sauge-clair)) 100%);
    border: 1px solid rgba(var(--couleur-sauge), 0.55);
    border-radius: 18px;
    padding: 24px;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.card-sage:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -20px rgba(var(--couleur-primaire), 0.25);
    border-color: rgba(var(--couleur-primaire), 0.32);
}

/* --- Process steps --- */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: rgb(var(--couleur-primaire));
    color: #ffffff;
    font-weight: 700;
    font-family: 'Source Sans 3', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    box-shadow: 0 10px 22px -10px rgba(var(--couleur-primaire), 0.55);
}

/* --- Accent couleur titre --- */
.text-accent {
    color: rgb(var(--couleur-primaire));
}

.text-accent-deep {
    color: rgb(var(--couleur-primaire-hover));
}

/* Souligné décoratif pour les titres */
.heading-underline {
    position: relative;
    display: inline-block;
}

.heading-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(var(--couleur-sauge), 0.85) 0%,
        rgb(var(--couleur-primaire)) 55%,
        transparent 100%
    );
    border-radius: 9999px;
}

/* --- Utilities --- */
.lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.15);
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-rounded {
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28);
}

/* Effet "polaroid" pour images artisanat */
.img-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(20, 61, 34, 0.35);
}

.img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    pointer-events: none;
}

/* --- FAQ --- */
details.faq-item {
    border: 1px solid rgba(var(--couleur-sauge), 0.45);
    border-radius: 14px;
    padding: 16px 20px;
    background: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

details.faq-item[open] {
    border-color: rgba(var(--couleur-primaire), 0.30);
    box-shadow: 0 10px 30px -15px rgba(var(--couleur-primaire), 0.28);
}

details.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: #1c1917;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

details.faq-item summary::-webkit-details-marker {
    display: none;
}

details.faq-item summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: rgb(var(--couleur-primaire));
    transition: transform 200ms ease;
}

details.faq-item[open] summary::after {
    transform: rotate(180deg);
}

details.faq-item > *:not(summary) {
    margin-top: 12px;
    color: #57534e;
}

/* --- Stats --- */
.stat-card {
    text-align: center;
    padding: 20px;
}

.stat-number {
    font-family: 'Source Sans 3', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 2.75rem;
    color: rgb(var(--couleur-primaire));
    line-height: 1;
}

/* Chip "ville / zone d'intervention" */
.city-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, #ffffff 0%, rgb(var(--couleur-sauge-clair)) 100%);
    border: 1px solid rgba(var(--couleur-sauge), 0.55);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--couleur-primaire-hover));
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.city-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--couleur-primaire), 0.35);
    box-shadow: 0 8px 18px -12px rgba(var(--couleur-primaire), 0.35);
}

/* Sous-service pastille (variante sauge) */
.sub-service-chip {
    padding: 12px 8px;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: rgb(var(--couleur-primaire-hover));
    background: linear-gradient(160deg, #ffffff 0%, rgb(var(--couleur-sauge-clair)) 100%);
    border: 1px solid rgba(var(--couleur-sauge), 0.55);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.sub-service-chip.is-filled {
    background: linear-gradient(160deg, rgba(var(--couleur-primaire-clair), 1) 0%, rgba(var(--couleur-sauge), 0.35) 100%);
    border-color: rgba(var(--couleur-primaire), 0.22);
}

.sub-service-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(var(--couleur-primaire), 0.35);
}

/* --- Badge "artisan de confiance" --- */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 9999px;
    background: rgba(var(--couleur-primaire), 0.08);
    color: rgb(var(--couleur-primaire-hover));
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(var(--couleur-primaire), 0.18);
}

/* --- Décoration branche / feuilles SVG --- */
.leaf-decoration {
    position: relative;
}

.leaf-decoration::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 10 Q 40 40 60 70 Q 80 40 60 10 Z' fill='%231E5631' opacity='0.04'/%3E%3Cpath d='M30 80 Q 15 100 30 115 Q 45 100 30 80 Z' fill='%231E5631' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.8;
    pointer-events: none;
}

/* --- Scroll bar discret --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f5f4;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--couleur-primaire), 0.35);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--couleur-primaire), 0.55);
}