/* values.css — Section "Nos valeurs" : panneau blanc à coins 100px qui
   chevauche le hero (motif .faq-container de la home). Cartes au code couleur. */

.aval {
    position: relative;
    z-index: 2;
    margin-top: clamp(-56px, -5vw, -40px);
    background: var(--white);
    color: var(--purple);
    border-radius: clamp(48px, 7vw, 100px) clamp(48px, 7vw, 100px) 0 0;
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.12);
    padding: clamp(48px, 7vh, 96px) 0 clamp(56px, 8vh, 104px);
    overflow: hidden;
}

/* Forme organique qui déborde d'un coin (comme .faq-bg-shape) */
.aval-shape {
    position: absolute;
    top: -40px;
    right: -70px;
    width: clamp(220px, 30vw, 420px);
    height: auto;
    color: var(--purple);
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}

.aval-inner {
    position: relative;
    z-index: 1;
}

/* En-tête : 2 colonnes (texte + image macro encadrée) */
.aval-head {
    display: grid;
    grid-template-columns: 1fr clamp(260px, 32%, 380px);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    margin-bottom: clamp(36px, 5vw, 60px);
}
.aval-head-text { min-width: 0; }

/* Image macro dans un cadre incliné #69144B (signature maison) */
.aval-head-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aval-frame {
    position: absolute;
    inset: 6%;
    border: clamp(12px, 1.6vw, 20px) solid #69144B;
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}
.aval-head-visual img {
    position: relative;
    z-index: 1;
    width: 88%;
    height: 88%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 14px 36px rgba(47, 21, 108, 0.22);
}

@media (max-width: 760px) {
    .aval-head { grid-template-columns: 1fr; }
    .aval-head-visual { max-width: 320px; margin-top: 8px; }
}
.aval-title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1;
    color: var(--purple);
    margin: 0;
}
.aval-sub {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--orange);
    margin: 10px 0 0;
}
.aval-intro {
    max-width: 640px;
    margin: 18px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--purple);
    opacity: 0.78;
}

/* Grille de cartes */
.aval-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
}

.aval-card {
    --ac: var(--green);
    position: relative;
    background: var(--white);
    border: 1px solid rgba(47, 21, 108, 0.10);
    border-top: 5px solid var(--ac);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aval-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(47, 21, 108, 0.14);
}

.aval-card--green  { --ac: var(--green); }
.aval-card--orange { --ac: var(--orange); }
.aval-card--blue   { --ac: var(--blue-light); }
.aval-card--purple { --ac: var(--light-purple); }

/* Gros numéro BananaChips à la couleur de la carte */
.aval-num {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1;
    color: var(--ac);
    margin-bottom: 8px;
}

.aval-card-title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: var(--purple);
    margin: 0 0 10px;
}

.aval-card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--purple);
    opacity: 0.8;
    margin: 0;
}

/* Responsive */
@media (max-width: 720px) {
    .aval-grid { grid-template-columns: 1fr; }
}