/* ==========================================================================
   Végécantines — Page d'accueil
   Bandeau d'accueil (section .vc-hero), deux colonnes :
     - à gauche, texte FIXE : module Texte .vc-hero__intro
       (<h1>Titre <span class="vc-light">sous-titre</span></h1> + paragraphe)
     - à droite, le SLIDER : module Divi « Carrousel de groupes » .vc-hero__carousel
       une slide = un Groupe .vc-hero__slide contenant
         .vc-hero__image (Image) + .vc-hero__legende (Bouton : texte + lien de la bulle)
   Pour ajouter une slide : dupliquer un Groupe dans le carrousel.
   Sélecteurs préfixés par .vc-hero : aucun !important.
   ========================================================================== */

.vc-hero.et_pb_section {
    padding: 48px 0 56px;
}
.vc-hero .vc-hero__row.et_pb_row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 56px;
    align-items: center;
    width: 84%;
    max-width: 1200px;
    padding: 0;
}
.vc-hero .vc-hero__row > .et_pb_column {
    width: auto;
    max-width: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Texte fixe (colonne de gauche)
   -------------------------------------------------------------------------- */
.vc-hero .vc-hero__intro h1,
.vc-hero .vc-hero__intro h2 {
    padding: 0 0 24px;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--vc-vert-fonce);
}
.vc-hero .vc-hero__intro .vc-light {
    display: block;
    margin-top: 4px;
    font-size: .78em;
    font-weight: 400;
}
.vc-hero .vc-hero__intro p {
    max-width: 560px;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--vc-texte);
}

/* --------------------------------------------------------------------------
   Slider (colonne de droite) : image + bulle CTA
   -------------------------------------------------------------------------- */
.vc-hero .vc-hero__carousel .et_pb_group.vc-hero__slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image";
    padding: 0;
}
.vc-hero .vc-hero__slide > .et_pb_module {
    width: auto;
    margin: 0;
}
.vc-hero .vc-hero__slide .vc-hero__image {
    grid-area: image;
}
.vc-hero .vc-hero__image .et_pb_image_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.vc-hero .vc-hero__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--vc-radius-l);
}

/* Bulle CTA : module Bouton Divi (.vc-hero__legende), texte + lien dans les
   champs du bouton. Posée en bas à gauche de l'image.
   Décalage par position relative : Divi force margin-bottom: 0 !important
   sur le dernier module d'un groupe (.et-last-child). */
.vc-hero .vc-hero__slide > .et_pb_button_module_wrapper {
    grid-area: image;
    align-self: end;
    justify-self: start;
    position: relative;
    top: -24px;
    left: 24px;
    z-index: 2;
    width: auto;
    margin: 0;
}
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende,
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende:hover {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .5em;
    padding: .6em 1.2em;
    font-family: var(--vc-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vc-vert-fonce);
    background-color: var(--vc-blanc);
    border: 0;
    border-radius: var(--vc-radius-pill);
    box-shadow: var(--vc-shadow);
    text-decoration: none;
    transition: color var(--vc-transition), background-color var(--vc-transition), transform var(--vc-transition);
}
/* Flèche → dessinée en SVG (l'icône Divi impose sa police et sa taille) */
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende::after {
    content: "";
    position: static;
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 12px;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 1;
    transform: none;
}
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende::before {
    display: none;
}
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende:hover,
.vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende:focus-visible {
    color: var(--vc-blanc);
    background-color: var(--vc-vert);
    transform: translateY(-2px);
}

