/* ==========================================================================
   PARTENAIRE.CSS — styles propres à la page Nos partenaires (partenaire.php)
   Reprend le visuel de l'ancienne page : photo de la banderole avec ses vagues,
   sections bleu nuit reliées par des vagues.
   ========================================================================== */

/* Bandeau un peu moins haut que sur l'accueil */
.bandeau--partenaires {
    min-height: clamp(340px, 65vh, 620px);
    background-position: center bottom;
}


/* --------------------------------------------------------------------------
   VAGUES de transition (même dessin que le footer, image/footer.png)
   .vague          : crème en haut → bleu nuit en bas
   .vague--inverse : bleu nuit en haut → crème en bas
   -------------------------------------------------------------------------- */
.vague {
    height: 40px;
    background: var(--bleu-nuit) url('../image/footer.png') top center / auto 108px repeat-x;
}

.vague--inverse {
    transform: scaleY(-1);
}


/* --------------------------------------------------------------------------
   PARTENAIRES PRINCIPAUX
   -------------------------------------------------------------------------- */
.principaux {
    background-color: var(--creme);
    padding: var(--espace-xl) var(--marge-cotes) var(--espace-l);
}

.principaux__contenu {
    max-width: 720px;
    margin-inline: auto;
}

.principaux h2 {
    margin-bottom: var(--espace-l);
}

/* Mobile / tablette : photo de la banderole sous les logos */
.principaux__photo {
    width: 100%;
    max-width: 420px;
    max-height: 380px;
    margin: var(--espace-l) auto 0;
    object-fit: cover;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Ordinateur : la photo d'origine (avec ses vagues) en fond, logos à gauche.
   La section garde exactement les proportions de l'image (16/9 environ)
   pour que la photo et les vagues ne soient jamais coupées. */
@media (min-width: 1100px) {
    .principaux {
        display: flex;
        align-items: center;
        aspect-ratio: 1920 / 1079;
        padding: 0 0 5% max(var(--marge-cotes), (100% - var(--largeur-max)) / 2);
        background: url('../image/partenaires-fond.jpg') center / cover no-repeat;
    }

    /* Les logos restent dans la partie crème (la photo occupe les 40 % de droite) */
    .principaux__contenu {
        width: 52%;
        max-width: 760px;
        margin: 0;
    }

    .principaux__photo,
    .vague--mobile {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   LOGOS : cases blanches arrondies (comme l'ancienne page)
   -------------------------------------------------------------------------- */
.logos {
    display: grid;
    gap: var(--espace-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Grands logos : 2 colonnes sur mobile, 3 au-delà */
.logos--grands {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
    .logos--grands {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--espace-l);
    }
}

/* Petits logos : centrés, autant que la place le permet */
.logos--petits {
    grid-template-columns: repeat(auto-fit, minmax(110px, 150px));
    justify-content: center;
    gap: var(--espace-l);
}

/* Une case de logo : le logo remplit la case sans être déformé */
.logo-partenaire {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--blanc);
    border-radius: var(--rayon);
    transition: transform var(--transition), box-shadow var(--transition);
}

.logos--petits .logo-partenaire {
    padding: var(--espace-s);
}

.logo-partenaire img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-partenaire:hover,
.logo-partenaire:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   AUTRES PARTENAIRES et DEVENIR PARTENAIRE : fond bleu nuit
   -------------------------------------------------------------------------- */
.autres,
.devenir {
    background-color: var(--bleu-nuit);
    color: var(--creme);
}

.autres {
    padding: var(--espace-l) 0 var(--espace-xl);
}

.autres h2 {
    color: var(--creme);
}

/* Fine ligne pour séparer les deux sections sombres */
.devenir {
    padding: var(--espace-xl) 0 var(--espace-l);
    border-top: 1px solid rgba(245, 245, 239, 0.15);
}

.devenir__contenu {
    max-width: 800px;
    text-align: center;
}

.devenir h2 {
    color: var(--creme);
}

.devenir p {
    font-size: 1.1rem;
    margin-bottom: var(--espace-l);
}