/* Styles extraits de page-values.php — servis en fichier cacheable (voir colibris_enqueue_template_css). */

/* ─────────────────────────────────────────────
   PAGE VALUES,  styles propres à ce template
───────────────────────────────────────────── */

/* ── Grille section headers (partagé) ── */
.values-section-header {
    text-align: center;
    margin-bottom: 56px;
}
.values-section-header__title {
    font-size: clamp(1.75rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: #1a1612;
    margin: 0 0 14px;
    line-height: 1.25;
}
.values-section-header__subtitle {
    font-size: 1.05rem;
    color: #6b6460;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Grilles ── */
.values-grid { padding: 80px 24px 96px; }
.values-grid__inner, .values-pratique__inner, .values-trois-mots__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.values-trois-mots__inner { max-width: 1100px; }
.values-pratique { padding: 80px 24px 96px; }
.values-trois-mots { padding: 80px 24px 96px; }

.values-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.values-pratique__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.values-trois-mots__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .values-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .values-pratique__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .values-trois-mots__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .values-grid__cards { grid-template-columns: 1fr; }
}

/* ── basic-card overrides communs aux 3 sections ── */
.values-value-card,
.values-pratique-card,
.values-trois-mots-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(26,22,18,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.values-value-card:hover,
.values-pratique-card:hover,
.values-trois-mots-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26,22,18,0.1);
}

/* 6 valeurs */
.values-value-card { padding: 36px 32px; }
.values-value-card .basic-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.values-value-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--card-accent, #1a1612);
    margin: 0;
    line-height: 1.3;
}
.values-value-card .basic-card__text {
    font-size: 0.9rem;
    color: #6b6460;
    line-height: 1.7;
    margin: 0;
}
.values-value-card__points {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.values-value-card__point {
    font-size: 0.82rem;
    color: #6b6460;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.values-value-card__point::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card-accent, #487BFF);
    flex-shrink: 0;
}

/* En pratique,  image + contenu */
.values-pratique-card .basic-card__media {
    height: 200px;
    overflow: hidden;
}
.values-pratique-card .basic-card__media-image {
    transition: transform 0.5s ease;
}
.values-pratique-card:hover .basic-card__media-image {
    transform: scale(1.04);
}
.values-pratique-card .basic-card__content {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.values-pratique-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1612;
    margin: 0;
    line-height: 1.3;
}
.values-pratique-card .basic-card__text {
    font-size: 0.9rem;
    color: #6b6460;
    line-height: 1.7;
    margin: 0;
}

/* Trois mots */
.values-trois-mots-card { padding: 40px 36px; }
.values-trois-mots-card .basic-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.values-trois-mots-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1612;
    margin: 0;
    line-height: 1.2;
}
.values-trois-mots-card .basic-card__text {
    font-size: 0.9rem;
    color: #6b6460;
    line-height: 1.7;
    margin: 0;
}

/* Réassurance,  accent couleur */
.values-reassurance .reassurance-section__block-title {
    color: #BA078C;
}
.values-reassurance .reassurance-section__block-title::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #BA078C;
    margin-bottom: 14px;
}
.values-reassurance .reassurance-section__block--odd .reassurance-section__block-title {
    color: #487BFF;
}
.values-reassurance .reassurance-section__block--odd .reassurance-section__block-title::before {
    background: #487BFF;
}

/* Manifesto override */
.values-manifesto .manifesto-banner__text {
    font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
    font-style: italic;
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .values-grid, .values-pratique, .values-trois-mots { padding: 64px 20px; }
    .values-value-card { padding: 28px 24px; }
    .values-pratique-card .basic-card__content { padding: 20px 24px 24px; }
    .values-trois-mots-card { padding: 32px 28px; }
}

/* Durcissement anti-débordement mobile (items revue #213 « manifeste » / #214
   « carte ». Le garde-fou global body{overflow-x:hidden} clippe déjà le scroll,
   mais on empêche ici tout élément de dépasser la largeur (mot long, fallback de
   police iOS sur Comic Sans, grille interne). */
@media (max-width: 767px) {
    .values-trois-mots,
    .values-grid,
    .values-pratique,
    .values-manifesto,
    .values-trois-mots__inner,
    .values-grid__inner,
    .values-trois-mots__grid,
    .values-grid__cards { max-width: 100%; }

    .values-trois-mots-card,
    .values-value-card,
    .values-section-header__title,
    .values-section-header__subtitle,
    .values-manifesto .manifesto-banner__text {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}