/* Flèches : de part et d'autre de l'image */
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -40px; /* centré sur l'image (les points sont dessous) */
    transform: none;
    color: var(--vc-vert);
    background-color: var(--vc-blanc);
    border-radius: 50%;
    box-shadow: var(--vc-shadow);
    opacity: 1;
    cursor: pointer;
    transition: background-color var(--vc-transition), color var(--vc-transition);
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow_prev {
    left: -22px;
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow_next {
    right: -22px;
    left: auto;
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow .et-pb-icon {
    font-size: 26px;
    line-height: 1;
    color: inherit;
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow:hover,
.vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow:focus-visible {
    color: var(--vc-blanc);
    background-color: var(--vc-vert);
}

/* Glisser à la souris (includes/js/carousel.js) */
.vc-hero .vc-hero__carousel .et_pb_group_carousel_container {
    cursor: grab;
}
.vc-hero .vc-hero__carousel.vc-is-dragging .et_pb_group_carousel_container {
    cursor: grabbing;
    user-select: none;
}
.vc-hero .vc-hero__carousel:focus-visible {
    outline: 3px solid var(--vc-orange);
    outline-offset: 8px;
}

/* Points de navigation : sous l'image, orange pour la slide active */
.vc-hero .vc-hero__carousel .et_pb_group_carousel_dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #d6dcd8;
    cursor: pointer;
    transition: background-color var(--vc-transition), transform var(--vc-transition);
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_dot:hover {
    background-color: var(--vc-peche-fonce);
}
.vc-hero .vc-hero__carousel .et_pb_group_carousel_dot.et_pb_group_carousel_dot_active {
    background-color: var(--vc-orange);
    transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   Tablette / mobile : texte au-dessus, slider dessous
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .vc-hero.et_pb_section {
        padding: 28px 0 36px;
    }
    .vc-hero .vc-hero__row.et_pb_row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
        width: 90%;
    }
    .vc-hero .vc-hero__image img {
        height: auto;
        max-height: 420px;
        aspect-ratio: 16 / 10;
    }
    .vc-hero .vc-hero__slide > .et_pb_button_module_wrapper {
        top: -14px;
        left: 14px;
    }
    .vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow_prev {
        left: 8px;
    }
    .vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow_next {
        right: 8px;
    }
}
@media (max-width: 767px) {
    .vc-hero .vc-hero__carousel .et_pb_group_carousel_arrow {
        display: none;
    }
    .vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende,
    .vc-hero .vc-hero__slide .et_pb_module.et_pb_button.vc-hero__legende:hover {
        font-size: 14px;
    }
}

/* ==========================================================================
   Bloc « Vous êtes… » (section .vc-profils-section)
   Titre : module Texte .vc-profils__titre — Pastilles : [vc_profils] (includes/home.php)
   ========================================================================== */
.vc-profils-section.et_pb_section {
    padding: 48px 0 56px;
    background-color: var(--vc-blanc);
}
.vc-profils-section .et_pb_row {
    width: 90%;
    max-width: var(--vc-container);
    padding: 0;
}
.vc-profils-section .vc-profils__titre h2 {
    padding: 0 0 24px;
    font-size: var(--vc-fs-h2);
    text-align: center;
    color: var(--vc-vert-fonce);
}
.vc-profils-section ul.vc-pills {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: inherit;
}
.vc-profils-section ul.vc-pills li {
    padding: 0;
}

@media (max-width: 600px) {
    .vc-profils-section.et_pb_section {
        padding: 36px 0 40px;
    }

}

/* « Vous êtes… » sur deux lignes : 3 pastilles puis 2 (desktop).
   Le pseudo-élément ::after sert de saut de ligne après la 3e pastille. */
.vc-profils-section ul.vc-pills::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
}
.vc-profils-section ul.vc-pills li:nth-child(n+4) {
    order: 2;
}
/* Espacement vertical porté par les pastilles (et non par row-gap)
   pour que la ligne vide du saut n'ajoute pas d'espace */
@media (min-width: 768px) {
    .vc-profils-section ul.vc-pills {
        row-gap: 0;
        margin: -6px 0;
    }
    .vc-profils-section ul.vc-pills li {
        margin: 6px 0;
    }
}

/* Mobile : grille de 6 colonnes → 3 pastilles (2 col. chacune) puis 2 (3 col. chacune) */
@media (max-width: 767px) {
    .vc-profils-section ul.vc-pills {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
    }
    .vc-profils-section ul.vc-pills::after {
        display: none;
    }
    .vc-profils-section ul.vc-pills li {
        grid-column: span 2;
    }
    .vc-profils-section ul.vc-pills li:nth-child(n+4) {
        grid-column: span 3;
    }
    .vc-profils-section a.vc-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: .55em .5em;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        border-radius: 16px;
    }
}

