/* ═══ CSS TRACKING — Ne pas supprimer ═══ */
/* ════════════════════════════════════════ */

@layer pages {
/* ============================================================================
   KAPTIVIA PAGES v7.0.0
   ============================================================================
   Styles spécifiques aux pages/vues
   
   Note: Les styles .home__* sont définis dans Kaptivia-critical.css
         pour éviter le CLS (Cumulative Layout Shift)
   
   Sections :
   1. SECTION HEADER — En-têtes de section
   2. FAQ SECTION — Couleurs spécifiques
   ============================================================================ */

/* ─── SECTION HEADER ─── */

/* Header de section réutilisable */
.section-header {
    text-align: center;
    padding: 3px 0 var(--space-md);
    width: 100%;
}

.section-header__line {
    display: none;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
    margin: 0 auto var(--space-sm);
    border-radius: 2px;
}

.section-header__title {
    font-family: 'Montserrat', 'Avenir Next', system-ui, sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Header de section pour Nos services */
.catalog .section-header__line {
    background: linear-gradient(90deg, var(--green-400), var(--green-500));
}

.catalog .section-header__title {
    color: var(--green-600);
}


/* Header de section pour FAQ */
.faq-section .section-header__line {
    background: linear-gradient(90deg, #1c3bf5, #5f76ff);
}

.faq-section .section-header__title {
    color: #1c3bf5;
}
/* ─── CATALOG (Nos services) ─── */

.catalog {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--space-md) var(--space-xl);
    scroll-margin-top: var(--anchor-offset);
    background: var(--gray-50);
}

.catalog__container {
    max-width: var(--container-xl, 1536px);
    width: 100%;
}

.catalog-section {
    margin-bottom: var(--space-lg);
}

.catalog-section__header {
    margin-bottom: var(--space-md);
    text-align: center;
}

.catalog-section__title {
    font-family: 'Montserrat', 'Avenir Next', system-ui, sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 var(--space-xs);
}

.catalog-section__subtitle {
    font-size: 0.92rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.5;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── FAQ ─── */

/* ================================================================
   4.9b FAQ SECTION
   ================================================================ */

/* Structure partagée FAQ & Infos */
.faq-section,
.infos-section {
    width: 100%;
    padding: 0 1rem 3rem;
    scroll-margin-top: var(--anchor-offset);
    min-height: 100vh;
    min-height: 100dvh;
}

.faq-section__inner,
.infos-section__inner {
    max-width: var(--container-xl, 1536px);
    margin: 0 auto;
}

.faq-section__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(360px, 62vh, 760px);
}

.faq-section__inner #faq-panels {
    width: min(100%, 980px);
    margin: 0 auto;
}

.faq-section__actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(1rem, 2.2vw, 1.5rem);
}


.faq-section__subtitle,
.infos-section__subtitle {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-600);
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Couleurs spécifiques FAQ */
.faq-section {
    background-color: #ffffff;
    background-image: url('/images/fond-page-faq-desktop.avif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

/* FAQ tablette */
@media (max-width: 1024px) {
    .faq-section {
        background-image: url('/images/fond-page-faq-tablette.avif');
    }
}

/* FAQ mobile */
@media (max-width: 767px) {
    .faq-section {
        background-image: url('/images/fond-page-faq-mobile.avif');
    }
}
}