/* ==========================================================================
   Végécantines — Cartes, étapes, chiffres clés
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille de cartes
   <div class="vc-cards vc-cards--4"> … </div>  (--2, --3, --4 colonnes)
   -------------------------------------------------------------------------- */
.vc-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
    .vc-cards,
    .vc-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vc-cards,
    .vc-cards--2,
    .vc-cards--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Carte de base
   Classe à poser sur une Colonne Divi ou un Texte (« vc-card »),
   ou balisage HTML : <a class="vc-card" href="…">…</a>
   -------------------------------------------------------------------------- */
.vc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 24px;
    background: var(--vc-blanc);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    color: var(--vc-texte);
    text-decoration: none;
    transition: box-shadow var(--vc-transition), transform var(--vc-transition);
}
a.vc-card:hover,
.vc-card--link:hover {
    box-shadow: var(--vc-shadow-hover);
    transform: translateY(-4px);
    color: var(--vc-texte);
}

.vc-card__title,
.vc-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--vc-vert-fonce);
    padding: 0;
    margin: 0;
}

.vc-card__text,
.vc-card p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--vc-texte-doux);
    padding: 0;
}

.vc-card .vc-link-arrow {
    margin-top: auto;
    padding-top: 8px;
}

/* Carte avec visuel en tête (« À la une », ressources) */
.vc-card--image {
    padding: 0;
    overflow: hidden;
}
.vc-card--image .vc-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.vc-card--image .vc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease-out;
}
.vc-card--image:hover .vc-card__media img {
    transform: scale(1.04);
}
.vc-card--image .vc-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
    flex: 1;
}

/* Carte « picto » centrée (« Vous cherchez des ressources pour… ») */
.vc-card--picto {
    align-items: center;
    text-align: center;
    padding: 32px 22px;
    border-radius: var(--vc-radius-l);
}

.vc-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--vc-peche);
}
.vc-picto img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Étapes numérotées (« On vous accompagne à chaque étape »)
   <ol class="vc-steps"><li class="vc-step">…</li></ol>
   -------------------------------------------------------------------------- */
.vc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    counter-reset: vc-step;
}
@media (max-width: 980px) {
    .vc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vc-steps { grid-template-columns: 1fr; }
}

.vc-step {
    counter-increment: vc-step;
    text-align: center;
    padding: 0 8px;
}
.vc-step::before {
    content: counter(vc-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--vc-vert);
    color: var(--vc-blanc);
    font-weight: 700;
    font-size: 18px;
}
.vc-step img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 10px;
}
.vc-step__title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: var(--vc-vert-fonce);
    margin-bottom: 4px;
}
.vc-step p {
    font-size: 15px;
    color: var(--vc-texte-doux);
}

/* --------------------------------------------------------------------------
   Chiffres clés (« Nos cantines changent le monde »)
   <div class="vc-stats"><div class="vc-stat"><strong>+ de 7 milliards</strong><span>de repas…</span></div></div>
   -------------------------------------------------------------------------- */
.vc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 980px) {
    .vc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .vc-stats { grid-template-columns: 1fr; }
}

.vc-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.vc-stat__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--vc-vert);
}
.vc-stat strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--vc-vert-fonce);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.vc-stat span {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vc-texte-doux);
}

/* --------------------------------------------------------------------------
   Grille de cartes d'articles générée (shortcode à venir, cf. 123veggie)
   -------------------------------------------------------------------------- */
.article-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}