/**
 * Bandeau d'accueil.
 *
 * Les couleurs reprennent les variables du theme (themes/Boutique/assets/css/custom.css)
 * avec une valeur de repli, pour que le module reste presentable hors de ce theme.
 */

.ap-homebanner {
    margin: 0 0 50px;
}

.ap-homebanner__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ── Bloc de presentation ─────────────────────────────────────────────── */

.ap-homebanner__intro {
    background-color: #f1f1f1;
    padding: 45px 0;
}

.ap-homebanner__intro .ap-homebanner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.ap-homebanner__media {
    flex: 1 1 45%;
    min-width: 280px;
}

.ap-homebanner__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.ap-homebanner__content {
    flex: 1 1 45%;
    min-width: 280px;
}

.ap-homebanner__content--full {
    flex-basis: 100%;
}

.ap-homebanner__text {
    font-size: 17px;
    line-height: 1.7;
    color: #3a3a3a;
}

.ap-homebanner__text p {
    margin-bottom: 18px;
}

.ap-homebanner__text p:last-child {
    margin-bottom: 0;
}

.ap-homebanner__text strong,
.ap-homebanner__text b {
    color: var(--violet-primary, #505050);
}

.ap-homebanner__text a {
    color: var(--violet-primary, #505050);
    text-decoration: underline;
}

/* Encart « Vous etes professionnels ? » */

.ap-homebanner__pro {
    margin-top: 30px;
    text-align: center;
}

.ap-homebanner__pro-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 18px;
    color: #2b2b2b;
}

.ap-homebanner__pro-title span {
    color: var(--violet-primary, #505050);
    font-weight: 600;
}

.ap-homebanner__pro-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #4a4a4a;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color .25s linear;
}

.ap-homebanner__pro-btn:hover,
.ap-homebanner__pro-btn:focus {
    background-color: var(--violet-primary, #505050);
    color: #ffffff;
    text-decoration: none;
}

/* ── Bloc de raccourcis ───────────────────────────────────────────────── */

.ap-homebanner__actions {
    padding: 30px 0 0;
}

/* Une colonne de 50 % par bouton : chaque bouton garde sa taille naturelle et
   se centre dans sa colonne, ce qui l'aligne sur le milieu de la moitie de page
   correspondante plutot que sur le centre du bandeau. */
.ap-homebanner__actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 30px;
}

/* Un seul bouton actif : il n'y a plus de moitie a respecter, il se centre sur
   toute la largeur. */
.ap-homebanner__actions-grid > .ap-homebanner__cta:only-child {
    grid-column: 1 / -1;
}

.ap-homebanner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 10px;
    max-width: 100%;
    padding: 12px 28px;
    background-color: var(--violet-primary, #505050);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .25s linear;
}

.ap-homebanner__cta:hover,
.ap-homebanner__cta:focus {
    background-color: var(--violet-darker, #303030);
    color: #ffffff;
    text-decoration: none;
}

.ap-homebanner__cta i {
    font-size: 18px;
    line-height: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .ap-homebanner__intro .ap-homebanner__inner {
        gap: 30px;
    }

    .ap-homebanner__text {
        font-size: 16px;
    }

    .ap-homebanner__pro-title {
        font-size: 24px;
    }

    /* Les deux colonnes deviennent etroites : les boutons les remplissent pour
       ne pas se retrouver en pastilles perdues au milieu du vide. */
    .ap-homebanner__actions-grid {
        gap: 12px 20px;
    }

    .ap-homebanner__cta {
        justify-self: stretch;
        padding: 12px 15px;
    }
}

@media (max-width: 767px) {
    .ap-homebanner__intro {
        padding: 30px 0;
    }

    .ap-homebanner__media,
    .ap-homebanner__content {
        flex-basis: 100%;
    }

    /* Une seule colonne, boutons pleine largeur : viser une cible etroite au
       pouce n'a pas d'interet. */
    .ap-homebanner__actions-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-homebanner__actions-grid > .ap-homebanner__cta:only-child {
        grid-column: auto;
    }
}