/* ==========================================================================
   Bloc « Vous cherchez des ressources pour… » (section .vc-ressources-cles)
   Titre : module Texte .vc-ressources-cles__titre
   Cartes : modules Divi « Présentation » (Blurb) .vc-ressource-cle
            (picto + titre + texte ; lien du module = carte entière cliquable)
   Largeur des colonnes réglée dans Divi (4 par ligne, 2 en tablette, 1 en mobile).
   Pour ajouter une carte : dupliquer une colonne dans Divi.
   ========================================================================== */
.vc-ressources-cles.et_pb_section {
    row-gap: 0;
    padding: var(--vc-section-py) 0;
    background-color: var(--vc-peche);
}
.vc-ressources-cles .et_pb_row {
    width: 90%;
    max-width: var(--vc-container);
    padding: 0;
}
.vc-ressources-cles .vc-ressources-cles__titre h2 {
    padding: 0 0 32px;
    font-size: var(--vc-fs-h2);
    text-align: center;
    color: var(--vc-vert-fonce);
}

/* Les 4 colonnes ont la même hauteur : les cartes s'étirent */
.vc-ressources-cles .vc-ressources-cles__row.et_pb_row {
    flex-wrap: wrap;          /* passage à 2 puis 1 colonne (largeurs réglées dans Divi) */
    align-items: stretch;
    row-gap: 24px;
}
.vc-ressources-cles .vc-ressources-cles__row .et_pb_column {
    display: flex;
    flex-direction: column;
}

/* Carte */
.vc-ressources-cles .et_pb_blurb.vc-ressource-cle {
    flex: 1 1 auto;
    width: 100%;
    padding: 32px 24px 28px;
    text-align: center;
    background-color: var(--vc-blanc);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    cursor: pointer;
    transition: transform var(--vc-transition), box-shadow var(--vc-transition);
}
.vc-ressources-cles .et_pb_blurb.vc-ressource-cle:hover,
.vc-ressources-cles .et_pb_blurb.vc-ressource-cle:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--vc-shadow-hover);
}
/* Au clic : la carte « s'enfonce » */
.vc-ressources-cles .et_pb_blurb.vc-ressource-cle:active {
    transform: translateY(-2px) scale(.98);
    transition-duration: 80ms;
}

