/* ============================================================================
   MODULE AUTHORITY [ft-authority] - CSS PURE ET SCOPÉ
   ============================================================================ */

#ft-authority {
    padding: 6rem 4rem;
    border-top: 1px solid #e4e0d8; /* Var: light-rule */
    background: #fdfcfa; /* Var: warm-white */
    font-family: 'DM Sans', system-ui, sans-serif;
}

#ft-authority .authority-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: start;
}

#ft-authority .section-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b85c38; /* Var: terracotta (Hérité du style global, mais forcé ici au cas où) */
    margin-bottom: 0.75rem;
}

#ft-authority .authority-intro {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.55;
    color: #0f0f0e; /* Var: ink */
    font-weight: 400;
}

#ft-authority .authority-intro strong { 
    color: #b85c38; /* Var: terracotta */
    font-style: italic; 
}

#ft-authority .authority-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 0.5rem;
    margin: 0;
    padding-left: 0;
}

#ft-authority .authority-bullets li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: #3a3734;
    line-height: 1.6;
}

#ft-authority .bullet-mark {
    width: 6px; 
    height: 6px;
    background: #b85c38; /* Var: terracotta */
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    #ft-authority { 
        padding: 4rem 1.5rem; 
    }
    #ft-authority .authority-inner { 
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
    }
}


/* --- GESTION DU CARROUSEL DE LOGOS --- */
#ft-authority .logos-strip {
    max-width: 1100px;
    margin: 4rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid #e4e0d8;
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow: hidden; /* Cache ce qui sort de l'écran */
}

/* Le texte "Engaged with" reste fixe à gauche */
#ft-authority .logos-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a7672;
    white-space: nowrap;
    flex-shrink: 0;
    z-index: 2;
    background: #fdfcfa; /* Masque les logos quand ils passent derrière le texte */
    padding-right: 1rem;
}

/* Le masque du carrousel */
#ft-authority .logos-marquee {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

/* La piste qui défile (elle fait 2 fois la taille nécessaire grâce au Set 2) */
#ft-authority .logos-track {
    display: flex;
    align-items: center;
    gap: 4rem; /* Espace entre chaque logo */
    width: max-content;
    /* L'animation : 25s pour un tour complet, vitesse constante, répétition infinie */
    animation: ft_scrollLogos 30s linear infinite;
}

/* Met en pause l'animation si l'utilisateur passe sa souris dessus */
#ft-authority .logos-marquee:hover .logos-track {
    animation-play-state: paused;
}

/* Style des images des logos */
#ft-authority .partner-logo {
    height: 35px; /* Hauteur d'affichage contrôlée */
    width: auto;
    object-fit: contain;
    /* Effet premium : Logo en gris semi-transparent par défaut */
    filter: grayscale(100%) opacity(0.5);
    transition: filter 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/* Révèle la couleur et grossit légèrement au survol */
#ft-authority .partner-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* L'animation clé CSS */
@keyframes ft_scrollLogos {
    0% { transform: translateX(0); }
    /* Recule de 50% (donc l'équivalent du SET 1 + gap) pour revenir au début de manière invisible */
    100% { transform: translateX(calc(-50% - 2rem)); } 
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    #ft-authority { 
        padding: 4rem 1.5rem; 
    }
    #ft-authority .authority-inner { 
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
    }
    /* Sur mobile, on passe le label au-dessus, et les logos en dessous */
    #ft-authority .logos-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    #ft-authority .logos-label {
        padding-right: 0;
        background: transparent;
    }
    /* On accélère un peu sur mobile */
    #ft-authority .logos-track {
        gap: 2.5rem;
        animation: ft_scrollLogos 20s linear infinite;
    }
    #ft-authority .partner-logo {
        height: 28px; /* Un peu plus petit sur mobile */
    }
}