/* ==========================================================================
   Accueil — « Our Financial Partners »

   Format repris du projet romi : grille statique à la place du carrousel Owl.
     - tous les partenaires sont visibles d'un coup (le carrousel n'en montrait
       que 4 et tournait tout seul) ;
     - les logos ont des formats très différents : une boîte de hauteur fixe et
       `object-fit: contain` les rend visuellement égaux, ce que l'ancienne
       version (`img-fluid p-3`) ne faisait pas ;
     - les logos sont en niveaux de gris et reprennent leurs couleurs au
       survol, comme les accréditations de la page Certifications.

   Les variables --primaire / --primaire-fonce / --bordure / --texte-muet sont
   déclarées sur la section (même principe que .section-blanche de
   css/home-charts.css), pour ne pas polluer le reste du site.
   Palette du site : noir et rouge — aucun vert, contrairement à romi.

   ⚠️ La grille est en `display: flex` et NON en `.row` / `.col-*` :
   css/card.css (chargé par l'accueil) contient des règles `!important` sous
   768 px qui écrasent la largeur des cartes et déforment une grille Bootstrap.
   Le flex évite complètement ce piège.
   ========================================================================== */

.partenaires-section {
    --primaire: #000000;
    --primaire-fonce: #000000;
    --bordure: #e6e6e6;
    --texte-muet: #6b7280;

    background-color: #f5f5f5;
}

/* --- En-tête de section -------------------------------------------------- */
.partenaires-intro {
    max-width: 660px;
    color: var(--texte-muet);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* --- Grille -------------------------------------------------------------- */
.partenaires-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* la dernière rangée incomplète reste centrée */
    gap: 1.25rem;
    /* Le conteneur du site fait 100 % de large : sans plafond, un écran 1920
       ferait tenir 5 cartes par ligne (rangées 5 + 1, déséquilibrées).
       1300 px = 4 cartes de 300 px + les gouttières, donc 3 + 3 partout. */
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Une carte partenaire ----------------------------------------------- */
.partenaire-carte {
    flex: 0 0 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--bordure);
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.partenaire-carte:hover {
    /* ⚠️ !important indispensable : AOS applique
       `[data-aos^=fade][data-aos^=fade].aos-animate { transform: translateZ(0) }`
       (spécificité 3 classes) qui gagne sur ce :hover (2). */
    transform: translateY(-4px) !important;
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

/* --- Boîte du logo (hauteur fixe = logos alignés) ------------------------ */
.partenaire-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-bottom: 1rem;
}

.partenaire-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.78;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.partenaire-carte:hover .partenaire-logo img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* --- Textes -------------------------------------------------------------- */
.partenaire-nom {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primaire-fonce);
}

.partenaire-texte {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--texte-muet);
}

/* --- Responsive ----------------------------------------------------------
   Paliers choisis pour être déterministes (vérifiés au navigateur) :
     ≥ 1440 px ....... 4 par ligne (300 px)
     1200 → 1439 px .. 4 par ligne (275 px)  ← un portable 1280 tombe ici
     992 → 1199 px ... 3 par ligne (280 px)
     768 → 991 px .... 3 par ligne (230 px)
     < 768 px ........ 2 par ligne, la dernière rangée centrée
   Le conteneur du site fait 100 % de large (règle de css/style.css), d'où
   l'usage de largeurs fixes plutôt que de pourcentages : à 1920 px une grille
   à 25 % donnerait des cartes de 460 px, beaucoup trop larges pour un logo. */
@media (max-width: 1439.98px) {
    .partenaire-carte {
        flex: 0 0 275px;
    }
}

@media (max-width: 1199.98px) {
    .partenaire-carte {
        flex: 0 0 280px;
    }
}

@media (max-width: 991.98px) {
    .partenaire-carte {
        flex: 0 0 230px;
        padding: 1.25rem 1rem;
    }

    .partenaire-logo img {
        max-height: 46px;
    }
}

@media (max-width: 767.98px) {
    .partenaire-carte {
        /* 2 par ligne : « 50 % moins la moitié de la gouttière » */
        flex: 0 0 calc(50% - 0.625rem);
        padding: 1.15rem 0.9rem;
    }

    .partenaire-logo {
        height: 52px;
        margin-bottom: 0.75rem;
    }

    .partenaire-logo img {
        max-height: 40px;
    }

    .partenaire-nom {
        font-size: 0.85rem;
    }

    .partenaire-texte {
        font-size: 0.72rem;
        line-height: 1.5;
    }
}