.vc-ressources-cles .vc-ressource-cle .et_pb_blurb_container {
    text-align: center;
}
.vc-ressources-cles .vc-ressource-cle .et_pb_blurb_content {
    row-gap: 16px;
}
/* 5 classes : passe devant la règle « largeur 100 % » générée par Divi */
.vc-ressources-cles .vc-ressources-cles__row .vc-ressource-cle .et_pb_main_blurb_image .et_pb_image_wrap img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    transition: transform var(--vc-transition);
}
.vc-ressources-cles .vc-ressources-cles__row .vc-ressource-cle:hover .et_pb_main_blurb_image .et_pb_image_wrap img {
    transform: scale(1.08);
}
.vc-ressources-cles .vc-ressource-cle h3.et_pb_module_header {
    padding: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.vc-ressources-cles .vc-ressource-cle h3.et_pb_module_header a {
    color: var(--vc-vert-fonce);
    text-decoration: none;
}
.vc-ressources-cles .vc-ressource-cle:hover h3.et_pb_module_header a {
    color: var(--vc-vert);
}
.vc-ressources-cles .vc-ressource-cle .et_pb_blurb_description p {
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--vc-texte);
}
.vc-ressources-cles .vc-ressource-cle a:focus-visible {
    outline: 3px solid var(--vc-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vc-ressources-cles .et_pb_blurb.vc-ressource-cle,
    .vc-ressources-cles .vc-ressources-cles__row .vc-ressource-cle .et_pb_main_blurb_image .et_pb_image_wrap img {
        transition: none;
        transform: none;
    }
}

/* Mobile : 2 cartes par ligne (largeur « téléphone » des colonnes réglée
   dans Divi à 1/2), cartes plus compactes */
@media (max-width: 600px) {
    .vc-ressources-cles .vc-ressources-cles__row.et_pb_row {
        row-gap: 12px;
        --row-gutter-horizontal: 12px;
    }
    .vc-ressources-cles .et_pb_blurb.vc-ressource-cle {
        padding: 18px 10px;
    }
    .vc-ressources-cles .vc-ressources-cles__row .vc-ressource-cle .et_pb_main_blurb_image .et_pb_image_wrap img {
        width: 72px;
        height: 72px;
    }
    .vc-ressources-cles .vc-ressource-cle .et_pb_blurb_content {
        row-gap: 10px;
    }
    .vc-ressources-cles .vc-ressource-cle h3.et_pb_module_header {
        padding-bottom: 6px;
        font-size: 16px;
        hyphens: auto;
    }
    .vc-ressources-cles .vc-ressource-cle .et_pb_blurb_description p {
        font-size: 14px;
        line-height: 1.45;
    }
}

/* ==========================================================================
   Bloc « À la une » (section .vc-une-section)
   Titre : module Texte .vc-une-section__titre — Cartes : [vc_a_la_une]
   Contenus choisis dans le champ « Contenus à la une » de la page d'accueil.
   ========================================================================== */
.vc-une-section.et_pb_section {
    row-gap: 0;
    padding: var(--vc-section-py) 0;
    background-color: var(--vc-blanc);
}
.vc-une-section .et_pb_row {
    width: 90%;
    max-width: var(--vc-container);
    padding: 0;
}
.vc-une-section .vc-une-section__titre h2 {
    padding: 0 0 32px;
    font-size: var(--vc-fs-h2);
    text-align: center;
    color: var(--vc-vert-fonce);
}

.vc-une-section ul.vc-une {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: inherit;
}
.vc-une-section ul.vc-une li.vc-une__item {
    padding: 0;
}
.vc-une-section a.vc-une__lien {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--vc-vert-fonce);
    text-decoration: none;
    transition: transform var(--vc-transition);
}
.vc-une-section .vc-une__media {
    display: block;
    overflow: hidden;
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    transition: box-shadow var(--vc-transition);
}
.vc-une-section .vc-une__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 400ms ease-out;
}
/* Contenu sans image mise en avant */
.vc-une-section .vc-une__img--vide {
    background-color: var(--vc-peche);
}
.vc-une-section .vc-une__titre {
    display: block;
    padding: 16px 8px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: color var(--vc-transition);
}

/* Survol / clic : la carte monte, l'image zoome légèrement */
.vc-une-section a.vc-une__lien:hover,
.vc-une-section a.vc-une__lien:focus-visible {
    transform: translateY(-6px);
}
.vc-une-section a.vc-une__lien:hover .vc-une__media,
.vc-une-section a.vc-une__lien:focus-visible .vc-une__media {
    box-shadow: var(--vc-shadow-hover);
}
.vc-une-section a.vc-une__lien:hover .vc-une__img {
    transform: scale(1.05);
}
.vc-une-section a.vc-une__lien:hover .vc-une__titre {
    color: var(--vc-vert);
}
.vc-une-section a.vc-une__lien:active {
    transform: translateY(-2px) scale(.98);
    transition-duration: 80ms;
}
.vc-une-section a.vc-une__lien:focus-visible {
    outline: 3px solid var(--vc-orange);
    outline-offset: 6px;
    border-radius: var(--vc-radius);
}

@media (prefers-reduced-motion: reduce) {
    .vc-une-section a.vc-une__lien,
    .vc-une-section .vc-une__img {
        transition: none;
        transform: none;
    }
}

