@charset "UTF-8";

/**
 * 08-home.css
 * ------------------------------------------------------------------
 * Styles spécifiques aux blocs de la page d'accueil :
 *   - Grille "valeur ajoutée"
 *   - Logos clients (marquee)
 *   - Accordéon de témoignages
 * ------------------------------------------------------------------
 */

/* ============================================================
   Valeur ajoutée — grille 3 × 2
   ============================================================ */
.ttl-valeur-item {
    padding: 40px 32px 40px 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.ttl-valeur-item:nth-child(3n) {
    border-right: none;
}

.ttl-valeur-item:nth-child(n + 4) {
    border-bottom: none;
}

.ttl-valeur-item:not(:nth-child(3n + 1)) {
    padding-left: 32px;
}

.ttl-valeur-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ttl-valeur-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--magenta);
    letter-spacing: 0.12em;
}

.ttl-valeur-rule {
    height: 1px;
    background: var(--line);
    flex: 1;
}

.ttl-valeur-title {
    font-size: 24px;
    margin: 0 0 12px;
}

.ttl-valeur-body {
    color: var(--ink-soft);
    font-size: 14.5px;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .ttl-valeur-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .ttl-valeur-item {
        border-right: none !important;
        padding: 32px 16px !important;
    }

    .ttl-valeur-item:nth-child(odd) {
        border-right: 1px solid var(--line) !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .ttl-valeur-grid {
        grid-template-columns: 1fr !important;
    }

    .ttl-valeur-item {
        border-right: none !important;
        padding-left: 0 !important;
    }
}

/* ============================================================
   Logos clients marquee
   ============================================================ */
.ttl-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 8px;
    color: var(--marine-soft);
    white-space: nowrap;
    font-family: var(--font-body);
    opacity: 0.85;
    line-height: 1;
}

.ttl-logo-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* ============================================================
   Témoignages : accordéon
   ============================================================ */
.ttl-testimonial-tab {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    cursor: pointer;
    font-size: 18px;
    color: var(--marine-soft);
    letter-spacing: -0.01em;
    transition: color var(--t-fast);
    position: relative;
}

.ttl-testimonial-tab.is-active {
    color: var(--ink);
}

.ttl-testimonial-tab.is-active::after {
    content: "●";
    position: absolute;
    right: 0;
    top: 28px;
    color: var(--magenta);
}

.ttl-testimonial-tab .ttl-num {
    display: inline-block;
    width: 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}

.ttl-testimonial-tab .ttl-role {
    display: block;
    margin-left: 32px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 0;
}