/* ========================================
   Page locale — Conseil en organisation à Besançon (SEO-BACKLOG SEO-018)
   Réutilise les variables et composants du design system (styles.css) :
   pas de nouvelle palette, pas de nouveau composant bouton/carte.
======================================== */

.cob-main {
    margin-top: 80px; /* compense la nav fixed, comme .legal-page */
}

.cob-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.cob-container--narrow {
    max-width: var(--container-narrow);
}

.cob-hero {
    padding: var(--space-3xl) var(--section-padding-x) var(--space-2xl);
    text-align: center;
    background: var(--gris-perle);
}

.cob-hero h1 {
    margin: 1rem 0 1.5rem;
    font-size: var(--text-hero);
}

.cob-lead {
    font-size: var(--text-large);
    color: var(--gris-moyen);
    line-height: var(--leading-relaxed);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.cob-section {
    padding: var(--space-3xl) var(--section-padding-x);
    background: white;
}

.cob-section--alt {
    background: var(--gris-perle);
}

.cob-section p {
    margin-bottom: 1.25rem;
    line-height: var(--leading-relaxed);
}

.cob-section p:last-child {
    margin-bottom: 0;
}

.cob-aside {
    font-size: var(--text-small);
    color: var(--gris-moyen);
}

/* Seule prise de parole à la première personne de la page (le reste est à la
   voix du cabinet) : distinguée par l'italique et un filet, pas par un
   encadré ou un fond coloré. Pas de blockquote : ce n'est pas une citation
   d'un tiers. */
.cob-personal {
    font-style: italic;
    color: var(--gris-fonce);
    border-left: 3px solid var(--gris-border);
    padding-left: 1.25rem;
    margin-top: 1.5rem;
}

.cob-testimonials {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cob-cases {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cob-case {
    background: white;
    border: 2px solid var(--gris-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
}

.cob-section--alt .cob-case {
    background: white;
}

.cob-case h3 {
    font-size: var(--text-h3);
    margin-bottom: 0.75rem;
}

.cob-case p {
    margin-bottom: 0;
    color: var(--gris-moyen);
}

@media (max-width: 768px) {
    .cob-hero {
        padding: var(--space-2xl) var(--space-md);
    }

    .cob-section {
        padding: var(--space-2xl) var(--space-md);
    }

    .cob-case {
        padding: 1.5rem;
    }
}