@media (max-width: 980px) {
    .vc-une-section ul.vc-une {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .vc-une-section ul.vc-une {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

/* ==========================================================================
   Bloc « Nos ressources les + consultées » (section .vc-consultees-section)
   Titre : module Texte .vc-consultees-section__titre
   Cartes : [vc_ressources_consultees nombre="5"] (classement Post Views Counter)
   ========================================================================== */
.vc-consultees-section.et_pb_section {
    row-gap: 0;
    padding: var(--vc-section-py) 0;
    background-color: var(--vc-blanc);
}
.vc-consultees-section .et_pb_row {
    width: 90%;
    max-width: var(--vc-container);
    padding: 0;
}
.vc-consultees-section .vc-consultees-section__titre h2 {
    padding: 0 0 32px;
    font-size: var(--vc-fs-h2);
    text-align: center;
    color: var(--vc-vert-fonce);
}

.vc-consultees-section ul.vc-consultees {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: inherit;
}
.vc-consultees-section ul.vc-consultees li.vc-consultee {
    padding: 0;
}

/* Carte entière cliquable */
.vc-consultees-section a.vc-consultee__lien {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 20px 24px;
    color: var(--vc-texte);
    text-decoration: none;
    background-color: var(--vc-blanc);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    transition: transform var(--vc-transition), box-shadow var(--vc-transition);
}
.vc-consultees-section .vc-consultee__media {
    display: block;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: var(--vc-radius-s);
}
.vc-consultees-section .vc-consultee__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.vc-consultees-section .vc-consultee__img--vide {
    background-color: var(--vc-peche);
}
.vc-consultees-section .vc-consultee__titre {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vc-vert);
}
.vc-consultees-section .vc-consultee__texte {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vc-texte);
}
/* « Découvrir → » calé en bas de la carte */
.vc-consultees-section .vc-consultee__cta {
    margin-top: auto;
    padding-top: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vc-vert);
}

.vc-consultees-section a.vc-consultee__lien:hover,
.vc-consultees-section a.vc-consultee__lien:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--vc-shadow-hover);
}
.vc-consultees-section a.vc-consultee__lien:hover .vc-consultee__cta {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vc-consultees-section a.vc-consultee__lien:active {
    transform: translateY(-2px) scale(.98);
    transition-duration: 80ms;
}
.vc-consultees-section a.vc-consultee__lien:focus-visible {
    outline: 3px solid var(--vc-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vc-consultees-section a.vc-consultee__lien {
        transition: none;
        transform: none;
    }
}

/* 5 colonnes → 3 → 2 → 1 */
@media (max-width: 1100px) {
    .vc-consultees-section ul.vc-consultees {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .vc-consultees-section ul.vc-consultees {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (max-width: 480px) {
    .vc-consultees-section ul.vc-consultees {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Bloc « Comment faire évoluer votre cantine ? » (section .vc-etapes)
   Contenu statique, modifiable dans Divi :
     - 4 étapes = modules « Présentation » (Blurb) .vc-etape (picto + titre + texte)
       Les numéros 1, 2, 3, 4 sont ajoutés automatiquement dans l'ordre.
     - colonne .vc-etapes__col--cta : Image (feuille) + Texte + Bouton orange
   La grille est gérée ici (les largeurs de colonnes Divi sont ignorées).
   ========================================================================== */
.vc-etapes.et_pb_section {
    row-gap: 0;
    padding: var(--vc-section-py) 0;
    background-color: var(--vc-vert-clair);
}
.vc-etapes .et_pb_row {
    width: 90%;
    max-width: var(--vc-container);
    padding: 0;
}
.vc-etapes .vc-etapes__titre h2 {
    padding: 0 0 48px;
    font-size: var(--vc-fs-h2);
    text-align: center;
    color: var(--vc-vert-fonce);
}

/* Grille : 4 étapes + boîte CTA */
.vc-etapes .vc-etapes__row.et_pb_row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.15fr);
    column-gap: 64px;
    row-gap: 48px;
    align-items: start;
    max-width: 1320px;
    counter-reset: vc-etape;
}
.vc-etapes .vc-etapes__row .et_pb_column.vc-etapes__col {
    position: relative;
    width: auto;
    max-width: none;
    margin: 0;
}

/* Étape */
.vc-etapes .et_pb_blurb.vc-etape {
    text-align: center;
    counter-increment: vc-etape;
}
.vc-etapes .et_pb_blurb.vc-etape::before {
    content: counter(vc-etape);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--vc-blanc);
    background-color: var(--vc-vert);
    border-radius: 50%;
}
.vc-etapes .vc-etape .et_pb_blurb_content {
    row-gap: 20px;
}
.vc-etapes .vc-etape .et_pb_blurb_container {
    text-align: center;
}
/* 5 classes : passe devant la règle « largeur 100 % » générée par Divi */
.vc-etapes .vc-etapes__row .vc-etape .et_pb_main_blurb_image .et_pb_image_wrap img {
    width: auto;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
}
.vc-etapes .vc-etape h3.et_pb_module_header {
    padding: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vc-vert-fonce);
}
.vc-etapes .vc-etape .et_pb_blurb_description p {
    padding: 0;
    font-size: 17px;
    line-height: 1.45;
    color: var(--vc-texte);
}

/* Flèches entre les étapes 1→2, 2→3, 3→4 (à hauteur des pictos) */
.vc-etapes .vc-etapes__row .vc-etapes__col:nth-child(-n+3)::after {
    content: "";
    position: absolute;
    top: 152px;
    right: -56px;
    width: 48px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M0 8h44' stroke='%23343030' stroke-width='3'/%3E%3Cpath d='M36 1l10 7-10 7z' fill='%23343030'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

/* Boîte CTA */
.vc-etapes .vc-etapes__row .et_pb_column.vc-etapes__col--cta {
    align-self: center;
    align-items: center;
    text-align: center;
}
.vc-etapes .vc-etapes__col--cta .et_pb_module,
.vc-etapes .vc-etapes__col--cta .et_pb_button_module_wrapper {
    text-align: center;
}
.vc-etapes .vc-etapes__row .vc-etapes__feuille .et_pb_image_wrap img {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto;
}
.vc-etapes .vc-etapes__feuille {
    margin: 0 auto 16px;
}
.vc-etapes .vc-etapes__accroche p {
    padding: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vc-vert);
}
/* « Boîte CTA à faire bouger à la souris » */
.vc-etapes .vc-etapes__col--cta .et_pb_button_module_wrapper {
    transition: transform var(--vc-transition);
}
.vc-etapes .vc-etapes__col--cta .et_pb_button_module_wrapper:hover {
    transform: translateY(-4px);
}
.vc-etapes .vc-etapes__col--cta .et_pb_button_module_wrapper:active {
    transform: translateY(-1px) scale(.98);
    transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
    .vc-etapes .vc-etapes__col--cta .et_pb_button_module_wrapper {
        transition: none;
        transform: none;
    }
}

/* Tablette : étapes 2 par 2, CTA dessous, pas de flèches */
@media (max-width: 1100px) {
    .vc-etapes .vc-etapes__row.et_pb_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
    .vc-etapes .vc-etapes__row .et_pb_column.vc-etapes__col--cta {
        grid-column: 1 / -1;
    }
    .vc-etapes .vc-etapes__row .vc-etapes__col:nth-child(-n+3)::after {
        display: none;
    }
}
/* Mobile : une étape par ligne */
@media (max-width: 600px) {
    .vc-etapes .vc-etapes__row.et_pb_row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }
    .vc-etapes .vc-etapes__titre h2 {
        padding-bottom: 32px;
    }
    .vc-etapes .vc-etapes__row .vc-etape .et_pb_main_blurb_image .et_pb_image_wrap img {
        height: 90px;
    }
}